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 ってそもそも何 ?

今までの Web

Browser+

Web OS

これからの Web

Browser+

Web OS

Browser+

Web OS

HTTP

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

• 必ずクライアントから開始

例） CSS スプライト

SPDY

• 片側一車線を何台でも走らせることが可能

• 荷物の梱包は最低限でとにかく積荷を小さく

• 必ずクライアントから開始するところは基本的に変わらない

WebSocket

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

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

送信しないと受信できない

送信と受信は無関係

http://example.com/

使いドコロ• HTTP, SPDY– リソースダウンロード（現状の Web のメインの

使い方）– SPDY のほうが利用事例が多いのはこの要因もあ

る

• WebSocket– インタラクティブサービス– 新しい使い方をしたいときにとても便利（例えば

エージェントサービスのような）

例 :Monaca

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

Browser+

Web OS

Web OS の具体例Ex) Chrome Packaged Apps

Web OS

OS(windows, mac, linux, …)

Browser run-time

Browser

Web page Web OS apps Native apps

Web OS (cont)

Browser run-time

Browser

Web page Web OS apps

Web OS (cont)

Web OS で出来る事

• Socket API•Bluetooth•USB•…

Socket API

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

ロトコル）だってできる

– 例えば• ブラウザの中に Web サーバーを立てる• HTTP の認証情報をハックする（自分で、 HTTP クライ

アントを書く）• 同一ネットワーク内のサーバーを自動で見つける

（ SSDP, mDNS など）

chrome://flags

System Applications WG

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

agenda


• Web of things


• 各種注意点

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

直訳

「モノ」の Web

意訳• Web から様々なマルチデバイスを使いこ

なせるようになること– パソコン– スマートフォン– タブレット– テレビ– 車– サイネージ– ……..

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

http://html5miyazaki.org/

Browsing のモデル

HTTPSPDY

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

Web- デバイス連携のモデル

HTTPSPDY

WebSocket

Socket API

agenda


• Web of things


• 各種注意点

Demo （ DLNA をそのまま Web で使う）

DMSDMR

DMC

controll

serverender

Micro web server is inside!!

DLNA protocol hasImplemented by komasshu

based on Socket API

Socket API を用いた DLNA の実装

REST→DLNA変換

Chrome PackagedApps(micro web server)by Socket API

Generic Web Site

ユーザー操作

HTTP 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)

DMSDMR

DMC

controll

serverender

Manipulation via WebSocket connections.

Home Network Mobile Network

WebSocket server

Demo( 認証コンテンツ )

DMSDMR

DMC+ proxy

controll

serverender

Micro web server is inside!!

DLNA protocol hasImplemented by komasshu

based on Socket API

認証コンテンツを DLNA で見れるようにする仕組み

Certification handling server is implemented

inside of Chrome (Socket API)

User input is on Browser only!!

agenda


• Web of things


• 各種注意点

Browser と Web OS を連携させるには

REST→DLNA変換

ユーザー操作

HTTP DLNA

http://192.168.13.5:59685 どうやっ

て渡すか？

渡すための API

• Web Intents … Now, dead … orz– 詳しくは、僕のブログ http://goo.gl/ScYAS

• Service Discovery API– 現在、 Opera の dev でのみ実装– 現状の Socket API では受け側が実装できない

（ socket option が指定できない）

REST→DLNA変換

サーバーいますかー？

無言

http://goo.gl/ScYAS

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 を保

存

この Plan を実サービスでは使うのはキツイ！！

REST→DLNA変換

Registration server

NAT routerPrivate IP

NAT の global IP をキーとして URL を保

存

REST→DLNA変換


REST→DLNA変換


携帯キャリア NW

CGNGlobal IP

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

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

DLNA in Wifi NW is not always true.

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

Think Layer violations.

• 家庭内 NW 、アクセス NW 、IP アドレス　・・・

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

• Layer 独立は幻想です（キリッ

Physical

Datalink

network

transport

application

Thank you!!

10th jan 2013_miyazaki

Documents