UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • 0. オープニング
    00:00
  • 1. About AMP Conf 2019
    01:47
  • 2. Day.1 注目のトピック
    03:17
  • 3. AMP Stories とコンテンツへの向き合い方
    04:43
  • 4. 開発者以外による AMP コンテンツの提供
    07:00
  • 5. JavaScript 開発周りの進化
    08:06
  • 6. SXG を利用した AMP 配信について
    13:00
  • 7. LINE での利用について
    21:21
  • 8. AMP Email による動的なメール配信
    26:00
  • 9. AMP の懸念点
    27:53
  • クロージング
    30:36

ep.12 AMP Conf 2019 Report

2019/04/26
336 views
HANATANI TakumaOkazaki AkihiroDaisuke Shimizu

@potato4d が @tori3_jp と @okazou に AMP Conf 2019 に参加しての感想を聞いてみました。

ゲスト

清水さん

  • @tori3_jp
  • LINE UIT室 & Engineering Manager / Webview PM

岡崎さん

  • @okazou
  • UIT室 & Data Science and Engineering Center

AMP Conf 2019

  • 2019/04/17, 2019/04/18 開催
  • 今年は東京(六本木ヒルズ!)・昨年はオランダで開催
  • AMP に関するトピックのアップデート・企業ナレッジの共有などがある

Day 1 注目のトピック

  • AMP Stories
    • SnapChat や Facebook、 Instragram の「ストーリーズ」を AMP に持ち込んだようなもの
    • 特定のサービスに依存しない Web をベースとして共有しやすい体験を共有
    • 文字ベースの時代から映像の時代に近づく中で、新しい Web コンテンツの形として開発
    • AMP としてはコンテンツファーストを目指して開発していく方向性であると発表
  • オーサリングツール
    • AMP Stories についてはオーサリングツールが新しく提供開始
    • コードを書かずとも AMP 対応されたコンテンツの作成がはじまった
    • 広告担当者が AMP Stories で広告を出稿していく世界観を想定
  • Next.js の AMP Support
    • Zeit 製の React.js 向け Server Side Rendering フレームワーク
    • すでに Next.js の Web サイトは AMP で作られている
  • AMP Script
    • AMP 上で JavaScirpt が実行可能に
      • Worker DOM を利用した
      • まだまだ preact のようなライブラリがまだ完全に動くわけではない状態の様子
    • 制限
      • un-gziped の状態で 150k 未満である必要有
      • ユーザーインタラクション起因のイベント発火後 5 秒のみの実行時間制限

Day 2 注目のトピック

  • ヤフー株式会社の SXG 対応
    • ヤフートラベルでの事例
    • SXG 対応についてのセッション
  • SXG について
    • Signed HTTP Exchange
    • AMP コンテンツの配信が Google から行われる場合、ドメインが Google のものとなる問題
      • Cookie が扱えない
      • アクセス解析に問題を及ぼすことがある
      • ユーザーからの信頼性
      • 画面上部のヘッダーがノイズとなる
    • AMP ドメインの問題解消として Yahoo! トラベルでは SXG で対応した
  • SXG でできること
    • コンテンツの配信とドメインの信頼性を切り分けることができる
      • yahoo.co.jp ドメインから Google 側にキャッシュされているコンテンツを配信できる
    • 専用のサーバーを立ててパッケージングされたコンテンツを配信元へと渡す必要がある
      • AMP ページをパッケージングして Google へと送信するイメージ
      • ドメイン問題が解消されるという大きなメリットが有る一方、更新のために毎回パッケージングが必要でありシビア
    • SaaS では Cloudflare が対応している
  • 利用にあたっていくつかの課題感がある
    • iOS 以外の Chrome 73+ でのみ動作する
    • デバッグ方法が確立されていないためリリースしないと確認ができない

LINE や現場での利用について

  • アプリ内ブラウザについては今後に期待
    • Bento AMP への期待
      • AMP の基準を満たしていなくても既存の Web サイトに一部 AMP を導入できる
      • AMP 専用の Web サイトを開発するのがコストが高いため、 AMP と 非 AMP の相互運用性を考慮
      • 最終的には全ての Web サイトを AMP 対応できるように、漸進的な実装を期待
      • Web View の中で一部だけでも AMP が適用可能か
  • 社内では使えないかもしれないけれど AMP Email も魅力的
    • 後方互換性を維持したメール配信の仕様
      • これまでの Email に加えて、AMP 対応のクライアントは AMP Email が利用可能
      • Gmail でだけ動く、現状 Yahoo! メールなど各メーラーが実装中
    • メールに対して動的なコンテンツ配信することが可能となる
      • 例えば空き部屋情報など、リアルタイムな情報が求められるものを AMP で提供できる
    • すでに Indeed で実装されており、成果が二倍になったとのこと
  • 現場利用には AMP と事業のタイムラインのミスマッチが課題となる
    • AMP で実装する場合は AMP にある要素でページを作り終えないといけない
    • 作りたいときに本当に必要な要素が全て AMP にあるのか
    • 清水さんの場合は現場でカルーセルの UI が必要に
      • 当時の AMP にはカルーセルがなく、 Pull Request を発行
      • AMP としては Web を遅くしないため議論にはそれなりの時間を要し、 1 年後にマージ
      • 実装時には AMP と完全に合うとは限らないことを念頭に億