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