HTML Web Platform

  • 23,389 views
Uploaded on

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

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

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
23,389
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
136
Comments
0
Likes
26

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