Web Packaging を使用した AMP URL 改善の初期概要
2018年6月7日木曜日
この記事は Chrome ソフトウェア エンジニア、Kinuko Yasuda、Google 検索ソフトウェア エンジニア、Eric Steinlauf による Accelerated Mobile Pages Project の記事 "A first look at using web packaging to improve AMP URLs" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
AMP に関してユーザーから寄せられるとりわけ多いフィードバックの 1 つは、Google 検索で AMP コンテンツにリンクするときに使用される「google.com/amp…」という形式の URL に関するものです。Google の AMP チームは数か月前、より適切な AMP URL を表示するための計画の概要を発表しました。本日、この取り組みの進捗状況をお知らせします。
私たちのアプローチでは、新しい Web Packaging テクノロジーのコンポーネントの 1 つを活用しています。このテクノロジーは、他のさまざまなユースケースもサポートしています。このコンポーネントを使用すると、サイトオーナーが HTTP Exchange（リクエスト / レスポンスのペア）に署名（Sign）することにより、キャッシュ サーバーがその Exchange をブラウザに送ることができるようになります。ブラウザでこの「Signed Exchange」が読み込まれると、通常の HTTPS 接続と類似した整合性と信頼性のプロパティが証明されるため、ブラウザのアドレスバーにサイトオーナーの元のウェブオリジンを表示することができます。
この課題に対応することにより、ユーザーとサイトオーナーの両方にメリットがもたらされます。ユーザーに対しては、検索結果ページで表示されるサイトオーナーのオリジンに一貫した URL が表示されるようになります。サイトオーナーは、アドレスバーでのブランド保持やプリフェッチによる瞬時の読み込みといった恩恵を受けることができます。
AMP プロジェクトでは、この提案した技術の動作を実際に確認するため、Pinterest と Food Network と連携してテストを行いました。これらのパートナー企業 2 社は、AMP コンテンツに署名して、Signed Exchange をウェブに公開しました。このプロセスをより簡単にするために、https://github.com/ampproject/amppackager から入手できる新しいツールセットを使用しました。 また、https://github.com/WICG/webpackage/tree/master/go/signedexchange から AMP 固有ではないパッケージ ツールを入手することもできます。
Chrome チームは、デベロッパーがこの機能を試すのに十分な Signed Exchange の機能を実装しました。Android 向け Chrome 67（この記事を書いている時点では Beta チャンネル）以降では、chrome://flags の下で試験運用版の「Signed HTTP Exchange」フラグを有効にして、Web Packaging の Signed Exchange を使用できます。また、Chrome チームは、この試験運用版の実装と並行して、標準化団体のメンバー、その他のブラウザ ベンダー、セキュリティ専門家、サイトオーナー、ウェブ デベロッパーからのフィードバックを収集して、Web Packaging の仕様を洗練させ、改善しています。
また、Google 検索チームは、すべての要素を結びつけてエンドツーエンドで動作を試せるように、Google 検索の試験バージョンを実装しました。Signed Exchange が利用できるようになると、Google 検索では、Google の AMP キャッシュから配信される AMP ページにリンクする代わりに、Google のキャッシュから配信される署名された AMP ページにリンクするようになります。
Google 検索から Food Network の結果ページを超高速に表示できるようにするために、背後で多くの機能が動作しています。
上記のアニメーションで示されているように、AMP コンテンツの最終 URL は意図したとおり foodnetwork.com ドメインの URL になり、AMP ページが高速で読み込まれます。想定したアプローチが複数のテクノロジー レイヤーで機能することを検証していますが、このアプローチは依然として初期段階であり、今回ご紹介した機能をリリースする準備はまだできていないため、ご注意ください。前述したように、Web Packaging 関連の仕様をさらに改善し、Web Packaging の完成に向けて開発を進めるために、ブラウザ ベンダーやウェブ コミュニティからの多くのフィードバックをお待ちしています。
この領域にご興味がある方はこちらから参加してください。開発の進行に応じてアップデートを継続して提供していきます。
Reviewed by Yoshifumi Yamaguchi - Developer Relations Team
AMP に関してユーザーから寄せられるとりわけ多いフィードバックの 1 つは、Google 検索で AMP コンテンツにリンクするときに使用される「google.com/amp…」という形式の URL に関するものです。Google の AMP チームは数か月前、より適切な AMP URL を表示するための計画の概要を発表しました。本日、この取り組みの進捗状況をお知らせします。
私たちのアプローチでは、新しい Web Packaging テクノロジーのコンポーネントの 1 つを活用しています。このテクノロジーは、他のさまざまなユースケースもサポートしています。このコンポーネントを使用すると、サイトオーナーが HTTP Exchange（リクエスト / レスポンスのペア）に署名（Sign）することにより、キャッシュ サーバーがその Exchange をブラウザに送ることができるようになります。ブラウザでこの「Signed Exchange」が読み込まれると、通常の HTTPS 接続と類似した整合性と信頼性のプロパティが証明されるため、ブラウザのアドレスバーにサイトオーナーの元のウェブオリジンを表示することができます。
この課題に対応することにより、ユーザーとサイトオーナーの両方にメリットがもたらされます。ユーザーに対しては、検索結果ページで表示されるサイトオーナーのオリジンに一貫した URL が表示されるようになります。サイトオーナーは、アドレスバーでのブランド保持やプリフェッチによる瞬時の読み込みといった恩恵を受けることができます。
AMP プロジェクトでは、この提案した技術の動作を実際に確認するため、Pinterest と Food Network と連携してテストを行いました。これらのパートナー企業 2 社は、AMP コンテンツに署名して、Signed Exchange をウェブに公開しました。このプロセスをより簡単にするために、https://github.com/ampproject/amppackager から入手できる新しいツールセットを使用しました。 また、https://github.com/WICG/webpackage/tree/master/go/signedexchange から AMP 固有ではないパッケージ ツールを入手することもできます。
Chrome チームは、デベロッパーがこの機能を試すのに十分な Signed Exchange の機能を実装しました。Android 向け Chrome 67（この記事を書いている時点では Beta チャンネル）以降では、chrome://flags の下で試験運用版の「Signed HTTP Exchange」フラグを有効にして、Web Packaging の Signed Exchange を使用できます。また、Chrome チームは、この試験運用版の実装と並行して、標準化団体のメンバー、その他のブラウザ ベンダー、セキュリティ専門家、サイトオーナー、ウェブ デベロッパーからのフィードバックを収集して、Web Packaging の仕様を洗練させ、改善しています。
また、Google 検索チームは、すべての要素を結びつけてエンドツーエンドで動作を試せるように、Google 検索の試験バージョンを実装しました。Signed Exchange が利用できるようになると、Google 検索では、Google の AMP キャッシュから配信される AMP ページにリンクする代わりに、Google のキャッシュから配信される署名された AMP ページにリンクするようになります。
Google 検索から Food Network の結果ページを超高速に表示できるようにするために、背後で多くの機能が動作しています。
上記のアニメーションで示されているように、AMP コンテンツの最終 URL は意図したとおり foodnetwork.com ドメインの URL になり、AMP ページが高速で読み込まれます。想定したアプローチが複数のテクノロジー レイヤーで機能することを検証していますが、このアプローチは依然として初期段階であり、今回ご紹介した機能をリリースする準備はまだできていないため、ご注意ください。前述したように、Web Packaging 関連の仕様をさらに改善し、Web Packaging の完成に向けて開発を進めるために、ブラウザ ベンダーやウェブ コミュニティからの多くのフィードバックをお待ちしています。
この領域にご興味がある方はこちらから参加してください。開発の進行に応じてアップデートを継続して提供していきます。
Reviewed by Yoshifumi Yamaguchi - Developer Relations Team