middlemanTweet前回このブログをHTTP2対応させた話をしましたが、その際にMovableTypeからmiddleman-blogに移行しています。移行そのものの話も書きたいのですが、今回はmiddleman-blogのエントリをAMP対応させたのでその話を書きます。AMP対応の細かなフローは公式サイトのチュートリアルを見れば理解できると思います。要は、AMP用のJavaScriptを読み込む自前のJavaScriptはロード、実行できない外部スタイルシートはロードできない自作スタイルシートはhead要素内に差し込むimgタグはamp-imgタグなど独自のタグに置き換えるあたりがポイントになります。この対応をmiddleman-blogのエントリに対して適用させます。AMP対応が完了するとValidationが通り、このような結果になります。https://validator.ampproject.org/#url=https%3A%2F%2Fblog.katsuma.tv%2F2017%2F05%2Fhttp2.html.amp全体設計カテゴリやアーカイブページなど、AMP対応はやろうと思えばいくらでもできますが、今回は固有の記事エントリのみをAMP対応させることにしました。本ブログは、固有記事エントリのパーマリンクはyyyy/mm/name.htmlの形式ですが、AMP対応のページはyyyy/mm/name.html.ampと、拡張子をampにさせています。ようにディレクトリをURLの中で切る方法もあると思いますが、今回は「amp形式のリソース」と見なして拡張子に付けることにしています。あとは、この固有記事とAMP対応ページをlink要素で相互に関連付けます。rel='canonical'>config.rbAMP対応ページを作るということは、構造としてはmiddleman-blogのpermalinkと似たものを別にもう1つ作ることになります。操作して次の戦略で実現しました。このような形で実現できます。ビルド対象なパスを保存しておき、buildフェーズ(3)で再利用します。img要素をamp-img要素に書き換え外部CSSをhead内に挿入の2つの処理を行います。end(このエントリ書いてて思ったけどデバッグ面倒くさいので、buildフェーズではなくてrender前あたりで実施してもいいかも、と思い始めた。要素に書き換え、src属性を置換、1.で取得したサイズを利用のような形で書き換えています。endポイントはamp-img要素はレンダリングの高速化のために画像サイズを事前に伝える必要があります。そこで、今回はFastImageを利用してサイズを取得しています。指定画像が外部ドメインに存在する場合は、buildのたびにインターネットを介した通信が走るので、キャッシュさせるなり高速化の手法は考える余地はありますね。CSSのインライン化AMPページではCSSのロードが許可されないので、head内で定義しておく必要があります。amp用のCSSを用意することも可能ですが、今回は非AMPページでも利用しているCSSを利用することにしました。やるべきことは単純でCSSを呼び出しているlink要素を参照しているCSSの中身で差し替えます。複数のlink要素が存在する場合は、正規表現でCSSファイルをマッチさせ、そのたびにhead要素に実体を差し込む必要がありますね。この上限を超えた内容を差し込むとValidationエラーになるので注意が必要です。moduleのみをロードさせることでこの容量問題を回避させました。ファイルがダウンロードされることになります。拡張子をHTML扱いさせることにします。}まとめconfig.rbに手をいれることで、middleman-blogのpermalinkページをAMP対応させました。この記事がmiddlemanユーザーにとって大まかな指針の1つになれば、と期待しています。