稲妻マークを体験してみよう
2016年10月14日金曜日
この記事は amphtml による Accelerated Mobile Pages Project の記事 "Experience the Lightning Bolt – Accelerated Mobile Pages Project" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
編集者のメモ: 以下の記事は、eBay のブログに主席エンジニアの Senthil Padmanabhan が投稿したものです。
eBay は、モバイル体験を高速化して向上させるために、AMP テクノロジーの導入を進めています。
3 か月前、高速かつスタイリッシュに eBay をブラウジングできるようにすることによって、ユーザーのショッピング体験を変革したことをお知らせしました。その目的は、eBay のサイトにいるユーザーだけでなく、Google や Twitter のような外部プラットフォームから eBay にアクセスしているモバイル ユーザーにも魅力的な体験を提供することでした。AMP テクノロジーを使用したのはそのためです。通常のモバイル向けウェブページだけでなく、新商品のブラウジングにも AMP 版を実装し、6 月にリリースしました。当時は、まだ完了していないいくつかの保留中のタスクがあったため、AMP コンテンツは Google から検出可能ではありませんでした。さらに、Google 検索結果に表示される AMP リンクは、ニュース コンテンツのパブリッシャー向けで、e コマースでは利用できませんでした。
その状況は変化しています。Google は、e コマース、旅行など、ニュース以外の業界にも AMP を解放することを発表しました。eBay は目的を実現するため、保留していた項目を実施し、AMP 非対応ページからリンクすることによって AMP 対応ページを検出可能にしました。うれしいことに本日（*原文公開当時）、Google の検索結果に eBay の AMP リンクが表示され、世界中のユーザーの皆様が稲妻のマークで示される即時読み込みを体験できるようになったことをお知らせします。eBay では、AMP に対応した 1,500 万点の 商品ページをブラウジングできますが、すべてのページがすぐに AMP で表示されるわけではありません。この機能は増加中で、今後表示されるようになるでしょう。モバイル ブラウザで、よく検索されているクエリ、たとえば「iPhone 6 no contract」や「canon digital cameras」を試してみてください。リンクの横に、AMP の稲妻マークが表示されます。e コマースでも AMP が実現したのです。
現在と未来とのギャップ
6 月の初期リリースに続き、AMP の最盛期を迎えるにあたっていくつかの追加対応を行っています。以下に、実施した対応の概要を記載します。
安定した分析システム
最適な体験を提供するためには、ユーザーがどのように eBay のページを使うかを理解することが欠かせません。新商品のブラウジング体験を進化させるバックエンド システムは、永続的にユーザーの画面上でのアクティビティを収集し、そこから学習し、次回以降のアクセスを最適化できるように設計されました。たとえば、ユーザーがスクロールしなければ見えない範囲にあるモジュールをよく操作している場合、次にアクセスして同じページをブラウジングしたとき、そのモジュールはスクロールせずに見える範囲に表示されるようになります。eBay の AMP 非対応ページには、バックエンドで報告を行うカスタムのアナリティクス ライブラリが組み込まれています。
AMP には、同じことを行うコンポーネント（amp-analytics）があります。AMP の初期リリースの際には、ただページのインプレッションをトラッキングするためにこのコンポーネントを使っていました。これによって、かなり徹底的なトラッキングが可能になります。しかし、eBay は、各要素にトラッキングしたいものが関連付けられているさらに細かい要素レベルの制御を必要としています。eBay は AMP チームと連携し、仕様を作成しました。さらに、この仕様を実装し、オープンソース プロジェクトに寄贈しました。この実装によって、クリックやスクロール、可視性などのユーザーのインタラクションをバックエンドに報告する安定した高度な分析システムを実現できました。それによって、以降のアクセスの最適化を実現できます。
同等の機能
以前のブログで、大半のコードが AMP 対応ページと AMP 非対応ページで共有されていることに触れました。このようにコードが共有されているにもかかわらず、この 2 種類のページにはわずかな機能の相違がありました。今回、このギャップを修正して不整合を解消し、同じような問題が起こらないようなプロセスを導入しました。とはいえ、AMP 版には制限があるため、実現できない UI コンポーネントや動作がありました。そのうちいくつかは、e コマース特有のコンポーネントです。そこで、AMP チームと連携して、誰もがメリットを受けられるようコンポーネントを追加する作業を進めています。わかりやすい例は、タブ型の UI コンポーネントです。これは既に実装に向けた機能リクエストに追加されています。
ビルドプロセスの効率化
初期リリースの際には、AMP 対応版とAMP 非対応版でのアセット（CSS や JavaScript）の管理を手動で行っていました。AMP 対応版では JavaScript は使用できず、すべての CSS はインラインである必要があります。一方、AMP 非対応版では、CSS と JavaScript はどちらもバンドルして外部に配置する必要があります。しかし、これを手動で行うのは理想的ではありません。eBay で使用しているアセット パイプライン ツールである Lasso には、これを解決できる条件付き依存というソリューションがあります。そこで、リクエストが AMP である場合に true で初期化される AMP フラグを作成し、Lasso フラグとして設定しました。パイプラインはそのフラグにアクセスし、条件に応じてリソースを自動的にバンドル、外部化、インライン化します。これによって大幅に時間を節約でき、非常に効率的な作業が行えるようになりました。
今後の予定
これはまだ終わりではありません。実際、まだ始まったばかりです。これから行う必要があるたくさんのタスクが待っています。
Google からやってくるモバイル ユーザーに AMP 体験を提供できることをとてもうれしく思っています。私たちもしばらくの間試してみましたが、これは本当に高速です。モバイル ブラウジングは遅くなる可能性があり、時によってはストレスがたまる場合もあります。AMP はそのような場合に活躍し、一貫した高速な体験を保証するものです。eBay は、ユーザーの皆様がこの新しいテクノロジーによってメリットを受けられることを願っています。
Posted by Yoshifumi Yamaguchi - Developer Relations Team
編集者のメモ: 以下の記事は、eBay のブログに主席エンジニアの Senthil Padmanabhan が投稿したものです。
eBay は、モバイル体験を高速化して向上させるために、AMP テクノロジーの導入を進めています。
3 か月前、高速かつスタイリッシュに eBay をブラウジングできるようにすることによって、ユーザーのショッピング体験を変革したことをお知らせしました。その目的は、eBay のサイトにいるユーザーだけでなく、Google や Twitter のような外部プラットフォームから eBay にアクセスしているモバイル ユーザーにも魅力的な体験を提供することでした。AMP テクノロジーを使用したのはそのためです。通常のモバイル向けウェブページだけでなく、新商品のブラウジングにも AMP 版を実装し、6 月にリリースしました。当時は、まだ完了していないいくつかの保留中のタスクがあったため、AMP コンテンツは Google から検出可能ではありませんでした。さらに、Google 検索結果に表示される AMP リンクは、ニュース コンテンツのパブリッシャー向けで、e コマースでは利用できませんでした。
その状況は変化しています。Google は、e コマース、旅行など、ニュース以外の業界にも AMP を解放することを発表しました。eBay は目的を実現するため、保留していた項目を実施し、AMP 非対応ページからリンクすることによって AMP 対応ページを検出可能にしました。うれしいことに本日（*原文公開当時）、Google の検索結果に eBay の AMP リンクが表示され、世界中のユーザーの皆様が稲妻のマークで示される即時読み込みを体験できるようになったことをお知らせします。eBay では、AMP に対応した 1,500 万点の 商品ページをブラウジングできますが、すべてのページがすぐに AMP で表示されるわけではありません。この機能は増加中で、今後表示されるようになるでしょう。モバイル ブラウザで、よく検索されているクエリ、たとえば「iPhone 6 no contract」や「canon digital cameras」を試してみてください。リンクの横に、AMP の稲妻マークが表示されます。e コマースでも AMP が実現したのです。
現在と未来とのギャップ6 月の初期リリースに続き、AMP の最盛期を迎えるにあたっていくつかの追加対応を行っています。以下に、実施した対応の概要を記載します。
安定した分析システム
最適な体験を提供するためには、ユーザーがどのように eBay のページを使うかを理解することが欠かせません。新商品のブラウジング体験を進化させるバックエンド システムは、永続的にユーザーの画面上でのアクティビティを収集し、そこから学習し、次回以降のアクセスを最適化できるように設計されました。たとえば、ユーザーがスクロールしなければ見えない範囲にあるモジュールをよく操作している場合、次にアクセスして同じページをブラウジングしたとき、そのモジュールはスクロールせずに見える範囲に表示されるようになります。eBay の AMP 非対応ページには、バックエンドで報告を行うカスタムのアナリティクス ライブラリが組み込まれています。
AMP には、同じことを行うコンポーネント（amp-analytics）があります。AMP の初期リリースの際には、ただページのインプレッションをトラッキングするためにこのコンポーネントを使っていました。これによって、かなり徹底的なトラッキングが可能になります。しかし、eBay は、各要素にトラッキングしたいものが関連付けられているさらに細かい要素レベルの制御を必要としています。eBay は AMP チームと連携し、仕様を作成しました。さらに、この仕様を実装し、オープンソース プロジェクトに寄贈しました。この実装によって、クリックやスクロール、可視性などのユーザーのインタラクションをバックエンドに報告する安定した高度な分析システムを実現できました。それによって、以降のアクセスの最適化を実現できます。
同等の機能
以前のブログで、大半のコードが AMP 対応ページと AMP 非対応ページで共有されていることに触れました。このようにコードが共有されているにもかかわらず、この 2 種類のページにはわずかな機能の相違がありました。今回、このギャップを修正して不整合を解消し、同じような問題が起こらないようなプロセスを導入しました。とはいえ、AMP 版には制限があるため、実現できない UI コンポーネントや動作がありました。そのうちいくつかは、e コマース特有のコンポーネントです。そこで、AMP チームと連携して、誰もがメリットを受けられるようコンポーネントを追加する作業を進めています。わかりやすい例は、タブ型の UI コンポーネントです。これは既に実装に向けた機能リクエストに追加されています。
ビルドプロセスの効率化
初期リリースの際には、AMP 対応版とAMP 非対応版でのアセット（CSS や JavaScript）の管理を手動で行っていました。AMP 対応版では JavaScript は使用できず、すべての CSS はインラインである必要があります。一方、AMP 非対応版では、CSS と JavaScript はどちらもバンドルして外部に配置する必要があります。しかし、これを手動で行うのは理想的ではありません。eBay で使用しているアセット パイプライン ツールである Lasso には、これを解決できる条件付き依存というソリューションがあります。そこで、リクエストが AMP である場合に true で初期化される AMP フラグを作成し、Lasso フラグとして設定しました。パイプラインはそのフラグにアクセスし、条件に応じてリソースを自動的にバンドル、外部化、インライン化します。これによって大幅に時間を節約でき、非常に効率的な作業が行えるようになりました。
今後の予定
これはまだ終わりではありません。実際、まだ始まったばかりです。これから行う必要があるたくさんのタスクが待っています。
- AMP の先 — AMP ページは高速であることはわかっています。しかし、ユーザーがアクセスするその先のページはどうでしょうか。現在、ユーザーが AMP ページ内のリンクをクリックすると、新しいタブが開いてそこで移動先のページが読み込まれます。eBay では、移動先ページのモバイルウェブ版が読み込まれます。私たちは、そういったページでも高速で一貫性のある AMP 体験を提供したいと考えています。この目標を実現する AMP コンポーネント（amp-install-serviceworker）があります。このユーティリティを活用して AMP から対象ページへのシームレスな遷移を実現することが最優先の課題です。また、新しいタブを開くのではなく、同じウィンドウで操作を続ける方法について、Google チームと検討を行っています。
- キャッシュの更新 — AMP コンテンツは Google AMP キャッシュから提供されています。キャッシュの更新ポリシーは、こちらから確認できます。eBay においては、ユーザーが人気のある商品のクエリを行うと、最新のコンテンツを参照できます。しかし、極端に珍しいクエリを行う数名のユーザーは、古いコンテンツを参照することになる可能性があります。これは一般的なシナリオではありませんが、この問題を修正する AMP コンポーネント（amp-fresh）があります。このコンポーネントは、準備ができ次第組み込む予定になっています。それまでの間は、いくつかの商品に対して、キャッシュ内の AMP コンテンツをアップデートするスクリプトを手動で実行します。
- 統合版 — 現在、新しいブラウジング ページには、AMP 対応版と AMP 非対応版の 2 つのバージョンがあります。ユーザーが Google で検索した場合は AMP 対応版が表示され、eBay 内で検索したユーザーには、AMP 非対応版が表示されます。どちらのコンテンツも高度な最適化が行われており、同じように見え、大半のコードが共有されていますが、メンテナンス作業で両方のバージョンをアップデートするのは依然として負荷がかかります。さらに、同等の機能が提供されているかどうかを監視する必要もあります。将来的には、AMP ページの動作に基づいた単一のモバイル版（AMP）のみを保持し、すべてのプラットフォームでそれを提供するという選択をする可能性があります。
Google からやってくるモバイル ユーザーに AMP 体験を提供できることをとてもうれしく思っています。私たちもしばらくの間試してみましたが、これは本当に高速です。モバイル ブラウジングは遅くなる可能性があり、時によってはストレスがたまる場合もあります。AMP はそのような場合に活躍し、一貫した高速な体験を保証するものです。eBay は、ユーザーの皆様がこの新しいテクノロジーによってメリットを受けられることを願っています。
Posted by Yoshifumi Yamaguchi - Developer Relations Team
