カバーページの作成
ウェブストーリーでは、<amp-story-page> コンポーネントを使用してページを表します。amp-story には 1 つ以上の <amp-story-page> コンポーネントページを含めることができ、1 つのストーリーを構成するスクリーンが含まれます。ウェブストーリーに表示される最初のページは、ドキュメントの順序で最初に指定したページです。
ページを作成するには、amp-story の子要素として <amp-story-page> を追加します。ページには固有の ID を割り当てます。ここでは、最初のページ（カバーページ）に、固有の ID cover を割り当てます。
<amp-story
standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg"
>
<amp-story-page id="cover"> </amp-story-page>
</amp-story>
これでカバーページのシェルができました。しかし、このままではストーリーとして有効ではありません。ページ内に 1 つ以上のレイヤーを指定する必要があります。
ページ内のレイヤー
AMP ストーリーページのレイヤーも、グラフィックスのレイヤーのように視覚効果を生み出すために使用できます。たとえば 2 つのレイヤーを重ねることで、1 つ目のレイヤーを最下層とし、その上に次のレイヤーを表示できます。
ここで作成するカバーページは、次の 2 つのレイヤーで構成します。
- レイヤー 1: 背景として表示する画像
- レイヤー 2: ストーリーのタイトルとバイライン
レイヤー 1 を作成する
ではまず、カバーページに 1 番目のレイヤーを追加します。このレイヤーには、画面全体に表示する画像を含めます。
レイヤーを作成するには、<amp-story-page> の子要素として <amp-story-grid-layer> を追加します。画像を画面全体に表示したいので、amp-story-grid-layer に template="fill" 属性を指定します。レイヤー内には、amp-img 要素を追加して cover.jpg ファイルを指定します。画像のサイズは 720 x 1280 ピクセルとし、レスポンシブにするため layout="responsive"と指定します。このレイヤーは次のようになります。
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img
src="assets/cover.jpg"
width="720"
height="1280"
layout="responsive"
>
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
ページがどのように表示されるか見てみましょう。ブラウザで http://localhost:8000/pets.html にアクセスしてください。
次のように表示されるはずです。
レイヤー 2 を作成する
これで背景ができました。次は、背景の上に見出しとバイラインを表示するため、背景レイヤーの上に重ねる 2 番目のレイヤーを作成します。2 番目のレイヤーは、1 番目のレイヤーとほぼ同じ手順で作成できます（fill テンプレートの代わりに vertical テンプレートを使用します）。しかし、その前にさまざまなテンプレートの違いを紹介し、<amp-story-grid-layer> 内に AMP 要素や HTML 要素を配置する方法について説明します。
テンプレートを使って要素を配置する
<amp-story-grid-layer> 要素には、その子要素がグリッド状に配置されます（ベースになっているのは CSS グリッドです）。子要素の配置方法を指定するには、以下に紹介するレイアウト テンプレートのいずれか 1 つを指定する必要があります。
テンプレート: Fill |
|
| fill テンプレートは、レイヤー内の 1 番目の子要素を画面全体に表示します。レイヤー内のそれ以外の子要素は表示されません。 fill テンプレートは、画像や動画を背景として表示したい場合に適しています。 | |
テンプレート: Vertical |
|
Vertical テンプレートは、子要素を Y 軸に沿って配置します。要素は画面の上部に整列され、X 軸に沿って画面全体を占有します。このテンプレートは、縦方向に要素を重ね合わせる際にうまく機能します。 | |
テンプレート: Horizontal |
|
| horizontal テンプレートは、子要素を x 軸に沿って配置します。つまり、要素は画面の左端から順番に並べられ、y 軸方向に画面の右端まで表示されます。 horizontal テンプレートは、要素を水平に隣接するように、順番に並べて表示したい場合に適しています。 | |
テンプレート: Thirds |
|
Thirds テンプレートは、画面を均等に 3 つの行区画に分割し、各区画にコンテンツを挿入できるようにします。また、名前付きの grid-area を指定することで、コンテンツを示す区画を示すことができます。区画は、upper-third、middle-third、または lower-third として指定します。名前付きグリッド領域は要素が表示する場所の動作を変更する際に役立ちます。たとえば、レイヤーに 2 つの要素がある場合、最初の要素を grid-area="upper-third" 、2 番目の要素を grid-area="lower-third" に表示するように指定します。 |
|
カバーページを完成させる
レイヤーテンプレートについて理解できたら、2 番目のレイヤーを追加してカバーページを完成させましょう。
レイヤー 2 の見出しとバイラインを前面に表示し、それに続いて要素が次々と表示されるようにしたいので、ここでは vertical テンプレートを指定します。2 番目のレイヤー amp-story-grid-layer は次のようになります（1 番目のレイヤーの後に記述します）。
<amp-story-grid-layer>
<!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
ブラウザの表示を更新して確認してみましょう。これでカバーページは完成です。
-