はじめに
3月7日、8日にニューヨークでAMP Confという初のAMPチーム主催のAMPに関するカンファレンスが開催されました。
当日のツイートなど
リアルタイムで #ampconf ハッシュタグが付いていて良さそうなものをRTしつつ、自分でもメモとしてツイートしてました。改めてまとめて次のリンクに置いておきます。 twitter.com
当日のライブ配信の録画
当日はプレゼンはすべてライブ配信されて、その録画が残っています。各発表ごとの動画もいずれ公式チャンネルで公開される予定にはなっていますが、とりあえず公開されている録画の動画を貼っておきます。途中、画像だけで止まっているところがありますが、それはコーヒーブレイクなどで発表がない時間帯のものなので、適宜飛ばして再生して下さい。
多くのAMP運用企業からの発表があり、実際PinterestやTumblrがとんでもない量のAMPページをリリースしている／することを報告していたり、wegoがどうやってAMPページと通常ページを両立させているかを共有していたり、その他もろもろこれまでAMPサイトを運用してきた知見が語られています。多くの日本のAMP対応サービス企業も言及されていて、特にYahoo! JapanのAMP対応は会場でも大きな話題となりました。
- 1日目
- 2日目
新しく発表されたこと
AMP Start
これまでAMPページを作る際にテンプレートがなくて苦労された方もいるかもしれません。AMP Startではそんな需要に対応すべく、様々な種類のページ向けにレスポンシブなテンプレートを用意しています。またページテンプレートだけではなく、ボタンやナビゲーションといったUIコンポーネントも提供しています。
AMP Start自体もオープンソースになっているので、もしいい感じのサンプルがあったらどんどんコントリビュートして下さい。
amp-bind
これまでAMPでは「一切のカスタムのJavaScriptが利用できない」ということが大きな制約となっていて、その制限によって利用を諦めた方も多いのではないかと思います。それはAMPを作った当初の思想の反映で「迂闊なJavaScriptのおかげで表示が遅くなることが多いので、まずは一番厳しい制限としてJavaScriptを書かせない」となったのですが、amp-list や amp-sidebar などを使ってインタラクティブな動作もできるようにしてきました。
しかし、それでもまだEコマースサイトなどでは機能として足りないということで、状態管理とデータバインドなどに関するメソッドを提供し、かなり制限はあるものの、JavaScriptも少しは書けるようにしようとしたのがこの amp-bind です。（実際には amp-state などと組み合わせて使います）
実際に amp-bind がどのような動作をするかは AMP by Example に簡単な例があるので、是非確認してみてください。
発表の動画では amp-bind がチューリング完全であることから、2048っぽいゲームをデモとして作って見せていましたが、発表者のWilliamが「頼むから実際のサイトでこんな実装しないでね」と言っていたのが印象的でした。
Google AMP Cacheでの高速化施策
現状ではAMPは機能を制限することでクライアントサイドレンダリングの高速化を図っているわけですが、これをされに推し進めて高速化を図る計画がAMP ProjectのTechnical LeadのMalteより発表されました。その施策は次の2つです。
- AMP JSのService Workerでのキャッシュ
- AMP Cacheサーバーでのサーバーサイドレンダリング
1のService WorkerでのAMP JSのキャッシュですが、現在Google AMP Cacheはcdn.ampproject.orgというドメインでホストされています。またAMP JSもこのドメインからホストされています。なので、このAMP JSでService Workerをインストールさせて、AMP JSをローカルにキャッシュさせて、AMPページにアクセスする際にそれを読み込ませるようにさせることでリモートにAMP JSを取りに行っていた通信の時間分速くなります。
2のサーバサイドレンダリングに関しては、現状AMPページにあるボイラープレートに対するクライアントサイドの読み込みフローを幾ばくかサーバサイドに任せて、読み込んだ瞬間にレンダリング計算が終わっている状態にしたい、というのが狙いです。
Ampersand by Cloudflare
これまでは外部から利用可能なAMPキャッシュはGoogle AMP Cacheしかありませんでしたが、今回CloudflareからAmpersandという独自ドメイン運用できるAMPキャッシュが公開されました。またそれに合わせて、見た目をカスタマイズできるAMPビューワーのSDKの公開もアナウンスしました。
codelab
2日目の午後はAMPのcodelabが開催されました。どれも新しくつくられたcodelabで、最新の情報を盛り込んだ内容になっています。
- Progressive Web AMPs
- AMPからService Workerをインストールさせてオフライン対応やApp Shellの実装までを行う課題。Service Worker対応してないブラウザでも動作するように対応している。
- Creating your first AMP Component
- 新規のAMPコンポーネントを自作してみる課題。AMPの挙動自体も理解できる。
- Beautiful, interactive, canonical AMP pages
- AMP Startを使ってイケてるAMPページを素早く作る課題。AMP Startの便利さが分かる。
総括
ニューヨークでの開催でしたが、多くの国からの参加者が来ていて、参加者がすべてAMP対応企業だったこともあり、活発に意見交換がされていた印象でした。AMPはまだまだ発展途上のフレームワークですが、クライアントサイドにとどまらない点が他のフレームワークとの違いだと思うので、その特徴を活かしてよりモバイルウェブが良い方向に動くように発展していくきっかけになるように、これからもAMPがいい形で成熟していくことを願っています。
