第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

● Perf Culture
Web development
次の2つのセッションをお聴き
ください。
Polymer
Web Components

● Perf Culture
Web development
ServiceWorker

● Perf Culture
Web development
Chrome Dev Editor

● Perf Culture
Web development
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.url
event.request.method
event.request.headers

event.respondWith(response);
});

event.respondWith(
new Response(‘Hello ServiceWorker!’)
);
});

キャッシュの利用（ServiceWorker側 / sw.js）
event.respondWith(
caches.match(event.request)
);
});

event.respondWith(
caches.match(event.request).catch(function()
return event.default();
})
);
});

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à 第49回HTML5勉強会 Google I/O 2014サマリー (20)

Plus de Takuya Oikawa

Plus de Takuya Oikawa (20)

Dernier

Dernier (7)

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