Posted at

AMP stories(ストーリーズ)使わないなんてもったいない!

More than 1 year has passed since last update.


概要

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