<amp-sidebar id="sidebar" layout="nodisplay" side="right"" ""left" </amp-sidebar>
AMP に
ついて
印象的かつスムーズで、ほぼ瞬時に読み込まれるウェブページ
AMP はウェブサイトを高速かつユーザーファーストにし、収益化するシンプルかつ堅牢なフォーマットです。AMP は一般的なプラットフォームへの配布を実現し、運用コストと開発コストを削減することで、貴社のウェブ戦略に長期的な成功をもたらします。
<amp-img class="resp-img"
alt="Desktop"
width="550"
height="368"
src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
.resp-img {
max-width: 700px;
}
</style>
オープンウェブ全体のユーザーに優れたウェブ体験をもたらします
AMP を使用すると、デバイスや配信プラットフォーム全体で一貫して高速で美しく、高性能なウェブサイトや広告を作成できます。サイト運営者と広告主は、ユーザーファースト体験を重視したコンテンツの表示方法を決めることができます。
当社は全体的な速度改善に取り組んでいます。サイトの読み込みに時間がかかるのであれば、記事がどれほど優れているかは関係ありません。中には記事の内容を見る前にページを離れてしまう読者もいます。
David Merrell、シニアプロダクトマネージャー
AMP HTML の構成要素
<!DOCTYPE HTML>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width">
<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>
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"AmpBind": true
}
</script>
</amp-geo>
<h1>Hello in <span [text]="country">...</span>!</h1>
<button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>
Hello
World!
組み込みコンポーネント
AMP HTML は、確かなパフォーマンスを得るためにいくつかの制限が設けられた HTML です。
AMP HTMLページのほとんどのタグは通常の HTML タグですが、一部の HTML タグは AMP 固有のタグに置き換えられています（AMP 仕様の HTML タグも参照してください）。AMP HTML コンポーネントと呼ばれるこれらの独自要素により、一般的なパターンを効率よく簡単に実装できます。
例えば amp-img タグの場合、このタグをまだサポートしていないブラウザでも srcset を完全にサポートします。初めての AMP HTML ページを作成する方法を学びましょう。
AMP ページは、HTML タグを介して検索エンジンやその他のプラットフォームによって検出されます。ページの非 AMP バージョンと AMP バージョン、または AMP バージョンのみを選択できます。
AMP キャッシュ
AMP ページは、キャッシュしてウェブ上でほぼ瞬時に読み込ませることができます。Google のようなプラットフォームは AMP キャッシュを実行し、サービスからコンテンツを高速に読み込めるようにします。
Google AMP キャッシュはプロキシベースのコンテンツ配信ネットワークで、あらゆる有効な AMP ドキュメントを配信します。AMP HTML ページを取得してキャッシュし、ページのパフォーマンスを自動的に改善します。Google AMP キャッシュを使用すると、ドキュメントとすべての JS ファイル、およびすべての画像が HTTP 2.0 を使用している同一のオリジンから読み込まれ、最大の効率を得ることができます。
キャッシュには、ページの動作と外部リソースを利用していないことを保証する検証システムも組み込まれています。検証システムは、ページのマークアップが AMP HTML 仕様を満たしていることを確認する一連のアサーションを実行します。
この検証ツールの別バージョンがすべての AMP ページにバンドルされています。このバージョンではページのレンダリング中に検証エラーをブラウザのコンソールに直接記録できるため、コードの複雑な変更によってもたらされるパフォーマンスとユーザー体験への影響を確認できます。