Chrome For HTML5NIGHT

  • 2,640 views
Uploaded on

Chrome Web Platform Technology Now and Future …

Chrome Web Platform Technology Now and Future

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,640
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
13
Comments
0
Likes
18

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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