Chrome For HTML5NIGHT

5,802 views

Published on

Chrome Web Platform Technology Now and Future

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

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,802
On SlideShare
0
From Embeds
0
Number of Embeds
1,707
Actions
Shares
0
Downloads
14
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Chrome For HTML5NIGHT

  1. 1. Chrome Takuya Oikawa Google
  2. 2. 私の前に19人も喋っているんだか ら、多くの技術はすでにここまで で紹介されているという前提でス ライドは作られているので、そうでなかった 場合には破綻します。 最初にこんなことを言うのはなんですが…
  3. 3. 突然ですが
  4. 4. Chromeが誕生した のは いつか ご存知ですか?
  5. 5. 2008年です
  6. 6. そんな昔なのか?
  7. 7. まだそんなもんなの?
  8. 8. Beta for Windows Stable for Windows リリースから今まで
  9. 9. Beta for Windows Stable for Windows Chrome OS リリースから今まで
  10. 10. Beta for Windows Stable for Windows Chrome OS MacOS & Linux リリースから今まで
  11. 11. Beta for Windows Stable for Windows Chrome OS MacOS & Linux リリースから今まで
  12. 12. Beta for Windows Stable for Windows Chrome OS MacOS & Linux New Icon リリースから今まで
  13. 13. Beta for Windows Stable for Windows Chrome OS MacOS & Linux New Icon Android iOS リリースから今まで
  14. 14. 書ききれなかったのですが
  15. 15. 拡張のリリースとか (Chrome Webアプリとかも)
  16. 16. テーマの導入とか
  17. 17. などなど
  18. 18. 大事なものもかなり すっ飛ばしたんですが
  19. 19. ちゃんと知りたい人は
  20. 20. Chrome Time Machine を見てください。
  21. 21. 2012年に4周年を記念して公開した Chromeの歴史が対話的に辿れるページ
  22. 22. URLは http://www.google.com/intl/ja/chrome/timemachine/ です。
  23. 23. 覚える必要ありません。
  24. 24. “Chrome Time Machine” で検索してください。 Public Domain : http://bit.ly/1ivUOel
  25. 25. 検索は
  26. 26. なので
  27. 27.
  28. 28. 5歳9ヶ月 歴史を感じさせる MSNロゴのついたポロシャツ
  29. 29. まだ子どもですが、 写真が何故か乳児に退化していますが、気にしないでくださ い。自分の小さい時の写真を使いたかっただけなので。
  30. 30. これからもよろしく お願いします。
  31. 31. ところで
  32. 32. さきほどの
  33. 33. Beta for Windows Stable for Windows Chrome OS MacOS & Linux New Icon Android iOS リリースから今まで
  34. 34. に書かなかったのですが
  35. 35. 昨年の4月に大事な 出来事 がありました。
  36. 36. 分かる人?
  37. 37. いませんね (ノД`)シクシク
  38. 38. 分かる人?
  39. 39. いませんね (ノД`)シクシク
  40. 40. WebKitからフォーク Public Domain: http://bit.ly/1ncCbPg Wikimedia: http://commons.wikimedia.org/wiki/File:WebKit_logo. png
  41. 41. Chromium (Chromeのオープンソースプロジェクト) と同じく オープンソースの レンダリングエンジン
  42. 42. このBlinkが
  43. 43. HTML5などの Webプラットフォーム機能 を実現しているわけです。
  44. 44. Blinkプロジェクトでは
  45. 45. 2014年冒頭に 今年の目標を  話し合いました。
  46. 46. オープンソース プロジェクトなので
  47. 47. 話し合いもすべて オープンです。
  48. 48. blink-devという メーリングリストで
  49. 49. Blink 2014 Goal Brainstorming
  50. 50. ● 継続した基本評価値への改善 ○ 滑らかさ ○ 入力の反応 ○ 初回ロード時間 ● モバイルWebでのベンチマーク ● メモリ消費削減 ● パワー消費減少
  51. 51. 要は モバイル大事
  52. 52. Source: “mobile is eating the world”, Benedict Evans Nov ‘13 デスクトップよりモバイル のほうが売れているし、使わ れている
  53. 53. Source: “the decline of the mobile web”, Chris Dixon April ‘14 開発する立場では
  54. 54. Source: “the decline of the mobile web”, Chris Dixon April ‘14 モバイルでは Web じゃなくて  Appでしょ!
  55. 55. ▄█▀█●ガーン
  56. 56. 聞いてみました。
  57. 57. HTML5の何がご不満? (* Googleが聞いたわけではありません。第三者機関です)
  58. 58. Source: Vision Mobile Blog
  59. 59. Source: Vision Mobile Blog 不満は主にこの3つ! ● パフォーマンス ● API ● ツール
  60. 60. ご不満 その1) パフォーマンス
  61. 61. 速いことは正義!
  62. 62. でも、HTML5に 直接関係ないので
  63. 63. 興味ある人は Blink Contributorsが集まったときの資料 “BlinkOn 2: Mobile @ 60 FPS” (スライドとビデオ) 探してみてね♡ Public Domain : http://bit.ly/1ivUOel
  64. 64. 検索は
  65. 65. ご不満 その2) API
  66. 66. ハードウェアへの アクセスとか (;´д`)
  67. 67. 痒いところに手がとどく オフライン制御とか (;´д`)
  68. 68. Blinkで やってます! ServiceWorker WebMIDI / WebAudio (音作れます! MIDI制御できます!) などなど
  69. 69. CodeIQさんの質問に入ってい たからご存知ですよね?
  70. 70. 以上
  71. 71. それだけじゃなんなんで
  72. 72. 何が出来るの?
  73. 73. より高度なオフライン機能
  74. 74. ネイティブアプリに置いつく
  75. 75. AppCacheからの 学びを活かす 吾郷さんのお話もありましたね!
  76. 76. オフラインって言っても
  77. 77. 完全にオフライン という場合だけではなくて
  78. 78. 不安定(辺境の地とか)
  79. 79. しょっちゅう切れる (お金のない地下鉄とか)
  80. 80. なぜかわからないけど 自分だけつながらない (呪われているとか)
  81. 81. あるわけですが
  82. 82. 今はそのような異なる状況に 対応したWebアプリを書くのが とても難しい
  83. 83. Webサイトからインストール されたJavaScriptが独立し たWorkerスレッドで動作 し、Webサイトからのイベン トハンドリングを実現
  84. 84. 頭の良い(+JSから制御可能な) “In-browser HTTP proxy” Browser ServiceWorker Caches Page PagePage Internet
  85. 85. これだけじゃ なんのことやらわからない
  86. 86. というあなた!
  87. 87. Blink Contributorsが集まったときの資料 “ServiceWorker - BlinkOn May 2014” など 探してみてね♡ Public Domain : http://bit.ly/1ivUOel
  88. 88. 検索は
  89. 89. ご不満 その3) ツール
  90. 90. さまざまな要素の統合が 難しい!
  91. 91. 最新のUI/UXが作りにくい!
  92. 92. 成熟したフレームワーク不足
  93. 93. Blinkで やってます! WebComponents / Polymer WebAnimiation (簡単にアニメーションできます!) などなど
  94. 94. WebComponentsについては ご存知ですね?
  95. 95. 今日、最初から2番目に 金井 健一(can_i_do_web) @Web先端技術味見部 部長 がお話したやつです。
  96. 96. 以上
  97. 97. それだけじゃなんなんで
  98. 98. ひとことだけ言うと
  99. 99. コンポーネント技術を Webに導入
  100. 100. わかんなかったら、 “WebComponents” や “Polymer” で で検索してください。 Public Domain : http://bit.ly/1ivUOel
  101. 101. 検索は
  102. 102. どんなに便利かだけ紹介
  103. 103. グラフを書きたいとします。
  104. 104. こんなの
  105. 105. Google Charts API
  106. 106. <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はこんな感じで…
  107. 107. 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はこんな感じ…
  108. 108. WebComponents
  109. 109. <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はこんな感じ…
  110. 110. これだけ
  111. 111. <google-chart>という要素 に属性を付加するだけ
  112. 112. すでに、 WebComponents (Polymer) を使ったコンポーネントが たくさんあります!
  113. 113. Googleサービスの WebComonentsがたくさん用 意されています。
  114. 114. “Polymer Components” “Google Web Components” などで検索 Public Domain : http://bit.ly/1ivUOel
  115. 115. 検索は
  116. 116. モバイル大事 ● パフォーマンス ● API ● ツール まとめ がんばってます! 応援お願いします!
  117. 117. おまけ
  118. 118. ですが、
  119. 119. オープンソースなので、 Google以外エンジニアも 多く参加しています!
  120. 120. では見てみましょう。
  121. 121. Blinkでは 新しい機能を 実装する(Implement)とき 出荷(Ship)するとき 削除(Deprecate)するとき ある取り決めがあります。
  122. 122. blink-devという メーリングリストに “Intent to” Implement OR Ship OR Deprecate を送って賛同を得る
  123. 123. Intent toメールの 統計をとってみました。
  124. 124. ● chromium.org - 35.5% ● google.com - 20.3% ● opera.com - 10.9% ● samsung.com - 9.4% ● intel.com, yoav.ws, adobe.com blacberry.com...
  125. 125. ● 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) ...
  126. 126. この削除(Deprecate) というのが 健全にプロジェクトを 運営していくのに大事
  127. 127. Ohlohでデータを見てみると
  128. 128. http://www.ohloh.net/p/chromium-blink
  129. 129. http://www.ohloh.net/p/chromium-blink このガーンと減っているのが、 WebKitからフォークしたとき
  130. 130. http://www.ohloh.net/p/chromium-blink その後もコードクリーンアップを実施したり 不要な機能を常に検討している ほぼフラット
  131. 131. みなさまのご参加 お待ちしています!

×