Your SlideShare is downloading. ×
HTML5 OS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 OS

7,312
views

Published on

神戸ITフェスティバルのプレゼンで使用したスライド …

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

×