10th jan 2013_miyazaki

  • 1,300 views
Uploaded on

 

  • 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
1,300
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
10
Comments
0
Likes
5

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