Chrome Dev Summit 2017 Keynote動画まとめ
10/23,24にChrome Dev Summitがサンフランシスコで開催された。全てのセッションの動画がYoutubeで公開されている。Webの動向を抑えておくためにはKyenoteだけでもと思い、動画の内容からキーワードを拾いつつ他のサイトの情報などを拾ってきてまとめておいた。あくまで私感の混ざったピックアップであることと英語の理解の問題で抜け漏れがあるかもしれないことはご了承いただきたい。
30分ほどのセッションだが、けっこう広範囲の内容に触れられている。中でもPWA関連にはかなり時間を割いていて本気度が伝わってくる。さらに後半のHTML,CSS,JS,DevToolsについてもそれぞれ話題は豊富で、真面目に情報を拾っていくとまとめきれなくなりそうだったので1つ1つの情報は薄めになったかもしれないが、今後のアップデートを追いかけるための入り口としておきたい。一般的にはモバイルファーストからAIファーストなどと言われようとも、まだまだWebの進化は続きそうだ。
PWA
ServiceWorker
- 新たにWebKitでもIn Developmentになった
- Is service worker ready?
- Edgeも既にIn Development
- WorkBox の利用がおすすめ
- Overviewの日本語訳がQiitaに投稿されている
- Workbox概要ページを日本語訳してみた - Qiita
HTTPS
Autofill
- 入力を容易に
- 毎月90億のフォームの入力をサポート
Payment Request API
Payment Request & Google Payment API
- Payment Request と Google Payment APIを統合
- クレジットカード、デビットカード、Paypalなどの数百万の決済サービスにアクセスする最善の手段を提供
- Google Payment APIはChrome Dev Summt当日の朝に公開された
One-Tap Sign-Up
Web Media Platform
Media Session API
Android O のPicture-in-Picture
Media Stream
getUserMedia
によるフルフレームのカメラアクセス
Shaka Player
InstagramのShaka Playerの使用によるWebサポート
以下のような状況にもユーザー体験を確保
- 機能が制限されたデバイスを持つユーザー
- 信頼性の低いネットワーク接続
Shaka Playerによる機能実現
- adaptive bitrate streaming(適応型ビットレートストリーミング)
- イメージキャプチャ・フィルタ
- WebGL
- Home Screen への追加
- Service Workerによるオフラインサポート
- 新しいバックグラウンド同期
Custom Tabs
Chrome Custom Tabs - Google Chrome
Trusted Web Activity
以下のようなCustom Tabsの課題を解消する
HTML
Web Components
Qiitaの日本語訳を参照
Polymer
Custom Elements Everywhere
- 各フレームワークがどのようにWeb Componentsに対応しているかを理解するのに役立てるツール
custom-elements-everywhere.com
AMP
CSS
Grid Layout
- モダンなWebのレスポンシブなレイアウトを実現
- Grid by Example
- 特定のレイアウトの例がそれぞれのブラウザでどのように動作するかを示す
ブラウザの対応状況
Can I use... Support tables for HTML5, CSS3, etc
JS
ES
- 殆どのブラウザがECMAScript 2015の機能に対応
- ECMAScript 6 compatibility table
- Chromeのカバレッジは基本的に100%
- クラス、エアロ構文、非同期待機
- Web上に構築するのが簡単で、生産的で、楽しいものになる膨大な機能
- ModuleとDynamic importsのサポート
※参考
V8
- 新しいバージョンでアーキテクチャを再構築した
- Speedometer のベンチマークが22%向上
- Top 25 Webサイトのパフォーマンスが5%上昇
- ARIES6 :次世代のJavaScript機能の指標⇒40%向上
- 専任のエンジニアがNode.jsのサポートに努めている
- Nodeが壊れるような内容のV8へのコミットは許可されない
WebAssembly(WASM)
- CやC++の低レベルコードでブラウザ機能にアクセスできる
- Chrome, Firefox, Safariサポート、Edgeもこの日Comming Soonが外れた
- Google EarthはWebGLをWASMで動かすデモを行う
- UnityとUNREAL ENGINEもWASMをサポート予定
※参考
Documenting the Web together
※参考
web-platform-tests Project
Tool
Chrome Dev Tools
Lighthouse
- Auditパネルで使用
- コマンドラインから実行可能
webpagetest.org
- Webページのパフォーマンスをテスト
- 世界中の場所からのパフォーマンス情報を確認できる
- webpagetest.org/easy では実際のデバイスでのチェック
- Lighthouseも統合されている
Chrome User Experience Report
- 人気のあるWebサイトのスナップショット
- Chromeユーザーが世界各地の様々なデバイスでどのように見えているかのサンプル
- 最初のリリースでは1万のサンプルのLoading Metricsに焦点が置かれている
- BigQueryでパブリッシュ
- SQLライクな文法で使用する