知っておくべき10の重要なAccelerated Mobile Pages（AMP）コンポーネント

高速モバイルページ または AMP Googleのイニシアチブは モバイルWebを高速化する. この目標を達成するために、AMP標準ではHTML、CSS、およびJavaScriptの使用方法を制限しています。 外部リソースのロードを管理します, 画像、動画、広告など 独自のランタイム経由.

これはあなたを必要とします 使えない あなたのAMP文書の中にある任意のカスタム（著者作成またはサードパーティの）JavaScriptまたは画像やビデオなどのリソース関連のHTML要素.

ユーザーのニーズと最高のパフォーマンスプラクティスの間のギャップを埋めるために、AMPは 特定のコンポーネント あなたはできる これらの除外された要素の代わりに使用する.

AMPコンポーネントは 特定のHTMLタグ. これらは通常のHTMLタグと同じように動作します。開始タグと終了タグ、属性があり、それらのほとんどはCSSでスタイル設定できます。彼らは簡単に見分けることができます 常にで始まる アンプ- 接頭辞.

AMPコンポーネントには2つのタイプがあります。 ビルトイン そして 拡張された コンポーネント.

内蔵AMPコンポーネント

ビルトイン AMPのJavaScriptランタイムに組み込まれているので、それらを別々に含める必要はありません。.

1. アンプ画像

を置き換えます タグ AMP HTMLドキュメント内。あなたが追加する必要があります src そして オルト 通常のものと同じように属性を 素子.

他にも2つの必須属性があります。 を指定 幅 そして 高さ 属性 これは、AMPランタイムが 事前にレイアウトを計算する.

あなたがしたい場合は 画像を反応させる, を追加 layout = "レスポンシブ" 属性。の レイアウト 属性 レイアウトを制御します AMPドキュメントに含まれており、AMPコンポーネントに追加することができます（これについての詳細はAMP Layout Systemを参照してください）。.

また使用することができます srcset の属性 にタグを付ける 別の画像を指定する ビューポートやピクセル密度が異なります。 AMP以外の画像と同じように機能します。.

2. アンプビデオ

に使用することができます HTMLビデオを直接埋め込む AMP HTMLドキュメント内。それは取り替えます AMPファイルで。の タグ 動画を遅延ロードする パフォーマンスを最適化するために.

ビデオの出所 HTTPSプロトコルを介して提供される必要があります. 追加する必要があります 幅 そして 高さ 属性と同じです。 成分.

の tagには、次のような多くのオプション属性があります。 自動再生 そして ポスター HTML5ビデオの表示方法を微調整するために指定できます。.

mp4、webm、ogg、およびHTML5でサポートされている他のすべての形式をサポートします。

あなたが望むなら、あなたもすることができます 代替ビデオを追加する HTML5ビデオをサポートしていないブラウザを使用しているユーザーの場合は、 後退する 属性と HTMLタグ.

  
 
あなたのブラウザはHTML5ビデオをサポートしていません.
 
    

3. アンプ広告 そして アンプ埋め込み

を提供します iframeサンドボックス あなたができる 広告を表示する. 広告を配信する必要があります HTTPSプロトコル経由.

広告ネットワークから提供されたスクリプトを自分で実行することはできません。代わりに、AMPランタイムはサンドボックス内の特定のネットワークのJavaScriptを実行します。君は 使用するネットワークを指定するだけで済みます。, そしてあなたのデータを追加する.

の コンポーネントはあなたを必要とします 広告の寸法を追加する を使用して 幅 そして 高さ 属性.

あなたが使用する広告ネットワークを定義することができます タイプ 属性。サポートされている広告ネットワークのリストを見る.

各広告ネットワークには独自の広告ネットワークがあります データ-* 属性も追加する必要があります。必要なものを確認するには、上のリストの広告ネットワークをクリックしてください.

の別名です。 , それが代わりに使用することができる以外のドキュメントはそれについて多くを述べていません いつ 意味的により正確. Googleが広告関連のAMPコンポーネントを徐々に進化させることを約束しているので、これは将来変わるかもしれません.

4. アンプピクセル

あり , あなたはできる 追跡ピクセルを追加する あなたのAMP HTML文書に ページビュー数. 属性は1つだけです。 src 必要な属性 追跡ピクセルに属するURLを指定します.

の タグは許可します 標準のURL置換, それはあなたができるということです ランダムなURL値を生成します 各印象を追跡する.

このコンポーネントを使用したい場合は、AMPのURL Substitution Guideを参照してください。スタイルを設定することはできません。 成分.

拡張AMPコンポーネント

拡張AMPコンポーネントとして JavaScriptランタイムの一部ではありません, 君は 常にインポートする必要があります の中に 使用したいAMPページのセクション.

注：コンポーネントのバージョンは将来変更される可能性があるため、忘れないでください。 現在のバージョンを確認する ドキュメント内.

5. アンプオーディオ

を置き換えます HTML5タグ、そしてそれを可能にします HTML5オーディオファイルを直接埋め込む AMPページ.

それを使用するには、あなたが指定する必要があります src, 幅 そして 高さ また、3つのオプション属性を追加することもできます。 自動再生, ループ そして ミュート.

それはまたよい考えである場合もあります 代替オーディオファイルを追加する HTML5をサポートしていないブラウザを使用しているユーザ向けです。これを使用してこれを行うことができます。 後退する 属性と 前述と同じようにタグ 成分.

の AMPコンポーネントは、同じオーディオフォーマットをサポートしています。 HTML5タグ.

  
 
あなたのブラウザはHTML5オーディオをサポートしていません.
 
    

使用する , 次のスクリプトを AMP文書のセクション

6. アンプイフラメ

iframeを表示します AMP文書内. 通常のHTML iframeよりも安全になるように作られています。だから彼らは デフォルトでサンドボックス化.

に関連するいくつかの規則があります 検証に合格するには従う必要があります.

指定する必要があります 幅, 高さ, そして サンドボックス 属性の サンドボックス 属性はデフォルトで空ですが、あなたはそれをするために異なる値を与えることができます iframeの動作を変更する, 例えばsandbox = "許可スクリプト"iframeにJavaScriptを実行させます。標準のiframeの属性も使用できます.

の寸法は によって事前定義されています 幅 そして 高さ 属性、実行時にサイズを変更する方法があります。を使用する コンポーネント、AMPページに次のスクリプトを追加します。

7. アンプアコーディオン

アコーディオン スペースを節約しながらモバイルデザインで頻繁に使用されるUIパターンを構成しますが、それでもアクセス可能な方法でコンテンツを表示します。. それを可能にします すばやくアコーディオンを追加する AMPページへ.

アコーディオンのセクションは

  
 
第1節
 
第1節の内容
 
 
 
第2節
 
第2節の内容
 
 
 
セクション3
 
    
 
  

  展開する