yuheijotaki.com

AMP 雑感

f:id:jotaki:20190127084534p:plain

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

おおまかな制約

HTML

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

CSS

JavaScript

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

検証方法

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

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

その他ドキュメント

公式のドキュメント

AMP で実装したデモを紹介

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

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

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

感想

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

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