HTML 2012Slides @ TechBuzz HTML5 8th   by Tomoya Asai (dynamis)                       Last Update: 2012/12/03
about:me
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
Topics
本日のトピック    about:    HTML5    HTML5.1    HTML2012    Pure Web Apps    Conclusion
about:foxkeh       ときどきプレゼン手伝って     くれるフォクすけを紹介します
ぼくフォクすけぼくフォクすけ   いつか僕も Firefox みたいな   立派なブラウザになるんだ!
サーバ (Apache Camel) の上にクライアント (Firefox)
出荷前のフォクすけたちです。
FFXXKK  4488!
FFXXKK  4488!
今が最後のチャンス!25 日までのキャンペーンが最後のチャンス!
Firefox キャンペーン で検索!
Introduction
みんな大好き  ""HHTTMMLL55""               Mozilla と Firefox も              みんな大好きだよね?
ブラウザ戦争 IE の独占市場を Firefox が崩して Web 標準の時代へ
Web 標準プラットフォーム                プラットフォーム                  としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
Web 標準プラットフォーム        vs 独自プラットフォーム     「ブラウザ戦争」の時代はとっくに終わりました
独自技術による囲い込み i       a        f       cプラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
"HTML5" への期待      次世代プラットフォーム       OS に代わるプラットフォーム      安定プラットフォーム       一社依存でない標準の確立      共通プラットフォーム       どこでも共通の言語と API
Web が共通プラットフォーム               プラットフォーム                 としての Web Web がプラットフォームなら標準技術でアプリ環境が統一される
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                                              ...
ブラウザの技術からプラットフォームへ    僕はまず立派なブラウザになり   いつかは立派な OS にならなきゃ
HTML5.1
HHTTMMLL55  の次は HHTTMMLL55..11  ?             HTML6 じゃないのは           ちょっと意外だったね!
HTML5 の次は HTML5.1            W3C 仕様書の話です               != バズワード "HTML5"            HTML5 は 2014 年に標準化               今年中に仕様...
HTML5 < HTML << "HTML5"         HTML5 = 安定ブランチ        HTML5.1 = ブランチ更新         W3C でブランチをメンテ          HTML = 最新の HTML     ...
Multi           Media      Mouse,  HTML5               Key ev.  Forms            W3C                            Offline     ...
other         WHATWG                   Canvas                                  Web                                 Messag-...
Khronos              SMIL              Vibra-                     MP3  WebCL                                              ...
HHTTMMLL  仕様は進化と安定化が同時に続く!           HTML5.x の安定化中も         HTMLの進化は止まらない
HTML2012
今の  ""HHTTMMLL55""  で満足してちゃだめ!       未来に向かって走り続けなきゃ!       ぼくは足短いから走るの遅いけど
Web で可能になったこと     マルチメディア      Audio, Video, Animation, 3D ...     アプリケーション      Offline, Storage, Indexed DB...     高度な通信制...
Web ではできなかったこと     システムステータス      WiFi 情報, モバイル通信...     各種センサー      光センサー, 近接センサー...     低レベルハードウェア制御      USB, BlueTooth...
Khronos              SMIL              Vibra-                     MP3  WebCL                                              ...
Opus              H.264             Web                               Audio        Notifi-                      Web        ...
WWeebb  技術で未来を創ろう!    未来に向かって走り続けなきゃ!    ぼくは足短いから走るの遅いけど
Web 標準を充実させよう!     不足機能は実装&標準化      Web = Native とする     W3C の WG などで標準化      実装と平行して標準化      Device API, System Apps...  ...
Web API の標準化Device API, System Application, Web Apps WG が主  実装面では圧倒的に Firefox がリードしている               FYI: http://www.w3.or...
JavaScript の進化        次世代 JS への移行         Firefox が最も実装進んでる         慣れると現 JS 書くのがツライ        高速化やデバッグ容易化         Class, Typ...
JavaScript が常に勝つ!       すべて問題解決してきた          速度遅い → 高速化          ミス多発 → Strict Mode          スレッドがない → Workers          GP...
ストレージ系の進化    IndexedDB     Local Storage は縮小化の方向    FileReader, FileHandle     FileWriter, FileSystem も?    Device Storage...
File System API 周りの話        Google:         ネイティブと一緒で良いじゃん         ファイルシステム使おうぜ!        Mozilla:         ファイルシステムなんて前近代的  ...
Web デザインの進化     レイアウト      Grid, Regions, Exclusions...      Flexbox (XUL 的レイアウト)     フィルター      SVG Filter, CSS Filter   ...
CSS Exclusions自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
CSS Regions  複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単Chrome Canary - http://html.adobe.com/webstandards/cssregions/
CSS Filters          ぼかしや色調整などのフィルタ効果や          曲げたり回したり変形も自由自在にChrome Canary - http://html.adobe.com/webstandards/csscust...
SVG Filter & CSS Filter          Mozilla:            既にある SVG 使おうぜ!          WebKit:            SVG なんてシラネ。            俺は何...
アニメーションの進化    乱立しすぎ&連携無し     JavaScript Animation     Canvas 2D, WebGL     SVG & SMIL     CSS Transisions, Animations    W...
Web Animations へ           Apple (Flash 代替技術として):             CSS でアニメーション!           Mozilla & Opera:             ダメ構文は直し...
マルチメディアの進化    Opus Audio Codec (RFC6716)    Web Audio, Audio Data     Web Audio にも Firefox 近日対応    Camera API (Media Captu...
WebRTC (getUserMedia)   カメラを使ったデータ処理も可能  ビデオ会議やリアルタイム動画分析にNightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
インタラクティブ系の進化    Touch Event    Vibration    Gamepad    Pointer Lock     ポインタを隠して移動量を取得
インタラクティブ系の進化    Touch Event    Vibration    Gamepad    Pointer Lock     ポインタを隠して移動量を取得
Banana Bread3D ゲームも普通に作れるプラットフォーム ファーストパーソンシューティングの例    https://developer.mozilla.org/ja/demos/detail/bananabread
センサー系の進化    従来からの Web API     Geolocation (位置情報)     Orientation (加速度)    Sensor API     Ambient Light (環境光)     Proximity...
ネットワーク系の進化    WebSocket    Server-Sent Event    SPDY v2, v3 ... HTTP 2.0    WebRTC - Peer to Peer    TCP Socket, HTTP-cach...
Browser Questリアルタイムに多人数で同時プレイ (MMORPG) 柔軟な画面サイズ対応と双方向通信による                http://browserquest.mozilla.org/
デバイス間連携の進化    Web Intents    Web Activities    Push Notification    この辺の話はカエルさん(小松さん)に聞きましょう
デバイス間連携はこれから本番    Mozilla:     Web Activities!    Google:     Web Intents!    Mozilla & Google:     WHATWG で標準化議論中     共に将...
Web Intents×TCP SocketWeb Intents でデバイス間連携 (PC - TV) TCP Socket 開いて家電と通信 (DLNA)          http://www.youtube.com/watch?v=hj...
Social 連携の進化       Social API        Firefox×Facebook 導入済み        まもなくマルチプロバイダ対応        用途は "Social" に限らない        ある意味サイドバ...
Social API×WebRTC  https://blog.mozilla.org/futurereleases/2012/11/30          /webrtc-makes-social-api-even-more-social/
ステータス系の進化    WiFi Information    Mobile Connection    Network Info (通信速度等)    Battery Status     電池残量に応じた処理を
ハードウェア系の進化    Bluetooth    USB    USB file-reading    FM Radio    NFC
これなら  WWeebb  で 大丈夫だね!       どんなアプリでも作れそう!       ボクもいろいろ作りた∼い!
Pure Web Apps          WebRT as an OS...
システムレベルまですべて  WWeebb  技術で!         システム系の API もあれば       すべて Web 技術にできるよね
System 系の進化      Resource Lock       スリープや WiFi オフなどの禁止      Settings (システム設定)      Alarm (時刻指定処理)      Background Service...
アプリプラットフォーム化    Open Web Apps     アプリとしてインストール    Payment     いわゆる課金システム
ホンモノの Web "アプリ"    ブラウザという枠を飛び出して動作
Android にもインストール       Firefox Marketplace は現在           テスター向けに公開中
セキュリティ面での進化    Content Security Policy     特に XSS 対策に有効     Firefox 4 や Chrome 実装済み    Permission API     アプリが使える API も管理 ...
アプリの権限管理アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める
スマホ系の進化    SMS (ショートメッセージ)    Telephony (電話)    Contacts (電話帳)
Firefox OS (Boot to Gecko)          Web 技術が「ネイティブ」           HTML5, JavaScript, Web API...           ホーム画面もすべて Web 技術で    ...
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も  その他なんでも...
ステータスバー (通知、        電波強度、電池残量...)も        カメラやラジオも        ビデオや音楽の再生も        マーケットプレイスも        システムの環境設定も        ホーム画面や壁紙も ...
Firefox OSミニなのは、要求仕様だけ             iOS のようなハイエンド端末専用 OS ではない
See Also: Firefox OS Group          Google Group あります           https://groups.google.com/group/           firefoxos       ...
楽しみ楽しみ!    僕もスマホになって君と   一緒にお出かけしたいな!
Summary      WebRT as an OS...
ブラウザの技術からプラットフォームへ    僕はまず立派なブラウザになり   いつかは立派な OS にならなきゃ
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 はもう古い       ...
HTML 2012
HTML 2012
Upcoming SlideShare
Loading in...5
×

HTML 2012

6,639

Published on

TechBuzz 第8回HTML5開発技術勉強会で使用したスライド
http://atnd.org/events/33721

Published in: Technology
1 Comment
26 Likes
Statistics
Notes
  • 素晴らしいスライドですね。こんなに新しい仕様の話があるとは思いませんでした。よくまとまってて参考になりました。

    Google のアグレッシブな姿勢が見て取れます。Google は Mozilla を味方につけてやれることはやってやろうという勢いを感じます。スマートフォンでウケた機能はなんでも後追いで HTML5 に乘せてやろうということですね。アップルやマイクロソフトがその路線に乗ろうとするかどうか、怪しいですけども。

    個人的には、モバイルプラットフォームすべてが HTML5 ベースのアプリケーションになることは無理だろうと思ってます。スマートフォン特有の統合されたユーザエクスペリエンスはとても大事で、iOS用で動くものは iOS のAPIを使うのが望ましいだろうと思います。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,639
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
61
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

HTML 2012

  1. 1. HTML 2012Slides @ TechBuzz HTML5 8th by Tomoya Asai (dynamis) Last Update: 2012/12/03
  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. Topics
  5. 5. 本日のトピック about: HTML5 HTML5.1 HTML2012 Pure Web Apps Conclusion
  6. 6. about:foxkeh ときどきプレゼン手伝って くれるフォクすけを紹介します
  7. 7. ぼくフォクすけぼくフォクすけ いつか僕も Firefox みたいな 立派なブラウザになるんだ!
  8. 8. サーバ (Apache Camel) の上にクライアント (Firefox)
  9. 9. 出荷前のフォクすけたちです。
  10. 10. FFXXKK 4488!
  11. 11. FFXXKK 4488!
  12. 12. 今が最後のチャンス!25 日までのキャンペーンが最後のチャンス!
  13. 13. Firefox キャンペーン で検索!
  14. 14. Introduction
  15. 15. みんな大好き ""HHTTMMLL55"" Mozilla と Firefox も みんな大好きだよね?
  16. 16. ブラウザ戦争 IE の独占市場を Firefox が崩して Web 標準の時代へ
  17. 17. Web 標準プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  18. 18. Web 標準プラットフォーム vs 独自プラットフォーム 「ブラウザ戦争」の時代はとっくに終わりました
  19. 19. 独自技術による囲い込み i a f cプラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
  20. 20. "HTML5" への期待 次世代プラットフォーム OS に代わるプラットフォーム 安定プラットフォーム 一社依存でない標準の確立 共通プラットフォーム どこでも共通の言語と API
  21. 21. Web が共通プラットフォーム プラットフォーム としての Web Web がプラットフォームなら標準技術でアプリ環境が統一される
  22. 22. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  23. 23. 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
  24. 24. 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 Queries Layout Micro- HTML Data TransCSS3~ form Regions Anim ation Filters
  25. 25. 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 Queries Layout Micro- HTML Data Trans CSS3~ OGP XPath form Regions RSS Anim Math ation Filters ML WOFF DOM4
  26. 26. 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 Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  27. 27. ブラウザの技術からプラットフォームへ 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  28. 28. HTML5.1
  29. 29. HHTTMMLL55 の次は HHTTMMLL55..11 ? HTML6 じゃないのは ちょっと意外だったね!
  30. 30. HTML5 の次は HTML5.1 W3C 仕様書の話です != バズワード "HTML5" HTML5 は 2014 年に標準化 今年中に仕様をほぼ確定に HTML5.1 も平行して標準化 HTML5 ほぼ確定後取り組み開始 5.1 は 2016 年に標準化 http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  31. 31. HTML5 < HTML << "HTML5" HTML5 = 安定ブランチ HTML5.1 = ブランチ更新 W3C でブランチをメンテ HTML = 最新の HTML WHATWG で最新技術を議論 "HTML5" = Web 技術全部 てきとーに呼んでるバズワード
  32. 32. Multi Media Mouse, HTML5 Key ev. Forms W3C Offline W3C のHTML5 HTML5 Support HTML5 仕様Parser WAI- XHTML5 ARIA Semantic Elements
  33. 33. other WHATWG Canvas Web Messag- WHATWG の ing Multi Web HTML5 Forms Media Mouse, Key ev. Sockets 最新 HTML W3C Server- OfflineHTML5 HTML5 Support Sent ev.Parser Web WAI- Storage W3C では XHTML5 ARIA Semantic Elements Web Workers モジュール化 Micro- HTML Data
  34. 34. 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 W3C Offline Server- バズワード ECMA Net InfoHTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC 6th "HTML5"Parser Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  35. 35. HHTTMMLL 仕様は進化と安定化が同時に続く! HTML5.x の安定化中も HTMLの進化は止まらない
  36. 36. HTML2012
  37. 37. 今の ""HHTTMMLL55"" で満足してちゃだめ! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  38. 38. Web で可能になったこと マルチメディア Audio, Video, Animation, 3D ... アプリケーション Offline, Storage, Indexed DB... 高度な通信制御 双方向通信, Server-Sent Event... 2011 年にはできていたことの一例
  39. 39. Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC... 2011 年にはできなかったことの一例
  40. 40. 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 Media SQL USB Workers Queries Layout Flex File Micro- Box Sys HTML Data Trans CSS3~ Battery Status OGP XPath form Regions Proxi- Anim mitySchema RSS Math ation Filters .org ML WOFF RDF DOM4
  41. 41. Opus H.264 Web Audio Notifi- Web cation RTC この辺りが SPDY DNT TCP Socket Tel FileAPI CSP Radio Net2012 年の進化 ECMA Info 6th Indexed Device DB Storage Flex File Box Sys CSS3~ Battery Status Regions Proxi- mity Filters
  42. 42. WWeebb 技術で未来を創ろう! 未来に向かって走り続けなきゃ! ぼくは足短いから走るの遅いけど
  43. 43. Web 標準を充実させよう! 不足機能は実装&標準化 Web = Native とする W3C の WG などで標準化 実装と平行して標準化 Device API, System Apps... そのほか IETF などでも https://wiki.mozilla.org/WebAPI
  44. 44. Web API の標準化Device API, System Application, Web Apps WG が主 実装面では圧倒的に Firefox がリードしている FYI: http://www.w3.org/Mobile/mobile-web-app-state/
  45. 45. JavaScript の進化 次世代 JS への移行 Firefox が最も実装進んでる 慣れると現 JS 書くのがツライ 高速化やデバッグ容易化 Class, TypedArray, ParallelArray ... 静的解析でコンパイル時エラーを 出しやすい言語仕様に
  46. 46. JavaScript が常に勝つ! すべて問題解決してきた 速度遅い → 高速化 ミス多発 → Strict Mode スレッドがない → Workers GPU 使えない → WebGL, WebCL Class 使いたい → 入るよ *** できない → API 増加中 写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
  47. 47. ストレージ系の進化 IndexedDB Local Storage は縮小化の方向 FileReader, FileHandle FileWriter, FileSystem も? Device Storage Archive (ZIP 読み出し)
  48. 48. File System API 周りの話 Google: ネイティブと一緒で良いじゃん ファイルシステム使おうぜ! Mozilla: ファイルシステムなんて前近代的 抽象化したコレクションにすべき いまのところ平行線
  49. 49. Web デザインの進化 レイアウト Grid, Regions, Exclusions... Flexbox (XUL 的レイアウト) フィルター SVG Filter, CSS Filter CSS 構文の進化 @document, variable ...
  50. 50. CSS Exclusions自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/
  51. 51. CSS Regions 複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単Chrome Canary - http://html.adobe.com/webstandards/cssregions/
  52. 52. CSS Filters ぼかしや色調整などのフィルタ効果や 曲げたり回したり変形も自由自在にChrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
  53. 53. SVG Filter & CSS Filter Mozilla: 既にある SVG 使おうぜ! WebKit: SVG なんてシラネ。 俺は何でも CSS でやるぜ! Mozilla: 仕方ないな…
  54. 54. アニメーションの進化 乱立しすぎ&連携無し JavaScript Animation Canvas 2D, WebGL SVG & SMIL CSS Transisions, Animations Web Animations で連携へ
  55. 55. Web Animations へ Apple (Flash 代替技術として): CSS でアニメーション! Mozilla & Opera: ダメ構文は直して標準化 Mozilla, Google, Adobe: JS と一括管理できる API 作ろう Web Animations は Mozilla Japan の Brian さん頑張ってます
  56. 56. マルチメディアの進化 Opus Audio Codec (RFC6716) Web Audio, Audio Data Web Audio にも Firefox 近日対応 Camera API (Media Capture) WebRTC - getUserMedia 電話会議などは簡単に
  57. 57. WebRTC (getUserMedia) カメラを使ったデータ処理も可能 ビデオ会議やリアルタイム動画分析にNightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/
  58. 58. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock ポインタを隠して移動量を取得
  59. 59. インタラクティブ系の進化 Touch Event Vibration Gamepad Pointer Lock ポインタを隠して移動量を取得
  60. 60. Banana Bread3D ゲームも普通に作れるプラットフォーム ファーストパーソンシューティングの例 https://developer.mozilla.org/ja/demos/detail/bananabread
  61. 61. センサー系の進化 従来からの Web API Geolocation (位置情報) Orientation (加速度) Sensor API Ambient Light (環境光) Proximity (近接) Android 版 Firefox は実装済み
  62. 62. ネットワーク系の進化 WebSocket Server-Sent Event SPDY v2, v3 ... HTTP 2.0 WebRTC - Peer to Peer TCP Socket, HTTP-cache UDP Datagram Socket
  63. 63. Browser Questリアルタイムに多人数で同時プレイ (MMORPG) 柔軟な画面サイズ対応と双方向通信による http://browserquest.mozilla.org/
  64. 64. デバイス間連携の進化 Web Intents Web Activities Push Notification この辺の話はカエルさん(小松さん)に聞きましょう
  65. 65. デバイス間連携はこれから本番 Mozilla: Web Activities! Google: Web Intents! Mozilla & Google: WHATWG で標準化議論中 共に将来非互換になる見込み この辺の話はカエルさん(小松さん)に聞きましょう
  66. 66. Web Intents×TCP SocketWeb Intents でデバイス間連携 (PC - TV) TCP Socket 開いて家電と通信 (DLNA) http://www.youtube.com/watch?v=hjUhSWKiwmw
  67. 67. Social 連携の進化 Social API Firefox×Facebook 導入済み まもなくマルチプロバイダ対応 用途は "Social" に限らない ある意味サイドバー API...
  68. 68. Social API×WebRTC https://blog.mozilla.org/futurereleases/2012/11/30 /webrtc-makes-social-api-even-more-social/
  69. 69. ステータス系の進化 WiFi Information Mobile Connection Network Info (通信速度等) Battery Status 電池残量に応じた処理を
  70. 70. ハードウェア系の進化 Bluetooth USB USB file-reading FM Radio NFC
  71. 71. これなら WWeebb で 大丈夫だね! どんなアプリでも作れそう! ボクもいろいろ作りた∼い!
  72. 72. Pure Web Apps WebRT as an OS...
  73. 73. システムレベルまですべて WWeebb 技術で! システム系の API もあれば すべて Web 技術にできるよね
  74. 74. System 系の進化 Resource Lock スリープや WiFi オフなどの禁止 Settings (システム設定) Alarm (時刻指定処理) Background Service Idle, Log
  75. 75. アプリプラットフォーム化 Open Web Apps アプリとしてインストール Payment いわゆる課金システム
  76. 76. ホンモノの Web "アプリ" ブラウザという枠を飛び出して動作
  77. 77. Android にもインストール Firefox Marketplace は現在 テスター向けに公開中
  78. 78. セキュリティ面での進化 Content Security Policy 特に XSS 対策に有効 Firefox 4 や Chrome 実装済み Permission API アプリが使える API も管理 アプリ毎の権限を制御可能に
  79. 79. アプリの権限管理アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める
  80. 80. スマホ系の進化 SMS (ショートメッセージ) Telephony (電話) Contacts (電話帳)
  81. 81. Firefox OS (Boot to Gecko) Web 技術が「ネイティブ」 HTML5, JavaScript, Web API... ホーム画面もすべて Web 技術で Gecko エンジンだけ起動 Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Gecko = Firefox 描画エンジン プロジェクト名は今も Boot to Gecko
  82. 82. ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も その他なんでも...
  83. 83. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...すべて Web 技術で実現済み!
  84. 84. Firefox OSミニなのは、要求仕様だけ iOS のようなハイエンド端末専用 OS ではない
  85. 85. See Also: Firefox OS Group Google Group あります https://groups.google.com/group/ firefoxos 参加歓迎。(・・). Wiki にまとめてます https://github.com/dynamis/ firefoxos/wiki
  86. 86. 楽しみ楽しみ! 僕もスマホになって君と 一緒にお出かけしたいな!
  87. 87. Summary WebRT as an OS...
  88. 88. ブラウザの技術からプラットフォームへ 僕はまず立派なブラウザになり いつかは立派な OS にならなきゃ
  89. 89. See Also...
  90. 90. Firefox OS & Marketplace Web プラットフォーム Web API が進化を続けている Marketplace Web アプリ配信システム Firefox OS Web がネイティブな OS http://r.dynamis.jp/fxos
  91. 91. CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  92. 92. JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  93. 93. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  94. 94. セキュリティ関連機能紹介 セキュリティ大事! 知っておくべき機能です Content Security Policy 次世代セキュリティポリシー Same Origin Policy はもう古い http://r.dynamis.jp/sec
  1. A particular slide catching your eye?

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

×