新しい AMP ロードショー。
AMP Roadshows

誰もがコンテンツを利用しやすい環境を作るためのオープンソースの取り組み

AMP は、読み込みがほぼ一瞬で完了しスムーズに表示される魅力的なウェブページを簡単に作成できるオープンソース ライブラリです。AMP ページは、作成者がリンク先として指定して管理できるウェブページです。

AMP では、既存のスキルセットとフレームワークを活用してウェブページを作成できます。AMP は多種多様なプラットフォームでサポートされており、各種ブラウザと互換性があります。

AMP のエコシステムには、2,500 万のドメイン、100 社以上のテクノロジー プロバイダ、大手プラットフォームが含まれ、その範囲は出版、広告、e コマース、地域企業、小規模ビジネスなど多岐にわたります。

詳しくはこちらの紹介ビデオをご覧ください

AMP ページを構成する 3 つのコア コンポーネント

AMP HTML

AMP HTML は、安定したパフォーマンスのために制限がいくつか課された HTML です。

AMP HTML は基本的に、カスタム AMP プロパティが付いた HTML の拡張版です。 簡単な AMP HTML ファイルは次のようになります。

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

AMP HTML ページのほとんどのタグは通常の HTML タグですが、 一部の HTML タグは AMP 固有のタグに置き換えられます( AMP 仕様の HTML タグもご覧ください)。 AMP HTML コンポーネントと呼ばれるこれらのカスタム要素には、 一般的なパターンを効果的な方法で簡単に実装できます。

たとえば、amp-img タグを使用すると、 srcset にまだ対応していないブラウザでもこの属性を完全にサポートできます。 詳しくは、初めての AMP HTML ページを作成する方法をご覧ください。

検索エンジンやその他のプラットフォームでは、AMP ページは <link rel=""> HTML タグによって検出されます。非 AMP バージョンと AMP バージョンの ページを配置することも、AMP バージョンのみを配置することもできます。詳しくは、 ページを検出可能にするをご覧ください。

AMP JS

AMP JS ライブラリは、AMP HTML ページの高速なレンダリングを確実に実行します。

AMP JS ライブラリには、 AMP のパフォーマンスに関するおすすめの設定がすべて実装されており、 リソースの読み込みを管理し、前述のカスタムタグを提供し、 ページの高速なレンダリングを実現します。

最適化の効果が最も高いのは、外部リソースから取り込まれるすべての要素を非同期にするという機能です。この機能を利用すれば、ページ内のいずれかの要素によってレンダリングが妨げられることはありません。

パフォーマンスを向上させるためのその他の技術には、すべての iframe のサンドボックス化、リソース読み込み前に行うページ上の各要素のレイアウト事前計算、低速な CSS セレクタの無効化などがあります。

最適化だけではなく、制限事項についての詳細を確認するには、AMP HTML の仕様をご覧ください。

AMP Cache

キャッシュされた AMP HTML ページを提供する場合は、Google AMP Cache を使用できます。

Google AMP Cache はプロキシベースのコンテンツ配信ネットワークで、 すべての有効な AMP ドキュメントを配信します。 AMP HTML ページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に向上させます。 Google AMP Cache を使用すると、ドキュメント、すべての JS ファイル、すべてのイメージは、 効率を最大化するために、 HTTP 2.0 を使用する同じオリジナルから読み込まれます。

キャッシュには 検証システム が組み込まれており、ページが動作することの保証と、 外部リソースに依存していないことの確認を行っています。 検証システムでは、ページのマークアップが AMP HTML の仕様を満たしていることを確認する一連のアサーションが実行されます。

各 AMP ページには、別バージョンの検証ツールがバンドルされています。このバージョンは、ページのレンダリング時に検証エラーをブラウザのコンソールに直接記録することができるため、 コードの複雑な変更によってパフォーマンスや ユーザー エクスペリエンスにどのような影響があるかを確認できます。

詳細は AMP HTML ページのテストをご確認ください。

AMP のデザイン原則

デザイン原則の詳細を見る

AMP の活用例