この記事は Movable Type Advent Calendar 2020 の5日目の記事です。
今年もAdvent Calendarの季節ですね。このブログもほとんど活用してない一年が終わろうと。。
（Advent Calendarしか更新してない感ある）
2016年からMovable Type Advent Calendarに参加してて、今回で4回目の参加。
そして今日が結婚記念日ということで毎年の行事になってますね。
今年は、ほとんどMovable Type を触っていなくて、Vue/React/Nuxt/Nextばかり触ってた一年でした。
ご縁もありVue.js本も出版し自分の担当はNuxt.jsを使いJamstackなサイトを作る部分の執筆を担当しました。
こちらもご興味ある方いましたらぜひ！
では今回の本題に入ろうと思います。
今年に入って二個目のプラグインを作りました。
Netlify Build Hooksというプラグインになります。
このプラグインは、Movable Type で記事やウェブページやコンテンツタイプを管理しつつMovable Type 側からNetlifyのBuild Hooksを実行するプラグインになります。
Headless CMSとMovable Type
執筆でもJamstackなサイト作りを担当したこともあり、来年もHeadless CMSを使ったサイト作りは仕事しても多くなってくるのではないでしょうか。
でもMovable Typeは長いことその方向性ではないでしょうか？少なくてもMovable Type 6がリリースした2013年にはData APIが出てデータとテンプレの分離ができるようになっていました。
2013年の段階からデータの分離ができてるので、Jamstackなサイトはデプロイする技術さえ整えばHeadless CMSと利用できるのになーってずっと思っていました。
ただそういうのがコアにないため、Hooksを叩く仕組みをプラグインで提供する必要があったためプラグイン作ってみるということで書いてみました。
Perlは普段書いてないエンジニアなので、どうやるんだろうと思って手探りで書いたプラグインになります。（もう少しこうしたほうがいいとかあればレビューしてくれると嬉しいです。）
※そんなに難しいことはしてないです。最終的にPostできるだけのプラグインになります。
Jamstackとは？
Jamstackは、JavaScript・APIs・Markupの3つ定義があります。
ここでは APIs と Markup に着目していきます。
SSG(Static Site Generator） するタイミングでHeadless CMSからAPIの情報取得をビルド時に行い、APIの情報を元にHTMLを生成する形を取ります。
Movable Typeは、古くから静的HTMLを生成する技術をPerlで行っています。
しかし、静的なHTMLを生成と言ってもMTMLで記述されたテンプレートを事前にHTMLに出力して表示を行うような形になっています。
サーバ配信などでS3などに出力されたHTMLを配信する形もよく利用されているもののHTMLを出力するためにはMTMLでテンプレートを記述しMovable TypeのDBに登録しなければいけません。
このプラグインの役割
テンプレートの部分をJSのフレームワークなどで管理しつつデータはMovable Typeで管理しつつビルドはData API経由で行えば、Jamstackなサイトとして使っていけると思っていました。（去年くらいから）
データを取得しビルドを行うテンプレートについては、 12月1日の加藤さんが投稿されていた Next.jsを利用した形の記事を投稿されていましたので、こちらも合わせて参考にしてみてはいかがでしょうか。
もちろん、Markupにおける部分はNext.js以外のツールで補うのでも問題ないでしょう。データを事前にビルドするツールは各自の使いやすいものを使う形になります。
テンプレートは基本的に開発者が触る部分になるため、テンプレートに変更があった際はGitでビルドすることで問題ありません。
しかし、記事やウェブページやコンテンツタイプなどを管理するウェブ担当者さん・ライターさんはGitなどを利用せずに普段どおりにMovable Typeを利用しています。今回作ったMovable Type の管理画面から普段どおりにデータを更新してビルドを走らせることができるプラグインになります。
わざわざJavaScriptでテンプレート管理せずMTMLで良いのでは？という意見もあるかもしれません。
たしかにMTMLは長く使われてる技術/ドキュメントは備わってはいるので、実装において一通りのことは基本できるでしょう。
しかし、MTMLテンプレートを管理するにはDBに登録することが前提になってしまうため仮にGitでテンプレートを管理しててコピー&ペーストで管理画面に貼り付けする作業が発生してしまいます。
また、管理画面からテンプレートを触れるため別のだれかが作業した部分を管理画面のリビジョンから追うしかありません。よくある先祖返り的な問題はおきてしまいます。
ローカルで開発するにしてもDBはダンプしたりリストアしなければなりませんし。。（汗）
今はHeadless CMSは世にたくさん出てきているので、新規でなにか作るケースではそちらを利用することが多いでしょう。
長くMovable Typeを使ってるウェブ担当者さん・ライターさんなどは、普段から使ってる且つ案件やそのカスマイズはMovable Typeのフィールドじゃないと移行とか大変・無理！とかあると思います。
資産を残しつつでもテンプレートはMovable Typeに依存しない形を取ることができるので、内部的なデータを変えずのリニューアルの要件にはぴったりだと思っています。（そういうケースはほぼないかもですが。。）
このプラグインはNetlify向けになりますが、Movable TypeをHeadless CMSを活用しつつJamsatckなサイトを作ることが可能になります。
まだまだエラー処理とかが出来上がってないので随時アップデートは加えていく予定ではありますが、まずはビルドができるところまでは作り終えた感じです。
セットアップ
Netlify Build hooksの設定
事前に、React/Next.js/Gatsby.js/Vue.js/Nuxt.js/Gridsome/11tyなどを静的ジェネレーターをセットアップは各フレームワークのドキュメントで行ってGitのリポジトリに設定しておきます。
また、Netlifyを利用するためアカウントの設定も事前に済ませておきましょう。
- Netlifyにアクセスし設定したホスティング先の
Site settingsにアクセスします - Build hooksのセクションに移動します。
- Build hook name を任意の名前で定義する
- gitのブランチを指定（ターゲットとなるブランチでビルドを行います。）
- 保存
- 保存完了すると APIのURLが発行されます。
https://api.netlify.com/build_hooks/の後ろの値はMovable Type側で必要になるため保存
Movable Type側の設定
NetlifyBuildHooksプラグインのインストールは事前に済ませておきます。
- 各自のMovable Typeにアクセスします。
- NetlifyBuildHooksのプラグインは、サイト単位で設定するため各自のサイトへアクセスします。
- サイトから左カラムの設定→プラグインをクリック
- Netlify Build Hooks をクリック
- Netlifyでコピーした値を開発環境か本番環境どちらかに設定します。
- 保存します
開発環境と本番環境で2つ設定できます。
開発でデプロイ確認などで利用する場合は、プレビュー確認用としても利用できます。
- 開発環境IDは開発時に利用するNetlify Build Hooksの値を入力
- 本番環境IDは本番のNetlify Build Hooksの値を入力
値を入力することでサイトのメニューバーからツールを開き Netlify をクリックすることでビルドボタンが表示されればセットアップは完了です。
ロードマップ
今後もアップデートは加えていくため、直近で考えられる部分を調整していければと思っています。
- エラー周りの調整
- プレビュー周りの構築（ここが一番の課題）
- 記事追加・更新時でもビルドを実行できるように調整
作ってみて
このプラグインを作ってて、Movable Typeのプラグインに関してのドキュメントはあまり整備されてなく人のプラグインコード読んだりコアのコード読んで読み解くみたいな感じになります。（正直ここが一番辛かった）
Perlが普段から書いてる人にはさほど難しくないことだと思いますが、初学者はここのリーディングが一番時間がかかりました。（デバッグも慣れてないからもありますが）
コア読んでPerlの勉強もしつつ、自前のドキュメント作っていくしかなさそうですね。
あとは先人の方々にレビューしてもらい。。知見を増やしていくみたいなことを継続が必要ですね。
プラグインを書くといっても、やはりプラグインの中ではMTMLの知識が必要です。
Movable Type 自体がMTMLで作られている管理画面になるので、そこはいままでMTMLを書いてた経験から読めましたが、なにが取れてなにを投げれるのかはコード読むか 公式の MTオブジェクトリファレンス を参照するしかなかったです。
このアップデートが 2006.09.15 のため実際のコアで追加された部分があるため結果コード読む必要はあります。
今までプラグイン書いてなくテンプレだけ書いてたので、コアのコード読むようになって理解をしつつ少し成長できたかなと思った1年でした。
来年も時間があればこういう機能連携があればいいなっと思ったら、プラグイン化してみようと思います。（完全に趣味）