Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2017年のChromeのアップデートまとめ

428 views

Published on

GDG Tokyo発表資料。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

2017年のChromeのアップデートまとめ

  1. 1. 昨年のWeb動向
  2. 2. 自己紹介 • 大学卒業後、監査法人で会計士として勤務 • プログラマーへ転身 • 個人で主に企業向けWebアプリケーションの受託開発 • PolymerというJSライブラリのユーザー会代表
  3. 3. 内容 CHROME
  4. 4. Mozilla CTOの浅井さんが作成したインフォグラフィックより 日夜進化するWebプラットフォーム
  5. 5. 今Webが熱い!?
  6. 6. WoT (Web of things) IoTデバイスの統合プラットフォームの基盤技術 PWA (Progressive Web App) Multi Media (WebXR WebRTC) 音声/動画ほかAR/VR/MRなど多様なメディアの表現媒体 ネイティブアプリのユーザー体験に近い先進的Webアプリの提供環境
  7. 7. CHROME
  8. 8. CHROME 直近のリリース(56-64)を10分で振り返り
  9. 9. 56 (2017/12)
  10. 10. 主なアップデート • Web Bluetooth APIへの対応 • CSSプロパティ position: sticky; のサポート • デフォルトのコンテンツ配信がHTML5に移行 • WebVRのOrigin Trialの試験的リリース • WebGL 2.0 APIが利用可能に • Payment Request APIの変更
  11. 11. Web Bluetooth API 従来ネイティブアプリでしか接続できな かったBLE(Bluetooth Low Energy)デバ イスに、GATTプロトコルを使って手軽 にアクセスできるようにする技術仕様。 わずか数行のJSコードでLEDディスプレイ、玩具、電球などのBLEデバイスに Webから簡易に接続が可能になる。
  12. 12. position: sticky; 任意のポジションにスクロールした時点 で要素が画面上に固定されるようなレイ アウトを実現できる。 スクロール後もヘッダーやナビゲーションを画面上に止めるような要素のレイア ウトをJSを使わずCSSだけで実現できる。
  13. 13. HTML5への移行 Flashのデフォルトの利用が回避され、 今後コンテンツの配信はHTML5をデフォ ルトとして行われるようになる。 Flashが使用されているサイト開いた場合、HTML5による代替コンテンツの読み込 みが試みられ、HTML5に対応していない場合には初訪時に実行の許可を確認する。
  14. 14. その他 • WebVRの試験実装リリース • WebGL 2.0 APIが利用可能
  15. 15. 57 (2017/03)
  16. 16. 主なアップデート • display: grid;によるCSSグリッドレイアウトに対応 • Media Session APIのサポート • Payment Request APIの改善 • CSSプロパティcaret-colorを利用してテキスト入力カーソルの色を変更可能に • CSSプロパティtext-decorationによって開発者が線の色やスタイルに独自の視覚効果を設定可能に • Fetch APIのResponseクラスがredirected属性をサポートするようになり、意図せず信頼されないリダイレクト先が開か れるリスクが軽減された • IndexedDBのグローバルエイリアスで-webkit-接頭辞を削除可能に • padStartとpadEndによって、テキストにパディングを設定することが可能に
  17. 17. display: grid; グリッドレイアウトは、行と列の二次元 のグリッドシステムをベースに要素を配 置するレイアウト手法。 直感的とは言い難いfloatを使ったレイアウトや 一次元上にしか配置ルールを設定できないFlexboxに加えて より直感的で簡易なグリッドベースのレイアウトが実現可能になりました。
  18. 18. Media Session API Media Session APIを使用すれば通知画 面やロック画面上でのオーディオ情報の 表示や操作が可能になる。 Webでもユーザーに対してネイティブアプリのような視聴体験の提供が可能に。
  19. 19. 58 (2017/04)
  20. 20. 主なアップデート • IndexedDB 2.0を完全サポート • display: fullscreen;対応 • iframeのsandbox属性として指定可能なキーワードとしてallow-top-navigation-by-user- activationをサポート • display: flow-rootをサポート • PointerEvents.getCoalescedEvents()をサポート • data: URLsを使ってWorkerやSharedWorkerが作れるようになったことで、オリジンの匿名 性が排除され、Workerを利用した開発がより安全に
  21. 21. IndexedDB 2.0 IndexedDBは、ファイルやblobなどの構造化されたデータを保存するク ライアントサイドのストレージ機構。高パフォーマンスなデータの検索 を行うために、インデックスを使用しているのが特徴。 v2.0より、オブジェクトストアやインデックス名の変更がサポートされた ほか、バイナリキーのサポート、getKey()やopenKeyCursor()、 continuePrimaryKey()等のメソッドが追加された。 構造化された多様なアプリケーションデータの永続化の手段として、インデック スベースの高度な検索性を備えた実用的なストレージが利用可能に。
  22. 22. display: fullscreen; CSSプロパティdisplay: fullscreen を使うことで、ネイティブアプリの ようなフルスクーリンのブラウジン グモードでWebアプリを起動でき るようになった。 ゲームやビデオなどのブラウジングする際の没入体験がの改善が期待される。
  23. 23. 59 (2017/06)
  24. 24. 主なアップデート • Mac上でもOSネイティブな通知機能が利用可能に • Headless Chromeのサポート • Image Capture APIをサポート • MediaError.messageにより、メディアプレイヤーのエラーに関するデバッグ情報をWeb開発 者に提供
  25. 25. Mac OSの通知機能 従来のChrome独自の通知ボックスに替 えて、Mac OSのネイティブのシステム 通知が使えるようになった。 他のシステム通知と同様のルックアンドフィールでプッシュ通知が可能になる。
  26. 26. Headless Chrome Headless Chromeは、主に自動テストや サーバー環境向けに、ウィンドを開いて レンダリングの出力結果を表示すること なく、コマンドライン上でブラウザのあ らゆる機能を実行可能にするためのルー ツ。 公式ブログで紹介された利用例として、PWA対応アプリをSeleniumを使ってユニ ットテストしたり、WikipediaのページからPDFを生成したり、DevToolsを使っ てページを検査したりとった多様な使い方が紹介されている。
  27. 27. Image Capture API Image Capture APIを使えば、ブラウザ の実行環境のデバイスに搭載されたカメ ラを使用して、フル解像度で画像の高度 な撮影が可能になる。 従来は、解像度や設定に利用上多くの制約があったカメラ機能がより高度に活用 できるようになった。これによって、ズーム、明るさ、コントラスト、ISO、ホワ イトバランスといった項目も細かくコントロールできるようになった。
  28. 28. 60 (2017/07)
  29. 29. 主なアップデート • Paint timings APIのサポート • font-displayのサポート • WebAssembly APIの正式サポート • Web Budget APIのサポート。プッシュ通知やデータの同期のように負荷のかかるバックグラウンド処 理に関して、事前に確保したBudget(予算)の中で処理を行うことが可能になった。 • PushSubscription.expirationTimeがサポートされ、期限切れのサブスクリプションを通知可能に • Object restとObject spreadのサポート。オブジェクトのマージやシャローなクローン生成といった操 作がより簡単に。
  30. 30. Paint Timings API Paint Timings APIを使えば、描画の読み込み段階に応じて、パフォー マンス指標を取得することができる。 パフォーマンスの改善や初回の描画のチューニングに役立ち、 Headless Chromeを使ったテストにも有効。
  31. 31. font-display Webフォントを利用する場合、モダンブ ラウザはフォントデータのダウンロード が完了するまでフォールバックの仕組み を持っているが、どのタイミングでカス タムフォントをページ上に反映させるか( あるいはダウンロードに失敗した場合の 処理)についてブラウザの挙動を開発者が 指定できる。 Webフォント読み込みに起因する遅延を回避しながら、ブラウザによるデフォル トのフォールバックの挙動を開発者が細かく調整できる。 auto デフォルト値。ブラウザのフォント読み込み動作がそのま ま実行される。 swap フォントフェイスにブロック期間は与えず、無制限のスワ ップ期間を付与する。 ※その他 fallbackやoptionalといった指定も可能 block フォントフェイスに短いブロック期間と無制限のスワップ 期間を付与する。
  32. 32. WebAssembly WebAssemblyは、CやC++といった言語 で記述されたコードをコンパイル済みの バイナリフォーマットの形式でブラウザ に提供することで、Web上で効率的かつ 高速な処理の実行可能にしてくれる技術 。 オンライン上における映像編集や、JSでは実現困難な高フレームレートで高速な 動作を求められるUnityゲームの開発に利用が期待されています。
  33. 33. その他 • Web Budget APIのサポート。プッシュ通知やデータの同 期のように負荷のかかるバックグラウンド処理に関して 、事前に確保したBudget(予算)の中で処理を行うことが可 能になった。
  34. 34. 61 (2017/09)
  35. 35. 主なアップデート • Javascript Module(ES6 Modules)のサポート • Web Share APIのサポート • WebUSBのサポート • scroll-behaviorプロパティを利用したページ内でのスムーズなスクローリング • 16進数によって4桁または8桁のカラーコードを記述する際に、末尾にアルファ値を記述することで 透過度を指定できようになった。 • Visual Viewport APIによって、画面上に表示されたコンテンツに対してサイトからの相対位置でア クセスできるようになりました。これによりピンチアクションによるズームの実装などが容易にな る。
  36. 36. Javascript Modules <script type=“module">エレメントを使 い、ES6 ModulesベースのJavascriptモ ジュールのインポート/エクスポートが可 能になった。 依存関係にあるモジュールを並行してフェッチしたり、キャッシュを使ってペー ジ全体で重複を排除しながら適切な順序でスクリプトが実行可能になる。 またNodeでも共通の仕組みを基盤することで、Isomorphic JSによる開発が可能 になる。
  37. 37. Web Share API Androidがネイティブに提供するシェア 機能を呼び出し、デバイスにインストー ル済みのネイティブアプリ(将来的には Webアプリも)とテキストやリンクなどを 簡単にシェアできる。 現在のように個々のSNSの共有ボタンを画面上に埋め込む必要がなくなり、ユー ザーのシェア体験も改善される。
  38. 38. WebUSB WebUSBは、USBデバイスとウェブを安 全に接続しブラウザからデバイスを制御 するための技術。 利用者にとっては、専用のドライバやソフトウェアのインストールによるセット アップが自動化でき簡易になる。 開発者にとっても、JavasciptベースのSDKを活用することでOSごとのドライバ 開発が不要になるといった利点があります。
  39. 39. 62 (2017/10)
  40. 40. 主なアップデート • Network Information APIの改良 • OpenTypeの可変フォントをサポート • DOM要素からメディアのライブキャプチャが可能に • HTTPページ上でユーザーが入力フォームにデータを入力する場合、アドレスバーに警告を表 示 • iOSのChrome上でPayment Request APIが利用可能に • WebVRのOrigin Trialのバージョンアップ
  41. 41. Network Information API 新たなNetwork Informantion APIは、( 従来のように理論的な接続環境の推測で はななく)デバイスの実際の接続状況から ネットワーク回線のパフォーマンスを判 定し通信速度やスループットを指標とし て提供してくれる。 弱いネットワーク環境にいるデバイス向けに軽量なバージョンを配信するといっ た、ネットワーク環境に応じた動的なアプリケーションの配信が可能になる。
  42. 42. OpenTypeの可変フォン ト 一つのフォントファイル内に、フォント ファミリの複数のインスタンスをパッケ ージ化することができる。 従来は、フォントファミリのバリエーシ ョンは個別のフォントファイルとして保 存する必要がありました。 font-variation-settingsを指定することで、目的のフォントスタイルを柔軟に拡張 して利用することが可能です。
  43. 43. メディアのライブキャプ チャ audioタグやvideoタグといった HTMLMediaElementsからMediaStream 形式で直接ライブキャプチャすることが できるようになる。 画像や音声のようなコンテンツを独自の加工処理を加えたり、 WebRTCを介してリモートサイトとコンテンツをリアルタイムに送受信したりで きる。
  44. 44. 63 (2017/12)
  45. 45. 主なアップデート • Javascirpt modulesの動的インポートが可能に • 非同期イテレーター(Async Iterators)と非同期ジェネレーター(Async Generators)のサポート • CSSのoverscroll-behaviorプロパティのサポート • パーミッションUIの変更 • Promiseインスタンスでfinallyが利用可能に • 新しいDevice Memory APIによって、ユーザーデバイスのメモリサイズを把握でき、メモリサイズに応じた軽量なアプリ ケーションを配信するといったことが可能になった。 • Intl.PluralRules APIをサポート
  46. 46. JS modulesの動的インポート 実行時の条件に応じJavascriptモジュー ルを動的にインポートすることができる ようになった。 必要な場合だけ(例えばログインした場合だけ)スクリプトを遅延ロードすることが でき、これによってアプリケーションのパフォーマンスの向上がもたらされる。
  47. 47. Async Iterators & Generators 非同期イテレーター(Async Iterators)と非 同期ジェネレーター(Async Generators)を 使えば、非同期処理の反復処理が効率的に 記述できる。 非同期の反復処理がよりスマートに記述できるようになる。
  48. 48. overscroll-behavior 画面最上部までスクロールした際に余白とともに生じる伸び縮みするようなビジ ュアル効果を抑制したり、Webページをよりアプリライクな操作性に近づけるこ とができる。 ページや要素を最上部までスクロールした際の挙動を設定できる。
  49. 49. その他 • Device Memory API対応。ユーザーデバイスのメモリサイ ズを把握でき、メモリサイズに応じた軽量なアプリケー ションを配信するといったことが可能になった。
  50. 50. 64 (BETA)
  51. 51. 主なアップデート • より強力なポップアップブロッカー • Resize Observerのサポート • import.metaのサポート
  52. 52. 強化されたポップアップブロッカ ー カムフラージュするように装飾されたり 、わざと閉じにくくしたり、透明になる ように加工されたポップアップをユーザ ーが意図せず開くことがないようブロッ ク 紛らわしかったり、隠さているような悪意ある広告をユーザーが誤クリックしな いように保護
  53. 53. Resize Observer Resize Observerを利用すれば、アプリケ ーションのページ内で要素のサイズの変更 を監視してレスポンシブな振る舞いを実装 することが可能になる。 従来は、メディアクエリやwindow.onresizeを使用しビューポート全体のサイズ に応じて処理していたものが、個々の要素のサイズを基準にレスポンシブな振る 舞いを実装できるようになった。
  54. 54. import.meta Javascriptモジュールの開発者がホストの 環境情報にアクセスしたい場合、 import.metaを利用してメタデータを定義 し、モジュールから読み出すことができる 。 例えば、モジュールのホスト環境のURLを確認したい場合には import.meta.urlプロパティから取得することができる。
  55. 55. 以上
  56. 56. Webプラットフォームは日夜進化し続ける…

×