はじめに

この記事では、amp-storyでアニメーションを使った動きや、自動でページ送りする方法などをまとめていきます。

amp-storyの基本的な作り方は、「amp-storyを使ってストーリーページを作る(基本編)」にまとめてあります。

ページを自動送りする

ページを自動送りしたい場合は、amp-story-pageタグに　auto-advance-after で送る秒を指定します。

<amp-story-page id="cover" auto-advance-after="3s">

【 amp-story DEMO 日本の四季 自動送り付きバージョン 】

自動送りを指定するとページナビゲーションの白いバーにプログレス表示が行われ、あとどのくらいで次のページに行くのかがわかります。

また、指定しない場合は、手動で進ませることになるので、送りたいページとそうでないページで設定をわけることができます。秒数もページ毎に設定が可能です。

ただし、動画の再生が終わった後に次のページに進ませる場合は、秒設定はNGとなります。詳しくは、「動画を再生させる」で紹介していますので、そちらを参照してください。

アニメーション効果を使う

amp-story-page内のすべての要素にアニメーション効果を付けることができます。アニメーションをつけたい要素に、animate-in(アニメーション名),animate-in-duration(所要時間),animate-in-delay(遅延時間)の三つ付け加えるだけです。animate-inのみでも動きます。

先ほどのデモを例にすると、一つ目のcover要素で見出し文字がじわっと浮き出てきたのは、h1タグにanimate-in要素でfade-in を指定し、animate-in-delay でアニメーションが始まるのを1秒後にしたものです。

<amp-story-page id="cover" auto-advance-after="4s">
	<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="thirds">
	  <h1 grid-area="middle-third" class="w" animate-in="fade-in" animate-in-delay="1s">美しき<br />日本の四季</h1>
	</amp-story-grid-layer>
</amp-story-page>

アニメーション一覧

現在使用できるアニメーション名とデフォルトの所要時間です。指定しない場合は、この時間でアニメーションが終わるようになります。

アニメーション名	デフォルトの所要時間[ミリセカンド] 括弧内の数字は秒に直したもの
drop	1600 (1.6)
fade-in	500 (0.5)
fly-in-bottom	500 (0.5)
fly-in-left	500 (0.5)
fly-in-right	500 (0.5)
fly-in-top	500 (0.5)
pulse	500 (0.5)
rotate-in-left	700 (0.7)
rotate-in-right	700 (0.7)
twirl-in	1000 (1)
whoosh-in-left	500 (0.5)
whoosh-in-right	500 (0.5)
pan-left	1000 (1)
pan-right	1000 (1)
pan-down	1000 (1)
pan-up	1000 (1)
zoom-in	1000 (1)
zoom-out	1000 (1)

こちらも実際に見ないとわかりづらいと思いますので、デモを用意しました。

【アニメーションデモ】

指定した順でアニメーションを実行させる

同一の amp-story-page であれば、animate-in-after を使うことで、アニメーションの順番を指定できます。

使い方は、animate-in-after をつけて、ID指定をすることで、指定されたIDのアニメが終わった後にアニメーションするようになります。

<amp-story-grid-layer template="vertical">
	<amp-img src="assets/spring_side.jpg"
        width="620" height="276"
        id="img1"
        animate-in="fly-in-left"
        layout="responsive"
        animate-in-delay="0.5s">
    </amp-img>
    <amp-img src="assets/summer_side.jpg"
        width="620" height="276"
        id="img2"
        animate-in-after="img1"
        animate-in="fly-in-right"
        layout="responsive"
        animate-in-delay="0.5s">
    </amp-img>

上記のコードでは、id=img1のアニメが終わった後に、id=img2がアニメーションするようになります。一つ目のアニメーション要素には、animate-in-after はいりません。

デモでは、1ページ目は何も指定していないのでアニメーション要素が同時に発動します。2ページ目では、animate-in-afterを指定して順番にアニメーションをさせています。

【animate-in-afterデモ】

複数のアニメーション効果を付ける

1要素に付きanimate-inは一つしかつけれませんが、親要素、子要素を利用して多重効果を付けることができます。

次のデモでは、div要素にfade-inを付け、子要素のh1にfly-in-leftを付けることで『横から入って来ながら文字が浮かび上がる』アニメとなります。

【多重アニメーションデモ】

音楽/音声データを再生させる

mp3などのデータを再生させることも可能です。再生させたいamp-story-pageにbackground-audioを加えて音楽/音声データのパスを付け加えます。ただ、音楽/音声データは自動では再生されません。ユーザーがスピーカーボタンをタップしない限り再生は行われません。

<amp-story-page id="cover" background-audio="assets/demo.mp3">

【音楽/音声データ再生デモ】

動画を再生させる

動画を再生するには、動画再生用のコンポーネント amp-video が必要となります。headに以下を追加します。バージョンが古い場合もありますので、リファレンスにて最新バージョンを確認してください。

<script async custom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

amp-videoタグの細かい使い方は割愛しますが、幅と高さ、layout設定を行い、poster(読み込まれるまでに表示する画像)とsauceでsrcと動画のタイプを指定します。templateのfillを使えば画像と同じで画面いっぱいに動画を再生することができます。音声は音楽/音声データと同じで自動再生はされません。

HLS形式で配信できる場合は、フォールバックとしてmp4を。mp4しかできない環境ならmp4（H.264）を指定するのがいいようです。以下注意点をまとめました

• 4MBを超えないようにする
• 長い動画の場合は、動画を複数のページに分割する
• HLS形式で配信できるなら、HLSで。できないならmp4
• カバーページには特に大きな動画は使用しないようにする
• 動画は常に縦。16:9の動画
• ポスター画像の推奨は、720p（720w x 1280h）

詳しくは、「AMP ストーリーのおすすめの作成方法」で紹介されています。日本語訳されているページです。

動画が終わった後に次のページに自動送りしたい場合、auto-advance-afterで動画のIDを指定します。秒指定はNGになります。なので、amp-videoタグにIDを付け、親のamp-story-pageタグにauto-advance-after="動画ID"を加えることで、動画が終わると自動で次のページに行きます。なお、videoにloopを付けていると無効になっていまいますので、loop設定はしないようにします。

<amp-story-page id="cover" auto-advance-after="demo">
	<amp-story-grid-layer template="fill">
		<amp-video autoplay
		    width="720" height="1280"
		    poster="assets/demo.jpg"
		    layout="responsive">
		  <source src="assets/demo.mp4" type="video/mp4">
		</amp-video>
	</amp-story-grid-layer>
</amp-story-page>

【動画再生デモ】

CSSについて

amp-story関連のタグもCSSで調整することが可能です。たとえば、

      amp-story {
        font-family: 'Oswald',sans-serif;
        color: #fff;
      }
      amp-story-page {
        background-color: #000;
      }

のようにamp-storyタグにCSSを加えることもできます。デフォルトでさまざまな値が設定されているので、safariやchromeの開発ツールで値をとりながら確認したりすると分かりやすいです。公式では特に言及されていませんが、基本的にはデフォルトの値をリセットするようなCSSはよしたほうがいいかもしれません。

色々と考えられてstyleをとっている感じがあるので、基本はそこから加える形で共存するのがいいのかなと個人的には感じています。

amp-storyでは、ビジュアルで見せることを第一に考えているので、不必要な文字は載せるのはよろしくない。また、視認性が低い文字色なども避けるように公式サイトで言及しているので、CSSで、というよりか、いかにビジュアルでストーリーを組み立てれるかがポイントになると思います。

最後に

まだまだ勉強中ですが、公式ページを見るとAMPは奥が深いし、色々とやることも多い。amp-storyも最初は手軽につくれるかなと思って触り始めたら、しっかり作り込むには時間がいるな〜といった印象。ただ、シンプルなデザインになりがちなAMPの中では、中々刺激的なコンポーネントだと思う。