marketplace.2017-03-22スタンドアロンAMPのススメCSSこんにちわ、@t32kです。2017に登壇してきました。弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。今日のアジェンダです。AMPのメリット表現力についてテンプレート分散について構造化データについてまとめといった内容でやっていきたいと思います。AMPとは?まずはAMPとは何か説明します。Consoleのヘルプによりますと、AMPはオープンな仕様に沿って作成されたWebページです。AMPキャッシュに保存されます。キャッシュに保存することでページをこれまで以上にすばやく表示できるようになります。AMPを構成する要素としては3つが挙げられます。CDNからの配信)AMPは一見して、普通のWebページのHTMLですが、一部、amp-imgのような独自タグが実装されていたり、既存のHTMLタグが拡張されていたりします。JSというファイルも読み込まなければなりません。CDNにキャッシュとしてコピーされ、高速に配信されます。https://www.mercariatte.com/jp/#development=1AMPエラーかないかどうかは、AMPを実装するページURLに#development=1を足すと、コンソール画面に(もしエラーがあれば)エラーメッセージが表示されます。SERP百聞は一見に如かずなので、動画で見てみましょう。このように、Googleの検索結果ページにおいて、AMPに対応したページが存在していれば、雷マークが表示されています。この時点で、該当のAMPは<iframe>で先読みされています。AMPの検索結果をタップすると、AMPビューワー(<iframe>)が表示され、閲覧できるわけです。このとき、表示されているページのリソースはGoogleのCDNから配信されています。fold)上のリソースしか読み込まれておらず、それ以外の部分はスクロールすると遅延読み込みされます。検索結果ページ上で必要以上に通信することがないということです。このようなフローでAMPは最速にWebページを表示しています。́▽`=)ノAMPのメリットをもう一度確認しますが、AMPにしたからといって検索ランキングが上がるファクターとして認められるわけではありません。Storieというカルーセルで目立って表示できたりするだけです。ページが速く表示されるということはそれだけユーザーの満足度は向上します。開発者としてAMPを実装するモチベーションとしては、単にAMPをパフォーマンスフレームワークとして考えていて、AMPのルールに従えば誰でも比較的簡単にハイパフォーマンスなWebサイトを実装できるのがメリットだと考えています。Japanも対応することが発表されました。そのほか、中国のBaiduやSogouといった検索プラットフォームも導入するそうです(同僚の@yui_tangが記事を書いています)。Linksという機能を利用することができ、これを使用するとGoogle検索結果ページ以外でもAMPビューワーでAMPを閲覧することができます。GIF画像は私のブログサイト上でAMPビューワーが立ち上がる様子です。気になるAMPキャッシュの更新ですが、基本的にはAMPドキュメントが表示されると更新リクエストされ、次のユーザーは最新のコンテンツを閲覧することができます。ようなAMPキャッシュURLに直接アクセスすることで可能です(適宜、ホストしているドメインや記事のパスに変更してください)。DevelopersAMPが望まれる背景GoogleはかねてからモバイルWebが遅いことを気にしており、そのため1秒未満で表示することを目標にしています。この目標は非常に難しいです。DNSルックアップやTCPコネクション、初回のHTMPリクエスト・レスポンスの往復でどうしても600ms以上はかかるわけで、残り400msの範囲で、サーバーサイドの応答やクライアントサイドのレンダリングをしなければなりません。Networking』ではこう言っています。バイトを送らないことよりもバイトを速く送る手段はない、つまり送るバイトは最小にこれ以上バイトを速く送ることはできないが、ユーザーのより近くに置いとくことはできるリクエストしてからページを用意するのでは遅すぎるので、AMPのように先読みして用意しておく。CDNのように、より近くからリクエストできるというのは、理にかなっているといえます。現実世界においてはお金は神様ですが、ことオンラインの世界においてはキャッシュとは非常に重要だとわかります。ユーザーの満足のためにもAMPを使うことが最善ではないかと考えます。AMPの表現力についてさて、ここからAMPを実装するにあたって疑問に思ったことなど解説していきます。Guardianなどのメディア企業をはじめ、世界各国の企業で採用されています。メルカリでもAMP実装をしています。どれも見た目がすごく簡素です...これには理由があります。クリティカルパスにいれないCSSは全てインラインに記述し50KBまでに制限するフォントの読み込みは適切にスタイルの再計算は最小限にGPUアニメーションしか認めないリソース読み込みの優先づけAMPの速さのため、守らなければならないことがいっぱいあります。大きいポイントは、AMPでは基本的にはJavaScriptを利用できない点にあります。世間には便利なjQueryプラグインのように簡単にリッチなインタラクションが実装できる手段があるので、これが使えなくなるのはだいぶ厳しいです。その点は問題ありません。AMPコンポーネントという、簡単にインタラクティブなコンポーネントが実装できる仕組みがあります。Carouselというコンポーネントを使いたければ、amp-carousel-0.1.jsという非同期Scriptを読み込み、<amp-carousel>というHTMLタグを使って実装していくだけです。ほかにもいろいろ便利なコンポーネントがあります。AMP公式サイトはAMPコンポーネントの実践的な使い方の見本市みたいなものなので、ぜひご覧になってみてください。Confで発表されました。amp-bindは現時点ではdevelopmentステータスですが、これをつかえばコンテンツを直接書き換えることができます。図のようにテキストを変更したり、class属性を変更してスタイルを変更したり、画像リソースの読み込み先も変更すること出来ます。このように、AMPを実装するからといってなにかをあきらめなければいけないことはないです。AMP上でもリッチなインタラクションは可能です。Timesの記事ページのメタ情報です。<link>タグでいろいろ指定してあるのがわかります。これをわかりやすく言えば、こうゆうことになってます。通常のデスクトップのためのページがあり、スマホ用のページが別途あります。そのスマホ用のページをAMP対応したページがあります。スマホページとAMPがPairedになっています。よって、同じ記事なのに3つのURL、テンプレートが存在することを意味します。AMPに対応するのに、さらにテンプレートを追加するのは管理工数的にだいぶ手間です。普通にCSSメディアクエリを使用すれば、一つのHTMLでデスクトップやスマートフォンに対応できるというのは言うまでもありませんね。レスポンシブレイアウトで実装すればAMPページひとつで事足りるといういみです。このようなAMPをStandaloneと呼びます。Standaloneの場合、<link>タグのrel="amphtml"の記述は必要ありません。href="https://www.mercariatte.com/jp/">上記のようにcanonical属性を1つ指定するだけです。工数的にはAMP実装したHTMLひとつを使い回せれば、願ったり叶ったりです。モバイルWebを早くするために有効な手段がAMPですが、モバイルで速いということは、当然デスクトップで見ても速く表示されることを意味します。Bakaus氏はこのように述べています。モバイル専用というわけではなく、単にモバイルファーストなだけだと述べています。その証拠にAMP公式サイトのデスクトップのHTMLを見ればわかるように、AMPで実装されています。レスポンシブレイアウトで作られているわけです。AMPかそうでないか、手っ取り早く判断するには<html>先頭タグにampもしくは⚡がついてるかどうか見れば分かります。Startただ、最初からAMPのことも考えつつ、レスポンシブレイアウトも考えるのは、いささか大変かもしれません。Startというボイラープレートのようなものがあるので、これをベースにカスタマイズしていけばよいかもしれません。インデックスに向けてテンプレートが一つ管理する利点として、モバイルファーストインデックスがあります。デスクトップ・モバイル・AMPで異なったテンプレート(たいていの場合、デスクトップが主でモバイルが副次的な扱いになっているかと思います)に分けていれば、正確にGoogleに情報を伝えることが出来ません。いう意味では、一つのテンプレートで管理するのは良いことです。メルカリアッテでもレスポンシブレイアウトでAMPを実装しています。構造化データについて最後に、構造化データマークアップについてです。実装したAMPをGoogleの検索結果ページでAMPとして認められるためには、ただAMPの仕様どおりHTMLに実装するだけでは足りません。適切な構造化データも追加しなければなりません。テストツールでエラーがないかチェックできます。構造化データというのは、そのページが何であるかを伝えるためのものです。この例で言えば、このページはNewsArticleで、いつパブリッシュされたか、パブリッシャーは誰かと言った情報を持っています。これはJSON-LDで記述していますが、その他にもMicrodataやRDFaのように直接HTMLのタグとして構造化データを埋め込むことができますが、HTMLの見晴らしが悪くなるので、JSON-LDで別途分けておいたほうが無難でしょう。GoogleもまたJSON-LDでの記述を推奨しています。AMPに対応している、構造化データの@typeは、今のところ、Article、NewsArticle、BlogPostingといった記事だけです。AMPを最も実装したいメルカリアッテの詳細ページは『記事』でしょうか?メルカリアッテはモノの売買ができるのEコマースのようなものです。記事とは言いにくいです。最近では『レシピ』や『レストラン』にも対応したようですが、私が採用したい『プロダクト』はまだのようです。様子を見ようと考えています。Cableまとめに入る前に、AMPのパフォーマンスフレームワークとしての評価を見てみましょう。AMPで実装したトップページ(動画:左)、実装前にトップページ(動画:右)で、載せているコンテンツ・レイアウトはほぼ変わりません。純粋にAMPかそうでないかの違いしかありません。Comparisonパフォーマンスの指標はどれもAMP側が勝っています。AMP自体の実装コストも、<img>タグを<amp-img>に変えたぐらいで数十分程度で出来ました(構造化データをどのように記述すればいいのか手間取りましたが...)。最後に、AMPはビジュアル表現を制限するものではありません。必要であれば、UIを作成する際にデザイナーさんと一緒にAMPコンポーネントを眺めたりするなど、協力していくことも良いでしょう。レスポンシブレイアウトの言葉もなかったような時代から運用しているサイトでもない限り、新規で作る際はレスポンシブレイアウトに対応したページで実装し、AMPも考慮にいれるとみんなハッピーになることでしょう。無理に『記事』の構造化データを埋め込む必要はありませんし、EコマースサイトのようなWebアプリケーションをAMP化するのも、今の段階では心もとない印象なので、簡単な読み物系のサイトであればAMPを導入することはよいでしょう。ありがとうございました。#io18jpはじめまして。採用情報メルカリは常に優秀なソフトウェアエンジニアを募集しています。ご興味を持たれた方はぜひご応募ください。skills月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。