Chrome For HTML5NIGHT
Upcoming SlideShare
Loading in...5
×
 

Chrome For HTML5NIGHT

on

  • 2,689 views

Chrome Web Platform Technology Now and Future

Chrome Web Platform Technology Now and Future

HTML5NIGHT(2014/06/14)向けのLightning Talkスライド。

Statistics

Views

Total Views
2,689
Views on SlideShare
1,909
Embed Views
780

Actions

Likes
18
Downloads
13
Comments
0

10 Embeds 780

https://codeiq.jp 472
https://twitter.com 192
http://www.lifewood.net 95
http://feedly.com 7
https://feedly.com 4
http://s.deeeki.com 4
http://www.inoreader.com 2
https://www.google.co.jp 2
https://www.inoreader.com 1
https://m.facebook.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Chrome For HTML5NIGHT Chrome For HTML5NIGHT Presentation Transcript

  • Chrome Takuya Oikawa Google
  • 私の前に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 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
  • 検索は
  • なので
  • 5歳9ヶ月 歴史を感じさせる MSNロゴのついたポロシャツ
  • まだ子どもですが、 写真が何故か乳児に退化していますが、気にしないでくださ い。自分の小さい時の写真を使いたかっただけなので。
  • これからもよろしく お願いします。
  • ところで
  • さきほどの
  • Beta for Windows Stable for Windows Chrome OS MacOS & Linux New Icon Android 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 不満は主にこの3つ! ● パフォーマンス ● API ● ツール
  • ご不満 その1) パフォーマンス
  • 速いことは正義!
  • でも、HTML5に 直接関係ないので
  • 興味ある人は Blink Contributorsが集まったときの資料 “BlinkOn 2: Mobile @ 60 FPS” (スライドとビデオ) 探してみてね♡ Public Domain : http://bit.ly/1ivUOel
  • 検索は
  • ご不満 その2) API
  • ハードウェアへの アクセスとか (;´д`)
  • 痒いところに手がとどく オフライン制御とか (;´д`)
  • 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” など 探してみてね♡ Public Domain : http://bit.ly/1ivUOel
  • 検索は
  • ご不満 その3) ツール
  • さまざまな要素の統合が 難しい!
  • 最新のUI/UXが作りにくい!
  • 成熟したフレームワーク不足
  • Blinkで やってます! WebComponents / Polymer WebAnimiation (簡単にアニメーションできます!) などなど
  • 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 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...
  • ● 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 その後もコードクリーンアップを実施したり 不要な機能を常に検討している ほぼフラット
  • みなさまのご参加 お待ちしています!