0
HTML Web Platform  Slides @ HTML5 Conf. 2012 on 2012/09/08           by Tomoya Asai (dynamis)                             ...
about:
about:dynamis                   Mozilla Japan               http://dynamis.jp                @dynamitter            facebo...
きょうのおはなし     ぷらっとふぉーむ     うぇぶおーえす     うぇぶえーぴーあい     キツネさんのおーえす
Foxkeh
サーバ (Apache Camel) の上にクライアント (Firefox)
Web Platform
Web is the Platform
みんな  ""HHTTMMLL55""  に何を期待してるの?              フォクすけに教えて!
"HTML5" への期待      次世代プラットフォーム      マルチデバイス対応      アプリ開発を簡単に      組版技術を 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                                                 ...
HTML5 なんてもう古い     HTML5 = 安定ブランチ      2014 W3C 勧告に向けて標準化中     HTML = 最新の HTML      日々進化を続ける最新 HTML     最新 Web != HTML5    ...
既存の独自プラットフォーム現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
Web プラットフォームvs 独自プラットフォーム      「ブラウザ戦争」の時代じゃないですよ
今後は Web プラットフォーム               プラットフォーム                 としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
ホントにできるの?      フォクすけに教えて!
Web OS
Web is the OS
みんな  ""HHTTMMLL55""  大好き               フォクすけも好きだよ
"HTML5" プラットフォーム      Windows 8, RT, Phone      BlackBerry 10 - WebWorks      Tizen (MeeGo+LiMo+Bada)      Firefox OS (Boo...
Windows 8, RT, Phone         HTML でモダン?アプリ           かつてメトロと呼ばれていたもの         HTML は形式的に使うだけ           独自属性付 div 要素を乱発     ...
(旧)Metro アプリの HTML<!--	 data-win-*	 属性の嵐になります	 	 	 	 	 JavaScript	 では	 WinJS.*	 の嵐	 --><div	 class="itemtemplate"	 	 	 	 	...
(旧)Metro は Web と非互換       IE10 スーパーセット?        MS の人はそう説明しますが…       実は非互換の挙動あり        API が追加されるだけじゃない        innerHTML と...
Windows Store について       UI ガイド守らないと不可        ex: 設定はチャームで        → Web アプリは全滅       Web 読み込むだけは不可        それはアプリじゃないとのこと  ...
…�MMSS  の人いますか?           いるならスライド          少し飛ばします(笑)
ずっとあたしのこと  だけを愛してね      ってなかんじ?
Windows 専用アプリ    だけを作ってね        ってなかんじ?
WWeebb  と違うなら                     HHTTMMLL  使ってる                              意味ないよぉ                       フォクすけも残念です
BlackBerry 10 - WebWorks         HTML でもアプリ開発可能          メインはネイティブっぽい         W3C 仕様があるものは実装          無いものは実装を追加、標準化      ...
Tizen        HTML でもアプリ開発可能        メインは EFL のネイティブ?        参加企業の連携状況が        W3C 仕様があるものは実装        無いものは実装を追加、標準化         ...
Firefox OS (Boot to Gecko)          Web がネイティブ          アプリ開発は HTML のみ           OS の UI も全部 HTML          実装と平行して標準化     ...
Firefox OS は Web と互換         Web アプリがそのまま動く          ブラウザと同じ動作          セキュリティモデルも同じ         PC やスマホにも同じアプリ          Firef...
"HTML5" プラットフォーム       HTML は形式上だけ        Windows       HTML でも開発可能        BlackBerry, Tizen       HTML がネイティブ        Fire...
やっぱりフォクすけは キツネさんが好き       みんなも応援してね
あいふぉ〜んとどろいどくんは?      ちなみにどーなの?
iOS (iPhone, iPad)          ネイティブアプリ限定            Objective-C          ブラウザエンジン掲載不可          WebView で読み込むのは可            機...
Android          ネイティブアプリ限定          Java (+ NDK)          独自ブラウザエンジンも可          Firefox 入れれば Web アプリ          配信&実行環境にもなり...
Web API
Web ではできなかったこと     システムステータス      WiFi 情報, モバイル通信...     各種センサー      光センサー, 近接センサー...     低レベルハードウェア制御      USB, BlueTooth...
やりましょう!ってもじらが言ってる       *** がやらないなら       Mozilla がやるんだって
http://arewemobileyet.com/
モバイルが  WWeebb  に     向�かわないなら   WWeebb  をモバイルに                                    ってもじらが言ってる                             *...
Web API          Web の限界を押し進める          従来の基本的な API 以外          Mozilla が勝手に呼んでる API の          総称であって明確な定義はない            ...
以前からある Web API      Geolocation (位置情報)      Orientation (加速度)      Audio Data API      WebGL (3D グラフィック)      Camera API (...
実装済みの Web API      SMS, Telephony, Alarm      Mobile Connection, WiFi Info,      Network Info (通信速度等),      Contacts, Sett...
実装済みの Web API      Vibration, Pointer Lock      Ambient Light (環境光),      Proximity (近接),      Mouse Lock (移動量取得)      Dev...
現在実装中の Web API      WebRTC (Camera, P2P 含む)      Web Activities (Intent)      Push Notification      Power Management      ...
実装見込みの Web API      UDB Datagram Socket      HTTP-cache, Log      USB, NFC, USB file-reading      Background Service      ....
検討中の WebAPI      Magnetic Field      Time/Clock (時刻設定)      Calendar      Spellcheck      ...and more...
Web API も Web 標準       W3C DAP (Device API) WG       W3C System Apps WG       IETF/W3C WebRTC WG        マルチメディア系や P2P など  ...
仕様のない実装は不幸のもとだって      仕様を公開してるけど     実際の実装と違うのも×
実装のない仕様は机上の空論だって      実装されるまで仕様が     適切かどうかも判断不能
もうかなりできてる! って  MMoozziillllaa  が言ってる                  昨年末辺りから一気に                  実装してきてるらしい
Boot to Gecko
Firefox OS
キツネがおーえす?      フォクすけに教えて!
Firefox OS (Boot to Gecko)          Web 技術が「ネイティブ」           HTML5, JavaScript, Web API...           ホーム画面もすべて Web 技術で    ...
ステータスバーも(電波強度、電池残量...)カメラやラジオも電話や SMS の送受信ももちろん Firefox も音楽やビデオの再生もマーケットプレイスも3Dアプリも その他なんでも...
ステータスバーも     (電波強度、電池残量...)     カメラやラジオも     電話や SMS の送受信も     もちろん Firefox も      音楽やビデオの再生も     マーケットプレイスも      3Dアプリも  ...
Web API の標準化       不足機能は実装&標準化       Web = Native とする       主に W3C の WG で標準化       実装と平行して標準化を進める       Device API, System...
開発パートナーと製品化           Telefónica: 来年始め製品化             最初はブラジルで発売予定             TCL (Alcatel) や ZTE 掲載ロゴはパートナー企業の一部です: http...
パートナー企業 (一部)          配置・順序に意味はなし         これ以外については非公開
乞うご期待
Marketplace
まーけっとぷれいす?      フォクすけに教えて!
Firefox Marketplace          Device, OS 横断マーケット           Web Platform のためのストア           Firefox 限定とかじゃない          今年中に正式リ...
どんなかんじ?     フォクすけに教えて!
http://marketplace.mozilla.org/
http://marketplace.mozilla.org/
ですくとっぷアプリもこれからは  WWeebb  技術で!           ブラウザの枠にはもう           縛られない時代ですね
すまほではどうなの?      フォクすけに教えて!
Java アプリ同様インストール     ホームスクリーンに追加      ネイティブアプリと同じ     ブラウザと独立して起動      省メモリのためプロセスは共有
マルチデバイス対応    マルチデバイスマーケット     PC, Android, Firefox OS...    Web App = Native App に     ホームスクリーンに追加や     ブラウザと独立して起動など     ...
ほんとに  WWeebb  がまるちプラットフォーム           PC もスマホも1つの          アプリを配信できる!
しつもんありますか?
See Also...
CSS 最新機能紹介     CSS の新機能紹介      新機能や昨年から変わった点             http://r.dynamis.jp/css2012
JavaScript.Next          JavaScript の最新仕様           ECMAScript 5th のポイント          JavaScript 次世代仕様           ECMAScript 6t...
開発者ツール紹介    一通りの機能と使い方    Firefox 標準の開発者ツール     隠し設定やビルトイン関数のリ     ファレンスなども含めています    Firebug とその拡張機能     アイコンや背景画像を変更する   ...
HTML Web Platform
HTML Web Platform
HTML Web Platform
HTML Web Platform
HTML Web Platform
HTML Web Platform
Upcoming SlideShare
Loading in...5
×

HTML Web Platform

23,948

Published on

HTML5 Conference 2012 で使用したスライド

Published in: Technology

Transcript of "HTML Web Platform"

  1. 1. HTML Web Platform Slides @ HTML5 Conf. 2012 on 2012/09/08 by Tomoya Asai (dynamis) Last Update: 2012/09/08
  2. 2. about:
  3. 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  4. 4. きょうのおはなし ぷらっとふぉーむ うぇぶおーえす うぇぶえーぴーあい キツネさんのおーえす
  5. 5. Foxkeh
  6. 6. サーバ (Apache Camel) の上にクライアント (Firefox)
  7. 7. Web Platform
  8. 8. Web is the Platform
  9. 9. みんな ""HHTTMMLL55"" に何を期待してるの? フォクすけに教えて!
  10. 10. "HTML5" への期待 次世代プラットフォーム マルチデバイス対応 アプリ開発を簡単に 組版技術を Web に などなど…
  11. 11. ぷらっとふぉーむ? Web はもう見るだけの ものじゃないんだって!
  12. 12. Multi Media Mouse, HTML5 Key ev. Forms W3C OfflineHTML5 HTML5 SupportParser WAI- XHTML5 ARIA Semantic Elements
  13. 13. 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
  14. 14. 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 Trans CSS3~ Flex Box form Anim Regions ation
  15. 15. 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
  16. 16. 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 Battery Status Box OGP XPath form Proxi- Anim mitySchema RSS Math Regions .org ation ML WOFF RDF DOM4
  17. 17. HTML5 なんてもう古い HTML5 = 安定ブランチ 2014 W3C 勧告に向けて標準化中 HTML = 最新の HTML 日々進化を続ける最新 HTML 最新 Web != HTML5 遙かに多くの技術が進化してる
  18. 18. 既存の独自プラットフォーム現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
  19. 19. Web プラットフォームvs 独自プラットフォーム 「ブラウザ戦争」の時代じゃないですよ
  20. 20. 今後は Web プラットフォーム プラットフォーム としての WebWeb がプラットフォームなら業界標準技術でアプリ環境が統一される
  21. 21. ホントにできるの? フォクすけに教えて!
  22. 22. Web OS
  23. 23. Web is the OS
  24. 24. みんな ""HHTTMMLL55"" 大好き フォクすけも好きだよ
  25. 25. "HTML5" プラットフォーム Windows 8, RT, Phone BlackBerry 10 - WebWorks Tizen (MeeGo+LiMo+Bada) Firefox OS (Boot to Gecko) 2013 年には出 う感じ
  26. 26. Windows 8, RT, Phone HTML でモダン?アプリ かつてメトロと呼ばれていたもの HTML は形式的に使うだけ 独自属性付 div 要素を乱発 JS API も完全に独自 2012/10/26 リリース
  27. 27. (旧)Metro アプリの HTML<!-- data-win-* 属性の嵐になります JavaScript では WinJS.* の嵐 --><div class="itemtemplate" data-win-control="WinJS.Binding.Template"> <div class="item"> <h4 class="item-title" data-win-bind="textContent: title"></h4> <div class="item-overlay"> <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6> </div> </div></div> http://msdn.microsoft.com/ja-jp/library/windows/apps/hh974582.aspx
  28. 28. (旧)Metro は Web と非互換 IE10 スーパーセット? MS の人はそう説明しますが… 実は非互換の挙動あり API が追加されるだけじゃない innerHTML とかフィルタされる alert, open, moveTo とか使えない
  29. 29. Windows Store について UI ガイド守らないと不可 ex: 設定はチャームで → Web アプリは全滅 Web 読み込むだけは不可 それはアプリじゃないとのこと Web アプリはブラウザで。 MS の人に聞いた話
  30. 30. …�MMSS の人いますか? いるならスライド 少し飛ばします(笑)
  31. 31. ずっとあたしのこと だけを愛してね ってなかんじ?
  32. 32. Windows 専用アプリ だけを作ってね ってなかんじ?
  33. 33. WWeebb と違うなら HHTTMMLL 使ってる 意味ないよぉ フォクすけも残念です
  34. 34. BlackBerry 10 - WebWorks HTML でもアプリ開発可能 メインはネイティブっぽい W3C 仕様があるものは実装 無いものは実装を追加、標準化 正直あまり標準化目立たない… 2013Q1 にリリース?
  35. 35. Tizen HTML でもアプリ開発可能 メインは EFL のネイティブ? 参加企業の連携状況が W3C 仕様があるものは実装 無いものは実装を追加、標準化 2013Q1 にリリース?
  36. 36. Firefox OS (Boot to Gecko) Web がネイティブ アプリ開発は HTML のみ OS の UI も全部 HTML 実装と平行して標準化 それが Web 標準化のルール!
  37. 37. Firefox OS は Web と互換 Web アプリがそのまま動く ブラウザと同じ動作 セキュリティモデルも同じ PC やスマホにも同じアプリ Firefox OS のアプリは Firefox OS 専用ではありません ハードの違いとかで API の追加はあるが恣意的制約や非互換はない
  38. 38. "HTML5" プラットフォーム HTML は形式上だけ Windows HTML でも開発可能 BlackBerry, Tizen HTML がネイティブ Firefox OS 2013 年には出 う感じ
  39. 39. やっぱりフォクすけは キツネさんが好き みんなも応援してね
  40. 40. あいふぉ〜んとどろいどくんは? ちなみにどーなの?
  41. 41. iOS (iPhone, iPad) ネイティブアプリ限定 Objective-C ブラウザエンジン掲載不可 WebView で読み込むのは可 機能制限版の WebKit JIT 無効の低速 JS エンジン
  42. 42. Android ネイティブアプリ限定 Java (+ NDK) 独自ブラウザエンジンも可 Firefox 入れれば Web アプリ 配信&実行環境にもなります WebView で読み込むのも可
  43. 43. Web API
  44. 44. Web ではできなかったこと システムステータス WiFi 情報, モバイル通信... 各種センサー 光センサー, 近接センサー... 低レベルハードウェア制御 USB, BlueTooth, NFC...
  45. 45. やりましょう!ってもじらが言ってる *** がやらないなら Mozilla がやるんだって
  46. 46. http://arewemobileyet.com/
  47. 47. モバイルが WWeebb に 向�かわないなら WWeebb をモバイルに ってもじらが言ってる *** がやらないなら Mozilla がやるんだって
  48. 48. Web API Web の限界を押し進める 従来の基本的な API 以外 Mozilla が勝手に呼んでる API の 総称であって明確な定義はない https://wiki.mozilla.org/WebAPI
  49. 49. 以前からある Web API Geolocation (位置情報) Orientation (加速度) Audio Data API WebGL (3D グラフィック) Camera API (Media Capture) これらはもちろん Android 版 Firefox でも実装済み
  50. 50. 実装済みの Web API SMS, Telephony, Alarm Mobile Connection, WiFi Info, Network Info (通信速度等), Contacts, Settings, Time/Clock Idle, Battery Status Resource Lock (スリープ禁止) まだ不完全な実装の API も一部含む
  51. 51. 実装済みの Web API Vibration, Pointer Lock Ambient Light (環境光), Proximity (近接), Mouse Lock (移動量取得) Device Storage, Browser Open Web Apps, DOM Crypt まだ不完全な実装の API も一部含む
  52. 52. 現在実装中の Web API WebRTC (Camera, P2P 含む) Web Activities (Intent) Push Notification Power Management TCP Socket, Bluetooth FM Radio, Permission https://wiki.mozilla.org/WebAPI
  53. 53. 実装見込みの Web API UDB Datagram Socket HTTP-cache, Log USB, NFC, USB file-reading Background Service ...and more... https://wiki.mozilla.org/WebAPI
  54. 54. 検討中の WebAPI Magnetic Field Time/Clock (時刻設定) Calendar Spellcheck ...and more...
  55. 55. Web API も Web 標準 W3C DAP (Device API) WG W3C System Apps WG IETF/W3C WebRTC WG マルチメディア系や P2P など その他それぞれの WG で
  56. 56. 仕様のない実装は不幸のもとだって 仕様を公開してるけど 実際の実装と違うのも×
  57. 57. 実装のない仕様は机上の空論だって 実装されるまで仕様が 適切かどうかも判断不能
  58. 58. もうかなりできてる! って MMoozziillllaa が言ってる 昨年末辺りから一気に 実装してきてるらしい
  59. 59. Boot to Gecko
  60. 60. Firefox OS
  61. 61. キツネがおーえす? フォクすけに教えて!
  62. 62. Firefox OS (Boot to Gecko) Web 技術が「ネイティブ」 HTML5, JavaScript, Web API... ホーム画面もすべて Web 技術で Gecko エンジンだけ起動 Linux Kernel 上に Gecko を Java VM などの中間レイヤなし Gecko = Firefox 描画エンジン プロジェクト名は今も Boot to Gecko
  63. 63. ステータスバーも(電波強度、電池残量...)カメラやラジオも電話や SMS の送受信ももちろん Firefox も音楽やビデオの再生もマーケットプレイスも3Dアプリも その他なんでも...
  64. 64. ステータスバーも (電波強度、電池残量...) カメラやラジオも 電話や SMS の送受信も もちろん Firefox も 音楽やビデオの再生も マーケットプレイスも 3Dアプリも その他なんでも...すべて Web 技術で!
  65. 65. Web API の標準化 不足機能は実装&標準化 Web = Native とする 主に W3C の WG で標準化 実装と平行して標準化を進める Device API, System Apps... そのほか IETF などでも https://wiki.mozilla.org/WebAPI
  66. 66. 開発パートナーと製品化 Telefónica: 来年始め製品化 最初はブラジルで発売予定 TCL (Alcatel) や ZTE 掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/
  67. 67. パートナー企業 (一部) 配置・順序に意味はなし これ以外については非公開
  68. 68. 乞うご期待
  69. 69. Marketplace
  70. 70. まーけっとぷれいす? フォクすけに教えて!
  71. 71. Firefox Marketplace Device, OS 横断マーケット Web Platform のためのストア Firefox 限定とかじゃない 今年中に正式リリース予定 現在コミュニティメンバー限定、 Firefox 開発版ユーザ向け http://marketplace.mozilla.org/
  72. 72. どんなかんじ? フォクすけに教えて!
  73. 73. http://marketplace.mozilla.org/
  74. 74. http://marketplace.mozilla.org/
  75. 75. ですくとっぷアプリもこれからは WWeebb 技術で! ブラウザの枠にはもう 縛られない時代ですね
  76. 76. すまほではどうなの? フォクすけに教えて!
  77. 77. Java アプリ同様インストール ホームスクリーンに追加 ネイティブアプリと同じ ブラウザと独立して起動 省メモリのためプロセスは共有
  78. 78. マルチデバイス対応 マルチデバイスマーケット PC, Android, Firefox OS... Web App = Native App に ホームスクリーンに追加や ブラウザと独立して起動など ネイティブ同様の利用体験 ISW11F での画面サンプル
  79. 79. ほんとに WWeebb がまるちプラットフォーム PC もスマホも1つの アプリを配信できる!
  80. 80. しつもんありますか?
  81. 81. See Also...
  82. 82. CSS 最新機能紹介 CSS の新機能紹介 新機能や昨年から変わった点 http://r.dynamis.jp/css2012
  83. 83. JavaScript.Next JavaScript の最新仕様 ECMAScript 5th のポイント JavaScript 次世代仕様 ECMAScript 6th や Harmony http://r.dynamis.jp/jsnext
  84. 84. 開発者ツール紹介 一通りの機能と使い方 Firefox 標準の開発者ツール 隠し設定やビルトイン関数のリ ファレンスなども含めています Firebug とその拡張機能 アイコンや背景画像を変更する カスタマイズにも言及してます http://r.dynamis.jp/devtools
  1. A particular slide catching your eye?

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

×