イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました

こんにちは！pixivでエンジニアアルバイトをしているshoです。普段はpixivのフロントエンドを開発をしています。

pixivでは昨年末にAMP Storiesを使ったコンテンツをリリースしました。 AMP Storiesの概要や導入メリットなどは弊社のプロダクトマネージャーが紹介していますが、今回はエンジニア視点で、AMP Storiesの開発で抑えたいポイントの話をしたいと思います。

inside.pixiv.blog

AMPとAMP Storiesについて
- AMP Storiesの構成
AMP Stories開発で押さえておきたい7つのポイント
まとめ

AMPとAMP Storiesについて

AMPとは、モバイルページを高速に表示するためのオープンソースフレームワークです。
通常のHTMLに比べ仕様に制約があったり、AMPページをAMP CacheというCDNによってキャッシュしたりと、ページを高速に描画することに特化しています。高速表示によってユーザー体験が向上するため、最近だとGoogle検索でも頻繁に表示されるようになりました。

そしてAMP Storiesは、ストーリー形式でコンテンツや記事を配信できるフレームワークです。閲覧者は好きなタイミングでページを変えることができ、ページ内容も高速に切り替わります。またフルスクリーン表示されるため没入感の高いコンテンツ配信ができます。

制約のあるHTML

AMPは高速表示を実現するために、AMP HTMLというカスタムコンポーネントが提供され、使えるHTMLに制限を設けています。
例えば

JavaScriptは基本使用不可
CSSは50KB以下でインラインにする

といった制限があります。
逆に言えばこの制約によって、無駄のない高品質なユーザー体験コンテンツが出来るわけですね。

AMP Storiesの構成

構成は以下の様になっていて、１つのストーリーの中に複数ページを用意し、ページの中でレイヤーを分けてコンテンツを配置していく形になります。

引用元：https://amp.dev/documentation/guides-and-tutorials/start/visual_story/parts_of_story/?format=stories

AMP StoriesはAMPと同様Webコンポーネントフレームワークなので、あらかじめコンポーネントが用意されています。
用意されているコンポーネントやHTMLを使って、ページ内のコンテンツを作っていきます。AMP HTMLも通常のHTML同様、classを指定したスタイルの適用なども可能です。

引用元：https://amp.dev/documentation/guides-and-tutorials/start/visual_story/parts_of_story/?format=stories

AMP Stories開発で押さえておきたい7つのポイント

1. まずはベストプラクティスを見る

AMP Storiesは視覚的かつ没入型のストーリー形式で表示されます。魅力的にコンテンツを伝えるためにも、公式のベストプラクティスを見ることをおすすめします。

初めてAMPに触れる方でも、テキストや画像のデザイン、アニメーションの良い例・悪い例などが端的にまとめられています。 https://amp.dev/documentation/guides-and-tutorials/develop/amp_story_best_practices/?format=storiesamp.dev

2. ランドスケープ表示

AMPはモバイル向けを意識しているので、基本的にポートレート（縦長）表示になります。しかしモバイル端末を横向きにした際や、デスクトップ端末向けにランドスケープ表示をすることもできます。
ランドスケープ表示をする際は、モバイル向けデザインのままか、フルスクリーンで表示するかの2つの選択肢があり、内容コンテンツによって自由に選ぶことができます。

表示の違いはこんな感じです。

pixivのAMP Storiesではフルスクリーンを用いて、イラストを全画面に表示させています。

この切り替えは、supports-landscape というattributeを加えるだけで変更することができます。 amp.dev

3. 予備のコンテンツを配置

AMPページは高速表示に重点を置いていますが、コンテンツによっては読み込みに時間がかかったり、動作環境によってはファイル形式が対応していない場合もあります。
そのような場合に備えて、AMP Storiesでは予備のコンテンツを配置することができます。

pixivではイラストを用いるため、速度の遅い回線での読み込みに時間がかかる事が想定されました。
そこで予備コンテンツとして軽量なコンテンツを配置しておくことで、読み込みに時間がかかっている際にユーザー体験が損なわれるのをカバーします。

コードとしては、本来表示させるコンテンツの子要素に、placeholderを指定するだけです。この属性は、AMP HTMLだけでなく通常のHTMLにも適用できます。

<amp-img src=”illust.jpg” 
  layout="fill"   
  animate-in="pan-right">
  <div placeholder>
    <amp-img src="icon.png" 
      placeholder
      layout="fixed" 
      width="80px"
      height="80px">
    </amp-img>
  </div>
</amp-img>

他にもコンテンツの読み込みに関する類似の属性として、fallbackやnoloadingなどが用意されています。ブラウザ依存によるファイル形式の分岐なども行えるので、ぜひ試して見てください。

amp.dev

4. アニメーションの設定

AMP Storiesではより没入感の高いユーザー体験を提供するために、各要素にアニメーションを付けることができます。

<amp-story-page id="fade-in">
  <amp-story-grid-layer template="thirds">
    <h1>fade-in</h1>
    <div class="square"
      animate-in="fade-in"
      animate-in-duration="2s">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

こちらはドキュメントページに掲載されているサンプルコードです。
AMP Storiesではあらかじめプリセットが用意されていて、動きをつけたい要素にanimate-in属性でプリセットを指定するだけで、アニメーション実装することができます。
さらに、アニメーションの間隔や遅延、複数のアニメーションの組み合わせを行うなどのカスタマイズも容易にできます。

amp.dev

さらに、CSSアニメーションを使うことによって独自のアニメーションを設定する事も可能です。ただし使用できるCSSには一部制約があるので、その点には注意しましょう。

amp.dev

pixivでは５秒間隔の横スクロールアニメーションのみを使っています。全てのイラストに対して動きを統一する事で、イラストへの没入感を高めています。

また多様なイラストを綺麗に見せる為に、表示される画面サイズによってイラストの中心点を変えています。
今後、CSSを用いたアニメーションの導入なども検討しています。

5. ポスター画像の設定

AMP Storiesではストーリーをポスター画像を指定することで、Google検索などのポスターとして表示することができます。

ポスター画像はカバーページ（最初のページに表示されるコンテンツ）と同じ内容のものを指定します。この時、使用する画像のURLなどは異なっても良いとの事で、pixivではカバーページの画像をそれぞれのサイズでクロップして配信しています。
なお、カバーページが動画の場合は動画のサムネイルを指定します。

ガイドラインによると縦長・横長・正方形の３種類が指定されていますが、それぞれ用途が異なるとのこと。

Portrait：モバイル用に使用（一番使われる）
Landscape：デスクトップ向けに使用
Square：今後使用される（現状は使われていないらしい）

ポスター画像はAMP Storiesのプレビューやエコシステムに広く利用されていくとの事です。
アスペクト比まで指定されている画像を用意するのは大変ですが、可能な限り用意しておきましょう。

6. Validationを通して最適化

AMPは制約事項が多いので、気づかないうちに制約エラーを出している事も。有効なAMPページになっていないと、Googleなどの検索結果に表示されなかったり、キャッシュしてくれなかったりします。

これを検証するために、AMPのバリデーターが利用できます。バリデーションに通っていることで、有効なAMPページであることが保証され、Google AMP cacheなどにキャッシュされるようになります。
必ずバリデーションを通して、有効なAMPページであることを確認しましょう。

バリデーション方法は

ブラウザコンソール
Webインターフェース
ブラウザ拡張機能
コマンドラインツール

など色々ありますので、環境に合わせて選びましょう。

それぞれの使い方は、ドキュメントページに詳しく書かれています。 amp.dev

7. Analyticsを設定

AMP Storiesでは、ユーザーがページ内のリンクを踏んだか、最後のページまで閲覧したかなどのアナリティクスを簡単に設定することができます。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
    "vars": {
        "gtag_id": "YOUR_GOOGLE_ANALYTICS_ID",
        "config": {
            "YOUR_GOOGLE_ANALYTICS_ID": {
                "groups": "default"
            }
        }
    },
    "triggers": {
        "storyPageVisible": {
            "on": "story-page-visible",
            "vars": {
                "event_name": "amp_stories",
                "event_category": "story_progress",
                "event_action": "${title}",
                "event_label": "${storyPageId}"
            }
        },
        "clickViewDetail": {
            "on": "click",
            "selector": "a",
            "vars": {
                "event_name": "amp_stories",
                "event_category": "click_view_details",
                "event_action": "${title}",
                "event_label": "view_illustration_details_${storyPageId}"
            }
        },
        "storyEnd": {
            "on": "story-last-page-visible",
            "vars": {
                "event_name": "amp_stories",
                "event_category": "story_complete",
                "event_action": "${title}",
                "event_label": "bookend"
            }
        }
    }
}
</script>
</amp-analytics>

AMPでは様々な環境変数が定義されています。例えば ${storyPageId} は、表示されているページ（<amp-story-page>）に設定されているIDを参照できます。それによって、閲覧者がどのページを閲覧し、どのようなイベントを起こしたかなどを追跡することができます。

pixivのAMP Storiesでは、各イラストページに作品詳細画面へのリンクボタンが設置されています。 selectorを指定する事で、通常のWebページ同様に要素ごとのイベント情報も取得可能です。リンクボタンのイベントを検知する事で、閲覧ユーザのpixivへの導入率やページ数などの情報を記録しています。

AMP Storiesでのアナリティクスは、こちらの記事で詳しく解説されています。 blog.amp.dev

また使用できる変数などは、こちらにまとめられていました。

https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#variablesgithub.com