Chrome Dev Summit

2018に

参加した話

Ryo Utsunomiya(@ryo511)

Tokyo WordPress Meetup

2018-12-21

自己紹介

• 宇都宮　諒（うつのみや　りょう）​
• 株式会社 一休 宿泊事業本部 エンジニア
• UIチーム所属
• 主な仕事
  • 宿泊予約サービスのUI開発
  • 一休コンシェルジュの開発サポート

Chrome Dev Summitとは

• Googleが毎年開催している、Webフロントエンド技術のカンファレンス
  • 今年は11/12〜13
• PWAとか、新しいブラウザの機能とかの話が聞ける
• WordPressを中心とした、CMSの話題も

今年のCDS

• 1日目は「現在のWebをより良くするためにできること」
• 2日目は「未来のWebで出来るようになること」
• ざっくりいうと、1日目はPWA、2日目はChromeの新しいAPIの話
• WordPressについては、1日目の「Progressive Content Management Systems」というセッションで触れられていた

ハイライト

Progressive CMS?

• 一般に、CMSは遅い 😓
  • 汎用性や後方互換性維持のため、コアのパフォーマンス最適化は難しいことも
• しかし、ユーザの側でモダンなWebテクノロジーを取り入れることで、CMSを高速化できる！
• モダンなWebテクノロジーを、必要に応じて取り入れられるCMSを、Progressive CMSと呼んでいる

モダンなWebテクノロジー?

• ざっくりいうと、AMPとPWA
• AMPはページの高速化に効く
  • AMPによる制約、amp cache
• PWAはいくつかの要素技術からなる
  • HTTPS => セキュアなWebサイト
  • Service Worker => オフラインWebアプリケーション、precacheによる高速化
  • Web App Manifest => ホームスクリーンにインストール

AMP

• AMP: Accelerated Mobile Pages
• 高速なWebページを作るために、様々な制約の付けたWebページ
• JavaScriptを実行できない、外部CSSを読み込めない等の制約がある
• Google検索にキャッシュされるという特徴がある

PWA

• Progressive Web Apps
• あまり明確な定義はない（Googleの定義も変遷がある）
• 最低限必要な要素は、HTTPS/Service Worker/Web App Manifestの3つ
• これらの技術によって、
  • セキュリティ
  • パフォーマンス
  • エンゲージメント
• などが改善される

WordPressの場合

• AMPとPWAのプラグインが、Googleの協力によって提供されている
• AMPプラグインは1.0がこの前リリース、Gutenbergに対応し、かなり機能が強化された
• PWAプラグインは開発が滞ってるような…。今後に期待。
• サードパーティのAMP/PWAプラグインも盛況

まとめ

• Webサイトのユーザ体験を改善するための技術の手札は増えてきている
• WordPressのプラグインも充実してきた
• モダンなWebテクノロジーを使って、Webサイトを改善しよう！