radioc@?

レディオキャットハテナ

Chrome Dev Summit 2017 Keynote動画まとめ

developer.chrome.com

10/23,24にChrome Dev Summitがサンフランシスコで開催された。全てのセッションの動画がYoutubeで公開されている。Webの動向を抑えておくためにはKyenoteだけでもと思い、動画の内容からキーワードを拾いつつ他のサイトの情報などを拾ってきてまとめておいた。あくまで私感の混ざったピックアップであることと英語の理解の問題で抜け漏れがあるかもしれないことはご了承いただきたい。

www.youtube.com

30分ほどのセッションだが、けっこう広範囲の内容に触れられている。中でもPWA関連にはかなり時間を割いていて本気度が伝わってくる。さらに後半のHTML,CSS,JS,DevToolsについてもそれぞれ話題は豊富で、真面目に情報を拾っていくとまとめきれなくなりそうだったので1つ1つの情報は薄めになったかもしれないが、今後のアップデートを追いかけるための入り口としておきたい。一般的にはモバイルファーストからAIファーストなどと言われようとも、まだまだWebの進化は続きそうだ。

PWA

ServiceWorker

HTTPS

  • HTTPS通信のChromeでのカバー率は全世界で64%
    • 前年比50%増

Autofill

  • 入力を容易に
  • 毎月90億のフォームの入力をサポート

Payment Request API

  • ECサイトJ.CREW の実装事例
    • ChromeからPayment Request UIが呼ばれる
    • 支払いのクレジット情報をChromeが保存している情報で補完する
    • 顧客の50%がこれを利用
    • 75%の入力時間を削減
  • 対応状況

www.w3.org

developers.google.com

Payment Request & Google Payment API

  • Payment Request と Google Payment APIを統合
  • クレジットカード、デビットカードPaypalなどの数百万の決済サービスにアクセスする最善の手段を提供
  • Google Payment APIChrome Dev Summt当日の朝に公開された

developers.google.com

  • 決済サービスStripe
    • Payment RequestとGoogle Payment APIを組み込んだStripe Elementsライブラリを提供

stripe.com

stripe.com

One-Tap Sign-Up

  • 新しいサインイン方式のライブラリ
  • Googleのプロパティを使ってOne-Tapでサインアップする
  • Credential Management APIとも統合される

developers.google.com

Web Media Platform

Media Session API

developer.mozilla.org

Android O のPicture-in-Picture

developer.android.com

Media Stream

  • getUserMedia によるフルフレームのカメラアクセス

developer.mozilla.org

Shaka Player

InstagramのShaka Playerの使用によるWebサポート

以下のような状況にもユーザー体験を確保

  • 機能が制限されたデバイスを持つユーザー
  • 信頼性の低いネットワーク接続

Shaka Playerによる機能実現

  • adaptive bitrate streaming(適応型ビットレートストリーミング)
  • イメージキャプチャ・フィルタ
  • WebGL
  • Home Screen への追加
  • Service Workerによるオフラインサポート
  • 新しいバックグラウンド同期

github.com

Custom Tabs

  • AndroidアプリからWebのコンテンツを表示する時にユーザーのブラウザを活用する
  • CookieやAutofillデータなどのユーザーのプロファイル情報を使ってアクセスできる

Chrome Custom Tabs - Google Chrome

Trusted Web Activity

  • フルスクリーンで表示されてWebとネイティブを一体化させる
  • Developer版Chromeで近々サポートされる
  • Androidサポートライブラリにより他のブラウザにも対応予定

以下のようなCustom Tabsの課題を解消する

  • アプリからコンテンツを呼び出すと画面上部にツールバーが表示される
  • 自分のサイト内でそのコンテンツを扱う時にツールバーは表示したくない

developers.google.com

HTML

Web Components

Qiitaの日本語訳を参照

qiita.com

Polymer

Custom Elements Everywhere

  • フレームワークがどのようにWeb Componentsに対応しているかを理解するのに役立てるツール

custom-elements-everywhere.com

AMP

  • 4億以上のAMPページ
  • 2,500万ドメイン
  • WebComponentsを使ってパフォーマンスを上げていく最善の例
  • 最新のYoutubeはWeb ComponentsとPolymerを使っている

CSS

Grid Layout

developer.mozilla.org

  • モダンなWebのレスポンシブなレイアウトを実現
  • Grid by Example
    • 特定のレイアウトの例がそれぞれのブラウザでどのように動作するかを示す

ブラウザの対応状況

Can I use... Support tables for HTML5, CSS3, etc

JS

ES

※参考

teppeis.hatenablog.com

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 EarthWebGLをWASMで動かすデモを行う
  • UnityとUNREAL ENGINEもWASMをサポート予定

※参考

medium.com

blogs.unity3d.com

www.unrealengine.com

Documenting the Web together

developer.mozilla.org

※参考

blog.chromium.org

blog.mozilla.org

blogs.windows.com

web-platform-tests Project

Tool

Chrome Dev Tools

Lighthouse

developers.google.com

Puppeteer …新しいOSSプロジェクト

  • テストと自動化のためのヘッドレスChromeインスタンス
  • シンプルなコードでテストできる

qiita.com

webpagetest.org

  • Webページのパフォーマンスをテスト
  • 世界中の場所からのパフォーマンス情報を確認できる
  • webpagetest.org/easy では実際のデバイスでのチェック
  • Lighthouseも統合されている

Chrome User Experience Report

  • 人気のあるWebサイトのスナップショット
  • Chromeユーザーが世界各地の様々なデバイスでどのように見えているかのサンプル
  • 最初のリリースでは1万のサンプルのLoading Metricsに焦点が置かれている
  • BigQueryでパブリッシュ
  • SQLライクな文法で使用する

blog.chromium.org

Chrome Dev Summit 2017の参考情報

qiita.com