AMP コミュニティから特に多く寄せられている要望の 1 つは、AMP の高パフォーマンスなコンポーネントを AMP 以外のページでも利用できるようにすることです。この度、Bento コンポーネントの第 1 ラウンドが完全リリースされたことをお知らせします。Bento コンポーネントは、高パフォーマンス、高ユーザー エクスペリエンスのコンポーネントで、ウェブ デベロッパーがページに機能を追加して優れたユーザー エクスペリエンスを実現する際に、直面する現実的な問題を解消できるようになっています。ぜひ試してみて、フィードバックをお送りください。Bento の詳細は、新しい Bento ブログで確認できます。

あらゆる場所で AMP コンポーネントを使う

AMP Project の目的は、常にユーザーファーストな体験を作れるようにデベロッパーをサポートすることです。この価値提案の中核にあるのは、高パフォーマンスでユーザー中心の AMP コンポーネントです。そこに Bento が加わり、これまで AMP でしか使えなかった高パフォーマンスな Web Component をお気に入りのフレームワークや CMS で使えるようになります。

たとえば、非 AMP ページにカルーセルを追加するなど、1 度限りのケースに Bento コンポーネントを使うことができます。また、AMP に注目し、徐々にページを有効な AMP に変換しようと考えているデベロッパーにも便利です。 

Bento と AMP の今後の方向性 

AMP は今後も、すぐに使えるソリューションをウェブサイトに提供し、ウェブページで優れたユーザー エクスペリエンスを実現し続けます。また、AMP Project では、AMP 形式のサポートと強化を継続します。同時に、ウェブサイトのパブリッシャーには、AMP と互換性のないサイトで機能を使いたいというニーズもあることも理解しています。そういったパブリッシャーは、サイトで Bento コンポーネントを使い、他の機能に妥協することなく、具体的な UX の課題に対処できるようになります。 

私たちが思い描いているのは、パブリッシャーが自由に AMP を活用して優れたユーザー エクスペリエンスを実現したり、Bento を使って個々のパフォーマンスの問題に対処したり、AMP や Bento の助けを借りることなくページ エクスペリエンスの目標を達成したりできる未来です。 

今すぐ Bento をお試しください！

Bento コンポーネントを試してみたい方は、スタートガイドをご覧ください。チームは、GitHub や Slack チャンネルからフィードバックを送ることを推奨しています。フィードバックは大歓迎です。ぜひご協力ください。質問や問題がある方も、遠慮なくご連絡ください。
Reviewed by Eiji Kitamura - Developer Relations Team

Bento コンポーネント ライブラリを公開

AMP コミュニティから特に多く寄せられている要望の 1 つは、AMP の高パフォーマンスなコンポーネントを AMP 以外のページでも利用できるようにすることです。この度、Bento コンポーネントの第 1 ラウンドが完全リリースされたことをお知らせします。Bento コンポーネントは、高パフォーマンス、高ユーザー エクスペリエンスのコンポーネントで、ウェブ デベロッパーがページに機能を追加して優れたユーザー エクスペリエンスを実現する際に、直面する現実的な問題を解消できるようになっています。ぜひ試してみて、フィードバックをお送りください。Bento の詳細は、新しい Bento ブログで確認できます。

あらゆる場所で AMP コンポーネントを使う

AMP Project の目的は、常にユーザーファーストな体験を作れるようにデベロッパーをサポートすることです。この価値提案の中核にあるのは、高パフォーマンスでユーザー中心の AMP コンポーネントです。そこに Bento が加わり、これまで AMP でしか使えなかった高パフォーマンスな Web Component をお気に入りのフレームワークや CMS で使えるようになります。

たとえば、非 AMP ページにカルーセルを追加するなど、1 度限りのケースに Bento コンポーネントを使うことができます。また、AMP に注目し、徐々にページを有効な AMP に変換しようと考えているデベロッパーにも便利です。 

Bento と AMP の今後の方向性 

AMP は今後も、すぐに使えるソリューションをウェブサイトに提供し、ウェブページで優れたユーザー エクスペリエンスを実現し続けます。また、AMP Project では、AMP 形式のサポートと強化を継続します。同時に、ウェブサイトのパブリッシャーには、AMP と互換性のないサイトで機能を使いたいというニーズもあることも理解しています。そういったパブリッシャーは、サイトで Bento コンポーネントを使い、他の機能に妥協することなく、具体的な UX の課題に対処できるようになります。 

私たちが思い描いているのは、パブリッシャーが自由に AMP を活用して優れたユーザー エクスペリエンスを実現したり、Bento を使って個々のパフォーマンスの問題に対処したり、AMP や Bento の助けを借りることなくページ エクスペリエンスの目標を達成したりできる未来です。 

今すぐ Bento をお試しください！

Bento コンポーネントを試してみたい方は、スタートガイドをご覧ください。チームは、GitHub や Slack チャンネルからフィードバックを送ることを推奨しています。フィードバックは大歓迎です。ぜひご協力ください。質問や問題がある方も、遠慮なくご連絡ください。


Reviewed by Eiji Kitamura - Developer Relations Team

Core Web Vitals という取り組みの目的は、ウェブで優れたユーザー エクスペリエンスを実現するうえで欠かせない品質シグナルに関するガイドを一元的に提供することです。Core Web Vitals は、Google が新しいページ エクスペリエンス ランキング シグナルを計測する際の土台です。これにより、Google 検索で使われる一連のランキング要素に、ユーザー エクスペリエンスが加わることになります。

優れたページ エクスペリエンスの基準を満たすサイトを構築して管理するには、さまざまな要素を考慮して対応することが必要です。サイトオーナーは、測定ツールや自動化ツールの機能を活用してガイドやサポートを得ることができます。サイトの Core Web Vitals を計測するさまざまなツールがあります。また、AMP などの他のツールでも、すぐに使える幅広いパフォーマンス最適化やベスト プラクティスが用意されているので、パフォーマンスのよいウェブサイトを簡単に構築するうえで役立ちます。WordPress プラットフォームを使ってコンテンツを作成、公開している方なら、WordPress の公式 AMP プラグインを使うと、サイトでシームレスに AMP を利用できます。 

この投稿では、WordPress の公式 AMP プラグインを使って構築したウェブサイトのパフォーマンスに注目し、サイトの Core Web Vitals を最適化する際にさらに考慮すべき側面について説明します。また、ガイダンスを得るための AMP プラグイン サポート チャンネルも紹介します。

AMP プラグインの活用

AMP プラグインのランディング ページである amp-wp.org は、AMP プラグイン自体を使って構築されました。つまりこのサイトは、プラグインですぐに利用できる最適化とベスト プラクティスのメリットをすべて享受しています。たとえば、AMP はコンテンツのずれが起きない設計になっているので、通常は CLS の最適化について心配する必要はありません。AMP ページ エクスペリエンス ガイドを使って、このサイトのページ エクスペリエンス関連の動作を確認してみましょう。

ステップ 1: 分析ツールの実行

まず amp.dev/page-experience に移動し、サイトの URL を入力して [Analyze] をクリックします。

ツールが実行され、サイトでさまざまなパフォーマンス テストが行われる間、しばらく待ちます。このツールは、対象ページのページ エクスペリエンスに関連するさまざまな特徴を確認します。

ステップ 2: 結果の解析

すべてのテストが終了すると、AMP ページ エクスペリエンス ガイドにその旨が表示され、サイトの状態について簡潔な概要を確認できます。ご覧のように、amp-wp.org のページ エクスペリエンスは優れていることがわかります。

結果ページを下にスクロールすると、それぞれの Core Web Vital 指標の詳細を見ることができます。

この結果は、パブリッシャーとしてうれしい内容です。AMP が提供するすべてのパフォーマンス最適化とベスト プラクティスにリソースを費やす必要がなく、サイトのパフォーマンスが優れているからです。

CWV をさらに最適化する

自動化ツールを使って Core Web Vitals に影響するたくさんの要素に対処するときは、期待される内容を理解することが重要です。私たちの調査によれば、デベロッパーが AMP ページを提供する方法には、まだ最適化の余地があります。つまり、AMP などのツールを使うことで、目的の達成に向けて大きく前進することができますが、追加の作業をしてさらにサイトを最適化する必要があるかもしれません。

さらに最適化が必要になるのは、以下のような場合です。

  • ページのヒーロー要素の指定が適切でない場合、一部の最適化が行われません。 
  • 場合によっては、広告によって効率が低下し、読み込み時間が増加して、ページの CWV に影響することがあります。この点を意識し、パフォーマンスが優れた広告ソリューションを使う必要があります。
  • 最初のビューポートに表示される場所に重い埋め込み要素がある場合、ページの初期読み込みが遅くなります。
  • サイトで必要となる主要なイメージの最適化が行われていない可能性があります。

amp-wp.org の場合、スコアは高いものの、AMP ページ エクスペリエンス ガイドにはさらにサイトを改善できる 2 つの推奨事項が表示されています。たとえば、読み込み速度（LCP）を改善するために、ページのヒーロー イメージを適切にマークすることが推奨されています。

これは、ページのヒーロー要素（イメージなど）に data-hero 属性を付けることで、簡単に実現できます。これを行うと、AMP プラグインは自動的にヒーロー イメージをサーバーでレンダリングするようになるので、Largest Contentful Paint（LCP）指標が改善され、ページの CWV スコアが上昇します。

サポートを受ける場所

WordPress の公式 AMP プラグインなどのツールを活用しても Core Web Vitals のパフォーマンスが向上しない場合は、WordPress.org サポート フォーラムを通してプラグインをサポートしているチームに相談したり、質問したり、結果を共有したりできます。皆さんを最大限にサポートいたします。

さらに詳しく知りたい方は、AMP や WordPress の公式 AMP プラグインのサイトをご覧ください。また、こちらの動画シリーズでは、WordPress の AMP プラグインの全貌について、解説や知見をご覧いただくことができます。パフォーマンスやページ エクスペリエンス全般についてさらに詳しく知りたい方は、Google 検索セントラルや web.dev のドキュメントをご覧ください。技術的に有用な情報が多数掲載されています。

投稿者 : Google、AMP と WordPress デベロッパー アドボケート、Alberto Medina


Reviewed by Chiko Shimizu - Developer Relations team

AMP にとって、ユーザーのプライバシー保護は非常に重要です。そのため、サイトオーナーが同じことを行えるように、ツールの作成に取り組んでいます。今日は、AMP ページがきめ細かな同意機能をサポートしたことをお知らせします。

ウェブサイトの同意機能によって、ユーザーは、どのようなデータの収集や共有を許可するかを指定できます。このような同意機能には、主に 2 つの形態があります。グローバル同意 では、ユーザーがウェブサイトで一度だけ同意します。たとえば、あるカテゴリの Cookie を許可することに同意するか、ブロックすることをリクエストするかのどちらかです。AMP は以前から、<amp-consent> コンポーネントでグローバル同意をサポートしています。

一方、きめ細かな同意では、ユーザーがウェブサイトで複数の同意項目を選択できます。たとえば、アナリティクスでの使用とパフォーマンス データの収集は許可しても、マーケティング用の Cookie は許可しないユーザーがいらっしゃるかもしれません。

最新の <amp-consent> は、きめ細かな同意とグローバル同意の両方をサポートします。

きめ細かな同意を実装する場合は、パフォーマンス Cookie、マーケティング Cookie、アナリティクスなど、複数の同意の目的を定義し、ユーザーがそれぞれの使用を許可または拒否できるインターフェースを作ります。AMP コンポーネントにラベルを付けることで、ユーザーが指定した目的に同意しない限り、コンポーネントをブロックできます。

<amp-consent> を使うと、独自のソリューションを作成したり、同意管理プロバイダ（CMP）による同意を実装したりすることもできます。

早速今日からお試しください。詳しくは、ドキュメントをご覧ください。こちらの例から始めることもできます。または、以下の動画をご覧ください。

フィードバックや機能リクエストがありましたら、ぜひお知らせください。

投稿者 : AMP Project、デベロッパー アドボケート、Ben Morss


Reviewed by Chiko Shimizu - Developer Relations team

Core Web Vitals は、サイトオーナーがウェブサイトのユーザー エクスペリエンスを改善する場所や方法を理解するために役立つ重要な一歩です。Google のページ エクスペリエンス シグナルでも、このような客観的な指標群に注目することを推奨する予定です。これらは、デベロッパーが現在のすばらしいユーザー エクスペリエンスを改善し、維持するために役立つだけではありません。今後もアップデートされていくので、デベロッパーはウェブが満たすべき最新のパフォーマンスについての情報を得ることができます。 

世界中の AMP Project の貢献者のおかげで、サイトオーナーは AMP ページを作成する際に、パフォーマンスに優れた体験の構築に向けて良いスタートを切ることができます。ただし、他の多くのフレームワークと同様に、AMP でもウェブ開発のベスト プラクティスをすべて実装することはできません。このブログ投稿では、AMP ページを確実に最適化するためにデベロッパーが行うべきことについて共有します。この内容は、AMP ページがパブリッシャーのサイトから提供される場合と、AMP キャッシュから提供される場合の両方に適用できます。

AMP ページのパフォーマンスをさらに高め、Core Web Vitals を満たす

AMP の目的は、優れたユーザー エクスペリエンスを簡単に作れるようにすることです。しかし、優れたユーザー エクスペリエンスに不可欠だと AMP チームが確信しているいくつかの開発プラクティスでは、追加の作業が必要になる場合があります。

AMP のトラフィックを理解する

ページの Core Web Vitals 指標は、ウェブページで実際のユーザー インタラクションを測定して算出されます。AMP では、ユーザーがどのようにコンテンツにアクセスしたかによって、パブリッシャーのドメインか AMP キャッシュのどちらかからページが提供されます。多くの場合、AMP へのアクセスの大部分（半分以上）が自分のドメインで発生します。こちらのガイドに従うと、AMP デベロッパーが AMP キャッシュ上とそれ以外での Core Web Vitals 指標を測定できます。

ウェブ開発のベスト プラクティスを導入する

Google の調査によれば、デベロッパーが AMP ページを提供する方法には、まだ最適化の余地があります。主なポイントは以下のとおりです。

  • サーバーの応答時間を改善する : サーバーが遅い、またはエンドユーザーから離れた場所に存在する場合は、ほぼすべてのものが遅くなってしまいます。CDN と同じように、配信は AMP キャッシュによって最適化されますが、ほぼすべての AMP サイトに AMP キャッシュ外のトラフィックが存在します。つまり、優れたユーザー エクスペリエンスを実現するには、高速で応答が速いサーバーが不可欠です。
  • 大きすぎるイメージの使用を控える : サイトでユーザーが期待する速さを実現するには、ユーザーが使っているデバイスのディスプレイよりも大きいイメージは使わないようにします。 
  • フォントによるレイアウトのずれを回避する : レイアウトのずれは、ウェブページの要素が動的に変更され、コンテンツに「ずれ」が発生することによって起こります。ウェブフォントを取得してレンダリングすると、直接的にレイアウトのずれが発生する可能性があります。 現在推奨している方法は、最初のビューポートで利用するすべての重要なフォントについて、フォントのプリロードと font-display: optional を組み合わせることです。このレイアウトのずれはあらゆるウェブページで日常的に起こっているので、標準化団体とともに追加のガイダンスを提供する作業を進めています。
  • data-hero を使ってヒーロー イメージをマークアップする : 多くのウェブページにとって、ヒーロー イメージは重要なパーツです。そのため、ユーザーが期待する速さで読み込む必要があります。<amp-img data-hero src="…"> のようにして data-hero 属性を使ってヒーロー イメージをマークアップすると、AMP Cache と Optimizer がヒーロー イメージを認識して最適化してくれるので、イメージのレンダリング時間が最大 50% 速くなります。

さらに AMP を改善するためのツール

AMP ページで可能な限り充実したユーザー エクスペリエンスを実現するため、すべてのサイトオーナーの皆さんに、ご自身で対応できるさまざまな最適化を追加で実施することを強く推奨します。最も簡単な方法は、最新の AMP Optimizer を使うことです。これにより、AMP の新しいサーバー側最適化をすべて自動で適用できます。また、昨年には、AMP Page Experience Guide（下図）も公開しました。公開以降、アクションにつながるフィードバックが AMP Page Experience Guide にさらに追加され、利便性が高まりました。この取り組みを推進する原動力となっているのは、このツールを使って AMP ページをテストするウェブサイトです。たとえば、カスタム フォントの読み込みに関する推奨事項が表示されるようになったので、LCP と CLS を最適化できます。

AMP Page Experience Guide の結果のスクリーンショット

AMP ページをこれらの基準に適合させるためのアクションにつながる推奨事項が存在しない場合は、お知らせください。直接サポートいたします。次に示すように、リクエストは AMP Page Experience Guide の中から送信できます。または、Github から直接連絡することもできます。

AMP Page Experience Guide から直接 AMP の問題を送信

まとめ

AMP Project は、ユーザー ファーストなオープンウェブを作るというビジョンただ一点に集中しています。AMP Page Experience Guide を使うと、Core Web Vitals に基づく AMP ページのパフォーマンスを確認できます。パブリッシャーのドメインと AMP キャッシュで、推奨された最適化を実施することをお勧めします。

AMP 開発コミュニティや、皆さんのフィードバックに感謝いたします。いつものように、問題や機能リクエストがありましたら遠慮なくお知らせください。


Reviewed by Eiji Kitamura - Developer Relations Team

AMP コミュニティから特に多く寄せられている要望の 1 つは、高パフォーマンスな AMP コンポーネントを AMP 以外のページでも利用できるようにすることです。AMP Project はこの要望に対処するため、2 年にわたって Bento AMP と呼ばれる取り組みを懸命に進めてきました。その具体的な目的は、完全な AMP ランタイムを使わなくても、AMP コンポーネントがもたらすパフォーマンスとユーザー エクスペリエンスのメリットを活用できるようにすることです。今日のデベロッパー プレビューのリリースにより、その実現に向けて 1 歩前進したことをお知らせします。Bento コンポーネントを試してみたい方は、スタートガイドをご覧ください。

あらゆる場所で AMP コンポーネントを使う理由

AMP Project の目的は、常にユーザー ファーストな体験を作れるようにデベロッパーをサポートすることにあります。この価値提案の中核にあるのは、高パフォーマンスでユーザー中心の AMP コンポーネントです。今回、Bento AMP によって、必要な場所で AMP コンポーネントを使えるようになります。お気に入りのフレームワークや CMS と AMP コンポーネントを組み合わせることができるのです。

たとえば、カルーセルを AMP 以外のページに追加する、有効な AMP を作成する過程で AMP コンポーネントをテストするなど、1 回限りのケースで Bento コンポーネントを使うことができます。Bento AMP プロジェクトの最新の進捗状況は、GitHub のワーキング グループで確認できます。または、AMP の次の展開をご覧ください。

デベロッパー プレビュー

現在のリリースは、いくつかのスタンドアロン AMP コンポーネントのデベロッパー プレビューです。その目的は、今回の実装の技術的な成否に関するフィードバックを集めることです。現在の Bento AMP コンポーネントにはまだ AMP ランタイムが必要ですが、コンポーネントはページが「有効な AMP」でなくても動作します。つまり、ページにスタンドアロン AMP コンポーネントをインポートし、必要に応じて他のカスタム JavaScript と連携できます。

Bento AMP コンポーネントを試す

始めるにあたっては、まずこちらのガイドをお読みください。今回のデベロッパー プレビューの期間中は、以下の Bento コンポーネントを試験運用版として利用できます。

なお、これはデベロッパー プレビューなので、AMP ページで Bento コンポーネントを利用すると、ページは有効でなくなります。この点は、正式版をリリースする際には対応したいと考えています。デベロッパーの皆さんからフィードバックを集めるため、これら最初の Bento AMP コンポーネントを提供できるのはうれしいことですが、Bento コンポーネントのデベロッパー プレビュー期間中に AMP エクスペリエンスをデプロイする場合は、最新の本番バージョンの AMP コンポーネントを使って有効な AMP ページを作成することをお勧めします。

Bento の未来

将来的には、完全版をリリースして Bento コンポーネントをすべての HTML ドキュメントで利用できるようにする予定です。それにより、高パフォーマンスなコンポーネントを使ってすばらしいページ エクスペリエンスを作成できるようになります。そのための変更は今年中に行う予定なので、ご期待ください。

その次は、React バージョンの Bento コンポーネントを npm パッケージとして公開することも計画しています。これにより、React アプリが Bento AMP コンポーネントをさらに簡単に使えるようになります。

今すぐ Bento をお試しください！

Bento AMP コンポーネントを試してみたい方は、スタートガイドをご覧ください。AMP チームは、GitHub や Slack チャンネルからフィードバックを送ることを推奨しています。フィードバックは大歓迎です。ぜひご協力ください。質問や問題がある方も、遠慮なくご連絡ください。

投稿者 : Naina Raisinghani（AMP Project、プロダクト マネージャー）


Reviewed by Chiko Shimizu - Developer Relations team

編集者のメモ : 以下の抜粋記事の出典は、Google のデータ サイエンティスト、Sixing Chen による HTTP Archive Blog への投稿です。より広い AMP コミュニティで共有するため、著者の許可を得た上で以下に転載します。詳細については、出典元のブログ投稿をご覧ください。

はじめに

HTTP Archive Blog に掲載された最近の分析は、Core Web Vitals（CWV）とさまざまなウェブの特性との相関関係に着目しています。CWV はウェブ体験の質を表し、Google が特に重視する指標です。この調査では多くの技術を分析しており、因果関係を示唆するものではありませんが、AMP に関する結果は早い段階で AMP の大きな可能性を示しています。すなわち、AMP はユーザーにすばらしい体験を提供し続け、デベロッパーにとって費用対効果の高いソリューションとなる可能性をもっています。

この調査の目的は、「さまざまなウェブ開発の選択肢を評価する際の参考として、CWV とウェブの特性との関連性について理解を深めるために役立ててもらうこと」にあります。この調査では、HTTP Archive のデータを使用して、CWV といくつかのウェブ技術（JavaScript フレームワーク、JavaScript ライブラリ、CMS、UI フレームワーク、ウェブ フレームワーク、ウィジェットなど）との相関関係を分析しました。 

AMP についての結果を以下に掲載します。斜体になっている部分は、すべて元の調査からの転載です。 

結果

ここでは、関連性についての結果を示すとともに、特に CWV への影響が大きいと思われる特徴的な点について記載します。

関連性についての結果を解釈するうえで重要な点があります。それは、特定のウェブ特性への正の影響と負の影響は、他のウェブ特性との比較においてのみ、また、多くのウェブ技術、多種多様なコンテンツ、さまざまなサードパーティ リクエストが混在したウェブサイトという前提でのみ解釈すべきであるという点です。たとえば、あるウェブ技術が強い正の影響を示していた場合、その技術は他の技術と比べてパフォーマンスが優れているようだと解釈すべきです。その技術をウェブサイトに導入すれば、ウェブのパフォーマンスが向上すると解釈することはできません。

LCP

LCP は数値の対数としてモデリングするので、高いほど悪いことになります。

%HSM 値が 1 に近い予測値は、数値 / カウントの特性値が高いことを示します。つまり、その技術の存在と高い LCP 値には強い関連性があります。%HSM が 0 に近い予測値では、その逆が成り立ちます（%HSM が高くなるほど悪化する）。

同様に、MSD が比較的大きな正の数である予測値は、数値 / カウントの特性値が高いことを示します。つまり、その技術が存在すると、LCP に強い負の影響を与えます。MSD が大きな負の数である予測値では、その逆が成り立ちます（MSD が大きな正の数になるほど悪化する）。

…

ほとんどの JavaScript フレームワークは LCP と強い正の相関を示すので、悪影響が生じることになりますが、AMP は例外です。特に影響が大きいのは、AngularJS、GSAP、MooTools、RequireJS です。

…

CLS

CLS は、与えられたしきい値を満たすかどうかを示すバイナリ インジケーターとしてモデリングします。1 はウェブサイトの CLS が 0.1 未満、0 はそれ以外であることを示します。そのため、1 は 0 より優れています。

%HSM 値が 1 に近い予測値は、数値 / カウントの特性値が高いことを示します。つまり、その技術の存在と CLS がしきい値を満たすことに強い関連性があります。%HSM が 0 に近い予測値では、その逆が成り立ちます（%HSM が低くなるほど悪化する）。

同様に、MSD が比較的大きな正の数である予測値は、数値 / カウントの特性値が高いことを示します。つまり、その技術が存在すると、CLS がしきい値を満たすことに強い正の影響を与えます。MSD が大きな負の数である予測値では、その逆が成り立ちます（MSD が大きな負の数になるほど悪化する）。

いくつかの JavaScript フレームワークは、CLS がしきい値を満たすことと強い負の相関を示すので、悪影響が生じることになります。ただし、AMP、GSAP、React では相関性と影響が低くなっています。AngularJS、Handlebars、Vuejs は特に負の影響が強いものでしょう。

…

AMP にとっての意味

AMP Project の目的は、常にユーザー ファーストな体験を作れるようにデベロッパーをサポートすることにあります。AMP Performance Working Group は、ウェブ上の AMP ページのパフォーマンスを継続的に管理し、定期的に AMP ライブラリのパフォーマンスを強化するアップデートをています。また、AMP は常に最新の状態を維持するライブラリなので、デベロッパーは何の追加作業も必要なく改善点を活用できます。AMP Project には、デベロッパーが簡単に Core Web Vitals のしきい値を満たせるようにするという役割があります。それを果たしている証拠として、上のような相関性についての調査結果を確認できることは私たちの喜びです。 

Google 検索では、ランキングにおけるページ エクスペリエンス シグナルの利用がまもなくロールアウトされる予定です。それに向けて、AMP はウェブ パフォーマンスのベスト プラクティスの遵守に役立っており、すべての AMP ページが Core Web Vitals に準拠できるように最大限のチャンスを与えています。私たちは、そこまで到達できたことをうれしく思っています。以上のような理由から、デベロッパーの皆さんには AMP ページ エクスペリエンス ガイドの活用をお勧めしています。このガイドは、アクションにつながるアドバイスを AMP デベロッパーに提供し、AMP ページのページ エクスペリエンスの改善に役立つツールです。 

いつものように、問題や機能リクエストがありましたらお知らせください。AMP ページ エクスペリエンス ガイドに関することは、特に遠慮なくご連絡ください。


Reviewed by Chiko Shimizu - Developer Relations team

あらゆる規模のサイト運営者やクリエイターは、Web Stories の採用を進め、魅力的で物語性のある体験をユーザーに提供しています。パートナーから寄せられている主な要望は、成長を続けるこのコンテンツ形式を簡単かつ効率的に収益化することです。現在まで、サイト運営者が Web Stories を収益化する主な方法は、直販広告とアフィリエイト リンクでした。

Google は Web Stories 向けにプログラム広告ソリューションをリリースし、アド マネージャーや AdSense を使っている世界中のすべてのサイト運営者がこの仕組みを利用できるようにします。サイト運営者は、この新機能を使って Web Stories から簡単に収益を上げることができます。

ストーリー広告

Web Stories は、ユーザーをコンテンツに没入させるタップ可能な全画面のページです。ストーリー広告は、魅力的な全画面の広告クリエイティブです。ユーザーの操作にシームレスに組み込むことができるので、ストーリーのコンテンツへのエンゲージメントや興味を維持できます。Web Stories でストーリー広告を表示する頻度や場所は、ユーザー エクスペリエンスと収益化の可能性の両方を最適化するために動的に決定されます。 

新しいプログラム機能は現在オープンベータ版で、アド マネージャーや AdSense を使っているすべてのサイト運営者が利用できます。まずは、Google Display Ads からの複数のタイプのモバイル デマンドを活用するところから始め、近日中に他のデマンドソースも追加する予定です。 

Stories にプログラム広告を設定する 

プログラム広告はすぐに使うことができます。広告プラットフォームで以下のいくつかの簡単な手順を実行し、適切に設定した <amp-story-auto-ads> タグを Web Stories に追加します。ビジュアル作成ツールを使っている方は、近日中に広告タグを扱う機能が追加されるはずですが、Web Stories のコードを直接編集してタグを挿入することも可能です。

アド マネージャー

アド マネージャーの設定とアナリティクスのガイド

例:

<amp-story-auto-ads>
<script type="application/json">
{
  "ad-attributes": {
    "type": "doubleclick",
    "data-slot": "/30197360/a4a/my_story_360"
  }
}
</script>
</amp-story-auto-ads>
Code language: HTML, XML (xml)

AdSense

AdSense の設定とアナリティクスのガイド

例:

<amp-story-auto-ads>
<script type="application/json">
{
  "ad-attributes": {
    "type": "adsense",
    "data-ad-client": "ca-pub-0000000000000000",
    "data-ad-slot": "00000000"
  }
}
</script>
</amp-story-auto-ads>
Code language: HTML, XML (xml)

その他のプラットフォーム

その他のプラットフォームと広告ネットワークもストーリー広告をサポートできます。同様のタグ構造が使えるようになる予定です。

クリエイターの収益向上

私たちは、すべての Web Stories クリエイターがデジタル広告の収益を向上させることができるように努力しています。また、今後もこの形式の収益化機能の改善を続ける予定です。ストーリー広告のエコシステムは、他の広告ネットワークや広告ソリューションに対してオープンであるように設計されています。Web Stories との統合をご希望の広告プロバイダの方は、GitHub からお知らせください。

投稿者: Google、Web Stories プロダクト マネージャー、Varun Rao


Reviewed by Chiko Shimizu - Developer Relations Team

AMP Packager は、Signed Exchanges を使って AMP を提供することで AMP URL を改善するツールです。2018 年のリリース以来、たくさんのウェブサイトがこのツールを使って Signed Exchanges を導入してきました。サイト運営者に可能な限り最高の AMP コンテンツを作ってもらう取り組みの一環として、本番環境の設定で AMP Packager を簡単にデプロイしてもらえるよう、継続的に改善を続けています。 

先日は、unix シェル スクリプトと Docker コンテナを使って AMP Packager をデプロイするためのガイドを公開しました。これにより、ユーザーのデプロイ作業は軽減されますが、この手順を実行するには、かなりの技術的知識が必要になります。

そこで、この手順をさらに簡素化するため、Google Cloud Marketplace に AMP Packager Google Cloud Click-to-Deploy Installer を新しく公開したことをお知らせします。

スタートガイド

インストール

https://cloud.google.com/marketplace を開き、[MARKETPLACE を試す] をクリックします。

Marketplace で、“AMP Packager” で検索するか、[Kubernetes アプリ] をクリックして項目の一覧から AMP Packager を探します。

設定

項目を見つけたら、クリックしてデプロイ用のインターフェースを開きます。Click-to-deploy は、すべてブラウザで行える手順を提示し、最低限のユーザー操作で、インストールに必要なことをすべて行ってくれます。下の図で、赤いボックスの部分が必須フィールドです。  

既存の Kubernetes クラスタがない場合は、クラスタゾーンを選択して [Create Cluster] をクリックします。[StorageClass] も同様です。既存のストレージクラス（通常は “standard” という名前）を選択するか、独自のストレージクラスを作成します。

  • [Domain] は、生成する Signed Exchanges の対象となるドメイン名です。 
  • [Country]、[State]、[Locality] および [Organization] フィールドは、Signed Exchange の証明書を生成するために必要な項目です。通常は、DigiCert などの企業が生成します。  これらのフィールドは、証明書の署名リクエストの作成要求に必要です。
  • [ACME Account Email Address] と [ACME Directory URL] も、DigiCert などの SXG 証明書プロバイダの証明書生成設定に必要な項目です。 
  • [AMP Packager Load Balancer Source Range] についての説明は、こちらにあります。AMP Packager は、この設定で指定した Load Balancer Source Range からのみ参照できる点に注意してください。

すべて入力できたら、フォームの下部にある [Deploy] ボタンをクリックします。次の画面が表示されます。

すべて正常にインストールできたら、次の画面が表示されます。

あとは、リバース プロキシ サーバーを設定して、AMP Packager を外部 IP アドレス / ポートに向ける必要があります。  これにより、AMP Packager が AMP ドキュメントを Signed Exchanges にパッケージできるようになります。詳しくはこちらの手順で説明されています。

既存ツールをデプロイするこの新しい方法によって、Signed Exchanges を使った AMP ドキュメントの作成が大幅に簡易化され、技術者以外のユーザーでも使えるようになることを期待しています。 ACME 自動証明書更新サポートと合わせて利用すれば、導入後のメンテナンスの難易度も下がります。

投稿者: Allan Banaag（AMP Project、ソフトウェア エンジニア）


Reviewed by Chiko Shimizu - Developer Relations Team

AMP のインストールと設定
  1. 再び、[Plugins] > [Add New] を開きます（[サイトの URL]/wp-admin/plugins-install.php）。一覧または検索ボックスを使って AMP を見つけて、インストールおよび有効化します。 
  2. プラグインを有効化したら、プラグインの一覧から AMP の [Settings] リンクをクリックし、[Standard Mode] で AMP プラグインを設定します。これで、サイトのすべてのページを AMP を使ってレンダリングするように WordPress を設定できます（AMP プラグインで Standard Mode を使うには、AMP 対応のテーマを利用する必要があります。AMP と Jetpack を使う際に利用できるさまざまな設定オプションについては、AMP for WordPress プラグインのサイトをご覧ください。AMP 対応のテーマを使わない場合も、これをご確認ください）。

可能性は無限大

これで完了です。準備はできました。Jetpack と AMP を使うことで、超高速で最高の SEO を実現する真に傑出したウェブサイトを構築する力が得られます。  

すばらしいウェブサイトを支えるバックボーンを設定できました。次は、Jetpack ブロックを使ってエンゲージメントの高いさまざまな種類のコンテンツを追加する方法をご確認ください。もう一度言いますが、コーディングは不要です。


Reviewed by Chiko Shimizu - Developer Relations Team

2021 年 5 月より、Google 検索でランキングにページ エクスペリエンス シグナルがロールアウトされることが、つい先ほど発表されました。このシグナルは、すべてのサイト デベロッパーが最適化すべき重要なユーザー エクスペリエンス要素に注目します。 

AMP は、ユーザー ファーストなサイトの開発を可能にするために作成されました。また、AMP は、サイト運営者が優れたページ エクスペリエンスを実現できる、コスト効果の高いシンプルなソリューションです。直近の分析によれば、AMP ドメインの 60% が Core Web Vitals 指標に合格しています。一方で、同じ基準に合格した非 AMP ドメインは 12% に過ぎません。（ここでの「合格」とは、ドメインの 75% のページが合格したことを表します）。この投稿では、AMP ページをさらに最適化できるツールやリソースに着目します。

Core Web Vitals を満たすための AMP の改善

AMP Project の貢献者は、AMP ページが非常に優れたユーザー エクスペリエンスを保証できるように作業を継続しています。AMP は、常にリリース スケジュールの最新版が提供されるので、デベロッパーはこのようなメリットを無料で利用でき、AMP のサイト運営者は追加の費用やエンジニアリングの時間を投入する必要がありません。ここでは、進行中の 2 つの作業について、最新情報をお届けします。

  • AMP のペイロードをさらに削減するため、ブラウザに最新の JS を提供することを検討しています。2020 年には、AMP バイナリのサイズを既に 32% 削減しました。このアップデートにより、Largest Contentful Paint（LCP）指標と First Input Delay（FID）指標が向上しました。
  • AMP ページでのイメージの提供方法を自動的にアップグレードする機能をロールアウトし、LCP をさらに削減する予定です。これには、AMP ページでの AVIF サポートの追加、ヒーロー イメージのプリロード、ネイティブ <img> 要素の許可などが含まれています。 

AMP ページを改善するための新ツール

AMP Project は、無料で提供されるユーザー エクスペリエンスの改善作業を続けています。しかし、優れたユーザー エクスペリエンスを提供するうえで、避けては通れない開発慣習がいくつかあります。これらは、AMP ランタイムでは実装できないものです。

AMP Page Experience Guide は、AMP ページのページ エクスペリエンスの具体的な改善につながるアドバイスを AMP デベロッパーに提供します。私たちは、このガイドの推奨事項に従えば、AMP ページのページ エクスペリエンス基準を満たすことにつながると強く確信しています。また、AMP ページをこれらの基準に合格させる具体的な手段が見つからないという珍しいケースでも、AMP デベロッパーをサポートします。

Google の AMP Project への貢献

Google は AMP への注力を続けます。また、優れたユーザー エクスペリエンスを実現するウェブページを保証するという AMP Project の目標に確信を持っています。可能な場合、Google 検索では、今後も AMP バージョンのウェブページがユーザーに提供されます。これにより、ユーザーはプライバシーを保護したプリレンダリングと AMP キャッシュによる高速化というメリットを享受できます。その場合、検索結果に対するページ エクスペリエンス シグナルは、AMP ページが利用できればそのパフォーマンスに基づいて評価されます。

まとめ

AMP Project は、強力でユーザー ファーストなオープンウェブを作るというビジョンただ一点に集中しています。ページ エクスペリエンス ランキング シグナルは毎年進化しますが、私たちは、AMP が最も簡単に優れたページ エクスペリエンスを実現できる方法であると保証することで、今後も AMP デベロッパーをサポートし続けます。 

AMP を使って優れたページ エクスペリエンスを実現する方法についてもっと詳しく知りたい方は、こちらのスタートガイド リソースからご覧ください。既に AMP を使っている方は、AMP Page Experience Guide を使って AMP ページのページ エクスペリエンス指標を調べることができます。

今回の最新のお知らせに関して質問やフィードバックがある場合は、お知らせください。皆さんの健康をお祈りします。 

投稿者: Naina Raisinghani（AMP Project、プロダクト マネージャー）


Reviewed by Chiko Shimizu - Developer Relations Team

3 週間ほど前に、AMP Fest を初開催しました。そこでは、コミュニティがオンライン上に集結し、AMP の世界の最新情報やうれしい情報が共有されました。この AMP Fest では、新しい AMP Page Experience Guide のリリースや AMP For Email の新たなクライアントのサポートなど、AMP エコシステム全体に及ぶすばらしい進展の数々が発表されました。

イベントの基調講演を見直し、すべてのポイントを復習する

この記事では、AMP Fest を振り返り、皆さんが見逃してしまったかもしれないニュースをもれなくお届けします。

AMP とページ エクスペリエンス

AMP Fest で発表された最新情報の中でも、特に注目を集めたのは、優れたページ エクスペリエンスを実現するための作業でした。AMP はユーザーファーストなサイトの構築に役立ててもらうために開発されました。そのため、サイト運営者がすばらしいページ エクスペリエンスを作るうえで、費用対効果の高いシンプルなソリューションであると確信しています。それと合わせて、AMP ドメインの 60% が Core Web Vitals 指標に合格*していることもお知らせしました。一方で、同じ基準に合格した非 AMP ドメインは 12% に過ぎません。 

* ここでの「合格」とは、ドメインの 75% のページが Core Web Vitals 指標に合格したことを表します。

AMP とページ エクスペリエンスの詳細については、こちらを参照

AMP ページが 1 つ残らずこの指標に合格するという目標を達成できるように、AMP Page Experience Guide もリリースしました。これは、AMP ページのパフォーマンスの具体的な改善方法について、実際のアクションにつながる AMP 固有のフィードバックを提供してくれる新しいツールです。これにより、AMP ページがページ エクスペリエンス シグナルを満たさない場合に、アクションにつながるフィードバックを提供するか、最後の手段としてパフォーマンスの問題に対処する個人サポートを提供することを保証できるようになります。

新しい AMP Page Experience Guide による AMP ページのテストはこちらから

Web Stories

今年、AMP Stories の名称を Web Stories に変更することをお知らせしました。これは、#nocode ツールを使ってこのフォーマットを活用しているクリエイターやコンシューマーが増加している状況を受けてのことです。それ以来、サイト運営者やウェブ クリエイターによるこのフォーマットの採用が続いています。

サイト運営者やウェブ クリエイターによる Web Stories フォーマットの採用が続いている

この勢いに乗り、カスタマイズ可能なクイズ、投票機能、360 度動画の組み込み、高機能なオープンソース Story Player を使って Web Stories をサイトに直接埋め込む機能など、Web Stories フォーマットの最新アップデートについてお知らせしました。これは、Google の Web Stories チームからの Discover に Web Stories が登場するという最近の発表に続くものです。Discover は Android および iOS の Google 製アプリの一部で、毎月 8 億人以上が利用しています。

AMP for Email

現在、AMP for Email の商用利用が始まって 1 年半以上が経過しています。そして今でも、毎日のようにダイナミック メールの新しいユースケースに驚かされています。AMP Fest では、Verizon Media（Yahoo Mail）が AMP のデベロッパー プレビューをリリースしたことをお知らせしました。そして、2021 年の第 1 四半期には、Salesforce Marketing Cloud に AMP メールが導入される予定です。数百万人の新しいユーザーにダイナミック メールをお届けできるのが楽しみです。 

AMP For Email の送信者が顧客に提供しているエクスペリエンスは実に見事なもので、私たちはそれをうれしく思っています。AMP Fest では、AMP メールを使って顧客やクライアントの時間や費用を節約している送信者を紹介しました。以下のトークで、さまざまな送信者がダイナミック メールを使って実現したすばらしい成果をご覧ください。

AMP For Email で成功したメール送信者を紹介するトーク

世界の AMP 成功事例

このイベントでは、とてもたくさんのうれしいニュースが発表されるとともに、すばらしいことに、AMP を使っている世界中のデベロッパーやサイトオーナーが、AMP の実装体験や AMP を最大限に活用するヒントを共有しました。 

Uno TV のソフトウェア エンジニアリング マネージャーである Violeta Rosales 氏は、このデジタル ニュース局がどのようにウェブサイトを AMP ファーストに移行したかについて説明しました。さらに、その移行作業の間に Uno TV が実際に体験したメリットや課題についてもお話ししています。 

リクルートのシニア ソフトウェア エンジニアである Yosuke Furukawa 氏は、AMP ファーストなウェブサイトを構築する際の手順やヒントを説明しました。さらに、Next.js などのフレームワークや、オフキャッシュ AMP などの運用戦略に関するトピックにも触れています。 

Televisa Digital の CTO である Antonio González de León 氏は、Televisa が AMP ファーストに移行した際の教訓を分かち合ってくれました。新しいサイト運営者やデベロッパーがベテランのメディア事業から学ぶことができる、その他の教訓も含まれています。 

JvM TECH の取締役である Thomas Feldhaus 氏は、AMP が広告代理店のウェブサイト作成プロセスを加速させるためにどう役立ったかについて話しました。しかも、実行時の高い品質は一貫して維持しています。 

そして最後に、Automattic のグロース エンジニアリング リードである Jason Caldwell 氏が、AMP ファーストによってどのように WordPress.com のコンバージョン率を上昇させ、獲得コストを下げて、WordPress.com の主なランディング ページのパフォーマンスを向上させたかについてお話ししました。

ありがとうございました

この記事では紹介しきれないほどたくさんのすばらしいトークがありました。ぜひイベントのプレイリストを確認し、見直してみてください。イベントをこれほどの成功に導いてくださった皆さんに感謝します。AMP が誕生したのはわずか 5 年あまり前です。それ以来、AMP は大きく進化し、私たちはこれまで以上に AMP の明るい未来に期待しています。

投稿者: Alex Durán（AMP プロジェクト マーケティング、 Google）


Reviewed by Chiko Shimizu - Developer Relations Team

編集者のメモ: 以下のゲスト投稿は、Jung von Matt のデベロッパー、Robin Van Opstal 氏と Matthias Rohmer 氏によるものです。
AMP Playground を使うと、あらゆる種類の AMP プロダクトのアイデアをすばやく試作できます。ウェブサイトでも、ストーリーでも、広告やメールでも大丈夫です。そしてうれしいニュースがあります。ここ数週間で UX 全体が効率化され、たくさんの機能が追加されて、これまで以上に AMP の開発に役立つようになったことです。

AMP コンポーネントの自動インポート

AMP では、使用するコンポーネントの <script> 要素をドキュメントの <head> に追加する必要があります。これを行い続けるのは面倒な作業です。script 要素や AMP コンポーネントがユースケースにとって適切なものかどうかを試すような場合は、特にそれが当てはまります。実際のプロジェクトでは、AMP Optimizer が足りないリソースヒントを追加したり、不要なものを削除したりしてくれます。これと同じ機能が、Playground でも利用できるようになりました。入力と同時に、使用するコンポーネントの <script> タグが追加されます。









ドキュメントのインポート

デベロッパーが、まったく新しいものを試すのではなく、既存の AMP サイトに機能を追加できるかどうかをテストしたい、と考えることも珍しくありません。テンプレート ダイアログで amp.dev のサンプルを選ぶと、それを開始点として使うことはできましたが、このたび、任意の AMP ドキュメントを AMP Playground に直接インポートできるようになりました。この操作は、インポートをクリックしてドキュメントの URL を貼り付けるだけで実行できます。

AMP メールをインポートすることもできます。EML 形式でローカル ディスクに保存し、AMP Playground にドロップするだけです。














AMP の状態を検査する

amp-bind は、AMP のウェブサイトでインタラクティブ性を実現する強力なツールです。これを使えば、ゲームを作ることさえできます。これほどの可能性があるにもかかわらず、この機能を使うと、わりと簡単に収拾がつかなくなってしまうことがあります。しかし、アップデートされた Playground では、ドキュメントで何が起きているのかをとても簡単に確認できます。amp-bind を使うドキュメントをインポートまたは作成し、AMP State fly-in を開いてみてください。プレビューすると、状態が更新される様子をリアルタイムに確認できます。














amp-script の自動ハッシュ

数か月前に、AMP を次のレベルに引き上げるコンポーネント amp-script が追加されました。これにより、有効な AMP にカスタム JavaScript を追加できます。ただし、注意事項があります。ページにインライン JavaScript を追加した場合、それが有効になるのは、スクリプトの内容がドキュメントの <head> で定義されているハッシュに一致した場合のみです。
スクリプトにわずかな内容を追加するたびにこのハッシュを手動で更新するのは、現実的ではありません。開発やテストを行う場合は、特にそれが当てはまります。この点をサポートするため、AMP Playground は、ドキュメントのすべてのインライン amp-script について自動的に CSP ハッシュを作成します。そのため、ハッシュの更新を気にすることなく、新機能の開発に集中できるようになります。

試験運用機能の有効化

新しい AMP 機能は、たくさんの AMP ドメインにロールアウトされる前に、慎重に開発やテストが行われます。新機能によって本番環境のサイトで問題が発生することがないようにしつつ、自分で AMP をビルドしなくてもテストできるように、Playground は試験運用版フラグを使って未完成の機能を隠蔽しています。試験運用版機能の詳細については、amp.dev の試験運用版機能の有効化をご覧ください。

Playground で試験運用版機能を有効化する場合、ブラウザのコンソールを開いて手動で AMP.toggleExperiment() を呼び出す必要はありません。Experiments fly-in を開き、リストから機能を選ぶだけで有効化できます。後ほど機能を無効化するのも簡単です。














共有する

そしてついに、たくさんのリクエストが寄せられていた機能が完成しました。Playground で作ったスニペットを URL で共有する機能です。その他の機能と同様、[SHARE] ボタンを押すと共有用の URL を含む fly-in が表示されます。














まとめ

これらの新機能によって、Playground がさらに便利なものになることを期待しています。いつものように、まだ足りない機能や期待どおりに動いていない機能がある場合は、GitHub からフィードバックをお送りください。

Reviewed by Chiko Shimizu - Developer Relations Team

新しく登場した Eleventy 向けの AMP プラグインを紹介します。静的サイト生成ツールである Eleventy を使うと、テンプレートを簡単に管理してサイトを構築できます。静的サイトをインタラクティブにしたり、サードパーティのコンテンツを埋め込んだりしたい場合は、AMP と合わせて利用すると非常に便利です。新しく登場した AMP Eleventy プラグインを使えば、AMP ボイラープレートの設定や AMP コンポーネントのインポートに煩わされることなく、はるかに簡単にテンプレート内の AMP コンポーネントを使うことができます。

その中核となる AMP は、ウェブ コンポーネント フレームワークです。AMP のコンポーネントはパフォーマンスとアクセシビリティを考慮して設計されており、実にさまざまな状況で活用できます。このプラグインは、AMP を単なるコンポーネント ライブラリとして使用する方法を示す好例です。たとえば、このプラグインでは AMP Cache 配信をオプトアウトしたり、AMP ランタイムをセルフホストしたりするオプションが提供されます。そのため、ページをどこからどのように提供するかを完全に制御できます。以降では、プラグインの詳細と使い方について説明します。

AMP と Eleventy を組み合わせることが望ましいケース

テキストとイメージだけの簡単なブログを公開する場合なら、AMP を使う必要はありません。実際、そのような場合はプレーン HTML と CSS を使う方がはるかに合理的です。
AMP を使う方が合理的なのは、車輪の再発明をすることなくサイトでもっと高度な機能を使いたい場合です。
次に、イメージ カルーセルの例を示します。このカルーセルは読み込み時にフェードインし、ライトボックス モードも搭載されています。この例では、マークダウン ファイルで直接 AMP コンポーネントを使いました。AMP コンポーネントはすぐに使うことができます。必要な AMP コンポーネント スクリプトをインポートして AMP ドキュメントを設定する作業は、すべて AMP Eleventy プラグインが行ってくれます。

# Hello AMPHTML World

<amp-carousel lightbox amp-fx="fade-in" layout='responsive' width='600' height='400' type='slides'>
  <amp-img src='https://picsum.photos/id/1015/600/400' layout='fill'></amp-img>
  <amp-img src='https://picsum.photos/id/1016/600/400' layout='fill'></amp-img>
  <amp-img src='https://picsum.photos/id/1018/600/400' layout='fill'></amp-img>
</amp-carousel>




フェードとライトボックスを組み込んだ AMP カルーセルの例

AMP のもう 1 つのメリットは、最適化された豊富なサードパーティ統合がそろっていることです。その一部は、shortcodes を使って直接 AMP Eleventy プラグインに組み込まれています。

Checkout this video:
{% video "my-video.mp4" %}
Or this tweet (the number specifies the embed height):
{% twitter "1182321926473162752" 472 %}
Here is a Youtube video:
{% youtube "v0BVLgEEuMY" %}
And of course Instagram:
{% instagram "BMQ8i4lBTlb" %}
このプラグインには、デフォルトでウェブ パフォーマンスのベスト プラクティスも適用されています。AMP Optimizer が統合され、eleventy-img を使って自動的にイメージが最適化されます。つまり、すぐに最大限の AMP パフォーマンスを利用できます。
ただし、AMP の使用について注意すべき点が 1 つあります。AMP のパフォーマンスが保証されるのは、ページで AMP だけが使われている場合に限られます。たとえば、AMP ランタイムがページ読み込み時のコンテンツの移動を抑止できるのは、ページのすべての要素の高さを前もって計算できる場合に限ります。ページ内に AMP コンポーネントや amp-script がサポートしない機能が必要になる場合は、別のテクノロジーを使う方がよいでしょう。ただし、将来的にこのようなユースケースをサポートするため、AMP コンポーネントをスタンドアロン コンポーネントとして利用できるようにする作業も進めています。

スタートガイド

この機能を使ってみるには、NPM から AMP Eleventy プラグインをインストールします。

$ mkdir eleventy-amp-demo
$ cd eleventy-amp-demo
$ npm init --yes
$ npm install @ampproject/eleventy-plugin-amp --save-dev
次に、Eleventy 設定の .eleventy.js にプラグインを追加します。

const ampPlugin = require('@ampproject/eleventy-plugin-amp');
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(ampPlugin);
};
そしていよいよ、コンテンツの作成を始めます。

$ echo '# Hello World

![image](https://unsplash.it/500/400)

{% twitter "1182321926473162752"  472 %}' > index.md
ローカルでサイトを利用するには、Eleventy をインストールして実行する必要があります。

$ npm install -g @11ty/eleventy
$ eleventy --serve
すると、http://localhost:8080 から新しく作成した有効な AMP サイトを確認できます。

オフキャッシュ AMP とランタイムのセルフホスト

AMP Cache は一切使わず、AMP を単なる UI コンポーネント ライブラリとして使うことができます。これを実現するために、2 つの（オプション）機能が組み込まれています。
  1. AMP Cache のオプトアウト: ページが AMP Cache から提供されるのを防ぎます（たとえば、Google 検索や Bing に表示される場合）。サイトを別の AMP Cache オリジンから提供したくない場合は、これが合理的です。この機能を使うと、<html> タグから稲妻マークが削除され、AMP Cache がページを提供しなくなります。 
  2. ランタイムのセルフホスト: AMP は継続的に改善されています。自動的に最新機能を取得するには、cdn.ampproject.org から AMP のランタイムやコンポーネント スクリプトを読み込むのがベストです。しかし、どの AMP バージョンを使うかを細かく制御したい場合は、AMP ランタイムを自分でホストすることもできます。AMP Eleventy プラグインには、AMP Toolbox の新しい fetch-runtime モジュールが組み込まれています。このモジュールは、サイトのビルドの一環として AMP ランタイムをダウンロードします。こうすることで、パフォーマンスのメリットが増加します。最初のレンダリングで、cdn.ampproject.org への 2 つ目の HTTP 接続のセットアップが必要なくなるからです。
以上の機能は、次のオプションで有効化できます。

eleventyConfig.addPlugin(pluginAmp, {
    ampCache: false, 
    downloadAmpRuntime: true,
    ampRuntimeHost:
      process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080',
 });
package.json ビルド スクリプトで忘れずに環境変数を設定してください。

"scripts": {
    "build": "ENV=prod eleventy",
    "watch": "eleventy --watch",
    "serve": "eleventy --serve"
  }

AMP ページのさらなる高速化に向けて

AMP チームは、AMP のパフォーマンスの改善作業を続けています。Eleventy プラグインを使うと、今後予定されているさまざまな機能をすぐに試すことができます。
これらの機能を有効化するには、設定に次のオプションを追加します。

eleventyConfig.addPlugin(pluginAmp, {
    ampCache: false,
    downloadAmpRuntime: true,
    ampRuntimeHost:
      process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080',
    experimentEsm: true,
    experimentImg: true,
    validation: false,
    imageOptimization: {
      urlPath: '/img/',
    },
  });
注意点として、これらはまだ AMP Validator でサポートされていません。つまり、この AMP ページは AMP Cache で提供できる有効なものではありません。しかし、オリジン上では AMP の最高のパフォーマンスを発揮できます。

まとめ

ぜひお試しいただき、感想をお聞かせください！Eleventy AMP プラグインを使うと、AMP を使ってすばやく簡単に新しいウェブサイトを作成できます。さらに簡単に試せるように、すぐに使える AMP ブログ スターター テンプレートも用意しています。
投稿者: Google デベロッパー アドボケート、Sebastian Benz

Reviewed by Chiko Shimizu - Developer Relations Team

先日、amp-list コンポーネントがページ読み込み時に AMP state を描画する機能をサポートしました。これにより、いくつかのユースケースで AMP ページの作成が簡単になり、ユーザー エクスペリエンスが向上します。

ユースケースの例: 検索結果

ユーザーが検索した後に表示される検索結果ページについて考えてみましょう。多くの検索結果には、結果のソート順を変更（降順から昇順など）したり、現在の検索結果セットに追加の絞り込み条件（「小型」の商品のみ表示など）を適用したりするボタンなどが付いています。

AMP でこれを実現する場合、amp-list コンポーネントを使うアプローチが一般的です。その際、“[src]” 属性は AMP state から構築した URL にします。AMP state を更新するボタンをクリックすると、この URL が更新されて amp-list の更新がトリガーされます。

<amp-state id="filter">
    <script type="application/json">
      {
        "order": "atoz",
        "size": "small"
       }
    </script>
  </amp-state>

  <button on="tap:AMP.setState({filter: {order: 'atoz'})">Increasing</button>
  <button on="tap:AMP.setState({filter: {order: 'ztoa'})">Decreasing</button>

  <amp-list
    ...
    [src]="'/api/search?order=' + filter.order + '&size=' + filter.size"
    ...>

AMP リストページ読み込み時の画面のちらつき

ボタンで AMP state を更新すれば、ページの更新の残りの部分は AMP フレームワークが行ってくれるので、通常はこれでうまく動作します。

しかし、これにはマイナス面もあります。最初のページ読み込みでは、“src” 属性の URL を使ってバックエンドに対する API 呼び出しが行われるまでの間、amp-list の結果がない状態でページが表示されます。その後、ページが更新されて結果が表示されます。

<amp-list
    src="/api/search?order=atoz&size=small"
    [src]="'/api/search?order=' + filter.order + '&size=' + filter.size"
    ...>
そのため、“src” URL の応答に時間がかかる場合、ページがちらつく可能性があります。このようなユーザー エクスペリエンスは望ましくありません。

ページのちらつきを回避する

AMP には、この問題を回避するためのテクニックがあります。たとえば、ページに div 要素を追加し、最初のページの API の結果を使ってサーバーサイドでレンダリングを行います。初期状態では、div は表示、amp-list は非表示になっています。ユーザーがボタンをクリックすると、div が更新されて非表示になり、amp-list は表示されます。

<div
    hidden="false" 
    [hidden]="filter.changesMade"
  >
    ... server side rendered content ...
  </div>
  <amp-list
    hidden="true"
    [hidden]="!filter.changesMade"
    src="/api/search?order=atoz&size=small"
    [src]="'/api/search?order=' + filter.order + '&size=' + filter.size"
    ...>
このアプローチは問題なく動作しますが、いくつか欠点もあります。たとえば、管理が必要な AMP state が増え、サーバー側とブラウザ側で同じようにコンテンツを描画するという複雑な処理を追加する必要もあります。

amp-state プレフィックスの導入

現在の AMP では、もっとシンプルなソリューションがあります。amp-list は API 呼び出しを行わずに AMP state に基づいてコンテンツを描画する機能をサポートしており、それを活用します。API 呼び出しは、amp-list が直接行うのではなく、AMP state が更新されたタイミングで行われます。

<amp-list
    src="amp-state:searchResponse"
    [src]="searchResponse.items"
    ...>
先日 AMP に追加された “amp-state:” プレフィックスを使うと、API 呼び出しを行わずに AMP state から初期状態の amp-list をレンダリングできます。“src” 属性と “[src]” 属性の両方で同じ “searchResponse” AMP state を参照している点に注意してください。これにより、整合性が保証されます。これは amp-state 要素と連動して動作します。この要素は JSON コンテンツで初期化し、その後 “[src]” 属性の API 呼び出しで更新されます。

<amp-state
    id="searchResponse"
    [src]="'/api/search?order=' + filter.order + '&size=' + filter.size"
  >
    <script type="application/json">
      ... server side injected initial AMP state goes here ...
    </script>
  </amp-state>
つまり、ページ読み込み時の AMP state は、ページに埋め込まれた JSON で初期化されます。その後、amp-list は Mustache テンプレートを使ってその状態を描画します。最初の AMP state は、サーバーサイドでページに注入されます。JSON は多くのプログラミング言語でサポートされているので、注入プロセスは簡単です。（AMP Mustache ライブラリは JavaScript でのみ利用できます。そのため、サーバーサイド レンダリングに PHP を使っているような場合は、組み込みが難しくなります。）

この例では、初期ページが描画された後、ボタンが押されたタイミングで “filter.order” や “filter.size” が更新されます。すると、amp-state コンポーネントが API 呼び出しを行い、“searchResponse” AMP state を更新します。これにより、amp-list コンポーネントが Mustache テンプレートを使って更新されたレスポンスを描画します。

その結果、最初の描画を行うために必要な個別の API 呼び出しは行わず、返されたページに JSON を注入して amp-list を初期化できるようになります。これには、それぞれのボタンやコンポーネントの責任を明確に区別できるようになるという効果もあります。ユーザー インターフェースは状態の更新を制御し、AMP は適切にページを更新するために必要な一連の更新作業と API 呼び出しを行います。

さらに、AMP ページの Mustache テンプレートとサーバーサイドの描画ロジックを一致させるというメンテナンス上の課題も解消されます。

状態を持つページを設計する

ここまでは、新しい “amp-state:” プレフィックスがどのように動作するかについて、技術的な側面に焦点を当てて説明しました。しかし、メンテナンス性が高い優れたページはどのようなものかという別の疑問も存在します。AMP は複雑なバインド式をサポートしていますが、このような式を限界まで活用しても、複雑すぎてメンテナンスが難しいページになってしまいます。

たとえば、Model/View/Controller（MVC）パターンでは、基盤となるデータ構造（モデル）を取得する処理と、ページにコンテンツを描画するコード（ビュー）を分割することが推奨されています。その場合、コントローラがモデルを変更し、ビューの更新をトリガーします。

AMP ページでも、同じパターンを使うことができます。AMP state はモデル、amp-list とバインド式は「ビュー」の定義、“on” 属性はコントローラのロジックの実装です。コントローラのロジックがさらに複雑になる場合は、amp-script を利用できます。つまり、ビューのロジック（バインド式）に複雑すぎるロジックを入れないようにするのが優れた設計です。その代わり、描画しやすいモデルを設計し、複雑なロジックが必要になる場合は、新しい状態を計算するコードにそのロジックを移動します。

まとめ

結論としては、amp-list 要素の “src” 属性で新しく利用できるようになった “amp-state:” プレフィックスを使うと、ページ読み込み時に追加で API 呼び出しを行う必要はなくなります。これにより、最初のページの描画時間を短縮し、amp-list 使用時のページのちらつきを抑えることができます。

さらにこの方法は、“hidden” 属性を使って div 要素と amp-list 要素の表示と非表示を切り替えるという従来の回避策よりもシンプルです。div 要素が必要なくなるだけでなく、サーバーはサーバーサイドで JSON を描画するだけで済みます。このため通常は amp-list Mustache テンプレートで生成される完全な HTML マークアップが不要になり、コードが冗長になることもありません。

AMP ページでは適切な関心領域の分離が行われるため、末端のモデルもシンプルな AMP マークアップになることが多いはずです。ボタンは AMP state の更新、amp-list は AMP state からの読み取りだけで、あとは AMP が一連の更新処理などを行ってくれます。

いつものように、問題や機能リクエスト、特に AMP での動的コンテンツの描画に関する内容がありましたら、遠慮なくお知らせください。


投稿者: Google、デベロッパー アドボケート、Alan Kent

Reviewed by Chiko Shimizu - Developer Relations Team

ストーリーの共通パターンの 1 つとして、テキストを含むイメージを使うことがあります。理想的なアクセシビリティとしてはこれは避けるべきですが、どうしても使わざるを得ない場合は、alt テキストにもその内容を記述してください。

動画の aria-label

ストーリーの動画は、実際にはほとんどのウェブ ドキュメントのイメージと同じような役割を果たします。そのため、動画には alt テキストと同等の機能を持つ `aria-label` を指定してください。

動画の字幕やキャプション

ストーリーの動画には字幕やキャプションをつけるようにしましょう。多くのユーザーが音声なしでストーリーを見ています。動画に含まれるテキストはスクリーン リーダーなどの補助テクノロジーには認識されないので、適切な要素に置き換える必要があります。

コントラスト

ストーリーはメディアを駆使しており、イメージや動画の上にテキストを重ねるというのが一般的なデザイン パターンです。このパターンを採用する場合、背景に対して十分にコントラストのあるテキストを使うことが重要です。一般的なテクニックとして、テキスト フィールドの背景色を使って、テキストの色に対して効果的なコントラストをつける方法があります。



テキスト フィールドで背景色を使うと、テキストに十分なコントラストがついて読みやすくなる

キーボードによるナビゲーション

Web Story の各ページでは、ユーザーが目で見る場合と、補助テクノロジー（キーボードによるナビゲーションなど）の両方で、明確な情報フローが確立されている必要があります。そこで重要なのは、Web Story のマークアップが、意図したとおりの順序で体験できることです。これは DOM 構造の中で自然に実現できますが、簡単にはできない場合、意味のある順番で進むように `tabindex` 属性でフォーカス順序を指定できます。

アクセシビリティ監査

今回ご紹介したベスト プラクティスに従うことは、ストーリーで優れたアクセシビリティを実現するために有効な最初のステップです。しかし、それだけで完璧な結果が保証されるわけではありません。私たちも他のウェブの有力者と同じように、アクセシビリティ監査を行い、アクセシビリティのプロによるサポートを得たうえで、最高の結果を実現することを推奨しています。

まとめ

Web Story はアクセシビリティを提供できるように設計されており、ユーザー エクスペリエンス全体にわたって重要な機能を組み込むことができます。しかし、メディア要素にアクセシビリティ テキストや字幕を入れる、重要なテキストのコントラストに注意を払うといったコンテンツのベスト プラクティスへの準拠は、ストーリーの制作者にかかっています。

ストーリーをアクセシビリティのあるウェブ メディアにすることに協力いただいている皆さん、どうもありがとうございます。

投稿者: Google、Web Story プロダクト マネージャー、Varun Rao

Reviewed by Chiko Shimizu - Developer Relations Team