AMP

AMPHTML のレイアウトシステム

概要

レイアウトシステムの第一の目標は、JavaScript やデータ呼び出しなどのリモートリソースが完了する前に、ランタイムが要素のサイズを推論できるように、AMP 要素がレイアウトを表現できるようにすることです。レンダリングとスクロールの素早い方向転換を大幅に減らすことができるため、重要なことです。

AMP レイアウトシステムは、これに留意した上で、良好なパフォーマンスを確保する、少量ではありながら柔軟性に長けるレイアウトをサポートするように設計されています。このシステムは、要素のレイアウトとサイズのニーズを表現するために、layoutwidthheightsizes、および heights などの一連の属性を使用しています。

動作

非コンテナ型の AMP 要素(layout != container)は、プレースホルダ(placeholder 属性を参照)を除くすべての子要素が非表示となる未解決/未構築モードで起動します。要素を完全に構築するために必要な JavaScript とデータペイロードがダウンロードされ初期化中であったとしても、AMP ランタイムはすでに、CSS クラスと layoutwidthheight、および media 属性に依存するだけで、要素のサイズをどのように設定し、レイアウトするのかを理解しています。ほとんどの場合、placeholder が指定されている場合は、すべての要素のスペースを確保するように、サイズと位置が調整されます。

placeholder は、要素が構築されて最初のレイアウトが完成するとすぐに非表示になります。この時点で、要素のすべての子要素の構築と配置が適切に行われて、表示可能な状態になっており、ユーザーの入力を受け取れるようになっていることが期待されています。これがデフォルトの振る舞いです。placeholder をより素早く非表示にしたり、長く表示したりするなど、 各要素のデフォルトの動作をオーバーライドすることができます。

要素のサイズと表示は、ランタイムによって layoutwidthheight、および media 属性に基づいて設定されます。レイアウトのルールはすべて、内部的に CSS wo 介して実装されます。CSS スタイルを介して要素のサイズを推論できず、その子要素によってサイズ変更が不可能な場合は、すぐに利用できるサイズを定義するか、動的に挿入するかが要素に求められます。これは、この要素のサイズを変更できないということではなく、responsivefixed-heightfill、および flex-item レイアウトの場合には、レイアウトはそれに完全に応答するため、レンダリング中、スクロール中、ダウンロード後など、明示的なユーザーアクションがなければサイズを変更できないということです。

要素に誤った構成が適用されている場合、PROD ではまったくレンダリングされず、DEV モードではエラーの状態でランタイムによってレンダリングされます。このようなエラーには、layoutwidth、および height 属性の無効な、またはサポートされていない値などがあります。

レイアウト属性

widthheight

layout 属性の値によって、AMP コンポーネント要素には、整数のピクセル値を含む widthheight 属性が必要です。実際のレイアウトの動作は、以下に示すように、layout 属性によって決定します。

いくつかのケースでは、width または height が指定されていない場合、AMP ランタイムは次のようにデフォルトの動作を示します。

  • amp-pixel: widthheight の両方が 0 に設定されます。
  • amp-audio: ブラウザのデフォルトの widthheight が推論されます。

layout

AMP は、AMP コンポーネントがドキュメントレイアウト内でどのように動作するか指定する一連のレイアウトを提供しており、以下の表に示すいずれかの値で layout 属性を追加することで、コンポーネントのレイアウトを指定することができます。

: アスペクト比の決定に width と height が使用された単純なレスポンシブ画像。

<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"

> </amp-img>
> 

以下は、layout 属性でサポートされている値です。

動作と要件
なし 値が指定されていない場合、コンポーネントのレイアウトは次のように推論されます。
  • height が存在し、width が欠落しているか auto に設定されている場合、fixed-height レイアウトが使用されます。
  • widthheightsizes または heights 属性とともに存在する場合、responsive レイアウトが使用されます。
  • widthheight が存在する場合、fixed レイアウトが使用されます。
  • widthheight が欠落している場合、container レイアウトが使用されます。
container 通常の HTML div のように、子要素によってサイズが定義されます。コンポーネントには特定のレイアウトが指定されておらず、コンテナとしてのみ機能すると見なされます。子要素は直ちにレンダリングされます。
fill 要素は幅と高さの両方のの観点から利用可能なスペースを使用します。言い換えると、fill 要素のレイアウトとサイズは親要素に一致します。要素が親コンテナを満たすようにするには、"fill" レイアウトを指定し、親コンテナに position:relative または position:absolute を指定するようにしてください。
fixed 要素の幅と高さは固定されており、レスポンシブはサポートされません。widthheight 属性が指定されている必要があります。amp-pixelamp-audio コンポーネントについては例外です。
fixed-height 要素は利用可能なスペースを使用しますが、高さは固定されたままになります。このレイアウトは、水平方向にコンテンツが配置される amp-carousel などの要素に最適です。height 属性が指定されている必要があります。width 属性は含まないか、auto に指定する必要があります。
flex-item flex-item レイアウトが指定された要素とそのような親要素に含まれる子要素は、親要素がフレキシブルコンテナ(display: flex)である場合の親コンテナの残りのスペースを使用します。widthheight 属性は不要です。
intrinsic 要素は利用可能なスペースを使用し、 amp-img に渡された `width` と `height` 属性に達するか、`max-width` などの CSS 制約に達するまでwidthheight 属性によって指定されたアスペクト比に、高さを自動調整します。width と height 属性が指定されている櫃夜ぐああります。このレイアウトは、amp-imgamp-carousel などを含む AMP 要素に最も適しています。利用できるスペースは親要素によって決まりますが、max-width CSS を使用してカスタマイズすることも可能です。このレイアウトは、固有の高さと幅を持つという点で、responsive とは異なり、この差は、responsive レイアウトが 0x0 をレンダリングし、intrinsic レイアウトがその自然なサイズまたは CSS 制約の小さい方に膨らむフロート要素内で最も明確に現れます。
nodisplay 要素は表示されません。また、表示スタイルが none であるかのように、スペースもまったく使用されません。このレイアウトはすべての AMP 要素に適用することができます。要素はユーザーアクション(amp-lightbox など)によって表示されるものと見なされます。widthheight 属性は不要です。
responsive 要素は利用可能なスペースを使用し、高さは widthheight 属性によって指定されたアスペクト比に自動設定されます。このレイアウトは、amp-imgamp-video などを含むほとんどの AMP 要素に最適です。利用できるスペースは親要素によって決まりますが、max-width CSS を使ってカスタマイズすることもできます。widthheight 属性を使用する必要があります。

注意: "layout=responsive" を使用する要素には固有のサイズはありません。要素のサイズはそのコンテナ要素によって決定されます。AMP 要素が確実に表示されるようにするには、コンテナ要素の幅と高さを指定しておく必要があります。コンテナ要素に "display:table" を指定すると、AMP 要素の表示がオーバーライドされ、AMP 要素が非表示状態でレンダリングされます。

sizes

responsive レイアウトをサポートするすべての AMP 要素は、sizes 属性もサポートしています。この属性の値は、img sizes に記述されたとおりの sizes 式ですが、画像だけでなく、すべての要素に適用されます。手短に言えば、sizes 属性は、メディア条件に応じてどのように要素の幅が計算されるかを説明する属性です。

sizes 属性が widthheight とともに指定されている場合、layoutresponsive になります。

: sizes 属性の使用

以下の例では、ビューポートの幅が 320px より大きい場合に、画像の幅は 320px になり、そうでない場合は、100vw(ビューポートの幅の 100%)になります。

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"

> </amp-img>
> 

disable-inline-width

sizes 属性はほかに依存することなく、要素にインラインの width スタイルを設定します。disable-inline-widthsizes を組み合わせると、AMP 要素は、amp-img 内にネストされた img と同様に、sizes が通常 AMP で設定するようにインライン width設定することなく 、要素の基盤のタグに sizes の値を伝搬します。

: disable-inline-width 属性の使用

以下の例では、<amp-img> 要素の幅は影響されず、sizes は、srcset のソースの 1 つを選択するためだけに使用されます。

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
disable-inline-width

> </amp-img>
> 

heights

responsive レイアウトをサポートするすべての AMP 要素は、heights 属性もサポートしています。この属性の値は、img sizes 属性と同様にメディア式に基づく sizes 式ですが、以下のような主な違いが 2 つあります。

  1. 要素の高さに適用され、幅には適用されません。
  2. パーセント値を使用できます(86% など)。パーセント値が使用される場合、要素の幅のパーセント率を示します。

heights 属性が widthheight とともに指定されている場合、layoutresponsive になります。

: heights 属性の使用

以下の例では、画像の高さは幅の 80% になりますが、ビューポートの幅が 500px より大きい場合、高さは最大 200px になります。heights 属性が widthheight とともに指定されているため、レイアウトは responsive になります。

<amp-img
src="https://acme.org/image1.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"

> </amp-img>
> 

media

ほとんどの AMP 要素は media 属性をサポートしています。media の値はメディアクエリです。クエリに一致しない場合、要素はまったく表示されず、そのリソースと潜在的にその子リソースはフェッチされません。ブラウザウィンドウのサイズや向きが変化すると、メディアクエリが再評価され、その新しい結果に基づいて、要素の表示と非表示が決定されます。

: media 属性の使用

以下の例では、相互に排他的なメディアクエリを使用する 2 つの画像を使用しています。画面の幅に応じて、これらのうち 1 つの画像がフェッチされ、レンダリングされます。media 属性はすべての AMP 要素で利用できるため、広告などの画像以外の要素にも使用することができます。

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"

> </amp-img>
> <amp-img
>   media="(max-width: 649px)"
>   src="narrow.jpg"
>   width="527"
>   height="193"
>   layout="responsive"
> </amp-img>
> 

placeholder

placeholder 属性は、AMP 要素にだけでなく、あらゆる HTML 要素に設定することができます。placeholder 属性は、この属性でマークされた要素が親 AMP 要素のプレースホルダとして機能することを示します。示されている場合、プレースホルダは AMP 要素の直接の子要素である必要があります。デフォルトでは、AMP 要素のリソースがまだダウンロード済みまたは初期化済みでない場合であっても、プレースホルダがすぐに表示されるようになっています。準備が整うと、通常、AMP 要素はプレースホルダを非表示にしてコンテンツを表示しますが、プレースホルダに関する実際の動作は、要素の実装によって異なります。

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

fallback 属性は、AMP 要素にだけでなく、あらゆる HTML 要素にも設定することができます。フォールバックは、要素がユーザーに対し、ブラウザが要素をサポートしていないことを伝えることのできる方法です。指定されている場合、フォールバック要素は AMP 要素の直接の子要素である必要があります。フォールバックに関する実際の動作は、要素の実装によって異なります。

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">

  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

noloading 属性は、要素の「ローディングインジケータ」をオフにするかどうかを指定する属性です。多くの AMP 要素は「ローディングインジケータ」の表示を許可されています。このインジケータは、要素が完全には読み込まれていないことを示す基本アニメーションです。この属性を追加することで、その要素にかかわるこの動作をオプトアウトすることができます。

(tl;dr) レイアウトの要件と動作のまとめ

以下の表は、layout 属性での使用が許可されているパラメータ、CSS クラス、およびスタイルです。以下の事項に注意してください。

  1. -amp- 接頭辞が付いた CSS クラスと、i-amp- 接頭辞が付いた要素は、AMP 内部での処理とみなされ、ユーザーのスタイルシートで使用することはできません。ここでは、情報提供の目的でのみ示されています。
  2. この表では widthheight が必須に指定されていますが、amp-pixelamp-audio の場合にはデフォルトのルールが適用されます。
レイアウト Width/
Height 必須?
サイズを定義? 追加要素 CSS "display"
container いいえ いいえ なし block
fill いいえ はい。親のサイズ。 なし block
fixed はい はい。widthheight で指定。 なし inline-block
fixed-height height のみ。 widthauto を使用可 はい。親コンテナと height で指定。 なし block
flex-item いいえ いいえ はい。親コンテナに基づく。 block
intrinsic はい はい。親コンテナとwidth:height のアスペクト比に基づく。 はい。i-amphtml-sizer block置換要素のように動作する)
nodisplay いいえ いいえ なし none
responsive はい はい。親コンテナとwidth:height のアスペクト比に基づく。 はい。i-amphtml-sizer block