AMP 雑感

AMP を少し触ってみたので所感をメモしておきます。

おおまかな制約

HTML

• 基本的に HTML のタグ要素は使える。
• 使えるタグは AMP HTML Tag Addendum に記載。
• <img> 要素は <amp-img> で対応する。width, height 属性は必須。

CSS

• CSS はインラインで記述。
• 基本的なプロパティと値は使える。ただし制約のあるスタイルを除く。

JavaScript

• ピュアな JavaScript は使えない。
• AMP JS ライブラリ からライブラリを読み込み、箇所箇所で <script type="application/ld+json"> 形式でオプション等の記述をする。

検証方法

ブラウザ URL の末尾に #development=1 をつけてコンソール確認。
Powered by AMP ⚡ HTML – Version ********** など出力されれば AMP 可

詳しくは ブラウザの Developer Console を参照する。

その他ドキュメント

• 公式スタートガイド
• 公式リファレンス

公式のドキュメント

• Learn AMP by Example

AMP で実装したデモを紹介

• Google Developers Japan: AMP

Google Developers Japan のブログ。AMP の最新情報など

• Visual Effects in AMP - a Collection by Ali Ghassemi on CodePen

amp-position-observer と amp-animation を使ったデモ集。
ページトップだけでなくいろいろできそう。

• AMP HTML 入門 – AMP HTML を効率良く身につける – | Crane & to.
• AMP(Accelerated Mobile Pages) HTML してみたという話 | masuP.net
• 既存の Web ページを AMP に対応させてみる | Swings
• 2019 年の AMP のロードマップ

AMP 周りに詳しいブログなど

感想

今回調べたのはある要件があって、AMP でどこまで JS 使って実装可能かということでしたが、
現状の制約のなかだとなかなか難しいので、JS in AMP などの実装が来ないかなと言う感じです。
ただ AMP ってそういう制約のなかで高速化していく仕組みと思っていたので、逆に何でもできることが正義じゃない感が少しします。

そういうところで、今の所 AMP JS のライブラリぜんぶ把握して、使いこなせるようにするまで学習するというのは、ちょっとモチベーションは湧かないかなと感じました。