AMP HTML、概要
AMPはAcceleratedMobilePagesの略で、モバイルデバイスでのサイトの読み込みを桁違いに高速化するための統一された方法を作成するためにGoogleが提唱したオープンソースイニシアチブです。 AMPは、特に低速接続の場合に、モバイルでWebを改善するための優れた方法であることが証明されるはずです。
AMPは、HTML、CSS、およびJavaScriptの特定の部分を制限して、高速なエクスペリエンスを保証します。 余分な制限を補うために、ビデオの埋め込み、カルーセルの統合、その他の多くの優れた機能を実行できるコンポーネントも付属しています。 AMPは、Twitter、Pinterest、Googleなどのアウトレットで、モバイル上のページの超高速バージョンにリンクするために使用されます。 GoogleのAMPページのデモをこちらでお試しください。
入門
次のようにAMPHTMLページを開始します。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical"
href="https://path/to/regular/page">
<meta name="viewport"
content="width=device-width,
minimum-scale=1,initial-scale=1">
<style amp-boilerplate></style>
覚えておくべきいくつかのこと:
- これがAMPHTMLページであることを示すために、開始htmlタグで⚡を使用していることに注意してください。
- また、通常の非AMPページの場所を示すために正規タグが使用されていることにも注意してください。
- オープニングヘッドタグの直後のメタ文字セットを忘れないでください。
- 終了ヘッドタグの直前にAMPJSランタイムをロードします。 ここで非常に重要な非同期の使用に注意してください。 ページをAMPHTMLとして検証するには、すべてのスクリプトを非同期で読み込む必要があります。
- ボイラープレートスタイルは、簡潔にするために上記のスニペットには含まれていませんが、その完全なコードは次のとおりです。
<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>
このインラインCSSボイラープレートを使用すると、コンテンツは最初は非表示になり、アセットが読み込まれるときに表示されます。 このようにして、フォントを非同期でロードするときに発生するスタイルなしコンテンツのフラッシュ(FOUC)を防ぐことができます。
コンテンツとコンポーネント
ヘッドセクションの後、AMP HTMLページは、いくつかの重要な例外を除いて、ほとんどが単なる古いhtmlになります。 たとえば、imgタグはサポートされていないため、代わりにamp-imgを使用する必要があります。
<amp-img src="../alligator.svg"
width="400"
height="150"
layout="responsive"
alt="Dead Gator">
</amp-img>
amp-imgの場合、幅と高さの両方を定義します。 ブラウザは、必要に応じて比例してサイズを縮小できるほど賢くなります。
AMP HTMLで利用できるその他のコンポーネントのリストは次のとおりです。amp-アコーディオン、amp-instagram、amp-sidebar、amp-youtube、amp-audio…
これらの追加コンポーネントのほとんどについては、headセクションに追加のJavaScriptファイルをロードする必要があります。 たとえば、amp-instagramコンポーネントの場合:
<script async
custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
テスト、デバッグ、公開
AMP HTMLページを提供するには、まずそれらが有効である必要があります。 AMPページの最後に#development = 1を追加するだけで、JavaScriptコンソールがデバッグモードになり、問題がある場合は通知されます。
次のステップは、元のページに次のようなAMPバージョンを指すrelタグが含まれていることを確認することです。
<link rel=”amphtml”
href=”https://alligator.io/some-post.amp.html" />
詳細+リソース
AMP HTMLの詳細を学び、参加するための優れたリソースを次に示します。