AMP stories（ストーリーズ）使わないなんてもったいない！

#概要

AMP stories（ストーリーズ）が面白そうだったので、作ってみたので、メモとして、AMP stories（ストーリーズ）作成方法やどう使ってみたら面白いのかまとめてみました。

#AMP stories（ストーリーズ）とは

Instagram Storiesなどのようにフルスクリーンで閲覧でき、タップすると次のページへすすんでいくというもの。AMP（アンプ）で制作されるため、画像や動画などの読み込みも早くなる。

既にCNNやワシントン・ポストなどでもAMP stories （ストーリー）が作られている。
[AMP stories](https://www.ampproject.org/stories/)

AMPについてこちらはこちらも参考になると思います。
[リアルガチにヤバいAMP Start](https://qiita.com/am_/items/20b7478e9fb86d2acbfd)


#AMP stories（ストーリーズ）の作成方法

##テンプレートをダウンロード

[https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip](https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip)

<table><tbody>
<tr><th>assets</th><td>イメージファイルや動画、音楽などのファイルを格納</td></tr>
<tr><th>bookend.json</th><td>AMPファイルの中にリンクを表示できないのでここにリンクを書いていきます。</td></tr>
<tr><th>htmlファイル</th><td>ここに基本的なAMP HTMLのルールやページの詳細を書いていきます。</td></tr>
</tbody></table>

##pets-completed.htmlを書き換える

```bookend.html
<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Joy of Pets</title>
    <link rel="canonical" href="pets.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-video"
        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400" rel="stylesheet">

<!-- AMP CSS -->
    <style amp-custom>
      amp-story {
        font-family: 'Oswald',sans-serif;
        color: #fff;
      }
      amp-story-page {
        background-color: #000;
      }
      h1 {
        font-weight: bold;
        font-size: 2.875em;
        font-weight: normal;
        line-height: 1.174;
      }
      p {
        font-weight: normal;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #fff;
      }
      q {
        font-weight: 300;
        font-size: 1.1em;
      }
      amp-story-grid-layer.bottom {
        align-content:end;
      }
      amp-story-grid-layer.noedge {
        padding: 0px;
      }
      amp-story-grid-layer.center-text {
        align-content: center;
      }
      .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      .banner-text {
        text-align: center;
        background-color: #000;
        line-height: 2em;
      }
    </style>
  </head>
  <body>
    <!-- Cover page -->
    <amp-story standalone bookend-config-src="bookend.json">
      <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-grid-layer template="vertical">
          <h1>The Joy of Pets</h1>
          <p>By AMP Tutorials</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 1 (Cat): 1 layer (vertical) -->
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Cats</h1>
          <amp-img src="assets/cat.jpg"
              width="720" height="1280"
              layout="responsive">
          </amp-img>
          <q>Dogs come when they're called. Cats take a message and get back to you. --Mary Bly</q>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 2 (Dog): 2 layers (fill + thirds) -->
      <amp-story-page id="page2">
        <amp-story-grid-layer template="fill">
          <amp-img src="assets/dog.jpg" 
              width="720" height="1280"
              layout="responsive">
          </amp-img>
        </amp-story-grid-layer>
          <amp-story-grid-layer template="thirds">
            <h1 grid-area="upper-third">Dogs</h1>
            <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.</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 3 (Bird): 3 layers (fill + vertical + vertical) + Audio-->
      <amp-story-page id="page3" background-audio="assets/bird-singing.mp3">
        <amp-story-grid-layer template="fill">
          <amp-img src="assets/bird.jpg"
              width="720" height="1280"
              layout="responsive">
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Birds</h1>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical" class="bottom">
          <q>A bird is three things: Feathers, flight and song, And feathers are the least of these. -Marjorie Allen Seiffert</q>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 4 (Rabbit): 3 layers (fill (video) + vertical + vertical) -->
      <amp-story-page id="page4">
        <amp-story-grid-layer template="fill">
          <amp-video autoplay loop
                width="720" height="1280"
                poster="assets/rabbit.jpg"
                layout="responsive">
              <source src="assets/rabbit.mp4" type="video/mp4">
          </amp-video>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Rabbits</h1>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical" class="bottom">
          <p>Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 5 (Collage): 2 layers + animations -->
      <amp-story-page id="page5">
        <amp-story-grid-layer template="vertical" class="noedge">
          <div class="wrapper">
            <amp-img src="assets/cat.jpg"
                width="720" height="1280"
                layout="responsive"
                animate-in="fade-in"
                animate-in-delay="0.4s">
            </amp-img>
            <amp-img src="assets/dog.jpg"
                width="720" height="1280"
                layout="responsive"
                animate-in="fade-in"
                animate-in-delay="0.6s">
            </amp-img>
            <amp-img src="assets/bird.jpg"
                width="720" height="1280"
                layout="responsive"
                animate-in="fade-in"
                animate-in-delay=".8s">
            </amp-img>
            <amp-img src="assets/rabbit.jpg"
                width="720" height="1280"
                layout="responsive"
                animate-in="fade-in"
                animate-in-delay="1s">
            </amp-img>
          </div>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical" class="center-text">
          <p class="banner-text" animate-in="whoosh-in-right">Pets can lower your stress levels!</p>
        </amp-story-grid-layer>
      </amp-story-page>

    </amp-story>
  </body>
</html>
```

**amp-story-grid-layer template=""**
- Fill
- Vertical
- Horizontal
[Laying out elements with a template｜AMP](https://www.ampproject.org/docs/design/visual_story/create_cover_page#laying-out-elements-with-a-template)


**animate-in=""**
- drop
- fade-in
- fly-in-bottom
- fly-in-left
- fly-in-right
- fly-in-top
- pulse
- rotate-in-left
- rotate-in-right
- twirl-in
- whoosh-in-left
- whoosh-in-right
[Animating elements｜AMP](https://www.ampproject.org/docs/design/visual_story/animating_elements
)

3.bookend.jsonを書き換える

```bookend.json
{
  "share-providers": {
    "facebook": true,
    "twitter": true,
    "email": true
  },
  "related-articles": {
    "Articles": [
      {
        "title": "Pet adoption",
        "url": "https://en.wikipedia.org/wiki/Pet_adoption",
        "image": "assets/related-dogs.jpg"
      },
      {
        "title": "Learn about cats",
        "url": "https://en.wikipedia.org/wiki/Cat",
        "image": "assets/related-cats.jpg"
      }
    ]
  }
}
```
<table><tbody>
<tr><th>title</th><td>表示されるテキスト（サイト名など）</td></tr>
<tr><th>url</th><td>リンク先のURL</td></tr>
<tr><th>image</th><td>アイコンや画像などのイメージファイル名<br>（assets内に格納しているので、/assets/ファイルとなると思います。）</td></tr>
</tbody></table>

#AMP stories（ストーリーズ）を確認
1.[AMP Playground](https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fstories%2Ffeatures%2Flayouts%2Fsource%2F)でテキスト内容など確認。
2.[ホワイトリストに追加](bit.ly/amp-story-signup)してサーバーにアップ。
3.[Validate AMP](https://validator.ampproject.org/)


■デモなど詳細はこちらもどうぞ
[AMP stories（ストーリーズ）の作り方。どう使ってみる？](https://ocadweb.com/web/amp-stories)