読者です 読者をやめる 読者になる 読者になる

YAMAGUCHI::weblog

土足で窓から失礼いたします。今日からあなたの息子になります。 当年とって92歳、下町の発明王、エジソンです。

AMP Conf in NYC recap

はじめに

3月7日、8日にニューヨークでAMP Confという初のAMPチーム主催のAMPに関するカンファレンスが開催されました。

当日のツイートなど

リアルタイムで #ampconf ハッシュタグが付いていて良さそうなものをRTしつつ、自分でもメモとしてツイートしてました。改めてまとめて次のリンクに置いておきます。 twitter.com

当日のライブ配信の録画

当日はプレゼンはすべてライブ配信されて、その録画が残っています。各発表ごとの動画もいずれ公式チャンネルで公開される予定にはなっていますが、とりあえず公開されている録画の動画を貼っておきます。途中、画像だけで止まっているところがありますが、それはコーヒーブレイクなどで発表がない時間帯のものなので、適宜飛ばして再生して下さい。

多くのAMP運用企業からの発表があり、実際PinterestTumblrがとんでもない量のAMPページをリリースしている/することを報告していたり、wegoがどうやってAMPページと通常ページを両立させているかを共有していたり、その他もろもろこれまでAMPサイトを運用してきた知見が語られています。多くの日本のAMP対応サービス企業も言及されていて、特にYahoo! JapanのAMP対応は会場でも大きな話題となりました。

  • 1日目

www.youtube.com

  • 2日目

www.youtube.com

新しく発表されたこと

AMP Start

これまでAMPページを作る際にテンプレートがなくて苦労された方もいるかもしれません。AMP Startではそんな需要に対応すべく、様々な種類のページ向けにレスポンシブなテンプレートを用意しています。またページテンプレートだけではなく、ボタンやナビゲーションといったUIコンポーネントも提供しています。

AMP Start自体もオープンソースになっているので、もしいい感じのサンプルがあったらどんどんコントリビュートして下さい。

amp-bind

これまでAMPでは「一切のカスタムのJavaScriptが利用できない」ということが大きな制約となっていて、その制限によって利用を諦めた方も多いのではないかと思います。それはAMPを作った当初の思想の反映で「迂闊なJavaScriptのおかげで表示が遅くなることが多いので、まずは一番厳しい制限としてJavaScriptを書かせない」となったのですが、amp-listamp-sidebar などを使ってインタラクティブな動作もできるようにしてきました。

しかし、それでもまだEコマースサイトなどでは機能として足りないということで、状態管理とデータバインドなどに関するメソッドを提供し、かなり制限はあるものの、JavaScriptも少しは書けるようにしようとしたのがこの amp-bind です。(実際には amp-state などと組み合わせて使います)

www.ampproject.org

実際に amp-bind がどのような動作をするかは AMP by Example に簡単な例があるので、是非確認してみてください。

ampbyexample.com

発表の動画では amp-bindチューリング完全であることから、2048っぽいゲームをデモとして作って見せていましたが、発表者のWilliamが「頼むから実際のサイトでこんな実装しないでね」と言っていたのが印象的でした。

Google AMP Cacheでの高速化施策

現状ではAMPは機能を制限することでクライアントサイドレンダリングの高速化を図っているわけですが、これをされに推し進めて高速化を図る計画がAMP ProjectのTechnical LeadのMalteより発表されました。その施策は次の2つです。

  1. AMP JSのService Workerでのキャッシュ
  2. 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

www.cloudflare.com

これまでは外部から利用可能なAMPキャッシュはGoogle AMP Cacheしかありませんでしたが、今回CloudflareからAmpersandという独自ドメイン運用できるAMPキャッシュが公開されました。またそれに合わせて、見た目をカスタマイズできるAMPビューワーのSDKの公開もアナウンスしました。

codelab

2日目の午後はAMPのcodelabが開催されました。どれも新しくつくられたcodelabで、最新の情報を盛り込んだ内容になっています。

総括

ニューヨークでの開催でしたが、多くの国からの参加者が来ていて、参加者がすべてAMP対応企業だったこともあり、活発に意見交換がされていた印象でした。AMPはまだまだ発展途上のフレームワークですが、クライアントサイドにとどまらない点が他のフレームワークとの違いだと思うので、その特徴を活かしてよりモバイルウェブが良い方向に動くように発展していくきっかけになるように、これからもAMPがいい形で成熟していくことを願っています。