第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

次の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

動機

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

オフラインって言っても

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

不安定（辺境の地とか）

しょっちゅう切れる

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

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

とか、あるわけですが、

今はそのような異なる状況に対応した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

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

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○ など

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

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

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サマリー

chrome platform

mobile web

web components

web development

proprietary

proprietary

proprietary

html google

Technology

html5など社内勉強会 vol.8 - websocket

createjs勉強会 (第8回)「adobe animate...

angular...

「enchant.js & pro」第21回 html5とか勉強会...

html5/js勉強会「html5/javascript...

静岡developers勉強会 html5&css3

社内勉強会「html5でつながる」2012 09-07

html5+α初心者勉強会 @福岡第0回ご挨拶...

第19回html5とか勉強会 pjax

勉強会force#2 html5によるモバイルアプリ開発

html5など社内勉強会 vol.5 - 入門javascript...

html5など社内勉強会 vol.3 keynote

「第50回 html5とか勉強会」のlt発表資料

chromeウェブストア - html5とか勉強会42

html5? html5!

第43回html5とか勉強会...

:he57& &× n...

第35回 html5とか勉強会「tizenの概要」2013 01-21

nhn html5勉強会 flashのcanvas移植

web workers&parallel.js html5勉強会lt大会