#概要

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

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

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

既にCNNやワシントン・ポストなどでもAMP stories （ストーリー）が作られている。
AMP stories

AMPについてこちらはこちらも参考になると思います。
リアルガチにヤバいAMP Start

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

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

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

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

##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

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

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"
      }
    ]
  }
}

title	表示されるテキスト（サイト名など）
url	リンク先のURL
image	アイコンや画像などのイメージファイル名（assets内に格納しているので、/assets/ファイルとなると思います。）

#AMP stories（ストーリーズ）を確認
1.AMP Playgroundでテキスト内容など確認。
2.ホワイトリストに追加してサーバーにアップ。
3.Validate AMP

■デモなど詳細はこちらもどうぞ
AMP stories（ストーリーズ）の作り方。どう使ってみる？