LoginSignup
3
5

More than 5 years have passed since last update.

@ocadweb

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

Posted at

概要

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（ストーリーズ）の作り方。どう使ってみる？

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
5