Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ブラウザからWeb OSへWeb - TV連携事例からその可能性を探る       26th March 2013     NTT Communications          小松健作
自己紹介• 名前 – 小松健作• 所属 – NTTコミュニケーションズ – 次世代Webの研究開発・標準化• HTML5コミュニティの運営 – Google Developers Expert(HTML5) – Microsoft MVP (IE)
Main Idea• Web OSの紹介と、その可能性
Agenda•   Web [browser] Application•   Web OS•   Sample program – TV連携•   Browser + Web OS … 新たなWeb
Agenda•   Web [browser] Application•   Web OS•   Sample program – TV連携•   Browser + Web OS … 新たなWeb
HTML5に至る経緯とその進化• HTML5 = Application platform• 2004年 : Web Application 元年  – Google Map  – Web2.0 => SaaS• 2009年〜 : HTML5 ...
Web [Browser] Applicationは       Nativeになり得るか?• なりえない• Performance issue  – テクノロジーの進化で今後解決されていく• 問題は機能性  – セキュリティ・プライバシーの上...
諸刃の剣の例•   電話帳•   カレンダー•   ソケット通信•   NFC         ブラウジングしてる•   Bluetooth   途中で、いつの間に                か電話帳データが盗               ...
[参考] Firefox + asm.js  http://kripken.github.com/mloc_emscripten_talk/#/28
Agenda•   Web [browser] Application•   Web OS•   Sample program – TV連携•   Browser + Web OS … 新たなWeb
Web OS• WebをOSとして使う – 一時期はやった、「OSっぽいUI」とは異なる – 開発言語は、HTML/CSS/Javascript• Web OSアプリはインストールが必須 – ブラウザAdd-onやExtensionの進化系• ...
Web OSの概念図Web apps     Web OS apps    Native appsBrowser  Browser run-time    OS(windows, mac, linux, …)
API 制約の解放• インストールが必須となった事で、機能  制約が解放 – 電話帳 – カレンダー – ソケット通信                インストールが必 – NFC          要ってだけで本当               ...
セキュリティモデル• Manifestファイルに、利用機能を宣言  {      “permissions”: {         “tcp-socket”: {}      }  }• 宣言された内容に応じ、Marketplaceで審  査 ...
標準化• 現在は、完全に分断 – ベンダーごと独自のAPI• W3CにてWeb OS API標準化を検討 – System Applications WG        http://www.w3.org/2012/sysapps/
Agenda•   Web [browser] Application•   Web OS•   Sample program – TV連携•   Browser + Web OS … 新たなWeb
Web OS サンプル(テレビ連           携)• TVへAir PlayするWeb OSアプリを紹介 – Socket API(Chrome Packaged Apps v2)を利用 – DLNAの機能を実装   • ブラウザの通信...
DLNA と WebとのGap• DLNAはWebフレンドリー  – DLNAデバイス(TV)はWebサーバーを搭載  – SOAP/HTTPでデバイスをコントロール• Gap  – デバイス内WebサーバーのURLを如何に知る    か?  ...
Service Discovery • DLNAではIP multicastを用い、Webサーバー   を自動発見している  – SSDPのサーチクエリーをLAN内ブロードキャ    スト  – 対応デバイスからの返信メッセージにURLが   ...
Cross Origin XHRの制限• Webサイトと、デバイスのURLはオリジン  が異なる – http://example.net と http://192.168.0.1• DLNAデバイスとクロスオリジン間の  XHR(Ajax)は...
Socket APIによる      DLNAクライアント実装   SOAP        SSDP   Cross      Serviceorigin XHR   discoveryService Discovery : Socket AP...
Demo
Agenda•   Web [browser] Application•   Web OS•   Sample program – TV連携•   Browser + Web OS … 新たなWeb
Webの進化と再構築• DLNA クライアント on Packaged Apps v2  – 同様のソフトはNativeで既に存在• Webの進化は既存サービスの再構築  – Google map, twitter, facebook, …  ...
既存WebサービスとDLNAとの融合• YouTube や facebook とDLNAとの連携 – Web OS アプリのみでの解決策    • アプリ中に各APIを組み込む(マッシュアップ)    • 連携するサービスの数だけアプリが出来上...
既存WebサービスとDLNAとの融合       (cont)• ブラウザ + Web OS アプリのアプローチ – Web OSにブラウザ連携のAPIを準備 – コンテンツ検索は、従来通りブラウザで – ブラウザからシームレスにテレビへAir...
Demo
アーキテクチャ説明• Web OSとWeb appsをWebSocketで接続 – WebSocket – DLNAのプロトコルゲートウェイ                      Browser app                   ...
[参考]Web Intents• Web アプリ間を連携する共通インタ  フェース仕様• 昨年度、一旦Deadとなったが、検討を再  会する事が先週アナウンスされた – Scopeをしぼることで、Deadに至った問題点   を回避する模様• 詳...
まとめ• Webの可能性を拓く Web OS• Tizen mobile, Firefox OS, Chrome OS ….• DLNAのデモ。ブラウザとWeb OSとの連携  による、再構築へのスパイス。新たな  UX。
Thank you!! @komasshu
Upcoming SlideShare
Loading in …5
×

ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜

2,438 views

Published on

2013/3/26(tue)に開催された「ドコモゼミWebアプリラボ説明会」での発表資料。
Web OSの紹介と、その可能性と今後の展開をTV連携をサンプルに紹介したもの

Published in: Technology

ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜

  1. 1. ブラウザからWeb OSへWeb - TV連携事例からその可能性を探る 26th March 2013 NTT Communications 小松健作
  2. 2. 自己紹介• 名前 – 小松健作• 所属 – NTTコミュニケーションズ – 次世代Webの研究開発・標準化• HTML5コミュニティの運営 – Google Developers Expert(HTML5) – Microsoft MVP (IE)
  3. 3. Main Idea• Web OSの紹介と、その可能性
  4. 4. Agenda• Web [browser] Application• Web OS• Sample program – TV連携• Browser + Web OS … 新たなWeb
  5. 5. Agenda• Web [browser] Application• Web OS• Sample program – TV連携• Browser + Web OS … 新たなWeb
  6. 6. HTML5に至る経緯とその進化• HTML5 = Application platform• 2004年 : Web Application 元年 – Google Map – Web2.0 => SaaS• 2009年〜 : HTML5 – Application 開発APIの整備 • Canvas, Offline storage, Bidirectional Communication, … – 最近ではDeviceの操作も可能に • Camera/Microphone, Device orientation, … • Video Chat via P2P
  7. 7. Web [Browser] Applicationは Nativeになり得るか?• なりえない• Performance issue – テクノロジーの進化で今後解決されていく• 問題は機能性 – セキュリティ・プライバシーの上センシティ ブな機能のインプリは困難 – インストールレスは諸刃の剣
  8. 8. 諸刃の剣の例• 電話帳• カレンダー• ソケット通信• NFC ブラウジングしてる• Bluetooth 途中で、いつの間に か電話帳データが盗 まれたら・・・• …
  9. 9. [参考] Firefox + asm.js http://kripken.github.com/mloc_emscripten_talk/#/28
  10. 10. Agenda• Web [browser] Application• Web OS• Sample program – TV連携• Browser + Web OS … 新たなWeb
  11. 11. Web OS• WebをOSとして使う – 一時期はやった、「OSっぽいUI」とは異なる – 開発言語は、HTML/CSS/Javascript• Web OSアプリはインストールが必須 – ブラウザAdd-onやExtensionの進化系• ブラウザさえインストールされていれ ば、ベースのOSには依存しない
  12. 12. Web OSの概念図Web apps Web OS apps Native appsBrowser Browser run-time OS(windows, mac, linux, …)
  13. 13. API 制約の解放• インストールが必須となった事で、機能 制約が解放 – 電話帳 – カレンダー – ソケット通信 インストールが必 – NFC 要ってだけで本当 に解放していい – Bluetooth の? –…
  14. 14. セキュリティモデル• Manifestファイルに、利用機能を宣言 { “permissions”: { “tcp-socket”: {} } }• 宣言された内容に応じ、Marketplaceで審 査 – Firefox Marketplace
  15. 15. 標準化• 現在は、完全に分断 – ベンダーごと独自のAPI• W3CにてWeb OS API標準化を検討 – System Applications WG http://www.w3.org/2012/sysapps/
  16. 16. Agenda• Web [browser] Application• Web OS• Sample program – TV連携• Browser + Web OS … 新たなWeb
  17. 17. Web OS サンプル(テレビ連 携)• TVへAir PlayするWeb OSアプリを紹介 – Socket API(Chrome Packaged Apps v2)を利用 – DLNAの機能を実装 • ブラウザの通信APIでは、制限によりAir Playは出来 なかった • Socket APIを使えば、いかなる通信サービスも可能 に
  18. 18. DLNA と WebとのGap• DLNAはWebフレンドリー – DLNAデバイス(TV)はWebサーバーを搭載 – SOAP/HTTPでデバイスをコントロール• Gap – デバイス内WebサーバーのURLを如何に知る か? – クロスオリジンでのAjaxを如何に実現する か?
  19. 19. Service Discovery • DLNAではIP multicastを用い、Webサーバー を自動発見している – SSDPのサーチクエリーをLAN内ブロードキャ スト – 対応デバイスからの返信メッセージにURLが このNWに Webサーバー 記載 はいます かー?この機能は、ブラウザのAPIでは現状サポートされていな
  20. 20. Cross Origin XHRの制限• Webサイトと、デバイスのURLはオリジン が異なる – http://example.net と http://192.168.0.1• DLNAデバイスとクロスオリジン間の XHR(Ajax)は出来ない – DLNAデバイスはCORSに対応していない
  21. 21. Socket APIによる DLNAクライアント実装 SOAP SSDP Cross Serviceorigin XHR discoveryService Discovery : Socket APIを用い実装Cross Origin XHR : manifest.jsonの”permission” 設定
  22. 22. Demo
  23. 23. Agenda• Web [browser] Application• Web OS• Sample program – TV連携• Browser + Web OS … 新たなWeb
  24. 24. Webの進化と再構築• DLNA クライアント on Packaged Apps v2 – 同様のソフトはNativeで既に存在• Webの進化は既存サービスの再構築 – Google map, twitter, facebook, … – 既存 + Webならではのエッセンス – 奇をてらわずに、半歩先を目指す
  25. 25. 既存WebサービスとDLNAとの融合• YouTube や facebook とDLNAとの連携 – Web OS アプリのみでの解決策 • アプリ中に各APIを組み込む(マッシュアップ) • 連携するサービスの数だけアプリが出来上がる • インストールが仇となる facebook Twitter YouTube + + + DLNAコントロー DLNAコント DLNAコント ラ ローラ ローラ
  26. 26. 既存WebサービスとDLNAとの融合 (cont)• ブラウザ + Web OS アプリのアプローチ – Web OSにブラウザ連携のAPIを準備 – コンテンツ検索は、従来通りブラウザで – ブラウザからシームレスにテレビへAir – 自由に連携サービスを拡充可能 facebook Twitter DLNA コントローラ w/ Web OS API YouTube 共通のAPIで連携 …
  27. 27. Demo
  28. 28. アーキテクチャ説明• Web OSとWeb appsをWebSocketで接続 – WebSocket – DLNAのプロトコルゲートウェイ Browser app WebSocket I/F Reverse Service Cross origin Proxy Discovery SOAP Web OS Apps
  29. 29. [参考]Web Intents• Web アプリ間を連携する共通インタ フェース仕様• 昨年度、一旦Deadとなったが、検討を再 会する事が先週アナウンスされた – Scopeをしぼることで、Deadに至った問題点 を回避する模様• 詳しくはML(public-web-intents)をチェック – http://lists.w3.org/Archives/Public/public-web- intents/2013Mar/0000.html
  30. 30. まとめ• Webの可能性を拓く Web OS• Tizen mobile, Firefox OS, Chrome OS ….• DLNAのデモ。ブラウザとWeb OSとの連携 による、再構築へのスパイス。新たな UX。
  31. 31. Thank you!! @komasshu

×