Embed Size (px)
DESCRIPTION
Chrome Web Platform Technology Now and Future HTML5NIGHT（2014/06/14）向けのLightning Talkスライド。
Citation preview
ChromeTakuya Oikawa
私の前に19人も喋っているんだか
ら、多くの技術はすでにここまでで紹介されているという前提でス
ライドは作られているので、そうでなかった
場合には破綻します。
最初にこんなことを言うのはなんですが…
突然ですが
Chromeが誕生したのは
いつかご存知ですか？
2008年です
そんな昔なのか？
まだそんなもんなの？
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
リリースから今まで
Beta for Windows
Stable for Windows
Chrome OS
MacOS & Linux
New Icon
リリースから今まで
Beta for Windows
Stable for Windows
Chrome OS
MacOS & Linux
New IconAndroid
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ロゴのついたポロシャツ
まだ子どもですが、
写真が何故か乳児に退化していますが、気にしないでください。自分の小さい時の写真を使いたかっただけなので。
これからもよろしくお願いします。
ところで
さきほどの
Beta for Windows
Stable for Windows
Chrome OS
MacOS & Linux
New IconAndroid
iOS
リリースから今まで
に書かなかったのですが
昨年の4月に大事な
出来事がありました。
分かる人？
いませんね (ﾉД`)ｼｸｼｸ
分かる人？
いませんね (ﾉД`)ｼｸｼｸ
WebKitからフォーク
Public Domain: http://bit.ly/1ncCbPg
Wikimedia: http://commons.wikimedia.org/wiki/File:WebKit_logo.png
Chromium (Chromeのオープンソースプロジェクト)
と同じく
オープンソースの
レンダリングエンジン
このBlinkが
HTML5などのWebプラットフォーム機能を実現しているわけです。
Blinkプロジェクトでは
2014年冒頭に今年の目標を
話し合いました。
オープンソースプロジェクトなので
話し合いもすべてオープンです。
blink-devというメーリングリストで
Blink 2014 Goal Brainstorming
● 継続した基本評価値への改善○ 滑らかさ○ 入力の反応○ 初回ロード時間
● モバイル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
Source: Vision Mobile Blog
不満は主にこの３つ！● パフォーマンス● API● ツール
ご不満 その1）パフォーマンス
速いことは正義！
でも、HTML5に直接関係ないので
興味ある人はBlink Contributorsが集まったときの資料
“BlinkOn 2: Mobile @ 60 FPS”（スライドとビデオ）探してみてね♡
Public Domain : http://bit.ly/1ivUOel
検索は
ご不満 その2）API
ハードウェアへのアクセスとか (;´д｀)
痒いところに手がとどくオフライン制御とか (;´д｀)
Blinkで
やってます！
ServiceWorkerWebMIDI / 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”など
探してみてね♡
Public Domain : http://bit.ly/1ivUOel
検索は
ご不満 その3）ツール
さまざまな要素の統合が難しい！
最新のUI/UXが作りにくい！
成熟したフレームワーク不足
Blinkで
やってます！
WebComponents / PolymerWebAnimiation（簡単にアニメーションできます！）などなど
WebComponentsについてはご存知ですね？
今日、最初から2番目に金井 健一(can_i_do_web)＠Web先端技術味見部 部長がお話したやつです。
以上
それだけじゃなんなんで
ひとことだけ言うと
コンポーネント技術をWebに導入
わかんなかったら、“WebComponents”
や“Polymer”
でで検索してください。
Public Domain : http://bit.ly/1ivUOel
検索は
どんなに便利かだけ紹介
グラフを書きたいとします。
こんなの
Google Charts API
<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はこんな感じ…
WebComponents
<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”
などで検索
Public Domain : http://bit.ly/1ivUOel
検索は
モバイル大事● パフォーマンス● API● ツール
まとめ
がんばってます！応援お願いします！
おまけ
ですが、
オープンソースなので、Google以外エンジニアも多く参加しています！
では見てみましょう。
Blinkでは新しい機能を
実装する（Implement）とき出荷（Ship）するとき
削除（Deprecate）するとき
ある取り決めがあります。
blink-devというメーリングリストに
“Intent to”Implement OR
Ship ORDeprecate
を送って賛同を得る
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...
● chromium.org - 48.6%● google.com - 19.0%● opera.com - 13.3%● 個人（gmail.com）, intel.
com, samsung.com, yoav.ws ...
● opera.com - 38.2%● chromium.org - 29.8%● samsung.com - 14.9%● google.com, 個人（gmail.
com） ...
この削除（Deprecate）というのが
健全にプロジェクトを運営していくのに大事
Ohlohでデータを見てみると
http://www.ohloh.net/p/chromium-blink
http://www.ohloh.net/p/chromium-blink
このガーンと減っているのが、WebKitからフォークしたとき
http://www.ohloh.net/p/chromium-blink
その後もコードクリーンアップを実施したり不要な機能を常に検討している
ほぼフラット
みなさまのご参加お待ちしています！
