0
HTML5 = OSSlides @ Kobe IT Festival 2012   by Tomoya Asai (dynamis)                          Last Update: 2012/10/06
about:me
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
about:mozilla
http://www.mozilla.jp/videos/
Agenda
本日のトピック    about    HTML5    HTML5.1    Web=OS    Firefox OS
about:foxkeh       ときどきプレゼン手伝って     くれるフォクすけを紹介します
ぼくフォクすけぼくフォクすけ   いつか僕も Firefox みたいな   立派なブラウザになるんだ!
サーバ (Apache Camel) の上にクライアント (Firefox)
9.14 からキャンペーン開始しています
フォクすけの誕生日は 2006/09/01
See Also...
今日お話しできないことはスライド見てね       今日話さないことでも      気軽に質問してください
Firefox OS & Marketplace          Web プラットフォーム           Web API が進化を続けている          Marketplace           Web アプリ配信システム   ...
CSS 最新機能紹介     CSS の新機能紹介      新機能や昨年から変わった点             http://r.dynamis.jp/css2012
JavaScript.Next          JavaScript の最新仕様           ECMAScript 5th のポイント          JavaScript 次世代仕様           ECMAScript 6t...
開発者ツール紹介    一通りの機能と使い方    Firefox 標準の開発者ツール     隠し設定やビルトイン関数のリ     ファレンスなども含めています    Firebug とその拡張機能     アイコンや背景画像を変更する   ...
セキュリティ関連機能紹介    セキュリティ大事!     知っておくべき機能です    Content Security Policy     次世代セキュリティポリシー     Same Origin Policy はもう古い       ...
HTML5
みんな大好き  ""HHTTMMLL55""               Mozilla と Firefox も              みんな大好きだよね?
The term "HTML5" is widelyused as a buzzword to refer to modern Web technologies...                       WHATWG HTML 仕様書の...
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています               WHATWG HTML 仕様書の解説        http://whatwg.org/html - Introduction
"HTML5" 以前の Web       文書のための HTML+α        複雑なものは Flash で       互換性のない独自拡張        仕様のない新機能ばかり       デバイス毎の Web        モバイル...
ブラウザ戦争 IE の独占市場を Firefox が崩して Web 標準の時代へ
"HTML5" の目的       アプリのための HTML        すべてを Web 技術で実現       互換性のある実装に        ブラウザの挙動を厳密に定義       マルチデバイス Web        どこでも同じ ...
Web 標準プラットフォーム        vs独自技術で囲い込んだ Web     「ブラウザ戦争」の時代はとっくに終わりました
"HTML5" への期待      次世代プラットフォーム       アプリ開発のプラットフォーム      Web アプリ開発を簡単に       互換性のある範囲の拡大      マルチデバイス展開       コード共通化でコスト削減
既存の独自プラットフォーム現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
Web が共通プラットフォーム               プラットフォーム                 としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
僕らの  WWeebb  を独占から守ろう!        Web はみんなのものだから          独占しちゃダメだよね!
Web で可能になったこと     マルチメディア      Audio, Video, Animation, 3D ...     アプリケーション      Offline, Storage, File ...     高度な通信制御    ...
Web ではできなかったこと     システムステータス      WiFi 情報, モバイル通信...     各種センサー      光センサー, 近接センサー...     低レベルハードウェア制御      USB, BlueTooth...
Multi           Media      Mouse,  HTML5               Key ev.  Forms            W3C                            OfflineHTML5...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Canvas                                 Web         WHATWG                 Messag-                                  ing    ...
Khronos              SMIL              Vibra-                                                   tion                 WebGL...
Khronos              SMIL              Vibra-                  MP3  WebCL                                                 ...
もっともっと  WWeebb  を 進化させなきゃ!        僕らの Web が進化しないと        闇の組織に支配されちゃう!
HTML5.1
HHTTMMLL55  の次は HHTTMMLL55..11  ?             HTML6 じゃないのは            ちょっと意外だよね!
HTML5 の次は HTML5.1            W3C 仕様書の話です               != バズワード "HTML5"            HTML5 は 2014 年に標準化               今年中に仕様...
HTML5 < HTML << "HTML5"         HTML5 = W3C 仕様書         安定化を進めるスナップショット         HTML = WHATWG 仕様書         常に進化を続ける最新仕様    ...
HTML5 = 安定ブランチHTML5.x = ブランチ更新HTML = 最新の HTML        喧嘩して分離したのではない      W3C で安定化作業を始めただけ
HHTTMMLL  の進化は続いてるんだね!          HTML5.x の安定化中も        HTMLの進化は止まらない
Web = OS
今の  ""HHTTMMLL55""  で満足してちゃだめ!       未来に向かって走り続けなきゃ!       ぼくは足短いから走るの遅いけど
JavaScript の進化        次世代 JS 最高!         Firefox が最も実装進んでる         慣れると現 JS 書くのがツライ        高速化やデバッグ容易化         Class, Type...
TypeScript ってどうなの?       JS はすべて TS だって!        互換性大事だよね!       次世代 JS 使えるって!        でも実装がダメ (><)       MS お得意の独自拡張       ...
たったこれだけでも非互換//	 JavaScript	 (Firefox	 実装済み)(function(){	 	 var	 [a,	 b]	 =	 [1,	 2];	 //	 関数スコープ})();console.log(a);//	 ->...
雨後の筍がポコポコ生えてる?    CoffeeScript     次世代 JS の先輩的存在    Dart     他人。Chrome に囲い込み?    JSX     誰が書いても遅くならない
JavaScript が常に勝つ!       すべて問題解決してきた          速度遅い → 高速化          ミス多発 → Strict Mode          スレッドがない → Workers          GP...
Web デザインの進化     フィルター      SVG Filter, CSS Filter     レイアウト      Grid, Regions, Exclusions...     CSS 構文の進化      @document...
SVG Filter, CSS Filter           Mozilla:            既にある SVG 使おうぜ!           WebKit:            SVG なんてシラネ。            俺は...
レイアウトいろいろ by Adobe
アニメーションの進化    乱立しすぎ&連携無し!     JavaScript Animation     Canvas 2D, WebGL     SVG & SMIL     CSS Transisions, Animations    ...
Web Animations へ           Apple (Flash 代替技術として):             CSS でアニメーション!           Mozilla & Opera:             クソ構文は直し...
マルチメディアの進化    Audio Data, Web Audio    Camera API (Media Capture)    WebRTC - getUserMedia     電話会議などは簡単に
WebRTC (getUserMedia)
WebRTC (getUserMedia)
インタラクティブ系の進化    Touch Event    Vibration    Gamepad    Pointer Lock    Resource Lock    Idle
BananaBreadhttps://developer.mozilla.org/ja/demos/detail/bananabread
BananaBreadhttps://developer.mozilla.org/ja/demos/detail/bananabread
ネットワーク系の進化    Server-Sent Event    WebSocket    SPDY v2, v3 ... HTTP 2.0?    WebRTC - P2P    TCP Socket    UDP Datagram So...
デバイス間連携の進化    Web Intents    Web Activities    Push Notification
デバイス間連携はこれから本番    Mozilla:     Web Activities!    Google:     Web Intents!    Mozilla & Google:     WHATWG で標準化議論中     共に将...
ステータス系の進化    WiFi Info, Mobile Connection    Network Info (通信速度等)    Battery Status
センサー系の進化    Geolocation (位置情報)    Orientation (加速度)    Ambient Light (環境光)    Proximity (近接)
ハードウェア系の進化    Bluetooth    USB, USB file-reading    NFC    FM Radio
スマホ系の進化    SMS, Telephony (電話)    Contacts, Settings    UDB Datagram Socket    HTTP-cache, Log    Background Service
アプリとしての進化    Open Web Apps     アプリとしてインストール    FileReader, FileHandle    Device Storage
ホンモノの Web "アプリ"    ブラウザという枠を飛び出して動作
Android でも実装済み         開発版での画面です
夢が広がるね!   僕はまず立派なブラウザになり  いつかは立派な OS にならなきゃ
Firefox OS         WebRT as an OS...
おーえすになる!    僕より先に OS になるんだね   やっぱり Firefox って凄いや!
ステータスバーも(電波強度、電池残量...)カメラやラジオも電話や SMS の送受信ももちろん Firefox も音楽やビデオの再生もマーケットプレイスも3Dアプリも その他なんでも...
ステータスバーも     (電波強度、電池残量...)      カメラやラジオも      電話や SMS の送受信も      もちろん Firefox も      音楽やビデオの再生も      マーケットプレイスも     3Dアプリ...
開発パートナーと製品化           Telefónica が来年初め発売             世界 3∼4 位のキャリア             最初はブラジルで発売予定             Qualcomm のチップを使用  ...
パートナー企業 (一部)        一部。配置・順序に意味はなし
楽しみ楽しみ!    僕もスマホになって君と   一緒にお出かけしたいな!
HTML5 OS
HTML5 OS
HTML5 OS
HTML5 OS
Upcoming SlideShare
Loading in...5
×

HTML5 OS

7,399

Published on

神戸ITフェスティバルのプレゼンで使用したスライド
http://kobe-it-fes.org/archives/1836

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

No Downloads
Views
Total Views
7,399
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
71
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 OS"

  1. 1. HTML5 = OSSlides @ Kobe IT Festival 2012 by Tomoya Asai (dynamis) Last Update: 2012/10/06
  2. 2. about:me
  3. 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  4. 4. about:mozilla
  5. 5. http://www.mozilla.jp/videos/
  6. 6. Agenda
  7. 7. 本日のトピック about HTML5 HTML5.1 Web=OS Firefox OS
  8. 8. about:foxkeh ときどきプレゼン手伝って くれるフォクすけを紹介します
  9. 9. ぼくフォクすけぼくフォクすけ いつか僕も Firefox みたいな 立派なブラウザになるんだ!
  10. 10. サーバ (Apache Camel) の上にクライアント (Firefox)
  11. 11. 9.14 からキャンペーン開始しています
  12. 12. フォクすけの誕生日は 2006/09/01
  13. 13. See Also...
  14. 14. 今日お話しできないことはスライド見てね 今日話さないことでも 気軽に質問してください
  15. 15. Firefox OS & Marketplace Web プラットフォーム Web API が進化を続けている Marketplace Web アプリ配信システム Firefox OS Web がネイティブな OS http://r.dynamis.jp/fxos
  16. 16. CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  17. 17. JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  18. 18. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  19. 19. セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  20. 20. HTML5
  21. 21. みんな大好き ""HHTTMMLL55"" Mozilla と Firefox も みんな大好きだよね?
  22. 22. The term "HTML5" is widelyused as a buzzword to refer to modern Web technologies... WHATWG HTML 仕様書の解説 http://whatwg.org/html - Introduction
  23. 23. "HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています WHATWG HTML 仕様書の解説 http://whatwg.org/html - Introduction
  24. 24. "HTML5" 以前の Web 文書のための HTML+α 複雑なものは Flash で 互換性のない独自拡張 仕様のない新機能ばかり デバイス毎の Web モバイル Web は別物だった
  25. 25. ブラウザ戦争 IE の独占市場を Firefox が崩して Web 標準の時代へ
  26. 26. "HTML5" の目的 アプリのための HTML すべてを Web 技術で実現 互換性のある実装に ブラウザの挙動を厳密に定義 マルチデバイス Web どこでも同じ "One Web"
  27. 27. Web 標準プラットフォーム vs独自技術で囲い込んだ Web 「ブラウザ戦争」の時代はとっくに終わりました
  28. 28. "HTML5" への期待 次世代プラットフォーム アプリ開発のプラットフォーム Web アプリ開発を簡単に 互換性のある範囲の拡大 マルチデバイス展開 コード共通化でコスト削減
  29. 29. 既存の独自プラットフォーム現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
  30. 30. Web が共通プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  31. 31. 僕らの WWeebb を独占から守ろう! Web はみんなのものだから 独占しちゃダメだよね!
  32. 32. Web で可能になったこと マルチメディア Audio, Video, Animation, 3D ... アプリケーション Offline, Storage, File ... 高度な通信制御 双方向通信, DNT ...
  33. 33. Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC...
  34. 34. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  35. 35. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  36. 36. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data TransCSS3~ Flex Box form Anim Regions ation
  37. 37. Khronos SMIL Vibra- tion WebGL Geo- SVG other location Orien- tation Canvas WHATWG Web IETF Messag- ing Web Multi SPDY Web Sockets DNT Media Mouse, Sockets HTML5 Key ev. XHR2 FileAPI CSP Forms W3C Server- Offline ECMAHTML5 HTML5 Support Sent ev. ECMA ScriptParser Indexed Web WAI- DB XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box OGP XPath form RSS Anim Math Regions ation ML WOFF DOM4
  38. 38. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMAHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFCParser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Box Battery Status OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  39. 39. もっともっと WWeebb を 進化させなきゃ! 僕らの Web が進化しないと 闇の組織に支配されちゃう!
  40. 40. HTML5.1
  41. 41. HHTTMMLL55 の次は HHTTMMLL55..11 ? HTML6 じゃないのは ちょっと意外だよね!
  42. 42. HTML5 の次は HTML5.1 W3C 仕様書の話です != バズワード "HTML5" HTML5 は 2014 年に標準化 今年中に仕様をほぼ確定に HTML5.1 も平行して標準化 5.1 は 2016 年に標準化 http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  43. 43. HTML5 < HTML << "HTML5" HTML5 = W3C 仕様書 安定化を進めるスナップショット HTML = WHATWG 仕様書 常に進化を続ける最新仕様 "HTML5" = Web 技術全部 てきとーに呼んでるだけ
  44. 44. HTML5 = 安定ブランチHTML5.x = ブランチ更新HTML = 最新の HTML 喧嘩して分離したのではない W3C で安定化作業を始めただけ
  45. 45. HHTTMMLL の進化は続いてるんだね! HTML5.x の安定化中も HTMLの進化は止まらない
  46. 46. Web = OS
  47. 47. 今の ""HHTTMMLL55"" で満足してちゃだめ! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  48. 48. JavaScript の進化 次世代 JS 最高! Firefox が最も実装進んでる 慣れると現 JS 書くのがツライ 高速化やデバッグ容易化 Class, TypedArray, ParallelArray ... 静的解析でコンパイル時エラーを 出しやすい言語仕様に
  49. 49. TypeScript ってどうなの? JS はすべて TS だって! 互換性大事だよね! 次世代 JS 使えるって! でも実装がダメ (><) MS お得意の独自拡張 お得意のインテリセンスも
  50. 50. たったこれだけでも非互換// JavaScript (Firefox 実装済み)(function(){ var [a, b] = [1, 2]; // 関数スコープ})();console.log(a);// -> TypeScript で変換後(function () { var __missing; [a, b] = [1, 2]; // グローバル})();console.log(a);// もしバグじゃなくて仕様なら残念すぎる
  51. 51. 雨後の筍がポコポコ生えてる? CoffeeScript 次世代 JS の先輩的存在 Dart 他人。Chrome に囲い込み? JSX 誰が書いても遅くならない
  52. 52. JavaScript が常に勝つ! すべて問題解決してきた 速度遅い → 高速化 ミス多発 → Strict Mode スレッドがない → Workers GPU 使えない → WebGL Class 使いたい → 入るよ 写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
  53. 53. Web デザインの進化 フィルター SVG Filter, CSS Filter レイアウト Grid, Regions, Exclusions... CSS 構文の進化 @document, variable ...
  54. 54. SVG Filter, CSS Filter Mozilla: 既にある SVG 使おうぜ! WebKit: SVG なんてシラネ。 俺は何でも CSS でやるぜ! Mozilla: 仕方ないな…
  55. 55. レイアウトいろいろ by Adobe
  56. 56. アニメーションの進化 乱立しすぎ&連携無し! JavaScript Animation Canvas 2D, WebGL SVG & SMIL CSS Transisions, Animations Web Animations へ
  57. 57. Web Animations へ Apple (Flash 代替技術として): CSS でアニメーション! Mozilla & Opera: クソ構文は直して標準化 Mozilla, Google, Adobe: JS と一括管理できる API 作ろう Web Animations は Mozilla Japan の Brian さん頑張ってます
  58. 58. マルチメディアの進化 Audio Data, Web Audio Camera API (Media Capture) WebRTC - getUserMedia 電話会議などは簡単に
  59. 59. WebRTC (getUserMedia)
  60. 60. WebRTC (getUserMedia)
  61. 61. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock Resource Lock Idle
  62. 62. BananaBreadhttps://developer.mozilla.org/ja/demos/detail/bananabread
  63. 63. BananaBreadhttps://developer.mozilla.org/ja/demos/detail/bananabread
  64. 64. ネットワーク系の進化 Server-Sent Event WebSocket SPDY v2, v3 ... HTTP 2.0? WebRTC - P2P TCP Socket UDP Datagram Socket
  65. 65. デバイス間連携の進化 Web Intents Web Activities Push Notification
  66. 66. デバイス間連携はこれから本番 Mozilla: Web Activities! Google: Web Intents! Mozilla & Google: WHATWG で標準化議論中 共に将来非互換になる見込み この辺の話はカエルさん(小松さん)が扱ってましたね
  67. 67. ステータス系の進化 WiFi Info, Mobile Connection Network Info (通信速度等) Battery Status
  68. 68. センサー系の進化 Geolocation (位置情報) Orientation (加速度) Ambient Light (環境光) Proximity (近接)
  69. 69. ハードウェア系の進化 Bluetooth USB, USB file-reading NFC FM Radio
  70. 70. スマホ系の進化 SMS, Telephony (電話) Contacts, Settings UDB Datagram Socket HTTP-cache, Log Background Service
  71. 71. アプリとしての進化 Open Web Apps アプリとしてインストール FileReader, FileHandle Device Storage
  72. 72. ホンモノの Web "アプリ" ブラウザという枠を飛び出して動作
  73. 73. Android でも実装済み 開発版での画面です
  74. 74. 夢が広がるね! 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  75. 75. Firefox OS WebRT as an OS...
  76. 76. おーえすになる! 僕より先に OS になるんだね やっぱり Firefox って凄いや!
  77. 77. ステータスバーも(電波強度、電池残量...)カメラやラジオも電話や SMS の送受信ももちろん Firefox も音楽やビデオの再生もマーケットプレイスも3Dアプリも その他なんでも...
  78. 78. ステータスバーも (電波強度、電池残量...) カメラやラジオも 電話や SMS の送受信も もちろん Firefox も 音楽やビデオの再生も マーケットプレイスも 3Dアプリも その他なんでも...すべて Web 技術で!
  79. 79. 開発パートナーと製品化 Telefónica が来年初め発売 世界 3∼4 位のキャリア 最初はブラジルで発売予定 Qualcomm のチップを使用 端末製造は ZTE や TCL and more... 掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/
  80. 80. パートナー企業 (一部) 一部。配置・順序に意味はなし
  81. 81. 楽しみ楽しみ! 僕もスマホになって君と 一緒にお出かけしたいな!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×