2019-10-03

AMP Storiesを使ってランキングコンテンツを作ってみた話

@gc_tech70

こんにちは。スマートショッピングの@gc_tech70と申します。

スマートショッピング（https://smashop.jp ）では食品や生活用品などの便利な情報をランキング形式で紹介しています。 prot 2cupmen https://smashop.jp/subcategory/404000/special 今回はそのコンテンツを題材にAMP Storiesを使って簡単なランキングストーリーズを作成してみたので、その知見を紹介させていただきます。

デモ

AMPとは？

Accelerated Mobile Pagesの略称
GoogleとTwitterで共同開発されている、モバイル端末でWebページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のこと

AMPの仕組み

ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込む分の時間を大幅に削減し、高パフォーマンスなWebページの実現が可能

AMP Storiesとは？

https://amp.dev/ja/about/stories/ - amp-storyという専用のコンポーネントで作成する、画面全体を使ったスライド形式のコンテンツ - ストーリー性のあるコンテンツやサービスの紹介など、プロモーションコンテンツに活用できます

AMP Storiesのメリット

簡単にストーリー性のあるWebページを作成できる
- 基本的にJavaScriptの記述を必要としないため、開発コストが低い
JavaScriptフレームワーク等に比べ学習コストが低い
AMP StoriesはGoogleの検索結果画面に専用ブロックで表示される！！！
- ただし一部制限あり。文末で後述
- 現状ではU.Sのみで試験中のため、日本では対応されていない
  - 外部のイベントでGoogleのAMPチームの方に、日本でいつ対応されるか聞いたところ、まだ未定とのことでした（2019/07/26時点）

実装方法

公式のチュートリアルがかなり分かりやすいので、それを参考に作成しました。 https://amp.dev/documentation/guides-and-tutorials/start/visual_story/?format=stories

今回は上記デモの1つであるカップラーメンのランキングストーリーズの作成方法を解説させていただきます。

HTML作成

まずはベースとなるHTMLファイルを作成します。特にファイル名に制約はないので、任意の名前で問題ないです。 ex. cup-noodles.html

headの記述

headタグ内の記述はざっくり以下のように記述します。 html <!DOCTYPE html> <html ⚡> <head> <meta charset="UTF-8">  <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-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> <link rel="canonical" href="自身のパス"> <title>AMP Storiesのタイトル</title> <style amp-custom> /* ここにスタイルを記述する */ </style> </head> </html>

amp-storyタグの記述

まずはbodyタグ内にamp-storyタグを記述します。 html <body> <amp-story> </amp-story> </body> AMP Storiesではbodyタグ直下にはamp-storyタグを1つのみしか記述できないという制約があります。そのため、別の記事ページにAMP Storiesを組み込んだりすることはできず、1つのオリジナルコンテンツとしてAMP Storiesを実装することになります。 #### メタ情報の付与 amp-storyタグには必須の情報があるので、指定します。他にも指定可能な設定がありますが、今回は必須のものだけ紹介させていただきます。 - standalone - AMP Storiesであることを識別するのに必要 - title - AMP Storiesのタイトル - publisher - AMP Storiesの作成者名 - publisher-logo-src - AMP Storiesの作成者のロゴ画像 - faviconと同様の役割（多分） - アスペクト比1:1が望ましい - poster-portrait-src - AMP Storiesのポスター画像 - Googleの検索結果に表示される - アスペクト比は3:4が望ましいスクリーンショット 2019-09-29 20.41.33

以下サンプルコードです。 html <amp-story standalone title="カップラーメン最新おすすめランキング！【2019年最新版】定番から限定まで" publisher="SmartShopping" publisher-logo-src="/img/logo_s.png" poster-portrait-src="/img/amp-story/cupnoodle/prot_2cupmen.png" >

ページ作成

AMP Storiesのページは1ページあたり1つのamp-story-pageタグで作成します。 amp-storyタグ内には複数のamp-story-pageタグを配置することができ、記述した順番に表示されるようになります。 html <body> <amp-story standalone title="カップラーメン最新おすすめランキング！【2019年最新版】定番から限定まで" publisher="SmartShopping" publisher-logo-src="/img/logo_s.png" poster-portrait-src="/img/amp-story/cupnoodle/prot_2cupmen.png" > <amp-story-page id="top10"> </amp-story-page> </amp-story> </body>

ページ内のレイヤー

AMP Storiesではページを表現する際に、複数のレイヤーを重ねてページを作成します。文章で説明するのは難しいのですが、このページがとても詳しく説明しています。 https://amp.dev/ja/documentation/guides-and-tutorials/start/visual_story/create_cover_page/?format=stories

レイヤー1の実装

カップラーメンの画像を配置します。 html <amp-story-page id="top10"> <amp-story-grid-layer template="vertical"> <amp-img src="/img/amp-story/cupnoodle/4_3/img10.jpg" width="720" height="960" layout="responsive"> </amp-img> </amp-story-grid-layer> </amp-story-page> スクリーンショット 2019-09-29 22.33.54

レイヤー2の実装

画像の上にカップラーメンの紹介記事を配置します。 ※スタイル調整するためにclass付与しています。 ```html <amp-story-page id="top10">

10位カップヌードルカップ

ペッパーを効かせたスパイシーな醤油スープは飽きがこない永遠のスタンダード。

“謎の肉”と呼ばれたダイス型のチャーシュー「コロ・チャー」、ふわっとした玉子は昨今ブームの“本格派カップ麺”とはひと味違う、時々食べたくなってしまう具材です。

</amp-story-page> ``` スクリーンショット 2019-09-29 22.42.24

レイヤー3の実装

実際の記事ページと商品の販売ページへのリンクを配置します。注意事項として、AMP Storiesのamp-story-page内にはaタグを使用することはできません。（クリックはできるが挙動が異なる）この対策として、amp-story-cta-layerタグ内にリンクを貼ります。

<amp-story-page id="top10">
  <!-- レイヤー1 -->
  <amp-story-grid-layer template="vertical" class="image-layer">
      <amp-img src="/img/amp-story/cupnoodle/4_3/img10.jpg" width="720" height="960" layout="responsive"
          class="product-image">
      </amp-img>
  </amp-story-grid-layer>
  
  <!-- レイヤー2 -->
  <amp-story-grid-layer template="vertical" class="text-layer">
      <article class="ranking-content">
          <h1 class="title-wrapper">
              <span class="rank">10位</span>
              <span class="product-name">カップヌードル カップ</span>
          </h1>
          <div class="text">
              <p class="one-line">
                  ペッパーを効かせたスパイシーな醤油スープは飽きがこない永遠のスタンダード。</p><br>
              <p class="two-line">
                  “謎の肉”と呼ばれたダイス型のチャーシュー「コロ・チャー」、ふわっとした玉子は昨今ブームの“本格派カップ麺”とはひと味違う、時々食べたくなってしまう具材です。
              </p>
          </div>
      </article>
  </amp-story-grid-layer>
  
  <!-- レイヤー3 -->
  <amp-story-cta-layer>
    <div class="button-wrapper two-line-button-wrapper">
      <a class="button"
        href="https://smashop.jp/dp/0000049698626">商品詳細を見る</a>
      <a class="button"
        href="https://smashop.jp/subcategory/404000/special/page:3#%E3%83%97%E3%83%AD%E3%81%AE%E3%83%95%E3%83%BC%E3%83%89%E3%83%A9%E3%82%A4%E3%82%BF%E3%83%BC%E5%AE%9F%E9%A3%9F%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0">実食レポートを見る</a>
    </div>
  </amp-story-cta-layer>
</amp-story-page>

スクリーンショット 2019-09-29 22.58.09

アニメーションの実装

実際に作成したページにアニメーションを実装していきます。 AMP Storiesではタグにアニメーション用の属性を付与するだけで、簡単に文字や画像をスライドインやフェードアウトすることができます。また、属性を付与することでアニメーションの実行時間や開始時間を制御することもできます。

animate-in
- アニメーションの種類を指定することができます。
- 現状のAMP Storiesで使用できるアニメーションは以下の通り

アニメーション名	デフォルトの実行時間（ミリ秒）
drop	1600
fade-in	500
fly-in-bottom	500
fly-in-left	500
fly-in-right	500
fly-in-top	500
pulse	500
rotate-in-left	700
rotate-in-right	700
twirl-in	1000
whoosh-in-left	500
whoosh-in-right	500
pan-left	1000
pan-right	1000
pan-down	1000
pan-up	1000
zoom-in	1000
zoom-out	1000

animate-in-duration
- アニメーションの実行時間を指定することができます。
animate-in-delay
- アニメーション開始するまでの遅延時間を指定することができます。例えば、この値を0.2sと指定した場合、対象ページが表示されてから0.2秒後に指定したアニメーションが実行されます。

例えば以下のコードだと、ページ表示0.8秒後に回転させながらランキングの順位を表示させることができます。（アニメーションは0.5秒で完了） <span class="rank" animate-in="twirl-in" animate-in-delay="0.8s" animate-in-duration="0.5s" > 10位 </span>

自作アニメーションの実装

上記アニメーションを使用するとアニメーション開始位置をこちらで指定することができず、デバイスによってはアニメーションを開始する前にボタンが少しはみ出てしまうというバグが発生しました。スクリーンショット 2019-09-30 13.54.49

そのため、ボタンのアニメーション開始までボタンを隠し、アニメーション開始と同時にボタンを表示させる必要がありました。しかし、単純にスタイルにopacityとtransitionを設定しただけだと、1つのHTMLファイルのため全ページに適用されてしまい、ページ遷移ごとのアニメーション設定ができませんでした。上記についてAMPチームの方に質問したところ、AMP Storiesでは表示されるページのamp-story-pageタグにはactive属性が付与されるという情報を得ました。

この情報を基に以下のように、transitionとopacityをボタンのスタイルに設定。 .button-wrapper { opacity: 0; transition: opacity 0.5s ease-in 2s; } amp-story-page[active]>amp-story-cta-layer>.button-wrapper { opacity: 1; } これで各ページのアニメーションの開始時までボタンを隠し、ボタンが画面下から登場する際にフワッと表示されるようになりました。

bookendページの実装

AMP Storiesでは最後のページにページのまとめとして、関連リンクをまとめたbookendページを作成することができます。 bookendページの情報はamp-story-bookendタグに読み込まれたJSONファイルから読み込まれます。 amp-story-bookendタグ内では、次のようにsrc属性でJSONファイルを指定し、layout="nodisplay"を設定します。 html <amp-story-bookend src="/amp-story/special/bookend/404000.json" layout="nodisplay"></amp-story-bookend>

ソーシャル共有ボタンの実装

bookendページはJSONファイルにソーシャルプラットフォームのタイプ名を記述することで、簡単に各ソーシャルプラットフォームに対する共有ボタンを実装することができます。 json "shareProviders": [ "twitter", "line", "whatsapp" ] ※Facebookを指定する場合は、app_idの指定も必要になります。スクリーンショット 2019-09-30 17.24.31

検証

作成したAMP HTMLが正常に動作するか検証する必要があります。具体的な方法としては、#development=1をURLに付与してアクセスします。例. http://localhost:8000/amp-story/special/404000.html#development=1 以下のようなメッセージがコンソールに出ていれば、正常に動作していることが確認できます。スクリーンショット 2019-09-29 23.48.10

リリース後はこちらでも検証しておいたほうがいいです。 https://search.google.com/test/amp スクリーンショット 2019-09-30 13.15.00 スクリーンショット 2019-09-30 13.16.40

これで完成です。

所感

今回は商品のランキングコンテンツを作成してみましたが、もう少し写真映えするような画像や動画を使って、またAMP Storiesを作ってみたいと思いました。
AMP Storiesは完全新規のオリジナルコンテンツとして作成する必要があるため、SEO対策にはそれなりの工夫が必要と感じました。
AMP Storiesの作成には制約も大きい一方で、大分パターン化されているので、素材さえあればスクリプトでAMP Storiesの量産も可能だと思いました。
この記事を書いていて気づきましたが、AMP Storiesの専用ブロックの表示対象になるのは現状、映画、ファッション、トラベル、TV番組、ゲーム、レシピのジャンルに該当するサイトのみだそうです。今回作成したようなコンテンツは上記ジャンルに該当しないので、専用ブロックの掲載を狙う場合は、気をつけたほうが良さそうです。

AMP Storiesを使ってランキングコンテンツを作ってみた話

デモ