2019/04/17-18に六本木アカデミーヒルズで開催された、AMP Conf 2019の参加レポートです。

2017年アメリカ・ニューヨーク、2018年オランダ・アムステルダムと続き、第3回目は日本開催ということで、初参戦してきました。

新ガバナンスモデル

2018年11月に発表した新ガバナンスモデルについての説明。
そもそもガバナンスって？って話しですが、Wikipediaによると、

ガバナンス（governance）とは、統治のあらゆるプロセスをいう。政府、企業などの組織のほか、領土、ITシステム、権力などにも用いられる広い概念である
Wikipedia

とあるので、AMPのコミュニティを今後どうやって統制していくかって話だと思います。
セッション内での説明では、

Technical Steering Committee (TSC)とよばれる、技術面と製品面の方向性を定めるメンバー。Advisory Committee（AC）とよばれるTSCにアドバイスする関連ビジネスの代表者。また、特定分野の知識、関心を持つWorking Group（WG）の3つの構成でよりオープンに意見を求めてAMPの方向性を議論していくとのこと。

References

資料：新ガバナンスモデル発表
関連セッション

amp-script

AMPのデメリットとして挙げられる厳しい制限。その1つがJavascriptの一切の禁止。これが緩和される。

まだExperimentalだが、<amp-script /> を利用することで、web worker上で開発者が用意したJavascriptを実行することができるようになる。

web workerは仕様上、DOMの操作ができないが、AMPプロジェクトのworker-domというライブラリのおかげて、worker内でDOM APIを再現し本体のDOMに反映することができる。

仕様上できないDOM操作をどうやってやってるか気になる人はぜひセッション動画を見てほしい。
ムリクリ実現させた方法が解説されている。

注意点

Javascriptの利用ができるようになったからと言って無制限に利用できるわけではない。

合計のファイルサイズが150KB以内（利用ライブラリ等含む）
ユーザーの操作起因で動く処理のみ許可
スクリプトの動作時間は5秒以内
- 外部リソースの取得等があった場合はレスポンスのfirst byteが帰って来たときから更に5秒以内

References

ドキュメント
amp-scriptのサンプル
関連セッション
- keynote
- The glory of amp-script: Unleashing the kraken

Google Domainからの開放

AMPのデメリットとして挙げられる厳しい制限。もう1つがAMPとして配信されるドメインがgoogle.comになてしまう問題。それを自ドメインで配信できるようになる。

AMPページを高速に表示するために、

CDNエッジサーバからの配信
サーチ検索結果であれば、結果表示時点での事前読み込み

を行いたく、そのためにはどうしてもGoogleドメインで配信せざるを得ないらしい。
（詳しくはセッション動画参照ちょっと難しかった。。。）

配信はGoogleドメインだが、ユーザーに表示するドメインを自ドメインにさせる方法がwebpackaging （webpackではない）という仕様。

webpackagingはSigned ExchangeとBundle Exchangeからなる仕様で、AMPを自ドメインで表示するためには、Signed Exchangeを利用する。この仕様はchrome 73から利用可能。

Signed ExchangeはHTTPのrequest,responseに対して証明書付きでひとまとめにすることで、配信ドメインに関係なく自ドメインを証明できるようにする技術。これによりコンテンツ（web page）が

どこから、だれからでも入手可能
オフラインでも利用可能
コンテンツの所有者のURLで表示可能
Cookieなんかも操作可能

になる。

Signed Exchangeをサポートしているプラットフォームは、Googleの検索結果と、Yahoo Japanの検索結果。
Signed ExchangeをサポートしているPublisherは現在のところ日本では、Yahoo トラベルや一休など。

Signed Exchangeを利用するには、CanSignHttpExchanges をサポートしている証明書を別で発行する必要があり、現在発行できるベンダーはDigiCertだけある。

また、CloudFlareはBeta機能としてSigned Exchangeを利用してのAMP配信を利用でき、機能をON後、CloudFlareからの返信があれば機能を利用できる。

Signed Exchangeを利用すれば実際の配信はGoogle CDNで、ブラウザに表示されるドメインが自ドメインにすることができるが、注意点も必要。

AMPの有効期限が短時間（最大1週間）
証明書の有効期限は90日
端末に保存され参照されるのでAMPの内容がキャッシュ可能なものか（個人情報を含んでないか）を確認することが求められる

References

解説ブログ
関連セッション

amp-story

カンファレンスの目玉の一つ。前から発表されていたコンポーネントだが、利用者からのfeedback等をもとに改善された点などの報告。

ストーリーは今や、インスタグラム、Facebook、Snapchat等に実装されている新しいメディアのフォーマット。
プラットフォーム内だけでの公開であったり、制限がいろいろあったりする。

AMP StoryはこのストーリーというメディアをWebで簡単に構築できるコンポーネントを用意している。
とはいえ結局のところただのWeb pageに過ぎない。AMP StoryはAMPを利用することで、ストーリーっぽいUIのWeb Pageを簡単につくることを可能にしてくれる。

主な特徴、機能としては、

シェア可能
リンク可能
検索可能
アタッチメント可能
情報のEmbed可能（tweetやyoutube、google mapなどがサポート予定）
レスポンシブ対応
広告を表示可能

百聞は一見にしかず。下記はメディアが作った実際のAMP Story。

レスポンシブ未対応のAMP Story

https://www.bbc.co.uk/news/ampstories/africafish/index.html
https://edition.cnn.com/ampstories/entertainment/the-matrix-turns-20-a-look-back
https://www.pcgamesn.com/amp-stories/best-battle-royale-games.html
https://www.usatoday.com/amp-stories/beyonce-rule-the-world/

レスポンシブ対応のAMP Story

https://projects.sfchronicle.com/2019/visuals/guerneville-russian-river-flooding/
https://www.telegraph.co.uk/visual-stories/best-islands-to-visit/

アタッチメント

ストーリーに載せた情報のより詳細をスワイプアップして表示可能

情報のEmbed

検索可能

ストーリーはWeb pageなのでGoogle検索での検索も可能。

詳細はこちらの動画参照。
https://youtu.be/i7Br9GmpQWs?t=1003

ベストプラクティス

導入事例をもとに、Storyを作る上での、ベストプラクティスも公開しているので参考になる。
これは、AMPでなくても例えばインスタグラムのStoryを作る上でも参考になるかもしれない。

ツール

AMP Storyを作るツールを提供するサービス公開されているので、ゴリゴリコードを書かずとも作ることは可能。

References

ドキュメント
関連セッション
- AMP Stories: The Story so far

AMP Email

カンファレンスの目玉の一つ。まだExperimentalだが、先行して実装している企業からのフィードバックの紹介が多くあった。
AMP EmailはAMPのコンポーネントをEmailに埋め込んで利用できるようにするもの。

現在EmailはTextタイプのものと、HTMLタイプのものがあるが、HTMLタイプのEmailはレイアウトが難しかったり、JavaScriptが使えないため動的な表現がまったくできなかったが、AMP Emailを利用することでそれができるようになる。

互換性

送るときのMIME-typeは text/x-amp-htmlとして送るため、現状のEmailの互換性が保たれていて、AMP Emailが表示できるサービスならAMP Emailを表示して、できないサービスなら、HTML Emailを見せるということができる。

主なコンポーネント

ドキュメントによると、、、、フォームによる情報の送信、カルーセル、light-box、アコーディオンなんかも表示可能。

Google DocのEmail内でのコメント返信

Ecwid(ECのキャンペーンEmailでの画像のカルーセル表示)

効果

Indeedは、job alert Emailのクリック数が2倍に
OYOは+57%のCTR、+60%のCVR

パートナー

AMP Emailを配信できるサービス
- SendGrid
- SPARKPOST
AMP Emailを表示できるクライアント
- Gmail
- Yahoo mail
- Outlook
- @mail

開発

開発するならプレビュー機能がある下記を利用できる
- https://playground.amp.dev/?runtime=amp4email
AMP Emailを試しに送信するなら下記が利用できる
- https://amp.gmail.dev/playground/

References

ドキュメント
関連セッション
- AMP for Email: pushing the boundaries of email with AMP

今後について

2019年はAMPでの

決済機能
CSSの50KB制限の条件付きでの緩和
optimizerで最適化処理したAMPファイルもvalidにする予定
Stateful ページの実装
- 例えば商品検索ページでいろいろ絞り込みして商品詳細ページへ遷移して、戻るボタンで商品検索ページに戻るとさっき絞り込みした状態が復元するとか

長期的視点

AMPを実装するときは2つの構成がある。

Paired AMP
- 非AMPと対になるAMPページの2つを用意する
AMP First
- AMPページだけ用意する

あくまで目標はAMP Firstな実装なのでそれに足りない機能を検討、実装していく。

AMP Bento 🍱

AMPは、アクセシビリティやUXが考えられた素晴らしいコンポーネントが多数存在する。
これらをAMPページ以外でも気軽に利用できるようにしていきたい。

現在は、AMP runtimeである https://cdn.ampproject.org/v0.js がページには必須だが、これがなくても動くようにしたいし、VueやReactといった別コンポーネントと相互にインタラクトできるようにしていきた。

そのコンセプトの名前が AMP Bento 🍱

References

関連セッション
- What's next in AMP