急にAMP対応が必要になったので自分用ざっとメモ

AMPとは

ページを軽量化することに特化したGoogleのフレームワーク。
実例：朝日新聞　マクドナルド
・ニュースやリクルートページなど快適さが求められるページに向いている。
この拡張機能をChromeに入れるとページがAMP対応されているかわかる。

CSS

外部CSSが禁止のため、基本的にはHTML内に直書き。
軽量化が目的なので、こういう仕様みたい。
どうしても読み込みたい時はSSIすれば可能。

<!--#include virtual="css/hoge.css" -->

JS

独自のJSは禁止。これも軽量化目的による仕様。
基本はCDNから

<script async src="https://cdn.ampproject.org/v0.js"></script>

を読み込み、HTMLタグでライブラリから読み込む。
ただ、<amp-script>が最近公開され制限はあるが使える模様。
・ファイルサイズは150KB 以内
・ロード時の実行出来ない。クリックなど明確な動作がある場合のみ発火。

画像の出し方＜amp-img＞

//sp
<amp-img src="img/hoge_sp.jpg"
     media="(max-width: 767px)"
     width="750"
     height="790"
     alt="hogehoge"
     layout="responsive"
     noloading
     data-amp-auto-lightbox-disable>
</amp-img>

//pc
<amp-img src="img/hoge_pc.jpg"
     media="(min-width: 768px)"
     width="1200"
     height="524"
     alt="hogehoge"
     layout="responsive"
     noloading
     data-amp-auto-lightbox-disable>
</amp-img>

・media
画像を出し分けしたい時のブレイクポイント
・width,height
html上で幅と高さを指定。layout属性を指定しないと記入した数値の固定幅で表示される。
→ 基本的に埋め込む画像のサイズを指定すればOK。
・layout
responsiveを指定すると、width,heightと指定した比率でwidth100%換算してくれる。
・noloading
ページ読み込みのローディングアニメーションを拒否。
アコーディオンで表示する画像など時と場合により使用。
・data-amp-auto-lightbox-disable
最近の仕様変更でamp-imgはすべてクリッカブルになりクリックするとlightboxが立ち上がるようになった。その仕様を解除する。