第49回html5勉強会 google i/o 2014サマリー

Google I/O 2014サマリー

agektmr@の代理のtakoratta@

Google I/Oとは

ご存知だと思うので、駆け足で。

Google Confidential and Proprietary

Google I/O 2014● 6月25日、26日にサンフランシスコで開催

● 約6,000人が参加

● 約75のセッション


Questions ?Ok, now go build something awesome!

https://plus.google.com/u/0/+AkihitoFujii/posts/Lyu5wRYHd9d?pid=6029333485917463794&oid=104976800917577721821




Google I/Oの基調講演を現地で参加出来ない開発者の方がライブストリームで見れるイベントを世界中で開催

Google I/OでのHTML5関連のセッション

いくつか紹介


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

https://www.google.com/events/io/schedule/session/711a595b-70ca-e311-b297-00155d5066d7


https://www.google.com/events/io/schedule/session/de22e147-07b6-e311-8491-00155d5066d7


https://www.google.com/events/io/schedule/session/b71bb839-35bc-e311-b297-00155d5066d7




https://www.google.com/events/io/schedule/session/f9a35989-07b6-e311-8491-00155d5066d7


https://www.google.com/events/io/schedule/session/3888155e-32b6-e311-8491-00155d5066d7


https://www.google.com/events/io/schedule/session/6f371adb-06b6-e311-8491-00155d5066d7


https://www.google.com/events/io/schedule/session/c8300366-03ed-e311-903f-00155d5066d7


https://www.google.com/events/io/schedule/session/6f73856f-9ad4-e311-b297-00155d5066d7


https://www.google.com/events/io/schedule/session/81c71952-6cbf-e311-b297-00155d5066d7






次の2つのセッションをお聴きください。

Polymer Web Components

























ServiceWorker

























Chrome Dev Editor

























DevTools





















Bridging the gap between the web and apps オフラインファースト ServiceWorker


話者


I/O Bytes - The ServiceWorker: The network layer is yours to own

https://www.youtube.com/watch?v=4uQMl7mFB6g


動機


ネットワークの効率的な活用


オフラインって言っても


完全にオフラインという場合だけではなくて


不安定（辺境の地とか）


しょっちゅう切れる

（お金のない地下鉄とか）


なぜかわからないけど自分だけつながらない（呪われているとか）


とか、あるわけですが、


今はそのような異なる状況に対応したWebアプリを書くのがとても難しい


ネイティブアプリの振る舞い

ネットワーク接続が必要なアプリであったとしても、

● キャッシュからリソースをフェッチし、即座に表示

● その間／その後すぐにネットワークに接続

● たとえ、ネットワークに接続できなかったとしても、ユーザーに気づかせないで動作するアプリさえある（＝ユーザーの操作を邪魔しない）


オフラインファースト


Application Cache (AppCache) というものがありますが、


AppCacheの問題点

● 複雑

● きめ細かい処理が不得手

● JavaScriptからの制御が面倒


ServiceWorker

● 高度なオフライン機能

● WebサイトからインストールされたJavaScriptが独立したWorkerスレッドとして動作し、Webサイトからのイベントハンドリングを実現○ Webページを閉じてもバックグラウンドで動作○ ただし、HTTPSが必須

● 頭の良い（＋JSから制御可能な）“In-browser HTTP proxy”


ServiceWorker

Browser

ServiceWorker Caches

Page PagePage

Internet


インストール（アプリ側 / app.js）

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(

‘/trained-to-thrill/static/js/sw.js’,

{scope: ‘/trained-to-thrill/*’}

).then(success, failure);

}


sw.jsの役割

Browser

ServiceWorker Caches

Page PagePage

Internet

● 別スレッドで動作● DOMアクセスは無し● ページとは独立した処理を

行う● ローディングの制御● 1つのServiceWorkderで複

数のページの制御が可能● キャッシュの制御

頭の良い（＋JSから制御可能な）“In-browser HTTP proxy”


インストール（ServiceWorker側 / sw.js）

this.addEventListener('install', function(event) {

event.waitUntil(somePromise);

});


インストール（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’ }); }) );});


Fetchイベントの処理（ServiceWorker側 / sw.js）

this.addEventListener('fetch’, function(event) { console.log(event.request);});

i.e)event.request.urlevent.request.methodevent.request.headers



this.addEventListener('fetch’, function(event) { event.respondWith(response);});



this.addEventListener('fetch’, function(event) { event.respondWith( new Response(‘Hello ServiceWorker!’) );});


キャッシュの利用（ServiceWorker側 / sw.js）

this.addEventListener('fetch’, function(event) { event.respondWith( caches.match(event.request) );});



this.addEventListener('fetch’, function(event) { event.respondWith( caches.match(event.request).catch(function() return event.default(); }) );});



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’);...


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


ネットワークの接続状況に応じた処理

navigator.onLineに頼らない、ServiceWorkerによるキャッシュの有効活用が必要。


参考資料

ブラウザの対応状況 → is ServiceWorker ready?

Chromiumプロジェクトページ → http://www.chromium.org/blink/serviceworker

https://jakearchibald.github.io/isserviceworkerready/

http://www.chromium.org/blink/serviceworker



How we built Chrome Dev Editor with the Chrome platform

Chrome Dev Editor (CDE)


Chrome Dev Editor● Dart / Polymerで開発されたChrome上で動作するエ

ディタ● Chrome Webストアから入手可能● オープンソース

○ https://github.com/dart-lang/chromedeveditor/ ● Gitとの連携可能

○ git clone○ git branch○ git checkout○ など

● ダイレクトモバイルデバッグ

https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=ja

https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=ja

https://github.com/dart-lang/chromedeveditor/

https://github.com/dart-lang/chromedeveditor/


Chrome Dev Editor

● Dart Webアプリ、JavaScript Webアプリ、JavaScript/Polymer Webアプリ、Web Starter Kit, JavaScript Chromeアプリ、JavaScript Polymer CustomElementの開発が可能（テンプレートが用意されている）

● 作成したChrome WebアプリをChrome Webストアに登録可能

● ビルトインWebサーバー● マークダウンプレビュー

Developing across Devices - Chrome DevTools in 2014

DevTools


モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 | HTML5Experts.jp

http://html5experts.jp/girlie_mac/8384/

Graphic by Luke W. Used with permission.


Design Develop Iterate


Design Responsive Layout


Develop Rich Emulation


Iterate Remote Debugging


• 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


Google I/O

THANK YOU

第49回html5勉強会 google i/o 2014サマリー

Technology

chrome platform

mobile web

web components

web development

proprietary

proprietary

proprietary

html google