1 of 43

AMPで加速する

モバイルウェブアプリケーション

2017.09.24 HTML5 conf Room C 14:20-15:00

2 of 43

3 of 43

AMPで加速する

モバイルウェブアプリケーション (仮)

2017.09.24 HTML5 conf Room C 14:20-15:00

4 of 43

タイトルは雰囲気で決めた

  • 「AMPについてってどんな人が聞くのかな・・・」
  • 「そもそももう結構知られてる気がするけど・・・」

とりあえず言いたいことを話すことに決めました

5 of 43

DISCLAIMER

  • 今日は個人として話します
  • AMPはSEOのためのものとは思わないので、SEOの話は一切しません

6 of 43

goo.gl/AktJSs

7 of 43

自己紹介

  • やまぐちよしふみ
  • ymotongpoo
  • Developer Advocate, Google

​

8 of 43

今日の流れ

  • AMPそのものについて話す
  • Q&A

9 of 43

10 of 43

歴史

  • AMPは日本だけを見ていると動機を理解が難しい
  • 欧州は広告がひどすぎてAd Blockerの導入率が高い
  • メディア業界にも広告業界にも良くない

広告モデルがオープンウェブを支えてきた事実は認めよう

11 of 43

メディア系サイトに必要な要素再考

  • 静的コンテンツが主
  • 収益源は広告

広告の表示が静的なコンテンツの表示を妨げている

12 of 43

document.write()

  • ブラウザの非同期処理を一発で止めてくる
  • レンダリングをブロックする要因

歴史的経緯から仕方がない側面がある

​

13 of 43

静的ページを素早く表示する欲求

  • メインのコンテンツは素早く表示する
  • 広告もきちんと表示する
  • 表示が遅くなる原因はなるべく排除する

自力でチューニングする事が難しい人向けに簡単な仕組みを提供する必要性

14 of 43

Accerelated Mobile Pages

  • 2015年10月にOSS化
  • 初期段階よりGoogle、Pinterest、Twitterなどで採用

15 of 43

ページの高速化をするには

  • ページを簡潔に
    • JavaScriptを減らす、リクエストを減らす
  • 表示の最適化
    • 並列・遅延読み込み、先読み、レンダリング最適化
  • CDNの利用

16 of 43

AMPの構成要素

  • AMP HTML
    • ページを簡潔に
  • AMP JS
    • 表示の最適化
  • AMP Cache
    • CDN

17 of 43

AMP HTML

  • 「高速化する」というよりも「低速化させない」ことを主目的とした仕様が多い
  • カスタム要素を事前定義し宣言的な記述を強制
  • 機能が必要になったら標準のカスタム要素で提供する
    • 最も普及したWeb Componentsを利用したフレームワークと言っても良い（Custome Elements, Shadow DOM v1）

18 of 43

c.f. Web Componentsについて

16:20-17:00の泉水さんのセッションを見ましょう

19 of 43

AMP HTML

<!doctype html>

<html ⚡>

<head>

<title>Hello, AMPs</title>

<link rel="canonical" href="http://your.com/page1.html" />

<style amp-boilerplate>...</style>

<script async src="https://cdn.ampproject.org/v0.js"></script>

</head>

<body>

<h1>Welcome to the mobile web</h1>

<amp-img height="300" width="400" src="hoge.png"></amp-img>

</body>

</html>

20 of 43

21 of 43

AMP HTMLの他の制約

  • 外部CSS禁止、Embed CSS禁止
    • <head>内でのインラインでの対応

22 of 43

AMP JS

  • AMP HTMLを動作させるためのライブラリ
  • これ以外のJavaScriptは一切読み込ませない
  • ユーザー定義のスクリプトが入り込めない

高速化はAMPチームが担保。使用者は読み込んでおくだけで良い。

23 of 43

AMP JS

  • PRPLパターンを自分で実装するの大変じゃないですか
  • ファーストビューを早く表示
    • dns-prefetch, preconnect
    • 遅延読み込み
    • レイアウトの固定

24 of 43

c.f. PRPLパターン

  • Push: 最初のURL ルートに不可欠なリソースをプッシュ
  • Render: 最初のルートをレンダリングする
  • Pre-cache: 残りのルートを事前キャッシュ
  • Lazy-load: オンデマンドで残りのルートを遅延読み込み

25 of 43

AMP JS

Header

Logo

Responsive hero image

Headline

Article text

Image�in article

Some more text

Ad

“Above the Fold”

Prerendered

“Below the Fold”

Not Prerendered

26 of 43

AMP JS （例: amp-adでの広告の表示）

広告は3p.jsで登録される

  • register(‘a9’, a9) // 3p/integrations.js

registrations[id] = draw // 3p/3p.js, in register(id, draw) function

​

draw3pがremote.html/frame.htmlというiframe内のHTMLの中で呼ばれる

  • draw3p(win, data, configCallback) // 3p/integrations.js

run(type, win, data) // 3p/3p.js

const fn = registrations[id] // 3p/3p.js, in run(type, win, data) function

fn(win, data)

​

frame.htmlは次のような関数を通過していく

  • AmpAd.upgradeCallback() // extensions/amp-ad/0.1/amp-ad.js

AmpAd3PImpl.layoutCallback() // extensions/amp-ad/0.1/amp-ad-3p-impl.js

getIframe(parentWindow, parentElement, opt_type, opt_context) // src/3p-frame.js

getBootstrapBaseUrl(parentWindow, opt_strictForUnitTest) // src/3p-frame.js

getDefatulaBootstrapBaseUrl(parentWindow) // src/3p-frame.js

​

27 of 43

AMP Cache

  • フレームワークでキャッシュの仕組みを提供
  • グローバルに展開するサービスには大きな影響
  • HTTP/2対応なのでアセットが多いページでの影響大

28 of 43

AMP Cache

  • いまはGoogleのものとCloudflareのものがある
  • ここではGoogle AMP Cacheについて話す

29 of 43

AMP Cache（Google Global Cache）

Web server

Edge server

Edge server

Edge server

Edge server

Edge server

Edge server

Edge server

※これは概念図です

30 of 43

AMP Cache（HTTP/2）

31 of 43

ロードマップ

32 of 43

新しい機能は日々追加されている

  • amp-sidebar
  • amp-carousel
  • amp-list
  • amp-live-list
  • amp-bind

33 of 43

DEMO

  • AMP by Exampleを見てみよう

34 of 43

amp-sidebar

amp-carousel

amp-carousel

amp-lightbox

35 of 43

amp-bind

  • アメーバブログの検索候補表示で対応している
  • amp-bindとamp-listの組み合わせ

36 of 43

「AMPとPWA」に関して

  • そもそも「PWA」の定義ってなんだ
    • Progressive Enhancementをするウェブアプリ
    • マーケティングワードです
  • AMPは決められた技術スタックのフレームワーク
  • したがって共存しうる

37 of 43

AMPとPWAの共存

  • PWAで語られる代表的な技術
    • Service Worker
    • Add to Homescreen (A2HS)
  • これをAMPを使って実現する

38 of 43

amp-install-serviceworker

  • 名前のとおりAMPページからSWをインストールさせる仕組み
  • AMP Cacheからでも小さなiframeを使ってインストールさせる

39 of 43

AMP as PWA

  • AMPページ自体がPWAになっているやつ
  • AMP by Exampleがいい例です

40 of 43

AMP in PWA

  • PWA化したページの中でAMPをコンテンツ単位として埋め込む
  • ShadowDOMを使ってパフォーマンス向上
    • iframeを使うとコンテンツを読み込むたびにJSの解析のフェーズが入る

41 of 43

ShadowReader

42 of 43

まとめ

  • AMPはCustom Element、PRPLパターン、HTTP/2対応のCDNの組み合わせを体現した１フレームワーク
    • 技術的観点からみてもその背景を見ると面白い

​

  • AMPの考え方を自プロダクトに反映させる価値はある

43 of 43

Q&A