エンジニアこんにちは!pixivでエンジニアアルバイトをしているshoです。普段はpixivのフロントエンドを開発をしています。Storiesを使ったコンテンツをリリースしました。Storiesの開発で抑えたいポイントの話をしたいと思います。StoriesについてAMPとは、モバイルページを高速に表示するためのオープンソースフレームワークです。CacheというCDNによってキャッシュしたりと、ページを高速に描画することに特化しています。高速表示によってユーザー体験が向上するため、最近だとGoogle検索でも頻繁に表示されるようになりました。Storiesは、ストーリー形式でコンテンツや記事を配信できるフレームワークです。閲覧者は好きなタイミングでページを変えることができ、ページ内容も高速に切り替わります。フルスクリーン表示されるため没入感の高いコンテンツ配信ができます。HTMLというカスタムコンポーネントが提供され、使えるHTMLに制限を設けています。JavaScriptは基本使用不可CSSは50KB以下でインラインにするといった制限があります。逆に言えばこの制約によって、無駄のない高品質なユーザー体験コンテンツが出来るわけですね。構成は以下の様になっていて、1つのストーリーの中に複数ページを用意し、ページの中でレイヤーを分けてコンテンツを配置していく形になります。StoriesはAMPと同様Webコンポーネントフレームワークなので、あらかじめコンポーネントが用意されています。用意されているコンポーネントやHTMLを使って、ページ内のコンテンツを作っていきます。HTMLも通常のHTML同様、classを指定したスタイルの適用なども可能です。Storiesは視覚的かつ没入型のストーリー形式で表示されます。魅力的にコンテンツを伝えるためにも、公式のベストプラクティスを見ることをおすすめします。AMPに触れる方でも、テキストや画像のデザイン、アニメーションの良い例・悪い例などが端的にまとめられています。ランドスケープ表示AMPはモバイル向けを意識しているので、基本的にポートレート(縦長)表示になります。モバイル端末を横向きにした際や、デスクトップ端末向けにランドスケープ表示をすることもできます。ランドスケープ表示をする際は、モバイル向けデザインのままか、フルスクリーンで表示するかの2つの選択肢があり、内容コンテンツによって自由に選ぶことができます。表示の違いはこんな感じです。Storiesではフルスクリーンを用いて、イラストを全画面に表示させています。いうattributeを加えるだけで変更することができます。予備のコンテンツを配置AMPページは高速表示に重点を置いていますが、コンテンツによっては読み込みに時間がかかったり、動作環境によってはファイル形式が対応していない場合もあります。Storiesでは予備のコンテンツを配置することができます。pixivではイラストを用いるため、速度の遅い回線での読み込みに時間がかかる事が想定されました。そこで予備コンテンツとして軽量なコンテンツを配置しておくことで、読み込みに時間がかかっている際にユーザー体験が損なわれるのをカバーします。左が読み込み中、右が完了後コードとしては、本来表示させるコンテンツの子要素に、placeholderを指定するだけです。HTMLだけでなく通常のHTMLにも適用できます。</div></amp-img>他にもコンテンツの読み込みに関する類似の属性として、fallbackやnoloadingなどが用意されています。ブラウザ依存によるファイル形式の分岐なども行えるので、ぜひ試して見てください。Storiesではより没入感の高いユーザー体験を提供するために、各要素にアニメーションを付けることができます。</amp-story-grid-layer></amp-story-page>こちらはドキュメントページに掲載されているサンプルコードです。Storiesではあらかじめプリセットが用意されていて、動きをつけたい要素にanimate-in属性でプリセットを指定するだけで、アニメーション実装することができます。アニメーションの間隔や遅延、複数のアニメーションの組み合わせを行うなどのカスタマイズも容易にできます。amp.devさらに、CSSアニメーションを使うことによって独自のアニメーションを設定する事も可能です。使用できるCSSには一部制約があるので、その点には注意しましょう。amp.devpixivでは5秒間隔の横スクロールアニメーションのみを使っています。全てのイラストに対して動きを統一する事で、イラストへの没入感を高めています。多様なイラストを綺麗に見せる為に、表示される画面サイズによってイラストの中心点を変えています。今後、CSSを用いたアニメーションの導入なども検討しています。Storiesではストーリーをポスター画像を指定することで、Google検索などのポスターとして表示することができます。Google検索やDiscoverの表示例ポスター画像はカバーページ(最初のページに表示されるコンテンツ)と同じ内容のものを指定します。この時、使用する画像のURLなどは異なっても良いとの事で、pixivではカバーページの画像をそれぞれのサイズでクロップして配信しています。カバーページが動画の場合は動画のサムネイルを指定します。3種類が指定されていますが、それぞれ用途が異なるとのこと。Storiesのプレビューやエコシステムに広く利用されていくとの事です。アスペクト比まで指定されている画像を用意するのは大変ですが、可能な限り用意しておきましょう。Validationを通して最適化AMPは制約事項が多いので、気づかないうちに制約エラーを出している事も。有効なAMPページになっていないと、Googleなどの検索結果に表示されなかったり、キャッシュしてくれなかったりします。これを検証するために、AMPのバリデーターが利用できます。cacheなどにキャッシュされるようになります。バリデーションを通して、有効なAMPページであることを確認しましょう。バリデーション方法はブラウザコンソールWebインターフェースブラウザ拡張機能コマンドラインツールなど色々ありますので、環境に合わせて選びましょう。それぞれの使い方は、ドキュメントページに詳しく書かれています。Storiesでは、ユーザーがページ内のリンクを踏んだか、最後のページまで閲覧したかなどのアナリティクスを簡単に設定することができます。}}</script></amp-analytics>AMPでは様々な環境変数が定義されています。表示されているページ(<amp-story-page>)に設定されているIDを参照できます。それによって、閲覧者がどのページを閲覧し、どのようなイベントを起こしたかなどを追跡することができます。Storiesでは、各イラストページに作品詳細画面へのリンクボタンが設置されています。selectorを指定する事で、通常のWebページ同様に要素ごとのイベント情報も取得可能です。リンクボタンのイベントを検知する事で、閲覧ユーザのpixivへの導入率やページ数などの情報を記録しています。Storiesでのアナリティクスは、こちらの記事で詳しく解説されています。blog.amp.devまた使用できる変数などは、こちらにまとめられていました。各コンポーネントの使い方は、ドキュメントページで詳しく説明されています。amp.devまとめAMPは初めて触れたのですが、書き慣れたはずのHTMLなのに!と思う事も多々ありました。AMPのコードはパフォーマンスやキャッシュの容易さに重点を置いているので、無駄を省く事でここまで簡素化される事に驚きました。この記事を書いている間にも、AMPの公式ページが更新されていました。Stories含めAMPは今まさに成長中!というのを感じます。Storiesを検索しましたが、技術的な記事はあまり多くなく、特に日本の方の記事は数える程度でした。Storiesを導入する際にこの記事が少しでも役に立てば嬉しいです。ピクシブでは通年で新卒採用・長期アルバイトの募集をしています。アルバイトshopixiv運営本部エンジニアアルバイト。pixivのフロントエンドを開発をしています。猫好きのApple信者。»common.min.js.html。