この記事は AMP Project プロダクト マネージャー、Lisa Wang による Accelerated Mobile Pages Project の記事 "New in AMP: Position observers, fluid ads and improved analytics for video & beyond" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
![scrollable]()
amp-position-observerを使うと、AMP でスクロールと連動する柔軟かつ高パフォーマンスなアニメーションを実現できます。このコンポーネントは、さまざまな機能に利用できます。たとえば、視差効果を出したり、イメージをわずかにズームやフェードさせたり、ビューポートを通過する際にアニメーションを開始または停止したりできます。詳しくは、ドキュメントをご覧ください。また、サンプルやテンプレートも紹介する予定です。
![sidebar]()
簡単に使えるレスポンシブ レイアウトや srcsetなどの機能を搭載した AMP は、レスポンシブにデザインされています。改善された amp-sidebarがリリースされ、ビューポートの幅に応じて表示フォーマットを変えられるようになったため、レスポンシブなページがさらに作りやすくなっています。たとえば、モバイルでは表示と非表示を切り替えられるサイドバーを、PC では固定位置のヘッダーを表示できるようになります。
![video_snippet]()
AMP で動画アナリティクスがネイティブ サポートされました。それとともに、amp-analytics 内で amp-video と併用してエンゲージメント データを収集できるいくつかの新しい動画トリガーと動画変数もリリースされています。詳しくは、ドキュメントをご覧ください。
現在のところ、サポートは amp-video コンポーネントに限られていますが、動画プレーヤー ベンダーの皆さんは、動画インターフェースを使ってそれぞれの動画プレーヤー実装のサポートを AMP に組み込むことができます。この方法に興味がある動画プレーヤー ベンダーの方は、GitHub からご連絡ください。
最近 AMP ビューアーに、より直接的にクライアント ID を管理できる機能を追加しました。これにより、デベロッパーがページに含めたベンダー識別子や API キーを AMP ビューアーが受け取れるようになるため、AMP ビューアーでクライアント ID 情報のリクエスト元を識別できるようになります。
この改善された機能を使えば、たとえば AMP ページと非 AMP ページ間で一貫性のある ID を提供したりできるようになります。最近 Google は、この変更点を活用して AMP トラフィックを詳しく理解できるようにする Google アナリティクス プロダクトのアップデートについてお知らせしました。AMP ページで Google アナリティクスを利用している方は、ぜひご確認ください。
![fluid_ad]()
AMP コンテンツにリフロー ポリシーを設定した場合、リクエスト時にサイズがわからない広告をリクエストできないという声がサイトオーナーから寄せられています。この問題を解決するため、fluid 広告のサポートをリリースしました。この機能は現在、オープン アルファ版テストとして利用できます。
今後のアナリティクスについて、現在集中的に取り組んでいる分野は以下の通りです。
作業したりフィードバックを寄せてくださっている AMP 開発コミュニティの方々に感謝いたします。いつものように、問題や機能リクエストがありましたら遠慮なく GitHubからお知らせください。
Reviewed by Yoshifumi Yamaguchi - Developer Relations Team![]()
今回の投稿は、定期的な AMP ロードマップのアップデートに代わる、新たな試みです。この新しい「AMP の新機能」フォーマットでは、すぐに試すことができるアップデートを重点的に紹介します。進捗を反映するため、AMP ロードマップのアップデートも引き続きお伝えします。直近の目標を取り上げているこの投稿でも、そのためのセクションを設けています。まずは、以下のアップデートについてお伝えします。
スクロールと連動した柔軟なアニメーションを実現する <amp-position-observer>
amp-position-observerを使うと、AMP でスクロールと連動する柔軟かつ高パフォーマンスなアニメーションを実現できます。このコンポーネントは、さまざまな機能に利用できます。たとえば、視差効果を出したり、イメージをわずかにズームやフェードさせたり、ビューポートを通過する際にアニメーションを開始または停止したりできます。詳しくは、ドキュメントをご覧ください。また、サンプルやテンプレートも紹介する予定です。
レスポンシブ デザインを強化する <amp-sidebar>
簡単に使えるレスポンシブ レイアウトや srcsetなどの機能を搭載した AMP は、レスポンシブにデザインされています。改善された amp-sidebarがリリースされ、ビューポートの幅に応じて表示フォーマットを変えられるようになったため、レスポンシブなページがさらに作りやすくなっています。たとえば、モバイルでは表示と非表示を切り替えられるサイドバーを、PC では固定位置のヘッダーを表示できるようになります。
AMP でのネイティブ動画アナリティクス
AMP で動画アナリティクスがネイティブ サポートされました。それとともに、amp-analytics 内で amp-video と併用してエンゲージメント データを収集できるいくつかの新しい動画トリガーと動画変数もリリースされています。詳しくは、ドキュメントをご覧ください。
現在のところ、サポートは amp-video コンポーネントに限られていますが、動画プレーヤー ベンダーの皆さんは、動画インターフェースを使ってそれぞれの動画プレーヤー実装のサポートを AMP に組み込むことができます。この方法に興味がある動画プレーヤー ベンダーの方は、GitHub からご連絡ください。
クライアント ID の改善により、AMP と非 AMP 間の移動を把握
最近 AMP ビューアーに、より直接的にクライアント ID を管理できる機能を追加しました。これにより、デベロッパーがページに含めたベンダー識別子や API キーを AMP ビューアーが受け取れるようになるため、AMP ビューアーでクライアント ID 情報のリクエスト元を識別できるようになります。
この改善された機能を使えば、たとえば AMP ページと非 AMP ページ間で一貫性のある ID を提供したりできるようになります。最近 Google は、この変更点を活用して AMP トラフィックを詳しく理解できるようにする Google アナリティクス プロダクトのアップデートについてお知らせしました。AMP ページで Google アナリティクスを利用している方は、ぜひご確認ください。
サイトオーナーがサイズを指定せずに広告をリクエストできる fluid 広告
AMP コンテンツにリフロー ポリシーを設定した場合、リクエスト時にサイズがわからない広告をリクエストできないという声がサイトオーナーから寄せられています。この問題を解決するため、fluid 広告のサポートをリリースしました。この機能は現在、オープン アルファ版テストとして利用できます。
その他の主な新機能: トラッキングの拡張、<amp-ima-video>、データ鮮度の改善
- 先日、最新データのサポートを拡張するために、amp-bind と amp-list を同時に利用する方法を変更しました。
- AMP 拡張機能の作成者は、amp-analytics を使ってページから直接データを収集できるようになりました。
- amp-ima-video 拡張機能がオープンベータ版としてリリースされ、サイトオーナーが簡単に動画コンテンツを収益化できるようになりました。これは、既存の動画コンテンツ上で広告から収益を得る軽量な方法で、amp-iframe や AMP でネイティブ サポートされる動画プレーヤーを使った既存の動画の収益化方法に加わるものです。
- 自動広告リフレッシュ機能と SRA（Single Request Architecture）機能が一般公開されました。興味がある方は、これらの機能をすぐに試してみることができます。
今後のロードマップ
前回のアップデートでお知らせしたいくつかの機能は、第 4 四半期にリリースしたいと考えています。これには、以下の機能が含まれています。- amp-image-lightboxの改善
- 動画をビューポートの隅で最小化するなどの動画関連機能
- AMP Start向けの新しいテンプレートや簡単な設定
- 日付ピッカー
- amp-iframe と親ドキュメントにある他の要素間のメッセージング
今後のアナリティクスについて、現在集中的に取り組んでいる分野は以下の通りです。
- エラー ロギング: エラーのログを有効にするトリガーを追加する予定です。これにより、ユーザーが AMP ページとのインタラクションを行う際に発生する問題を把握しやすくなります。
- 一括アナリティクス: 状況によっては、多数のアナリティクス ping を収集して一括で送信できる方が便利な場合があります。この機能では、AMP に一括アナリティクスのサポートを追加します。
* * *
作業したりフィードバックを寄せてくださっている AMP 開発コミュニティの方々に感謝いたします。いつものように、問題や機能リクエストがありましたら遠慮なく GitHubからお知らせください。
Reviewed by Yoshifumi Yamaguchi - Developer Relations Team