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

96877cccb874113100c20044a74f3b72?s=47 Makoto Tajima
November 12, 2016

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

96877cccb874113100c20044a74f3b72?s=128

Makoto Tajima

November 12, 2016
Tweet

Transcript

  1. 大規模メディアサイトで使う Movable Type MTDDC Meetup TOKYO 2016 エムロジック 田島 2016/11/12

  2. 自己紹介 たじま まこと 田島 誠 facebook.com/mtajima エムロジック株式会社 代表取締役・裏方 鹿児島県出身 4〇才

    2児の父 Windows派少数民族 Movable Type担当
  3. エムロジック株式会社 1998年創業 千代田区神田神保町! エンジニア2名(1名は私) 草食系企業 シックス・アパートさんが近所に! Movable Type日本語化の頃よりこちらの世界 最近はiOSとMovable Typeの2本立て

    徒歩7~8分
  4. この人の名前を出したほうが 話が早いことがあります・・・ 関根 元和(CHEEBOW)

  5. 最近のMTのお仕事 設計・開発を担当しています By Alfasado Inc. http://mtcommerce.jp/ ※ 今日はECの話はありません

  6. 本日のお題目 大規模メディアサイトで使う Movable Type

  7. 本日のお題目 大規模メディアサイトで使う Movable Type

  8. None
  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年にリニューアル  増え続けるコンテンツ 記事数5ケタ  増え続ける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  1つのテーマで集中管理  カスタムフィールドの定義(最小限!!) 

    ブログ設定・一部のプラグイン設定(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年プラデミー賞第1位 2015年プラデミー賞第1位 2015年プラデミー賞第3位 末永く使えるプラグインを 必要最小限に導入する
  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種以上のカスタムフィールドで構成されていた 記事を1つのカスタムフィールドに集約。 •

    カスタムフィールドが多いと何がつらいか 野田さんのブロ グに詳しい • 再構築遅くなる • データベース無駄に使う
  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環境を実現できました • 大規模案件は、簡単にリニューアルできません。

    データの設計からインフラの構築まで3年後・5年 後を見越して提案しましょう • あくまでも選定基準はお客様基準。自分の都合は捨 てる
  82. まとめ#2 • 最高のチームとの出会いが最高の結果を作り出しま す • 作業の計画と分担がとても大事です • 今回の情報開示を許可・調整いただいた関係者のみ なさまに感謝いたします! •

    田島誠先生の次回作にご期待ください(お約束)
  83. 御清聴ありがとうございました お問い合わせはエムロジック株式会社田島まで ※ Six Apart、Movable Type、ProNet は Six Apart Ltd.

    の商標または登録商標です。