AMP

画像や動画を含める

通常の HTML ページと同じように、AMP でも 画像動画音声を埋め込むことができます内容。 通常の HTML と AMP のコンポーネントの違いと、こうしたコンポーネントをページに含める方法について解説します。

Why not <img><video><audio> を使用しない理由

AMP は、メディアの表示に使用されるデフォルトの HTML タグ(<img>など)には対応していません。次の理由で、同等のコンポーネントが用意されています。

こうしたタグの使用は、非対応ですが、will 表示には有効です。ただし、AMP で ページの検証 が行われないので、AMP のメリットをすべて利用することはできなくなります。

画像

画像をページに追加するには amp-img 要素を使用します。たとえば次のようになります。

A beautiful sunset
<amp-img
  alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
</amp-img>
このスニペットを Playground で開く

こちらのごく基本的な例では、画像は、指定した固定の高さと幅で表示されます。少なくとも、幅と高さを明確に設定する必要があります。

JavaScript が無効な場合に画像を表示する

As <amp-img> は JavaScript に依存するので、ユーザーがスクリプトを無効にすると画像は表示されなくなります。このような場合、その画像のフォールバックを、<img><noscript> を使って指定する必要があります。たとえば次のようになります。

<amp-img
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
  <noscript>
    <img
      src="/static/inline-examples/images/sunset.jpg"
      width="264"
      height="195"
    />
  </noscript>
</amp-img>
このスニペットを Playground で開く

高度なレイアウト

AMP では、標準の CSS や HTML を使う場合よりもかなり簡単に、完全にレスポンシブな画像を作成できます。最も基本的な形式では、必要な作業は次のように layout="responsive"を追加することだけです。

A view of the sea
<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>
このスニペットを Playground で開く

詳しくは、高度なレイアウトの手法 についての説明をご覧ください。

動作とプレースホルダ

AMP HTML のランタイムでは、画像のリソースを効果的に管理でき、ビューポートの位置、システム リソース、接続の帯域幅などの要素に基づいて、リソースの読み込みを遅らせるか優先させるかを選べます。

方法は、画像のフォールバックやプレースホルダの指定 についての説明をご覧ください。

アニメーション画像

The amp-anim 要素はamp-img 要素とよく似ています。この要素では、アニメーション画像(GIF など)の読み込みや再生を管理する機能を追加できます。

<amp-anim
  width="400"
  height="300"
  src="/static/inline-examples/images/wavepool.gif"
>
  <amp-img
    placeholder
    width="400"
    height="300"
    src="/static/inline-examples/images/wavepool.png"
  >
  </amp-img>
</amp-anim>
このスニペットを Playground で開く

このコンポーネントを使用するには、<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> をページの先頭に追加します。

動画

動画をページに追加するには amp-video 要素を使用します。

この要素は、HTML5 の動画ファイルを直接埋め込む場合にのみ使用します。この要素により、src 属性で指定された動画のリソースが、AMP で決められたタイミングで、遅れて読み込まれます。

動画が開始する前のプレースホルダと、ブラウザが HTML5 の動画に対応していない場合のフォールバックを追加します。たとえば次のようになります。

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 で開く

音声

音声のリソースをページに追加するには amp-audio 要素を使用します。

この要素は、HTML5 の音声ファイルを直接埋め込む場合にのみ使用します。AMP ページに埋め込まれるすべての外部リソースと同様に、この要素により、src 属性で指定された音声のリソースが、AMP で決められたタイミングで、遅れて読み込まれます。

音声が開始する前のプレースホルダと、ブラウザが HTML5 の音声に対応していない場合のフォールバックを追加します。たとえば次のようになります。

Your browser doesn’t support HTML5 audio.

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="/static/inline-examples/audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>
このスニペットを Playground で開く

このコンポーネントを使用するには、<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> をページの先頭に追加します。