こんにちは、Software Engineerの @yui_tang です。
3月7-8日にニューヨークにて開催されたAMP Conf 2017に参加してきましたので、そのレポートを書きたいと思います。
メルカリでのAMPの取り組み
まずは、現在までのメルカリにおけるAMP(Accelerated Mobile Pages)の取り組みについて簡単にお話します。
2016年7月にメルカリのWebサイトの一部に導入を開始し、現在AMPページには数万PV/日のアクセスがあります。
メルカリ内の商品毎のページが全てAMP対応しているため、そのページ数は相当数に上ります。
流入経路ですが、現在元ページにlink rel="amphtml"を設定しているのみで、メルカリのサービス内にAMPページへのリンクは露出していません。
よって全てが検索流入となっており、事実上ランディング用のページとして機能しています。
AMP Confの主な内容
全体的な内容として、
- 7割 各AMP導入企業の実績やTIPS等のシェア
- PinterestやeBay等が事例を紹介。
- 3割 AMPチームから新機能や今後の展望の発表
- 以下にまとめました。
と言ったところ。
新たに発表された内容
新しく発表された内容としては、
- AMP Start
- amp-bind
- Progressive Web AMPs
- ServiceWorkerによるAMP JSのキャッシュ
- Server-side renderd AMP
- Ampersand by Cloudflare
となります。それでは、以下でざっくりと各内容を解説します。
AMP Start
公式のサイトのリニューアルと同時にAMP Startというページが開設されました。
これまでAMPを導入された方々は、既存のコードを地道に書き換える、もしくは一からコードを書かれていたと思います。
今回リリースされたAMP Startのページでは、templateや各種componentを簡単に作成してくれるページとなっています。
これによって、導入に掛かるコストが大きく下がったように感じますね。これから導入する方々は是非使ってみると良いと思います！
もちろん、公式サイトもAMP StartのページもAMPで実装されているので、既にどれだけの表現が出来るかはこれらのページで体感出来ます。
amp-bind
amp-bind allows you to add custom stateful interactivity to your AMP pages via data binding and JS-like expressions.
既に公式サイトにもリファレンスがあります。
AMPの大きな制約として「カスタムJavaScriptが一切使えない」という点が挙げられます。
しかし、通常のhtmlのようにJSを必要とするDynamicなコンテンツをカバーするように、AMPのcomponentsが少しずつ増えています。
そんな中、この機能は<amp-state>というcomponentでstateを管理しながら、JSっぽい書き方でDynamicなコンテンツを実現しよう、というもの。書き方の例はこんな感じ。
<p [text]="message">Hello amp-bind</p>
<button on="tap:AMP.setState({message: 'Hello World'})">
表現度は格段に上がりそうで期待出来ますね。ただJSをふんだんに使った既存ページとの実装の乖離が大きくなるため、二重管理が大変になる懸念があります。
しかし、そもそも機能的にAMP Componentのみで実現出来るページについては、今後AMP一本に絞ることも考えられるかもしれません。
Progressive Web AMPs
ServiceWorkerによるAMP JSのキャッシュ
AMP JSをService Workerでキャッシュすることにより、2回目以降のレンダリング時のAMP JSに掛かる通信を省略する。
Server-side renderd AMP
AMP Cacheサーバーでのサーバーサイドレンダリングによるレンダリング高速化。
以下の画像にある現在のフローをサーバーサイドで行うことによる高速化を狙っている。
Ampersand by Cloudflare
これまでのGoogle AMP Cache以外に、Cloudlfareから独自ドメインで利用出来るAMP CacheのAmpersandが発表されました。
AMP team’s OKR
さすがGoogle、AMPチームのOKRが発表されていました。
OKRとは、”Objective(目標)“と”Key results(結果)”を管理することで、目標達成や組織内コミュニケーションを活性化する仕組みで、メルカリでも導入されています。
- Objective 1: Users ❤️ AMP
- KEY RESULT 1: Users prefer AMP content over classic web and app based content when controlled for initial load speed.
- KEY RESULT 2: AMP time to first contentful paint across Search corpus reduced to median 400ms (not conting pre-rendering).
- KEY RESULT 3: 100 top e-commerce websites and 5 top e-commerce platforms use AMP.
- Objective 2: Unbreak Display Advertising on the Web
- KEY RESULT 1: Battery consumption and frame rate of an AMP page with AMP ads is better or equivalent to the same page loaded with an ad blocker.
- Objective 3: Keep AMP Healthy
- KEY RESULT 1: All performance regressions are caught before AMP releases are fully rolled out.
- KEY RESULT 2: Justin, Dima and Malte(コアメンバー) feel good about the core framework👍👍👍
- Work on AMP is productive.
- Objective 4: Developers ❤️ AMP
- KEY RESULT 1: 90% of developers who have built an AMP site rank AMP as the best documented JavaScript library.
- KEY RESULT 2: AMP does not unintentionally ship a breaking change in 2017.
- KEY RESULT 3: AMP has 10 new external regular contributors on GitHub.
- KEY RESULT 4: AMP Conf is a smashing success!
並べるととても多く見えますが（汗）、大きな４つの目標とそれを達成する為の結果がまとまっています。
今後プロダクトに導入するかどうかを判断する上で、開発チームがこのように大きな方向性を共有してくれているのは大きな判断材料になります。
<amp-cafe>
<amp-donuts>
動画もあります。
YouTubeのThe AMP Channelに、当日の内容がごそっと上がっています。今後セッション毎にも動画はアップされるとのこと。
CodeLab
いわゆるworkshopです。
参加者は、AMPチームのメンバーと質疑応答しながら以下の内容のいずれかに参加しました。
どの内容も解説を読むだけで十分進められる内容ですので、興味がある方は第一歩にどうぞ。
- Progressive Web AMPs
- タイトル通り、PWA + AMPを簡単に実装・体験する内容。
- Creating your first AMP Component
- 新規AMP Componentの作り方を学ぶことが出来る。
- Beautiful, interactive, canonical AMP pages
- AMP Startの便利さが分かる内容。
感想
既に多くのサービスが導入しているAMPですが、以前はDynamicなコンテンツやAdに関する問題等はまだまだ課題があるという印象でした。しかし、”eBayでは通常のWebページとAMPページで85%のコード共通化している”という話もあり、多くのサービスの努力とAMP自体の改善によって大きく状況は変わってきているように感じます。
今回発表を行った会社の中にはグローバルで展開しているサービスが多い中で、国や地域によって違う回線状況を強く課題として捉えている技術者が多く、今後より関心は高まっていくであろうと思われます。
引き続き、メルカリではAMPの動向を注目していきたいと思います。
