AMPHTML のレイアウトシステム

概要

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

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

動作

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

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

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

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

レイアウト属性

width と height

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

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

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

layout

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

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

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

> </amp-img>
> 

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

sizes

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

sizes 属性が width と height とともに指定されている場合、layout は responsive になります。

例: 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-width と sizes を組み合わせると、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 属性が width と height とともに指定されている場合、layout は responsive になります。

例: heights 属性の使用

以下の例では、画像の高さは幅の 80% になりますが、ビューポートの幅が 500px より大きい場合、高さは最大 200px になります。heights 属性が width と height とともに指定されているため、レイアウトは 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. この表では width と height が必須に指定されていますが、amp-pixel と amp-audio の場合にはデフォルトのルールが適用されます。