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