Chrome For HTML5NIGHT

私の前に19人も喋っているんだか
ら、多くの技術はすでにここまで
で紹介されているという前提でス
ライドは作られているので、そうでなかった
場合には破綻します。
最初にこんなことを言うのはなんですが…

Chromeが誕生した
のは
いつか
ご存知ですか？

まだそんなもんなの？

Beta for Windows
Stable for Windows
リリースから今まで

Beta for Windows
Stable for Windows
Chrome OS

Beta for Windows
Stable for Windows
Chrome OS
MacOS & Linux

Beta for Windows
Stable for Windows
Chrome OS
MacOS & Linux
New Icon

Beta for Windows
Stable for Windows
Chrome OS
MacOS & Linux
New Icon
Android
iOS

書ききれなかったのですが

拡張のリリースとか
（Chrome Webアプリとかも）

大事なものもかなり
すっ飛ばしたんですが

ちゃんと知りたい人は

Chrome Time Machine
を見てください。

2012年に4周年を記念して公開した
Chromeの歴史が対話的に辿れるページ

URLは
http://www.google.com/intl/ja/chrome/timemachine/
です。

覚える必要ありません。

“Chrome Time Machine”
で検索してください。
Public Domain : http://bit.ly/1ivUOel

５歳９ヶ月
歴史を感じさせる
MSNロゴのついたポロシャツ

まだ子どもですが、
写真が何故か乳児に退化していますが、気にしないでくださ
い。自分の小さい時の写真を使いたかっただけなので。

これからもよろしく
お願いします。

に書かなかったのですが

昨年の4月に大事な
出来事
がありました。

いませんね (ﾉД`)ｼｸｼｸ

WebKitからフォーク
Public Domain: http://bit.ly/1ncCbPg
Wikimedia: http://commons.wikimedia.org/wiki/File:WebKit_logo.
png

Chromium
(Chromeのオープンソースプロジェクト)
と同じく
オープンソースの
レンダリングエンジン

HTML5などの
Webプラットフォーム機能
を実現しているわけです。

2014年冒頭に
今年の目標を
　話し合いました。

オープンソース
プロジェクトなので

話し合いもすべて
オープンです。

blink-devという
メーリングリストで

● 継続した基本評価値への改善
○ 滑らかさ
○ 入力の反応
○ 初回ロード時間
● モバイルWebでのベンチマーク
● メモリ消費削減
● パワー消費減少

Source: “mobile is eating the world”, Benedict Evans Nov ‘13
デスクトップよりモバイル
のほうが売れているし、使わ
れている

Source: “the decline of the mobile web”, Chris Dixon April ‘14
開発する立場では

Source: “the decline of the mobile web”, Chris Dixon April ‘14
モバイルでは
Web
じゃなくて
　Appでしょ！

HTML5の何がご不満？
（＊ Googleが聞いたわけではありません。第三者機関です）

Source: Vision Mobile Blog
不満は主にこの３つ！
● パフォーマンス
● API
● ツール

ご不満その1）
パフォーマンス

でも、HTML5に
直接関係ないので

興味ある人は
Blink Contributorsが集まったときの資料
“BlinkOn 2: Mobile @ 60 FPS”
（スライドとビデオ）
探してみてね♡

ハードウェアへの
アクセスとか (;´д｀)

痒いところに手がとどく
オフライン制御とか (;´д｀)

Blinkで
やってます！
ServiceWorker
WebMIDI / WebAudio
（音作れます！ MIDI制御できます！）
などなど

CodeIQさんの質問に入ってい
たからご存知ですよね？

それだけじゃなんなんで

より高度なオフライン機能

ネイティブアプリに置いつく

AppCacheからの
学びを活かす
吾郷さんのお話もありましたね！

オフラインって言っても

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

不安定（辺境の地とか）

しょっちゅう切れる
（お金のない地下鉄とか）

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

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

Webサイトからインストール
されたJavaScriptが独立し
たWorkerスレッドで動作
し、Webサイトからのイベン
トハンドリングを実現

頭の良い（＋JSから制御可能な）
“In-browser HTTP proxy”
Browser
ServiceWorker Caches
Page PagePage
Internet

これだけじゃ
なんのことやらわからない

Blink Contributorsが集まったときの資料
“ServiceWorker - BlinkOn May
2014”
など
探してみてね♡

ご不満その3）
ツール

さまざまな要素の統合が
難しい！

最新のUI/UXが作りにくい！

成熟したフレームワーク不足

Blinkで
やってます！
WebComponents /
Polymer
WebAnimiation
（簡単にアニメーションできます！）
などなど

WebComponentsについては
ご存知ですね？

今日、最初から2番目に
金井健一(can_i_do_web)
＠Web先端技術味見部部長
がお話したやつです。

コンポーネント技術を
Webに導入

わかんなかったら、
“WebComponents”
や
“Polymer”
で
で検索してください。

どんなに便利かだけ紹介

グラフを書きたいとします。

<head>
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="chart_div" style="width:400; height:300"></div>
</body>
HTMLはこんな感じで…

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function() {
var data = new google.visualization.arrayToDataTable(
[["Day", "A", "B", "C"],["Mon", 20, 45, 28], ["Tue", 31, 66, 38],
["Wed", 50, 80, 55], ["Thu", 77, 50, 77], ["Fri", 68, 15, 66]]);
var options = {
"seriesType": "bars", "series": {"2": {"type": "line"}},
"width": 400, "height": 300
};
var div = document.getElementById(‘chart_div');
var chart = new google.visualization.ComboChart(div);
chart.draw(data, options);
});
JavaScriptはこんな感じ…

<head>
<script src="js/platform.js"></script>
<link rel="import" href="components/google-chart.html">
</head>
<body>
<google-chart
type="combo"
height="300px"
width="400px"
options="{'seriesType': ‘bars',
'series': {'2': {'type': 'line'}}}"
data="[['Day', 'A', 'B', ‘C'], ['Mon', 20, 45, 28],
['Tue', 31, 66, 38], ['Wed', 50, 80, 55],
['Thu', 77, 50, 77], ['Fri', 68, 15, 66]]">
</google-chart>
</body>
HTMLはこんな感じ…

<google-chart>という要素
に属性を付加するだけ

すでに、
WebComponents (Polymer)
を使ったコンポーネントが
たくさんあります！

Googleサービスの
WebComonentsがたくさん用
意されています。

“Polymer Components”
“Google Web Components”
などで検索

モバイル大事
● パフォーマンス
● API
● ツール
まとめ
がんばってます！
応援お願いします！

オープンソースなので、
Google以外エンジニアも
多く参加しています！

では見てみましょう。

Blinkでは
新しい機能を
実装する（Implement）とき
出荷（Ship）するとき
削除（Deprecate）するとき
ある取り決めがあります。

blink-devという
メーリングリストに
“Intent to”
Implement OR
Ship OR
Deprecate
を送って賛同を得る

Intent toメールの
統計をとってみました。

● chromium.org - 35.5%
● google.com - 20.3%
● opera.com - 10.9%
● samsung.com - 9.4%
● intel.com, yoav.ws, adobe.com blacberry.com...

● google.com - 19.0%
● 個人（gmail.com）, intel.
com, samsung.com, yoav.
ws ...
● samsung.com - 14.9%
● google.com, 個人（gmail.
com） ...

この削除（Deprecate）
というのが
健全にプロジェクトを
運営していくのに大事

Ohlohでデータを見てみると

http://www.ohloh.net/p/chromium-blink

このガーンと減っているのが、
WebKitからフォークしたとき

その後もコードクリーンアップを実施したり
不要な機能を常に検討している
ほぼフラット

みなさまのご参加
お待ちしています！

Chrome For HTML5NIGHT

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Chrome For HTML5NIGHT

Similar to Chrome For HTML5NIGHT (20)

More from Takuya Oikawa

More from Takuya Oikawa (15)

Recently uploaded

Recently uploaded (10)

Chrome For HTML5NIGHT