プレースホルダとフォールバック

知覚パフォーマンスとプログレッシブエンハンスメントの観点から、AMP ではできる限りプレースホルダとフォールバックを設定することをおすすめします。

要素によっては、制限を緩和できるようにするだけでも設定する価値があります。たとえば、<amp-iframe> のプレースホルダを設定すれば、iframe をページの上部に表示させることができます。このプレースホルダがないと動作しません。

プレースホルダ

placeholder 属性で指定された要素は、親 AMP 要素のプレースホルダとして機能します。指定する場合、placeholder 要素は AMP 要素の直接の子にする必要があります。 placeholder として指定された要素は常に親 AMP 要素の中に入ります（fill）。

<amp-anim src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300">
  <amp-img placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill">
  </amp-img>
</amp-anim>

このスニペットを Playground で開く

デフォルトでは、AMP 要素のリソースがダウンロードや初期化されていない場合でも、プレースホルダが AMP 要素にすぐに表示されます。準備ができると、AMP 要素は通常、プレースホルダを非表示にしてコンテンツを表示します。

プレースホルダは AMP 要素でなくてもかまいません。任意の HTML 要素をプレースホルダとして使用できます。

フォールバック

要素で fallback 属性を使うことで代わりの動作を指定できます。

ブラウザがサポートしていない要素
コンテンツを読み込めなかった場合（削除されたツイートなど）
画像の種類がサポートされていない場合（WebP はすべてのブラウザでサポートされていないなど）

fallback 属性は、AMP 要素だけでなく、どの HTML 要素でも設定できます。指定する場合、fallback 要素は AMP 要素の直接の子にする必要があります。

例: サポートされていない機能の場合

次の例では、fallback 属性を使用して、ブラウザが特定の機能に対応していないことをユーザーに伝えます。

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

このスニペットを Playground で開く

例: 異なる画像形式を配信する場合

次の例では、fallback 属性を使用して、WebP フォーマットがサポートされていない場合は JPEG ファイルを使用するようにブラウザに指示します。

<amp-img alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

このスニペットを Playground で開く