第49回HTML5勉強会 Google I/O 2014サマリー

5,211 views

Published on

Google I/O 2014サマリー

Published in: Technology

第49回HTML5勉強会 Google I/O 2014サマリー

  1. 1. Google I/O 2014サマリー agektmr@の代理のtakoratta@
  2. 2. Google I/Oとは ご存知だと思うので、駆け足で。
  3. 3. Google Confidential and Proprietary Google I/O 2014 ● 6月25日、26日にサンフランシスコで開催 ● 約6,000人が参加 ● 約75のセッション
  4. 4. Google Confidential and Proprietary
  5. 5. Google Confidential and Proprietary
  6. 6. Google Confidential and Proprietary
  7. 7. Google Confidential and Proprietary
  8. 8. Google Confidential and Proprietary
  9. 9. Google Confidential and Proprietary
  10. 10. Google Confidential and Proprietary
  11. 11. Google Confidential and Proprietary Questions ? Ok, now go build something awesome! https://plus.google.com/u/0/+AkihitoFujii/posts/Lyu5wRYHd9d?pid=6029333485917463794&oid=104976800917577721821
  12. 12. Google Confidential and Proprietary
  13. 13. Google Confidential and Proprietary Google I/Oの基調講演を現地で参加出来ない開発者の方が ライブストリームで見れるイベントを世界中で開催
  14. 14. Google Confidential and Proprietary
  15. 15. Google I/Oでの HTML5関連のセッション いくつか紹介
  16. 16. Google Confidential and Proprietary Chrome/HTML5関連の話 ● Perf Culture ● Polymer and the Web Components revolution ● Polymer and Web Components change everything you know about Web development ● Bridging the gap between the web and apps ● How we built Chrome Dev Editor with the Chrome platform ● Making the mobile web fast, feature-rich, and beautiful ● Mobile Web performance auditing ● Making music mobile with the Web ● Developing across Devices - Chrome DevTools in 2014
  17. 17. Google Confidential and Proprietary Chrome/HTML5関連の話 ● Perf Culture ● Polymer and the Web Components revolution ● Polymer and Web Components change everything you know about Web development ● Bridging the gap between the web and apps ● How we built Chrome Dev Editor with the Chrome platform ● Making the mobile web fast, feature-rich, and beautiful ● Mobile Web performance auditing ● Making music mobile with the Web ● Developing across Devices - Chrome DevTools in 2014 次の2つのセッションをお聴き ください。 Polymer Web Components
  18. 18. Google Confidential and Proprietary Chrome/HTML5関連の話 ● Perf Culture ● Polymer and the Web Components revolution ● Polymer and Web Components change everything you know about Web development ● Bridging the gap between the web and apps ● How we built Chrome Dev Editor with the Chrome platform ● Making the mobile web fast, feature-rich, and beautiful ● Mobile Web performance auditing ● Making music mobile with the Web ● Developing across Devices - Chrome DevTools in 2014 ServiceWorker
  19. 19. Google Confidential and Proprietary Chrome/HTML5関連の話 ● Perf Culture ● Polymer and the Web Components revolution ● Polymer and Web Components change everything you know about Web development ● Bridging the gap between the web and apps ● How we built Chrome Dev Editor with the Chrome platform ● Making the mobile web fast, feature-rich, and beautiful ● Mobile Web performance auditing ● Making music mobile with the Web ● Developing across Devices - Chrome DevTools in 2014 Chrome Dev Editor
  20. 20. Google Confidential and Proprietary Chrome/HTML5関連の話 ● Perf Culture ● Polymer and the Web Components revolution ● Polymer and Web Components change everything you know about Web development ● Bridging the gap between the web and apps ● How we built Chrome Dev Editor with the Chrome platform ● Making the mobile web fast, feature-rich, and beautiful ● Mobile Web performance auditing ● Making music mobile with the Web ● Developing across Devices - Chrome DevTools in 2014 DevTools
  21. 21. Bridging the gap between the web and apps オフラインファースト ServiceWorker
  22. 22. Google Confidential and Proprietary 話者
  23. 23. Google Confidential and Proprietary I/O Bytes - The ServiceWorker: The network layer is yours to own
  24. 24. Google Confidential and Proprietary 動機
  25. 25. Google Confidential and Proprietary ネットワークの効率的な活用
  26. 26. Google Confidential and Proprietary オフラインって言っても
  27. 27. Google Confidential and Proprietary 完全にオフライン という場合だけではなくて
  28. 28. Google Confidential and Proprietary 不安定(辺境の地とか)
  29. 29. Google Confidential and Proprietary しょっちゅう切れる (お金のない地下鉄とか)
  30. 30. Google Confidential and Proprietary なぜかわからないけど 自分だけつながらない (呪われているとか)
  31. 31. Google Confidential and Proprietary とか、あるわけですが、
  32. 32. Google Confidential and Proprietary 今はそのような異なる状況に 対応したWebアプリを書くのがとても難しい
  33. 33. Google Confidential and Proprietary ネイティブアプリの振る舞い ネットワーク接続が必要なアプリであったとしても、 ● キャッシュからリソースをフェッチし、即座に表示 ● その間/その後すぐにネットワークに接続 ● たとえ、ネットワークに接続できなかったとしても、ユーザーに気づかせ ないで動作するアプリさえある(=ユーザーの操作を邪魔しない)
  34. 34. Google Confidential and Proprietary オフラインファースト
  35. 35. Google Confidential and Proprietary Application Cache (AppCache) というものがありますが、
  36. 36. Google Confidential and Proprietary
  37. 37. Google Confidential and Proprietary AppCacheの問題点 ● 複雑 ● きめ細かい処理が不得手 ● JavaScriptからの制御が面倒
  38. 38. Google Confidential and Proprietary
  39. 39. Google Confidential and Proprietary ServiceWorker ● 高度なオフライン機能 ● WebサイトからインストールされたJavaScriptが独立したWorkerスレッ ドとして動作し、Webサイトからのイベントハンドリングを実現 ○ Webページを閉じてもバックグラウンドで動作 ○ ただし、HTTPSが必須 ● 頭の良い(+JSから制御可能な)“In-browser HTTP proxy”
  40. 40. Google Confidential and Proprietary ServiceWorker Browser ServiceWorker Caches Page PagePage Internet
  41. 41. Google Confidential and Proprietary インストール(アプリ側 / app.js) if (‘serviceWorker’ in navigator) { navigator.serviceWorker.register( ‘/trained-to-thrill/static/js/sw.js’, {scope: ‘/trained-to-thrill/*’} ).then(success, failure); }
  42. 42. Google Confidential and Proprietary sw.jsの役割 Browser ServiceWorker Caches Page PagePage Internet ● 別スレッドで動作 ● DOMアクセスは無し ● ページとは独立した処理を 行う ● ローディングの制御 ● 1つのServiceWorkderで複 数のページの制御が可能 ● キャッシュの制御 頭の良い(+JSから制御可能な)“In-browser HTTP proxy”
  43. 43. Google Confidential and Proprietary インストール(ServiceWorker側 / sw.js) this.addEventListener('install', function (event) { event.waitUntil(somePromise); });
  44. 44. Google Confidential and Proprietary インストール(ServiceWorker側 / sw.js) this.addEventListener('install', function(event) { event.waitUntil( caches.create('static-v1').then(function(cache) { return cache.add({ ‘/trained-to-thrill/’, ‘/trained-to-thrill/fallback.html’, ‘/trained-to-thrill/static/all.css’, ‘/trained-to-thrill/static/all.js’, ‘/trained-to-thrill/static/lego.svg’ }); }) ); });
  45. 45. Google Confidential and Proprietary Fetchイベントの処理(ServiceWorker側 / sw.js) this.addEventListener('fetch’, function(event) { console.log(event.request); }); i.e) event.request.url event.request.method event.request.headers
  46. 46. Google Confidential and Proprietary Fetchイベントの処理(ServiceWorker側 / sw.js) this.addEventListener('fetch’, function(event) { event.respondWith(response); });
  47. 47. Google Confidential and Proprietary Fetchイベントの処理(ServiceWorker側 / sw.js) this.addEventListener('fetch’, function(event) { event.respondWith( new Response(‘Hello ServiceWorker!’) ); });
  48. 48. Google Confidential and Proprietary キャッシュの利用(ServiceWorker側 / sw.js) this.addEventListener('fetch’, function(event) { event.respondWith( caches.match(event.request) ); });
  49. 49. Google Confidential and Proprietary キャッシュの利用(ServiceWorker側 / sw.js) this.addEventListener('fetch’, function(event) { event.respondWith( caches.match(event.request).catch(function() return event.default(); }) ); });
  50. 50. Google Confidential and Proprietary キャッシュの利用(ServiceWorker側 / sw.js) this.addEventListener('fetch’, function(event) { event.respondWith( caches.match(event.request).catch(function() return event.default(); }).catch(function() { return caches.match( ‘/trained-to-thrill/fallback.html’); ...
  51. 51. Google Confidential and Proprietary AppCacheで同じことを行った場合 CACHE MANIFEST /trained-to-thrill/static/all.css /trained-to-thrill/static/all.js /trained-to-thrill/static/lego.svg NETWORK: * FALLBCK: /trained-to-thrill/fallback.html
  52. 52. Google Confidential and Proprietary AppCacheで同じことを行った場合 CACHE MANIFEST /trained-to-thrill/static/all.css /trained-to-thrill/static/all.js /trained-to-thrill/static/lego.svg NETWORK: * FALLBCK: /trained-to-thrill/fallback.html
  53. 53. Google Confidential and Proprietary ネットワークの接続状況に応じた処理 navigator.onLineに頼らない、ServiceWorkerによるキャッシュの有効活用 が必要。
  54. 54. Google Confidential and Proprietary 参考資料 ブラウザの対応状況 → is ServiceWorker ready? Chromiumプロジェクトページ → http://www.chromium. org/blink/serviceworker
  55. 55. How we built Chrome Dev Editor with the Chrome platform Chrome Dev Editor (CDE)
  56. 56. Google Confidential and Proprietary
  57. 57. Google Confidential and Proprietary
  58. 58. Google Confidential and Proprietary Chrome Dev Editor ● Dart / Polymerで開発されたChrome上で動作するエ ディタ ● Chrome Webストアから入手可能 ● オープンソース ○ https://github.com/dart-lang/chromedeveditor/ ● Gitとの連携可能 ○ git clone ○ git branch ○ git checkout ○ など ● ダイレクトモバイルデバッグ
  59. 59. Google Confidential and Proprietary Chrome Dev Editor ● Dart Webアプリ、JavaScript Webアプリ、 JavaScript/Polymer Webアプリ、Web Starter Kit, JavaScript Chromeアプリ、 JavaScript Polymer CustomElementの開 発が可能(テンプレートが用意されている) ● 作成したChrome WebアプリをChrome Webストアに登録可能 ● ビルトインWebサーバー ● マークダウンプレビュー
  60. 60. Developing across Devices - Chrome DevTools in 2014 DevTools
  61. 61. Google Confidential and Proprietary モバイルWeb開発に役立つ!Chrome DevToolsの 新機能「デバイスモード」 | HTML5Experts.jp
  62. 62. Graphic by Luke W. Used with permission.
  63. 63. Google Confidential and Proprietary Design Develop Iterate
  64. 64. Google Confidential and Proprietary Design Responsive Layout
  65. 65. Google Confidential and Proprietary Develop Rich Emulation
  66. 66. Google Confidential and Proprietary Iterate Remote Debugging
  67. 67. Google Confidential and Proprietary •Plug & Play •Same powerful features •Screencast your device •Port forwarding · for local development •Device Presets for most popular devices •Rich viewport emulation •Sensor emulation · Touch, Geolocation, Accelerometer •Network throttling and offline •Rich representation of media queries •Style filtering •Media query editing •Plays well with inline emulation Responsive layouts Rich Emulation Remote debugging
  68. 68. Google Confidential and Proprietary Google I/O THANK YOU

×