10th jan 2013_miyazaki

1,984 views

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,984
On SlideShare
0
From Embeds
0
Number of Embeds
227
Actions
Shares
0
Downloads
12
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

10th jan 2013_miyazaki

  1. 1. デバイス連携の事例から知るコミュニケーション系API最新事 情〜WebSocketからSocket APIまで〜 NTT communications 小松健作
  2. 2. なぜカエル? 歴史的な理由です (キッパリhttp://togetter.com/li/369833?page=2
  3. 3. 自己紹介• 名前 – 小松健作• 所属 – NTTコミュニケーションズ – 次世代Webの研究開発・標準化• HTML5コミュニティの運営 – Google Developers Expert(HTML5) – Microsoft MVP (IE)
  4. 4. Today’s main idea• Webの各種通信プロトコルの 活用法を説明–デバイス連携を例に • HTTP • SPDY • WebSocket • Socket API
  5. 5. agenda• 通信系プロトコルの紹介• Web of things• Practice for Web of Things• 各種注意点
  6. 6. agenda• 通信系プロトコルの紹介• Web of things• Practice for Web of Things• 各種注意点
  7. 7. Webってそもそも何?
  8. 8. 今までのWebBrowser +Web OS
  9. 9. これからのWebBrowser +Web OS
  10. 10. Browser +Web OS
  11. 11. HTTP• 片側一車線を一台しか走れない• 荷物の梱包は余裕たっぷり• 高速化のプラクティス • 車線を増やす • 一度にのせる荷物を増やす• 必ずクライアントから開始
  12. 12. 例)CSS スプライト
  13. 13. SPDY• 片側一車線を何台でも走らせる ことが可能• 荷物の梱包は最低限でとにかく 積荷を小さく• 必ずクライアントから開始する ところは基本的に変わらない
  14. 14. WebSocket片側一車線を何台でも走れる好きなタイミングで発車できる
  15. 15. APIレベルで見ると• HTTP(Ajax) $.get(http://example.com, function(data) { console.log(data); }); 送信しないと 受信できない• WebSocket var ws = new WebSocket(“ws://example.com”); ws.send(“hoge”); ws.onmessage = function(ev){ console.log(ev.data); } 送信と受信は無関係
  16. 16. 使いドコロ• HTTP, SPDY – リソースダウンロード(現状のWebのメインの使 い方) – SPDYのほうが利用事例が多いのはこの要因もある• WebSocket – インタラクティブサービス – 新しい使い方をしたいときにとても便利(例えば エージェントサービスのような)
  17. 17. 例:Monacahttp://monaca.mobi/?lang=ja
  18. 18. Browser +Web OS
  19. 19. Web OSの具体例Ex) Chrome Packaged Apps
  20. 20. Web OSWeb page Web OS apps Native appsBrowser Browser run-time OS(windows, mac, linux, …)
  21. 21. Web OS (cont)Web page Web OS appsBrowser Browser run-time
  22. 22. Web OS (cont)
  23. 23. Web OSで出来る事• Socket API• Bluetooth• USB•…
  24. 24. Socket API• Socket API – 生のSocket コーディングを可能にするAPI – 好きな車、好きな走らせ方(いわゆるオレオレプ ロトコル)だってできる – 例えば • ブラウザの中にWebサーバーを立てる • HTTPの認証情報をハックする(自分で、HTTPクライア ントを書く) • 同一ネットワーク内のサーバーを自動で見つける (SSDP, mDNSなど)
  25. 25. chrome://flags
  26. 26. System Applications WGhttp://www.w3.org/2012/09/sysapps-wg-charter
  27. 27. agenda• 通信系プロトコルの紹介• Web of things• Practice for Web of Things• 各種注意点
  28. 28. Web of things“The Web of Things is a vision inspiredfrom the Internet of Things where everydaydevices and objects, i.e. objects that containan embedded device or computer, areconnected by fully integrating them to theWeb. Examples of smart devices andobjects are wireless sensor networks,ambient devices, household tagged objects, etc.”appliances, RFID http://en.wikipedia.org/wiki/Web_of_Things
  29. 29. 直訳「モノ」のWeb
  30. 30. 意訳• Webから様々なマルチデバイスを使いこな せるようになること – パソコン – スマートフォン – タブレット – テレビ –車 – サイネージ – ……..
  31. 31. Demo : Browserのマルチデバイスユースケース http://html5miyazaki.org/
  32. 32. BrowsingのモデルHTTPSPDY
  33. 33. Demo : Browser+Web-OSのマルチデバイスユースケース
  34. 34. Web-デバイス連携のモデル WebSocket HTTP SPDYSocket API
  35. 35. agenda• 通信系プロトコルの紹介• Web of things• Practice for Web of Things• 各種注意点
  36. 36. Demo(DLNAをそのままWebで使 う) Micro web server is serve inside!! renderDMR DMS controll DLNA protocol hasImplemented by komasshu based on Socket API DMC
  37. 37. Socket APIを用いたDLNAの実装 Chrome Packaged Apps Generic Web Site (micro web server) by Socket API REST→DLNA 変換 DLNAユーザー操作
  38. 38. Code samplechrome.socket.create(tcp, {}, function(e){ var s = e; chrome.socket.listen(s.socketId, "0.0.0.0", 0, 10, function(e){ chrome.socket.accept(s.socketId, function(e){ var s_ = e.socketId; chrome.socket.read(s_, 1024, function(e){ chrome.socket.write(s_, e.data, function(e){ }); }) }); });});
  39. 39. Demo (accessible from another network) Manipulation WebSocket server via WebSocket connections. render serveDMR controll DMS DMC Home Network Mobile Network
  40. 40. Demo(認証コンテンツ) Micro web server is serve inside!! renderDMR DMS controll DLNA protocol hasImplemented by komasshu based on Socket API DMC + proxy
  41. 41. 認証コンテンツをDLNAで見れるよ うにする仕組み Certification handling server is implemented inside of Chrome (Socket API) User input is on Browser only!!
  42. 42. agenda• 通信系プロトコルの紹介• Web of things• Practice for Web of Things• 各種注意点
  43. 43. BrowserとWeb OSを連携させるには どうやっ http://192.168.13.5:59685 て 渡すか? REST→DLNA 変換 DLNAユーザー操作
  44. 44. 渡すためのAPI• Web Intents … Now, dead … orz – 詳しくは、僕のブログ http://goo.gl/ScYAS• Service Discovery API – 現在、Operaのdevでのみ実装 – 現状のSocket APIでは受け側が実装できない (socket optionが指定できない) サーバー いますかー? REST→DLNA 変換 無言
  45. 45. Alternative plan NATのglobal IPをキー Registration server としてURLを保存http://192.168.13.5:59685 Global IP NAT router REGIST: http://192.168.13.5:59685 REST→DLNA 変換
  46. 46. このPlanを 実サービスでは使うのはキツ Registration server イ!! NATのglobal IPをキー としてURLを保存携帯キャリアNW Global IP CGN Private IP Private IP Private IP NAT router NAT router NAT routerREST→DLNA REST→DLNA REST→DLNA 変換 変換 変換
  47. 47. IPアドレスに依存するシステムはやめましょう http://www.potaroo.net/tools/ipv4/
  48. 48. DLNA in Wifi NW is not always true.DLNAでしか動かないサービスとか作ると、ヘタするとクレームの嵐になるかも・・・
  49. 49. Think Layer violations.• 家庭内NW、アクセスNW、IP アドレス ・・・• 更に複雑化するNW条件に応 application じ、Webのシステムを考える transport ことが重要 network• Layer 独立は幻想です(キ Datalink リッ Physical
  50. 50. Thank you!!

×