眠すぎ日記 > Web > MTのAMP対応をした

MTのAMP対応をした

  • 2017年1月 8日 12:02
  • Web

やっとAMP(Accelerated Mobile Pages)対応に手を付けました。JSがほぼ使えなかったり(aタグに書いたonclickすらNG)、CSSが50KB以内だったりする制約は重いものの今後のスマホファーストの流れにおいては触っておかないとまずいと思い。
MovableTypeは新しい記事のアーカイブテンプレートを追加するだけでAMP対応ができるので、多分比較的やりやすい方だと思う。構造化データについてはサボった。

テンプレートとアーカイブマッピングは下記のようにした。

対応するために参考にしたページ

必須の記述 <style amp-boilerplate> や v0.js はamp-imgタグにclassを追加したりするようなので、個人的には最後に追加したほうが混乱が少なかった。

imgタグをamp-imgタグに置換するのは自分の環境では下記のようになった。「<img」から「">」までのようにしないといい感じに置換してくれなかった。

<mt:SetVarBlock name="regex1a">/<img(.*)?">/g</mt:SetVarBlock>
<mt:SetVarBlock name="regex1b"><amp-img layout="responsive"\1"></amp-img></mt:SetVarBlock>
<$mt:EntryBody regex_replace="$regex1a","$regex1b"$> <$mt:EntryMore regex_replace="$regex1a","$regex1b"$>

対応できたかの確認

AMPテストはブラウザを選ばず確認できるしエラー内容と対応方法が分かりやすいが、ロボットではないことを証明するために画像を選んだりしないといけないので少し面倒くさい。あとたまにキャッシュが効いてしまうのか直したのに古いコードに対して指摘されたりする。

慣れてきたらGoogle Chromeでコンソールを開き、確認したいページのURLに「#development=1」をつけて確認するのが楽。AMPページのアーカイブが「通常の記事名.amp.html」のような単純なものであれば下記のブックマークレットが使える。

javascript:(function(){a='\.html';b='.amp.html#development=1';if(document.location.href.indexOf(a)==-1){location.href=document.location.href.replace(b,a);}else{location.href=document.location.href.replace(a,b);}})(location.href);

眠すぎ日記 > Web > MTのAMP対応をした

Return to page top