10th jan 2013_miyazaki

デバイス連携の事例から知る
コミュニケーション系API最新事
情
〜WebSocketからSocket APIまで〜
NTT communications
小松健作

なぜカエル？
歴史的な理由です
（キッパリ

http://togetter.com/li/369833?page=2

自己紹介
• 名前
– 小松健作
• 所属
– NTTコミュニケーションズ
– 次世代Webの研究開発・標準化
• HTML5コミュニティの運営
– Google Developers Expert(HTML5)
– Microsoft MVP (IE)

Today’s main idea
• Webの各種通信プロトコルの
活用法を説明
–デバイス連携を例に
• HTTP
• SPDY
• WebSocket
• Socket API

agenda
• 通信系プロトコルの紹介

• Web of things

• Practice for Web of Things

• 各種注意点

今までのWeb

Browser
+
Web OS

これからのWeb

Browser
+
Web OS

HTTP

• 片側一車線を一台しか走れない
• 荷物の梱包は余裕たっぷり
• 高速化のプラクティス
• 車線を増やす
• 一度にのせる荷物を増やす
• 必ずクライアントから開始

SPDY

• 片側一車線を何台でも走らせる
ことが可能
• 荷物の梱包は最低限でとにかく
積荷を小さく
• 必ずクライアントから開始する
ところは基本的に変わらない

WebSocket

片側一車線を何台でも走れる
好きなタイミングで発車できる

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);
}
送信と受信は無関係

使いドコロ
• HTTP, SPDY
– リソースダウンロード（現状のWebのメインの使
い方）
– SPDYのほうが利用事例が多いのはこの要因もある

• WebSocket
– インタラクティブサービス
– 新しい使い方をしたいときにとても便利（例えば
エージェントサービスのような）

例:Monaca

http://monaca.mobi/?lang=ja

Web OSの具体例
Ex) Chrome Packaged Apps

Web OS
Web page Web OS apps Native apps

Browser

Browser run-time

OS(windows, mac, linux, …)

Web OS (cont)

Web page Web OS apps

Browser

Browser run-time

Web OSで出来る事

• Socket API
• Bluetooth
• USB
•…

Socket API
• Socket API
– 生のSocket コーディングを可能にするAPI
– 好きな車、好きな走らせ方（いわゆるオレオレプ
ロトコル）だってできる

– 例えば
• ブラウザの中にWebサーバーを立てる
• HTTPの認証情報をハックする（自分で、HTTPクライア
ントを書く）
• 同一ネットワーク内のサーバーを自動で見つける
（SSDP, mDNSなど）

System Applications WG

http://www.w3.org/2012/09/sysapps-wg-charter

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
tagged objects, etc.”
appliances, RFID http://en.wikipedia.org/wiki/Web_of_Things

意訳
• Webから様々なマルチデバイスを使いこな
せるようになること
– パソコン
– スマートフォン
– タブレット
– テレビ
–車
– サイネージ
– ……..

Demo : Browserの
マルチデバイスユースケース

http://html5miyazaki.org/

Browsingのモデル
HTTP
SPDY

Demo : Browser+Web-OSの
マルチデバイスユースケース

Web-デバイス連携のモデル
WebSocket
HTTP
SPDY

Socket API

Demo（DLNAをそのままWebで使
う）
Micro web
server is
serve inside!!
render

DMR DMS
controll

DLNA protocol has
Implemented by komasshu
based on Socket API

DMC

Socket APIを用いたDLNAの実装
Chrome Packaged
Apps
Generic Web Site (micro web server)
by Socket API

REST→DLNA
変換 DLNA

ユーザー操作

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){
});
})
});
});
});

Demo (accessible from another
network)
Manipulation
WebSocket server via WebSocket
connections.

render serve

DMR controll
DMS

DMC
Home Network Mobile Network

Demo(認証コンテンツ)
Micro web
server is
serve inside!!
render

DMR DMS
controll

DLNA protocol has
Implemented by komasshu
based on Socket API DMC
+ proxy

認証コンテンツをDLNAで見れるよ
うにする仕組み
Certification handling
server is implemented
inside of Chrome (Socket
API)

User input is on
Browser only!!

BrowserとWeb OSを連携させるには
どうやっ
http://192.168.13.5:59685 て
渡すか？

REST→DLNA
変換 DLNA

ユーザー操作

渡すためのAPI
• Web Intents … Now, dead … orz
– 詳しくは、僕のブログ http://goo.gl/ScYAS
• Service Discovery API
– 現在、Operaのdevでのみ実装
– 現状のSocket APIでは受け側が実装できない
（socket optionが指定できない）
サーバー
いますかー？
REST→DLNA
変換
無言

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
変換

このPlanを
実サービスでは使うのはキツ
Registration server
イ！！
NATのglobal IPをキー
としてURLを保存

携帯キャリアNW
Global IP
CGN
Private IP Private IP Private IP
NAT router NAT router NAT router

REST→DLNA REST→DLNA REST→DLNA
変換変換変換

IPアドレスに依存する
システムはやめましょう

http://www.potaroo.net/tools/ipv4/

DLNA in Wifi NW is not always true.

DLNAでしか動かないサービスとか作ると、ヘタすると
クレームの嵐になるかも・・・

Think Layer violations.
• 家庭内NW、アクセスNW、IP
アドレス・・・

• 更に複雑化するNW条件に応 application
じ、Webのシステムを考える
transport
ことが重要
network

• Layer 独立は幻想です（キ Datalink

リッ Physical

10th jan 2013_miyazaki

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

En vedette

En vedette (7)

Similaire à 10th jan 2013_miyazaki

Similaire à 10th jan 2013_miyazaki (20)

Plus de Kensaku Komatsu

Plus de Kensaku Komatsu (20)

10th jan 2013_miyazaki