AMP Stories(ストーリーズ)のページ構成

# この記事について
AMP Storiesを使ったWebページを作成する際の、ページ構成についてまとめた記事です。

AMP Storiesを使って[このような](https://erecipe.woman.excite.co.jp/amp-story/21f8ba63f493816cc5c772f0d3d89707.html)Webページを作成したので、こちらも是非御覧ください。

# AMP Storiesとは
アニメーションやインタラクティブなアクションを用いて、**Instagramのストーリーズのようなコンテンツ**を作成できる、GoogleとTwitter社が共同開発、提供しているモバイルページ向けのフレームワークです。

## 良い点
- AMPページと同様に、AMP JSを用いたレンダリングやGoogle AMP Cacheなどの仕組みにより、従来のWebページの何倍もの速度でページが読み込まれる点。表示速度がとても速い!

- HTMLやCSSの基本的な知識さえあれば、簡単にリッチなコンテンツが作成できる点。

# セットアップ
AMP StoriesでWebページを作成するには、amp-storyコンポーネントを利用します。

そのためにまずは、`<head>`タグの中にスクリプトを追記します。

```
<head>
<script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>
```

# AMP Storiesの構成
AMP Storiesは、大きく分けて、**Story**, **Pages**, **Layers**, **Elements**の4つの部品からページが構成されています。
![layer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198029/5f64b970-8109-8b01-4c1f-889f8c194bf2.png)
(引用: [Understanding the parts of an AMP story](https://amp.dev/documentation/guides-and-tutorials/start/visual_story/parts_of_story/?format=stories))
右側の部品が左側の部品の要素に含まれているイメージ。

こんな感じでページを作っていきます。

```
<body>
  <amp-story>
    <amp-story-page>
      <amp-story-grid-layer>
        <h1>AMP Stories!</h1>
      </amp-story-grid-layer>
    </amp-story-page>
  </amp-story>
</body>
```

## Story
**Story**は、AMP Stories全体をまとめる要素です。

`<body>`タグの中に、`<amp-story>`タグを追加することで、WebページがAMP Storiesとして認識されるようになります。

```
<body>
  <amp-story standalone
    title="ページタイトル"
    publisher="提供元"
    publisher-logo-src="提供元のロゴ画像"
    poster-portrait-src="トップページで表示される画像">
  </amp-story>
</body>
```
ここで`standalone`以下に記述している内容は、作成するAMP Storiesのメタ情報となります。

また、注意するべき点として`<amp-story>`タグは`<body>`の中に1つしか記述できません。

## Pages
**Pages**は、AMP Storiesの1ページを構成しています。

通常、作りたいStoriesは複数ページに渡ると思うので、先程記述した`<amp-story>`の中に、作成したいページ分`<amp-story-page>`タグを追加します。

この際、作成したページごとにユニークなidをつける必要があります。

```
-- 上略 --
<amp-story>
  <amp-story-page id="page1">
  </amp-story-page>
  <amp-story-page id="page2">
  </amp-story-page>
</amp-story>
-- 以下略 --
```

Pagesには、幾つかのテンプレートが用意されています。

中でも、`auto-advance-after`というテンプレートを利用すると、インスタグラムのストーリーズのように、一定時間後に自動で次のページへ遷移する といった動きが実装できます。

```
<amp-story-page id="page1"
  auto-advance-after="5s" //5秒後に自動で次のページへ遷移
</amp-story-page>
```

## Layers
**Layers**は、1ページを構成する要素です。

1ページごとに設定する、タイトルの文字や背景画像、ページコンテンツとなる文章などを、それぞれ`<amp-story-grid-layer>`や`<amp-story-cta-layer>`などで区切って、記述していきます。

`<amp-story-grid-layer>`は[CSS Grid](https://www.w3.org/TR/css-grid-1/)に基づいたコンポーネントなので、基本的にはテンプレートを使用して、Layersの場所やつけるアニメーションを決めていきます。

使用できるテンプレートやアニメーションは、[amp.devのドキュメント](https://amp.dev/documentation/components/amp-story-grid-layer/?format=websites)に載っているので、参考にしてみてください。

```
-- 上略 --
<amp-story-page id="page1">
  <amp-story-grid-layer template="thirds">
    <p grid-area="upper-third">あいうえお</p>
    <p grid-area="middle-third">かきくけこ</p>
    <p grid-area="lower-third">さしすせそ</p>
  </amp-story-grid-layer>
</amp-story-page>
-- 以下略 --
```
表示結果
![スクリーンショット 2019-12-16 19.11.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198029/f92ef328-7274-4bb9-3af0-924f2a7e7364.png)
`thirds`テンプレートを利用すると、上記の用に画面を三分割にして要素を配置できます。

## Elements
**Elements**はLayersの中に配置される要素です。

`<p>`や`<h1>`、`<div>`や`<span>`などのタグや、`<amp-img>`、`<amp-video>`といったAMPページで表示する画像やメディアをサポートしたコンポーネントなどが、Elementsに含まれます。

これらのElementsはLayer1つの中に複数個記述することが可能です。

注意すべき点としては、AMPページ向けのコンポーネントには、それぞれ必須要素が設定されていることです。例えば`<amp-img>`の場合、

- src
- width, height
- layout

の3つの要素が必須となっています。

コンポーネントを使用する前は一度、[公式ドキュメント](https://amp.dev/documentation/components/amp-img/?format=websites)に目を通しておくと、良いと思います。

# まとめ
- AMP Storiesを使うと、簡単にInstagramのストーリーズのようなWebページを作成できる
- AMP Storiesは、Story, Pages, Layers, Elementsの4つの要素から構成されている
- それぞれの要素に対し、AMPコンポーネントやAMP Storiesコンポーネント、テンプレートアニメーションが用意されているので、基本的にそれらを組み合わせてWebページを作る