2018 年 4 月 27 日(金)に、
AMP に
0930 Intro + Keynote (ご 挨拶と 基調講演)
Intro
- AMP コミニュティの
行動規範 - ハッシュタグ #amproadshow
- Q&A は
sli.do.www で。
Keynote
- AMP HTML
- AMP JS javascirpt は
非常に 小さい。 - AMP Cache
- 多くの
Web ページが 2G、 1 秒遅れると 7 % コンバージョンが 下がる。 - JavaScript が
多くなると、 遅くなる。 - AMP の
コミニティの ゴールは、 AMP を 使う ことではなく、 Web を 早くすること。
AMP 年表
年表が
AMP 導入企業
- e-commerce サイトは、
半分の ユーザーが モバイルで アクセスしている。 - 27% コンバージョンが
増加した。 - 4% 売り
上げが UP。 - Yahoo が
AMP を 導入した。
AMP Web
AMP (Accelerated Mobile Pages) ではなく
AP (Accelerated Pages)
Mobile ページではなく、全ての ページを AMP で 作成する。 AMP の
最新情報は、 以下の 3サイトに 記載されている。 - apmproject.org
- ampstart.com
- ampbyexample.com
0945 AMP: A library for beautiful, responsive sites (AMP でできる Rich & Responsive な Web 開発)
Web サイト SPIEGEL DAILY
AMP で素晴らしい ユーザビリティを 提供している。 レスポンシブ AMP で 作られている AMP での
JavaScript メインフレームでは 使えない。 AMP
優れたUI ライブラリ Web Component で 作られている。 OpenSource で 最も 成功した Web Component AMP に
おける レスポンシブ
AMP では、element 属性に、 layout = rasoponsive
width、heght でを 固定すると リフローが 発生しない。 srcset を
指定
AMP だと、srcset が 対応指定ない ブラウザでも 動く。 amp タグ の
media クエリ
amp の要素に media クエリを 付与する ことができる。
css でも付与できるが、 要素に 対して 宣言的に なるので、 見やすいかもしれない。 AMP youtube
amp-youtube タグ を使うと、 パフォーマンスを 低下させる ことなく、 youtube を 埋め込める。
実装が 面倒な ものを、 amp タグで 実装する
以下は
- amp-carousel
- amp-accordion
- amp-lightbox 初期表示では
nodisplay - amp-video パフォーマンスに
寄与する 部分が Web Component で 実装されている。 - amp-sidebar
サイドバーを実装できる。 - amp-fit-text
テキストは3対2の アクペスト比に 収まるように 実装できる。
痒いところに 手が 届かない 部分を 実装している。 - amp-lightboxと
amp-accordion の 組み合わせ - amp-image-lightbox
- amp-animation
- amp-position-observer
ボタンを押すと、 ページTOPに 戻るが 実装できる。 - amp-social-share
type="system" data-mode="replace"
native のshare ボタンを 出力できる。
2018 年に AMP が 目指す もの
Full Experience AMP。
AliExpress、
アリババ系列の
Full Experience AMP の
注意点
全てのページが AMP Cache から 配信されるとは 限らない。
amp-toolbox-potimizer で、自サーバーから AMP Cache サーバーと 同等の 最適化を、 自サーバーで 実施する ことができる。
超早い。AMP By Example
AMP のExample が 存在する。 AMP Start
AMP Template を配信している。
最初は2-3テンプレートしかなかったが、 最近増えてきた。 AMP で
フルサイト が 作れる。
1015 Advanced interactivity with AMP
AMP で
動的サイトを 作る
E-commerceサイト AliExpress。
ローディング 1 秒かかるとコンバージョンが 7% 下がる。 AliExpress は、 4.3 % 増加、 load Time は 40% 下がった。 E-commerce サイト は
ページの パーソナライズ、 フィルターや ソートが 必要 - ページの
パーソナライズ は Cache される 特性から 難しい。 - ページの
パーソナライズ を 実現する AMP components が ある。
- ページの
パーソナライズ を
実現する amp タグ - amp-selector
- amp-list amp-mustache
amp-list
server上のjson を 取得。 amp-mustache
templeate を使用できる。 - amp-bind JavaScript を
実行して、 ページの 状態を 変える。
Sample e-commerce page
- amp-state
- amp-date-picker
AMP.setState
amp-form と
amp-bind の 組み合わせ
クレジットガードチェック
amp-bind-macro
タグamp-access + amp-mustache
login 状態で状態を 切り替える。
login state で、show、 hide を 変更していく。 未ログインユーザの
パーソナライズセーション
amp-pixel、CLIENT_ID で パーソナライゼーション。
サーバー上でIPアドレスが わかるので、 ユーザーの IDアドレスを ベースに 地域を 判断する。 amp-animation と
amp-position-boserver の 組み合わせ amp-form amp-bind amp-animation の
組み合わせ カートに
追加
amp form で、action、 action-xhr を 指定する。 AMP component が
ない 場合の 対処。
自分達で作る。
E-commerce での評価の 例
css で、1-5 までの 評価に 対応する css 定義を 作成した。 amp-bind
amp-bind は非常に 強力。
1045 Coffee Break
15分間の
Progressive Web AMPs
AMP と
PWA の 組み合わせ
スマートフォンユーザは80 % を 3 つの よく 使う アプリを 使用している。 ユーザーは 1月 あたりの ほとんど アプリケーションを インストールしない。 0個。 SericeWorker と
Manifest.json Add to HomeScreen を 追加できる。 manifest.json を 作成すると、 ホームへ 追加ボタンを 表示できる。
Microsoft もServiceWorker と、 Manifest.json が ある サイトを アプリケーションと して 登録する。 AMP か PWA か? PWA は
十分早い。 AMP は PWA と して 実装できる。
AMP はCache されてしまうのが、 PWA と して 問題となる。
ServiceWorker、Manifest.json Push 通知は、 同一ドメインである 必要が ある。
AMP からだと、Third Party domain に なってしまう。 AMP Cache の
利点を 享受しつつ、 PWA を 使う。 (Google 推奨) AMP to PWA
ファースト View はAMP で 提供する。 セカンド Load は PWA の ページに 遷移する。
AMP Page で、service worker install し、 install しているので、 セカンド Load PWA が 早い。
amp-install-serviceworker を使用すると、 amp ページで、 serviceworker を インストールできる。
Start fast、Stay fast AMP to PWA の
実装例
XING goibobo Rakuten recipeAMP to PWA だと、
開発コストが かかるのでは ?
既存サイトの場合は、 開発コストが かかる。
通常ページをAMP にし、 PWA の 機能を 盛り込む。 > canonical AMP。
AMP as PWA
で実装する。 URLが
share された 場合、 warm cache に アクセスさせたい。
share された url をfetch eventlistenar で、 amp の cache ページに 変更する。
Shell URL rewrite
を使うと、 share url を 書き換える ことができる ? AMP と
PWA の 実装例
現状は、投資を する 段階だと、 偉い人に 説明した ほうが よい。
(AMP in PWA) PWA のページの データソースと して、 AMP を 使う。
App Shell に該当する 部分を PWA と して cache して、 データソースと して、 AMP HTML を 取得する。
Native アプリで良く 使用される 手法。 Web ページでの
コンテンツの 埋め込み
iframe が使われるが、 これが 非常に 遅い。
iframe ではなく、Shadow DOM を 使う。 Shadow DOM 初回表示時に、
コンパイルが 走る。 2回目以降は コンパイルされた ページに アクセスが 走るので 早い ? Examples
- Shadow AMP (AMP-with Shadow DOM Library)
- fetch を
ハイジャックする コードを 実装する。 - pwa.js
- DOM の
Shadow化 不要な Header Footer を 非表示に するcss を 記載する。 - AMP Shadow slot < 外部から
AMP の ページに、 何らかの 要素を 挿入できる。 - Sample 正常動作は
OK。 異常系の 作り込みは、 必要に なる。 - amp.cards
まとめ
- PWA と
AMP の 組み合わせに ついて 説明した。 - AMP > 規則を
守ると、 非常に 高速な ページを 作成できる。 - bmw.com
PWA in AMP の実装例
- PWA と
AMP in production (AMP を 本番環境で 運用する )
作成から
本番運用までの フェーズ Generate > Optimize > Validate > Mesasure > Distribute Generate
HTML をAMP HTML に 変換する。 img > amp-img に 変換する。 Optimize
- 必要の
ない、 タグを 読み込まないようにする。 - css を
inline に して 最適化する。 - 画像の
最適化
- 必要の
Validate
- AMP の
Validator を 使う。 CI と
Monitoring CI node.js だと、
amphtml-validator が あるので、 ビルド後に、 amphtml の validation を 自動化できる。 curl でampthml-validator --help
html 取得 > amp.html validation の 流れで 使用する。
cron job + amphtml-validator でチェックする。 Monitoring
- Google Search Console で
チェックする。
Validator エラーが出ている ページを 一覧表示、 詳細を 確認できる。 - Lighthouse (Chrome の
Audits を 使う)。 - Webpagetest を
使う。
- Google Search Console で
Measure
amp-anatlytics
で結果を 測定する。 AMPページで、
A/Bテストを したい。
amp-anatlytics
で、A/B テスト が 実施可能。
Ajax submission with AMP-FORM
Crossorigin Ajax の問題が ある。
HTTP header の設定で この 問題の 回避が 可能 Content Mismatch 問題 original と、
amp ページで、 content 内容が 異なる。
これもGoogle Search Console で 確認できる。
- AMP の
What’s next in AMP
Infinite Scroll
Lightbox Garllery
Media
- Video Docking
- amp-audio タグ
- full screen 表示
- MediaSession api
navigator.MediaSession
でアクセス可能。
各インターフェースを実装すれば 作れる。 - AMP stories
AMPで、スライドショーを 作成できる。
タッピングしてストーリーを 楽しめる。
Layout
- amp-layout タグ
media query
。
- amp-layout タグ
AMPを
より 高速化する - amp-toolbox-optimizer
Developer Tool
- AMP Start
- Wordpress AMP Plugin
AMP for Email HTML メールを、
AMP HTML 化して 表示を 高速化する。 コントリビーションを
する。
参加してほしい。
ランチ
お弁当を
Guest Talk
Ameba * AMP の 過去、 現在、 未来
- Ameba Blog は、
2004年スタート。 AMP は、 2016年から。 - AMP を
導入した 理由
Search UX、Mobile UX を 改善できる。 - 80% が
Mobile アクセス。 モニタリング
- AD は
CPM収益を 測る ? - セッション数は
7倍に なった。 - ソーシャルメディア拡散から、
通常よりも アクセスが 増える ことを AMP Spike と 呼んでいる。 - 当初は
AMPの 広告の ROI は 悪かったが、 改善された。
- AD は
使用している
AMP コンポーネント Search Bar
- amp-bind、
amp-form、 amp-list
- amp-bind、
Lazy Load
amp-list を使う。 Twitter Sticky
特定のrefferが ついた、 アクセスの 場合、 特定の 要素を 出す。
というようなことを している。
AMPから
学ぶ メリット
メモれませんでした。。デメリット チューニングが
難しい。 制限が 厳しい。
Ameba News に
ついて
canonical AMP
ServiceWorker、manifest.json を 作った。
workbox を使っている。
画像系はCache First を Cache Storategy と して 指定。
AMP 開発に おける デザイナと エンジニアの 役割
2017年8-9月よりAMP化
- amp-iframe で
プラン情報取得 - amp-analytics で
crossdomain tracking - canaonical amp
- UX向上の
ため、 画面処理を 工夫した。
- amp-iframe で
AMP化の
効果 - 検索流入 35% UP
- セッション 25% UP
開発フローの
流れ (ざっくりしか 記載が なく 間違っているかもしれません。 ) - デザイナーが
プロトタイピングで MOCK を 作る。
AMP はデザイナーでも コンポーネントが 使える。 - MOCKを
エンジニアに 渡して、 機能実装。
- デザイナーが
AMP でも
遅かった - リアルタイムで
取得不要な ものは、 Cache する。 - 件数表示部は
リアルタイム取得だったが、 サーバーサイドで 取得するように 変更した。 - インラインcss
HTML内に埋め込むと 管理が 煩雑に なるので、 ビルド、 minifyした ものを HTML に 埋め込む。
- リアルタイムで
リリース後の
効果測定 - SearchConsole
- amp-analytics
- Calibre で
サイトパフォーマンスチェック
Q&A with AMP team
あまりちゃんと、
外部集客タグを、
amp-iframeを 使用して 設定する 話 - amp-iframe を
使用するのは おすすめできない。 - 複数の
amp-iframe を 使う 場合、 1つしか トラッキングできない。 - ベンダーに
実装を 相談するのが いい。
- amp-iframe を
AMPから
AMPへの ページ遷移 - ページが
存在しない 場合も あるので、 現状難しい。
- ページが
Calibre は
無料? - 有料
AMPに
適さない パターンは あるか? - 複雑なSPAアプリケーションを
置き換える ことは 難しい。 - NEWSサイト、
Eコマースサイトで、 ローディングを 早くするのに 向く。 - ほとんどの
サイトは、 AMP の 実装が 適している。
- 複雑なSPAアプリケーションを
AMP HTML の
仕様の 安定? 今後どうなるのか ? - フレームワークと
して 考えてもらえば OK。 JQuery、 Angularjs 等と 同じようなもの。 - Web の
Page Speed が 早くなったら、 役目を 終えてなくなるかもしれないが、 当分ない。
- フレームワークと
AMP for Emailに
ついて Gmail 以外でも 使えるか? - 他の Emailクライアント プロバイダと
もやりとりしている。 - Gmail だけでなく、
Emailクライアント全体で 使える ことを 目指す。
- 他の Emailクライアント プロバイダと
Monetization with AMP
Web 広告の
3つの 問題 - 邪魔
- 表示に
時間が かかる - 安全性
Web 広告の
遅さの 解消方法 - サイズを
宣言する - コンテンツを
分ける - プライオリティを
下げて 表示する
- サイズを
AMPhtml ads
- 新しい
広告タグの 機能 - 広告向けの
AMP HTML を 作る - 通常の
広告と しても 動作する - 超早い
- AMPhtml を
GUI で 作る ツール - クリック後の
LP も AMPに する
- 新しい
AMP Paymentrequest
AMP ページで使えるようになった
個人的な 感想
以下、
AMP for Email が
使いたい。
Gmail は今年中に サポートする そうです。 普及するなら、 HTMLメールの 置き換え。 サポートしている クライアントだけ AMP メールで 送るとか。 AMPHTML ads
LP の後に 遷移が 遅くなる 対策問題は ありますが、 広告バナー、と LP の AMP 化を もうやるべきかなと 思いました。 AMP html で
AB テスト。
Google Optimize の勉強も 兼ねて、 仕込んで 見たいなと 思いました。 古めかしい
サーバーサイドレンダリング で、 canonical AMP を 作るのに 希望を 感じた。 古い サイトを 移行するとして、 Good Old Web > SPA > PWA ではなくて、 Good Old Web > canonical AMP でも 良いのかもしれない。
と思いました。 これであれば、 サーバーサイドレンダリングの ままで、 サイト早い 且つ、 ログイン状態等の Stateの 制御も できそうです。 amp-toolbox-optimizer
自サイト上で、AMP Cache と 同様の 速度を 実現する ツール。
静的サイトジェネレータと組み合わせて 使ったりしても いいのかもしれません。
個人で
来年も
以上です。
コメント