ページを追加する

ここまでで、AMP ストーリーにページを追加する方法を説明しました。同じようにして「ペットとの楽しい時間」のストーリーに続きのページを追加してみましょう。これまでに学んだ内容を思い出しながら、以下の手順に沿って残りのページを作成してみてください。途中でわからなくなったら、完成版のコード（pets-completed.html）を参考にしてください。

各ページには、id="page1" などの形式で固有の「id」属性を設定する必要があります。

ページ 1: 猫

1 つのレイヤに画像とテキストを表示する方法を説明します。

次の 1 つのレイヤを含めます。
- vertical テンプレートを実装します。
- 次の 3 つの要素を含めます。
  - <h1> 要素に「Cats」というタイトルを含めます。
  - レスポンシブな amp-img（cat.jpg、720 x 1280 px）を指定します。
  - <q> 要素に「Dogs come when they're called. Cats take a message and get back to you. --Mary Bly」という引用文を含めます。

ページ 2: 犬

テキストを画像を 2 つのレイヤに分けて、テキストの配置場所を調整し、画像をページの画面全体に表示する方法を説明します。

次の 2 つのレイヤを含めます。
- レイヤ 1: fill テンプレートを実装し、レスポンシブな amp-img（dog.jpg、720 x 1280 px）を指定します。
- レイヤ 2: thirds テンプレートを実装し、次の 2 つの要素を含めます。
  - <h1> 要素に「Dogs」というタイトルを含めます。
  - <p> 要素で、grid-areaをlower-thirdに指定してコンテンツを表示するエリアを設定します。またこの要素に、表示するコンテンツ「Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf」というテキストを含めます。

ページ 3: 鳥

テキストのレイアウトを調整し、画像をページの画面全体に表示し、ページに BGM を追加する方法を説明します。

次の 3 つのレイヤを含めます。
- レイヤ 1: fill テンプレートを実装し、レスポンシブな amp-img（bird.jpg、720 x 1280 px）を指定します。
- レイヤ 2: vertical テンプレートを実装し、次の 1 つの要素を含めます。
  - <h1> 要素に「Birds」というタイトルを含めます。
- レイヤ 3: vertical テンプレートを実装し、次の 1 つの要素を含めます。
  - <q> 要素に「A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert」という引用文を含めます。
  - この第 3 のレイヤで、class="bottom" を指定して、子要素を画面の下部に配置します。
ページが表示されている間、バックグラウンドで音声ファイルを再生します。バックグラウンドでの音声の再生は、ストーリー全体で行うことも、1 つのページだけで行うこともできます。ここではこのページでのみ音声を再生するため、background-audio="assets/bird-singing.mp3" 属性をこのページの <amp-story-page> 要素に追加します。

ページ 4: ウサギ

テキストの配置場所を調整し、動画をページの画面全体に表示する方法を説明します。

次の 3 つのレイヤを含めます。
- レイヤ 1: fill テンプレートを実装し、レスポンシブな amp-video（rabbit.mp4）を指定します。
  - 動画を表示するには、amp-video コンポーネントを使用するために必要なスクリプトを <head> セクションに追加する必要があります。
  - poster 画像（rabbit.jpg）を指定します。この属性は、有効な AMP ストーリーに必須です。
  - 動画が自動再生されるよう、autoplay 属性を指定します。この属性は、有効な AMP ストーリーに必須です。
  - 動画が自動的にループ再生されるよう、loop 属性を指定します。
  - サイズを width="720"、height="1280"、レイアウトを layout="responsive" に設定します。
- レイヤ 2: vertical テンプレートを実装し、次の 1 つの要素を含めます。
  - <h1> 要素に「Rabbits」というタイトルを含めます。
- レイヤ 3: vertical テンプレートを実装し、次の 1 つの要素を含めます。
  - <p> 要素に「Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful」というテキストを含めます。
  - bottom CSS クラスをレイヤに適用して、子要素を画面の下部に配置します。

これで、「ペットとの楽しい時間」ストーリーはほぼ完成に近づきました。最後のページでは、アニメーション機能を使用してすべてのペットを一堂に表示させてみましょう。

前の章へ次の章へ

Written by @bpaduch