目次
amp-storyとは？
amp-story コンポーネントを使うと、Instagramのストーリー投稿のようなビジュアルを中心としたページを作成することができます。
タップもしくは時間で表示するレイヤーを切り替えることができるので、コマーシャルページに適しています。
デモとして、日本の四季を紹介するストーリをつくったので、実際に見てもらえればどんなものかわかるかと思います。今回の記事では、アニメーションや動画再生などのことは触れず、基本的な作り方を説明します。
必要な知識
amp-storyからampの学習を始めてもできると思いますが、初めての方は、ampの基本的な書き方などについて、公式サイトなどの記事を参照してからの方がいいと思います。
また、ampはhtmlやcssの知識が前提なので、それらも必要となります。
コンポーネント
amp-storyコンポーネントが必要となります。リンクは、バージョンが古い場合もあるので、リファレンスにて最新のリンクを参照するようにお願いします。
<script async custom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
基本的にはamp-storyコンポーネントだけでストーリーページは作成できますが、動画をストーリー中に再生したい場合は、amp-videoコンポーネントが必要となります。
こちらも、リファレンスにて最新のリンクを参照してください。
参考
ページの作成
amp-storyは、amp-storyタグに、amp-story-pageタグとamp-story-grid-layerを入れ子にして作成していきます。
amp-storyを使う場合、bodyの子要素で許されるのは、amp-storyタグのみですので、amp-storyタグ外に他のタグを記述するとampエラーになります。
表示順は上から順にamp-story-pageタグごとに表示されます。まずは「Hello!amp！」と「Hello!amp-story！」とそれぞれ書かれた２ページのstoryページを作成してみます。
<body>
<amp-story standalone
title="Hello! amp-story!"
publisher="淡々日和"
publisher-logo-src="/demo/story_demo/assets/logo_square.png"
poster-portrait-src="/demo/story_demo/assets/poster2.png">
<amp-story-page id="cover">
<amp-story-grid-layer>
<h1>Hello! amp</h1>
</amp-story-grid-layer template="vertical">
</amp-story-page>
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
<h1>Hello! amp-story!</h1>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
amp-story
コードの説明をしていきます。
<body>
<amp-story standalone
title="Hello! amp-story!"
publisher="淡々日和"
publisher-logo-src="/demo/story_demo/assets/logo_square.png"
poster-portrait-src="/demo/story_demo/assets/poster2.png">
まず始めに、amp-storyの宣言を行います。amp-story には以下の項目が必須になります。
- standalone
- title（ストーリ名）
- publisher（製作者）
- publisher-logo-src（ロゴ）
- poster-portrait-src（ポスター画像）
一つ目のstandalone は決まり文句みたいなものらしいので、記述しておきましょう。
publisher-logo-srcですが、正方形（1:1）で作成された、最小96×96ピクセルで作成されたものとリファレンスに書かれています。形式は、jpg, png, gif 。ベクター画像の .svg .epsは避けるように記述があります。（ただ、サンプルで落とせるデータはsvgで指定しているので ？ となっていますが）透過はNG、視認性の低い配色（たとえば、青背景に青文字など）もNG、アニメーションもNG、また、1ブランドごとに使うロゴは一つで一貫するようにと指示があります。
poster-portrait-srcは必須項目ですが、オプションで poster-landscape-src と poster-square-src も指定できます。必須ではないですが、推奨というとで、できれば作成して記載したほうがいいようです。こちらも形式は、jpg, png, gif 。ベクター画像の svg epsは避けるように記述があります。ストーリーを象徴する画像であることが求められています。ただし、一つ目のストーリーの画像ではなくても問題はありません。各画像の最小サイズは以下です。
- ポートレート：696px x 928px（3:4）
- ランドスケープ：928px x 696px（4:3）
- 正方形：928ピクセルx 928ピクセル（1:1）
amp-story-pageとamp-story-grid-layer
続いて、ページを作成していきます。amp-storyの入れ子になるように、amp-story-pageタグを記述します。このamp-story-pageタグで囲まれたものがストーリ内の1ページに当たります。
<amp-story-page id="cover">
<amp-story-grid-layer template="vertical">
<h1>Hello! amp</h1>
</amp-story-grid-layer>
</amp-story-page>
ID要素は必須なので、わかりやすいものをつけておきます。ただし、最初のページだけは、id="cover"を割り当てます。
表示順は、amp-story-pageの上からですが、coverは一番上の方がいいでしょう。amp-story-pageの中にページの中身を記述していきます。
中身は、amp-story-grid-layer タグで記述していきます。CSSで微調整はできますが、templateを指定して要素がページでどのように表示されるかを指定します。templateは必須になります。templateは以下が用意されていますが、名前だけではよくわからないと思うので、それぞれを使用したデモを用意しました。
- fill
- vertical
- horizontal
- thirds
複数のamp-story-grid-layerを同一story-pageに指定してページを作成していきます。たとえば、fill指定した画像の真ん中あたりに文字を表示させたい場合は以下のようなコードを書きます。
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/spring.jpeg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<h1 grid-area="middle-third">日本の春</h1>
</amp-story-grid-layer>
</amp-story-page>
cssでh1のセンタリング、文字色、文字サイズは変えましたが、ほかはデフォルトです。表示方法にアニメーションを使用することができますが、今回は割愛して別の記事で説明したいと思います。
さて、ここまでの知識である程度のストーリページが作成できますが、もう二つ覚えておいた方がいい要素があります。
amp-story-cta-layer
amp-storyでは、story-page内にaタグは使用できません。一応指定してクリックすることはできますが、リファレンスの使用できる子要素のリストには含まれていません。
これを解決する一つの方法に、amp-story-cta-layer を使ってリンクを張る方法があります。これを記述して判明したことですが、一枚目のcoverには使用できないようなので、2ページ目以降に記述するようにします。
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/spring.jpeg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<h1 grid-area="middle-third">日本の春</h1>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="1">
<amp-story-grid-layer template="fill">
<amp-img src="assets/summer.jpg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<h1 grid-area="middle-third">日本の夏</h1>
</amp-story-grid-layer>
<amp-story-cta-layer>
<p><a href="/blog/2018/12/amp-story.html#back">記事に戻る</a></p>
</amp-story-cta-layer>
</amp-story-page>
このレイヤーをうまく使用することで、製品の購入ページに誘導することなどができると思います。なお、このレイヤーを含めてGoogle AdSenseなどの広告タグはストーリー内に入れることができません。
広告を表示したい場合は、アドマネージャーを使用し、1ページを丸々カバーできる広告を作り、amp-story-auto-adsコンポーネントを使用する必要があります。これも今回の記事では割愛します。
amp-story-bookend
最後にブックエンドの作り方を説明します。ブックエンドは、amp-storyの最後に表示できる補足情報のようなもので、関連記事へのリンクやソーシャルボタンなどを設置できます。必須ではありませんが、ユーザーをほかのコンテンツへ誘導するために必要になります。ブックエンドのフォーマットは決まっており、JSONデータで指定する必要があります。また、amp-story終了タグの直前に入れ込みます
<amp-story-bookend src="demo.json" layout="nodisplay"></amp-story-bookend>
</amp-story>
</body>
</html>
また、次のようなJSONデータを用意しました。
{
"bookendVersion": "v1.0",
"shareProviders": [
{
"provider": "facebook",
"app_id": "975464822641734"
},
"twitter",
"gplus",
"line",
"email"
],
"components": [
{
"type": "heading",
"text": "関連記事へのリンク"
},
{
"type": "small",
"title": "四季",
"url": "https://ja.wikipedia.org/wiki/四季",
"image": "assets/bookend_demo1.jpg",
"category": "wikipedia"
},
{
"type": "textbox",
"text": [
"淡々日和",
"いろいろと",
"勉強中"
]
},
{
"type": "cta-link",
"links": [
{
"text": "amp-storyを使ってストーリーページを作る",
"url": "/blog/2018/12/amp-story.html",
"amphtml": true
}
]
}
]
}
最初のbookendVersionは必須です。現在はv1.0を指定します。こちらもおそらくamp-storyのリファレンスページでアップデートがある場合告知があるかと思います。続いて、shareProvidersですが、シェアボタンを設置したいプロバイダを指定します。amp-social-shareで使えるものは指定できます。続いて components ですが、以下のtypeを指定できます。
※追記：facebookは、appidも必要となります。
- heading
- small
- landscape
- portrait
- textbox
- cta-link
headingでは、textを指定とすることで、ヘッダーにcomponentsについて説明をかくことができます。
smallでは、text,url,images を指定します。小さなサムネイル画像つきのリンクを作成することができます。
landscape,portraitは基本smallと同じで、text,url,images を指定します。また、categoryを指定してサブタイトルを指定できます。それぞれ画像の大きさが異なります。
textboxはカンマ区切りで複数行のテキストをかき出すことができます。
cta-linkはtext,urlを指定することでテキストリンクを指定することができます。
各リンクがAMP-HTMLに対応している場合、"amphtml": trueと指定することで、amp-cacheからほかのamp-cacheページへ遷移させることができます。