[MTDDC Meetup Tokyo 2016] 大規模メディアサイトで使う Movable Type

Transcript

1. 大規模メディアサイトで使う Movable Type MTDDC Meetup TOKYO 2016 エムロジック 田島 2016/11/12
2. 自己紹介 たじま まこと 田島 誠 facebook.com/mtajima エムロジック株式会社 代表取締役・裏方 鹿児島県出身 ４〇才 ２児の父 Windows派少数民族 Movable Type担当
3. エムロジック株式会社 １９９８年創業 千代田区神田神保町！ エンジニア２名（１名は私） 草食系企業 シックス・アパートさんが近所に！ Movable Type日本語化の頃よりこちらの世界 最近はiOSとMovable Typeの２本立て 徒歩７~８分
4. この人の名前を出したほうが 話が早いことがあります・・・ 関根 元和（CHEEBOW）
5. 最近のMTのお仕事 設計・開発を担当しています By Alfasado Inc. http://mtcommerce.jp/ ※ 今日はECの話はありません
6. 本日のお題目 大規模メディアサイトで使う Movable Type
7. 本日のお題目 大規模メディアサイトで使う Movable Type
9. Webスポルティーバ • 集英社のスポーツ雑誌(不定期刊) のWebメディア • ニュースサイトではなくコラムサイト • 2002年開始 現在は1日数記事ずつ掲載 • ここから数多くの二次メディアに配信 • PV数は月間で〇〇〇〇万ほど 大人の事情
10. 背景 • 前回は2011年にリニューアル • 気が付けば記事数は5ケタ • インフラは5年経過 スパイクアクセスがきつい • これまでのさまざまな企画の跡 • 迫りくるリオオリンピック
11. 本日のお題目 大規模メディアサイトの「リニューアル」で使う Movable Type
12. リニューアル案件で大事なこと • 要求分析 • 現状分析 • ベストな選択
13. リニューアル案件で大事なこと • 要求分析 • 現状分析 • ベストな選択 まとめると • ずっと使える • 快適に使える • 安全に使える
14. リニューアル案件で大事なこと • 要求分析 • 現状分析 • ベストな選択 まとめると • 増え続けるコンテンツ • インフラの限界 • 複雑な入力ルール
15. 要求分析#1 いつまでも使える  コンテンツが増えても使える。  アクセスが増えても使える。  システムを使い続けられる。
16. 要求分析#2 快適に使える  システムが遅くならない。  シンプルな入力ルール。  コンテンツにあわせた入力画面。
17. 要求分析#3 安全に使える  セキュリティ  安定したシステム  常時SSL(https)
18. 現状分析  2011年にリニューアル  増え続けるコンテンツ 記事数５ケタ  増え続けるPV  増強が難しいインフラ  古くなったCMS  検証用環境がない
19. やるべきこと  CMS選定  インフラ設計  CMS設計  データ移行  プラグイン開発 (弊社が)今回やったこと 制作会社 サーバ屋さん CDN屋さん 弊社 チーム構成
20. 今回の話  CMS選定  インフラ設計  CMS設計  データ移行  プラグイン開発 話したい内容
21. 今回の話  CMS選定  インフラ設計  CMS設計  データ移行  プラグイン開発 絞りました MT for AWSになりました AWS＋CDNになりました 血のにじむ話ですし(汗) このあたりは 別の機会あれば
22. CMS設計 今回のCMS設計のポイント  ウェブサイト・ブログの分割  JSONの活用  テーマの活用
23. ウェブサイト・ブログの分割  増え続けるコンテンツの問題 Sportiva サッカー 野球 ゴルフ ウェブサイト ブログ • ジャンルごとにブロ グを作成 • MultiBlogでウェブサ イトを更新
24. ウェブサイト・ブログの分割  増え続けるコンテンツの問題 Sportiva サッカー 野球 ゴルフ ウェブサイト ブログ コンテンツ追加 コンテンツ追加 コンテンツ追加
25. ウェブサイト・ブログの分割  増え続けるコンテンツの問題 Sportiva サッカー 野球 ゴルフ ウェブサイト ブログ コンテンツ追加 コンテンツ追加 コンテンツ追加 • 新規記事 • 新規カテゴリ • 新規記事 • 新規カテゴリ • 新規記事 • 新規カテゴリ
26. ウェブサイト・ブログの分割  増え続けるコンテンツの問題 Sportiva サッカー 野球 ゴルフ ウェブサイト ブログ コンテンツ追加 コンテンツ追加 コンテンツ追加 ブログの肥大化がつらい
27. ウェブサイト・ブログの分割  増え続けるコンテンツへの対応 Sportiva サッカー ウェブサイト ウェブサイト 2014年 2015年 2016年 ブログ
28. ウェブサイト・ブログの分割  増え続けるコンテンツへの対応 Sportiva サッカー ウェブサイト ウェブサイト 2014年 2015年 2016年 ブログ • ジャンルごとにウェブサイトを作成 • 年毎にブログを作成 • 毎年カテゴリを整理 • 毎年JSON形式でもアーカイブを出力
29. ウェブサイト・ブログの分割  増え続けるコンテンツへの対応 Sportiva サッカー ウェブサイト ウェブサイト 2014年 2015年 2016年 ブログ • ジャンルごとにウェブサイトを作成 • 年毎にブログを作成 • 毎年カテゴリを整理 • 毎年JSON形式でもアーカイブを出力
30. JSONの活用  アーカイブをJSONで出力 コラム JSON サッカー JSON 親ウェブサイト 子ウェブサイト 2014年 JSON 2015年 JSON 2016年 JSON ブログ • 記事更新にあわせてJSONを出力 • 子ウェブサイトではブログのJSONを まとめたJSONを出力 • 親ウェブサイトでは子ウェブサイトの JSONをまとめたJSONを出力
31. JSONの活用  JSONのメリット コラム JSON サッカー JSON 親ウェブサイト 子ウェブサイト 2014年 JSON 2015年 JSON 2016年 JSON ブログ DB DB DB
32. JSONの活用  JSONのメリット コラム JSON サッカー JSON 親ウェブサイト 子ウェブサイト 2014年 JSON 2015年 JSON 2016年 JSON ブログ DB DB • DB上で記事を破棄してJSONを残す • JSONがあれば変わらずアーカイブ作 成可能 • 静的サイトジェネレータのうまみ
33. JSONの活用  JSONのメリット コラム JSON サッカー JSON 親ウェブサイト 子ウェブサイト 2014年 JSON 2015年 JSON 2016年 JSON ブログ DB DB • DB上で記事を破棄してJSONを残す • JSONがあれば変わらずアーカイブ作 成可能 • 静的サイトジェネレータのうまみ DBの肥大化を防ぐ ファイル
34. テーマの活用  用途ごとにテーマを作成 Sportiva テーマ サッカー テーマ 親ウェブサイト 子ウェブサイト コラム用 ブログテーマ コラム用 ブログテーマ コラム用 ブログテーマ ブログ
35. テーマの活用  直接サーバのファイルを更新しない  直接CMSのテンプレートを更新しない  すべての変更はテーマを更新してレポジトリ管理  まずテストサーバに一括適用  確認とれたら本番サーバに一括適用 鬼のルール
36. テーマの活用  テンプレート管理外の静的ファイル  パーツ画像・CSS・JS  １つのテーマで集中管理  カスタムフィールドの定義（最小限!!）  ブログ設定・一部のプラグイン設定(UploadDir) テーマに含むもの
37. テーマの活用  テストサーバの活用 テストサーバ 本番サーバ スタッフ Git テーマ一括更新 確認
38. テーマの活用  テストサーバの活用 テストサーバ 本番サーバ スタッフ Git テーマ一括更新 確認
39. テーマの活用  テストサーバの活用 テストサーバ 本番サーバ 反映内容にズレがない
40. テーマの活用  [余談]CMSのアップデート時 テストサーバ 本番サーバ スタッフ yum アップデート 確認
41. テーマの活用  [余談]CMSのアップデート時 テストサーバ 本番サーバ スタッフ yum アップデート 確認
42. テーマの活用  [余談]CMSのアップデート時 テストサーバ 本番サーバ 事前に検証できる MT for AWS は yum で一発更新なのでラクチン
43. 今回の話  CMS選定  インフラ設計  CMS設計  データ移行  プラグイン開発 絞りました MT for AWSになりました AWS＋CDNになりました 血のにじむ話ですし(汗) このあたりは 別の機会あれば コレカラ
44. プラグイン開発 CMS設計のポイント  ウェブサイト・ブログの分割  JSONの活用  テーマの活用 おさらい
45. プラグイン開発 CMS設計のポイント  ウェブサイト・ブログの分割  JSONの活用  テーマの活用 おさらい これらを実現するための開発
46. プラグイン開発 プラグイン開発のポイント  実績のあるプラグイン優先  無駄に作らない  効果的なものに限って作る  運用をカバーするツールを充実させる
47. 今回作った機能  Sportivaプラグイン  既存のコードをまとめて提供するためのもの  TinyMCEforSportivaプラグイン  TinyMCEのカスタマイズ  データ移行用スクリプト（多数）
48. 既存コードの活用  LoadJSONタグ  CreateRebuildQueueタグ  apply_themeスクリプト  rebuild_allスクリプト
49. 既存プラグインの活用  MTAppjQueryプラグイン by bitpart  PageButeプラグイン by SKYARC  UploadDirプラグイン (弊社謹製)  DataAPIProxyプラグイン (弊社謹製)
50. 既存プラグインの活用  MTAppjQueryプラグイン by bitpart  PageButeプラグイン by SKYARC  UploadDirプラグイン (弊社謹製)  DataAPIProxyプラグイン (弊社謹製) 2014年プラデミー賞第１位 2015年プラデミー賞第１位 2015年プラデミー賞第３位 末永く使えるプラグインを 必要最小限に導入する
51. プラグイン開発  LoadJSONタグ  apply_themeスクリプト  rebuild_allスクリプト  DataAPIProxyプラグイン  CreateRebuildQueueタグ 今回のご紹介 軽 重
52. プラグイン開発  LoadJSONタグ  apply_themeスクリプト  rebuild_allスクリプト  DataAPIProxyプラグイン  CreateRebuildQueueタグ 今回のご紹介
53. LoadJSONタグ • 各所でみなさん作られているJSON読み込みタグ • 使い方 • パラメータ file 読み込むファイル名 name 割り当てる変数名 append 既存変数に追加する場合「1」 <mt:loadJSON file=“filename” name=“variable” append=“0|1” />
54. プラグイン開発  LoadJSONタグ  apply_themeスクリプト  rebuild_allスクリプト  DataAPIProxyプラグイン  CreateRebuildQueueタグ 今回のご紹介
55. apply_themeスクリプト • テーマ一括更新スクリプト • 使い方 • パラメータ theme_id 一括更新したいテーマID blog_id 一括更新したいブログID ※どちらかを指定する ./tools/apply_theme --theme_id=“theme_id” --blog_id=“n,m,o,...” />
56. apply_themeスクリプト • テーマ一括更新スクリプト • 使い方 • パラメータ theme_id 一括更新したいテーマID blog_id 一括更新したいブログID ※どちらかを指定する ./tools/apply_theme --theme_id=“theme_id” --blog_id=“n,m,o,...” /> 近日公開します
57. プラグイン開発  LoadJSONタグ  apply_themeスクリプト  rebuild_allスクリプト  DataAPIProxyプラグイン  CreateRebuildQueueタグ 今回のご紹介
58. rebuild_allスクリプト • 一括再構築スクリプト(アーカイブ対応) • 使い方 • パラメータ website_ids 一括再構築したいウェブサイトID ids 一括再構築したいブログID ※website_idsは子ブログも再構築する ./tools/rebuild_all --website_ids=“n,m,o,...” --ids=“n,m,o,...” />
59. rebuild_allスクリプト • 一括再構築スクリプト(アーカイブ対応) • 使い方 • パラメータ website_ids 一括再構築したいウェブサイトID ids 一括再構築したいブログID ※website_idsは子ブログも再構築する ./tools/rebuild_all --website_ids=“n,m,o,...” --ids=“n,m,o,...” /> 近日公開します
60. プラグイン開発  LoadJSONタグ  apply_themeスクリプト  rebuild_allスクリプト  DataAPIProxyプラグイン  CreateRebuildQueueタグ 今回のご紹介
61. DataAPIProxyプラグイン • 概要 DataAPIへのアクセスを、管理画面のセッションで自動認証 するプラグイン
62. DataAPIProxyプラグイン • 概要 DataAPIへのアクセスを、管理画面のセッションで自動認証 するプラグイン ・・・わかりにくい！！
63. DataAPIProxyプラグイン • 概要 DataAPIへのアクセスを、管理画面のセッションで自動認証 するプラグイン MTAppjQueryでDataAPIをフル活用するプラグイン ・・・簡単に言うと
64. DataAPIProxyプラグイン • MTAppjQueryでDataAPIをフル活用するプラグイン • 使い方 書き替えるだけ 管理画面にログイン済みであれば自動的に認証 • URL https://github.com/m-logic/mt-plugin-dataapi-proxy /mt/mt-data-api.cgi[endpoint] /mt/dataapiproxy.cgi[endpoint]
65. DataAPIProxyプラグイン • 事例（フォトギャラリー） 公開コンテンツ 管理画面
66. DataAPIProxyプラグイン • 事例のメリット • MTAppjQueryを使って写真の並び順を簡単に入れ替えるこ とができるようになった。 • これまで20種以上のカスタムフィールドで構成されていた 記事を１つのカスタムフィールドに集約。 • カスタムフィールドが多いと何がつらいか 野田さんのブロ グに詳しい • 再構築遅くなる • データベース無駄に使う
67. プラグイン開発  LoadJSONタグ  apply_themeスクリプト  rebuild_allスクリプト  DataAPIProxyプラグイン  CreateRebuildQueueタグ 今回のご紹介
68. CreateRebuildQueueタグ • 概要 特定のファイルの公開キューを生成できるテンプレートタグ ・・・わかりにくい！！
69. CreateRebuildQueueタグ • 概要 特定のファイルの公開キューを生成できるテンプレートタグ ブログをまたいで順番に再構築できるようにするタグ （・・・まだわかりづらい感） ・・・簡単に言うと
70. CreateRebuildQueueタグ • 概要 特定のファイルの公開キューを生成できるテンプレートタグ テンプレートから思い通りに再構築するタグ （・・・言い過ぎた感） ・・・もっと簡単に！
71. CreateRebuildQueueタグ • 公開キューを作成するタグ • 使い方 <mt:CreateRebuildQueue template=“templatename” archive_type=“archive_type” blog_id=“blog_id” entry_id=“entry_id” category_id=“category_id” author_id=“author_id” start_ts=“YYYYMMDDhhmmss” />
72. CreateRebuildQueueタグ • 難解・・・！？ • パラメータ template テンプレート名 archive_type アーカイブタイプ Index/Individual/Category/Author,.. 残り 各アーカイブタイプごとに指定する
73. [よりみち]公開キュー • 公式解説 https://www.movabletype.jp/faq/about-publish-queue.html Q. 公開キューとは何ですか テンプレートの編集画面で、公開設定を「公開キュー経由」にしたところ、再構築されなくなってしまいました。 「公開キュー」とは何ですか。どのように使うのでしょうか。 A. 「公開キュー」は、バックグラウンドで再構築をおこなうための機能です。 バックグラウンドでの再構築はサーバーへの負荷の分散に役立ちます。 例えば、複数人で集中的に記事を公開した場合、再構築処理も集中するため、サーバーへの負荷が大きく なります。 「公開キュー」の利用により再構築のタイミングをずらし、サーバーの負荷が小さくなる時間帯などに実行するこ とができます。 ・・・・ 予約された再構築は「run-periodic-tasks」スクリプトにより実行されます。
74. [よりみち]公開キューのデーモンモード • 公式解説 https://www.movabletype.jp/documentation/mt6/designer/settings.html デーモンモードでの run-periodic-tasks の実行 cron を使用しなくても、run-periodic-tasks をデーモンモードで実行すると、約5分おきに処理が実行さ れます。 run-periodic-tasks をデーモンモードで実行するには、以下のコマンドを実行します。 $ ./tools/run-periodic-tasks -d &
75. [よりみち]公開キューのデーモンモード • メリット • 再構築についてはバックグラウンドで重複することなく実 行される（複数同時に動く再構築の数を制御できる） • デメリット・リスク • スケジュールタスクとしては5分ごとの動作に固定される （指定日公開など1分単位で指定しても意味がない） • テンプレートやプラグインでメモリリークが発生するケー スがあるため、定期的にプロセスを再起動する必要がある
76. • 使用例(コラム記事更新時) CreateRebuildQueueタグ 記事公開・更新 PCページ再構築 SPページ再構築 AMPページ再構築 記事編集に戻る 管理画面上 バックグラウンド 単年ブログJSON再構築 単年カテゴリJSON再構築 CreateRebuildQueue
77. • 使用例(コラム記事更新時) CreateRebuildQueueタグ 管理画面上 バックグラウンド CreateRebuildQueue 全体JSON再構築 全体カテゴリJSON再構築 通年ブログJSON再構築 通年カテゴリJSON再構築 CreateRebuildQueue CreateRebuildQueue
78. • 使用例(コラム記事更新時) CreateRebuildQueueタグ 管理画面上 バックグラウンド CreateRebuildQueue 各種配信用XML再構築 全体インデックス再構築 カテゴリインデックス再構築 CreateRebuildQueue
79. CreateRebuildQueueタグ • MultiBlogとの比較 MultiBlogを使用して別のウェブサイト・ブログを再構築し ようとした場合、インデックステンプレート全体の再構築に なってしまう。アーカイブテンプレートは連動できない。 かつ、再構築の順序を指定できない。JSONを出力し、JSON を元に各種ページを作成する本件では使用できなかった。
80. CreateRebuildQueueタグ • メリット 再構築オプション「手動」でも公開キューでビルドできる。 これによりサイトをスタティックパブリッシングのみで実装。 →フロントサーバがDBに接続されない状態を実現。 • 公開予定 作り方によっては永遠に再構築を動かしてしまうなど危険な 面もあるため、いまのところ公開の予定はありません。 ※ 興味ある方は個人的にお知らせください。
81. まとめ • Movable Type for AWS を使うことで持続性の高 いCMS環境を実現できました • 大規模案件は、簡単にリニューアルできません。 データの設計からインフラの構築まで３年後・５年 後を見越して提案しましょう • あくまでも選定基準はお客様基準。自分の都合は捨 てる
82. まとめ#２ • 最高のチームとの出会いが最高の結果を作り出しま す • 作業の計画と分担がとても大事です • 今回の情報開示を許可・調整いただいた関係者のみ なさまに感謝いたします！ • 田島誠先生の次回作にご期待ください（お約束）
83. 御清聴ありがとうございました お問い合わせはエムロジック株式会社田島まで ※ Six Apart、Movable Type、ProNet は Six Apart Ltd. の商標または登録商標です。