[レベル: 上級]
試験的に公開されていた <amp-script> が一般公開されました。
AMP では原則的に、AMP で定義された以外の JavaScript を動かすことが許されていません。
しかし、<amp-script> を利用すれば任意の JavaScript を AMP ドキュメントで実行することが可能になります。
好きな JavaScript を AMP で実行
<amp-script> を使うと、自分で書いた JavaScript はもちろんのこと、React や Angular、Vue.js といった JavaScript フレームワークを構成することも可能です。
ユーザーのアクションに応じてインタラクティブなコンテンツや機能を <amp-script> は提供できます。
※Chrome Tech Talk Night #14 で Paul Bakaus 氏が紹介してくれた Washington Post のコンテンツ
WorkerDOM という技術を採用し、いわゆるサンドボックス内で動くので、任意の JavaScript を使ったとしてもパフォーマンスやセキュリティを <amp-script> が阻害する心配はありません。
amp-script の制限
任意の JavaScript を使えると言っても、通常のウェブページとまったく同じようにというわけでもありません。
いくつかの規則と制限があります。
- 外部 JavaScript は https で読み込む: src 属性で指定する URL
- ファイルのサイズは 150KB 以内: 圧縮前のサイズ、150KB を超えた部分は実行されない（150KB の部分までは実行される）
- Zero Mutation: ユーザーの操作なしに DOM の変更不可（たとえば、ページをロードした瞬間に JS を実行することはできない）
- Mutation は 5 秒以内: ユーザーのアクションから JS の実行完了までを ５ 秒以内に収める
<amp-bind> や <amp-list> など、動的な機能を提供する AMP コンポーネントをすでに利用できます。
こうしたコンポーネントで、望む機能を実装できるのなら <amp-script> をあえて使う必要はありません。
既存のコンポーネントで実装できない場面で <amp-script> を使うといいでしょう。
もっとも、Gmail のようなサービスを <amp-script> で構築するのは不可能です（少なくとも現時点では）。
JavaScript を動かせないからという理由で AMP を敬遠していた人もいることでしょう。
制限があるとはいえ、そうした懸念を <amp-script> は解消できるかもしれません。
<amp-script> の技術ドキュメントは amp.dev のサイトで参照できます。