ブラウザから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,242 views
2,180 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,242
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

ブラウザから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

×