2015/1/25 HTML5カンファンレンスの講演資料

1. はじめての
Web of Things
2015/01/25 HTML5 Conference
さっくる
NTTコミュニケーションズ

2. さっくる @sakkuru
本名：本間 咲来/ Saki HOMMA
 NTTコミュニケーションズ 技術開発部所属
 HTML5を専門に調査や開発、コミュニティ活動、
標準化活動などを担当
 html5jスタッフ
 Codezineで「WebRTC入門」の連載中
1
自己紹介

3.  Web of Thingsとは何か
 Internet of Things(IoT)との違いは
 WoTサービスを作るには
 WoTデモ
 標準化
 今後のWoTの展望
2
今日の内容

4. Web of Things とは
3

5. モノのWeb
4

6. “Internet of Things”
の方がよく聞きますよね
5

7. 6

8. まずはIoTについて
7

9.  “モノのインターネット”
 インターネットで”モノ”がつながること
 Wikipedia
 The Internet of Things (IoT) is the interconnection of
uniquely identifiable embedded computing devices within
the existing Internet infrastructure.
 IoTとは、既存のインターネット基盤内での、一意に識別
可能な組み込みコンピューティングデバイスの相互接続で
ある。
 コンセプト自体は古く、1980年代初頭からあった
 1990年台末、RFIDの普及に伴って、認知されるよ
うになった
8
Internet of Thingsとは

10.  我々が日常的に使っているインフラ環境
 IP = インターネット・プロトコル
 IPで通信しあうネットワーク
9
インターネット
アプリケーション層
トランスポート層
ネットワーク層
リンク層
物理層
HTTP
TCP
IP
Ethernet
RJ45/CAT5

11.  ”モノ”とは？
 IPアドレスを持つもの
 センサー・モバイルフォン・組み込み機器等
 IPアドレスを持った機器に格納されたコンテンツ
 IPアドレスを持つモノから検知可能なモノ。
RFIDタグを付けた商品等。
 RFID :電波（電磁波）を用いて、内蔵したメモリのデー
タを非接触で読み書きする情報媒体。SUICAなどの非
接触ICカードも広義のRFID。
10
モノ

12. 11
スマートメータ
メーター内に通信機能を持たせた
次世代電力量計

13.  よくあるパターン
 センサーデータをゲートウェイを経由してイン
ターネットに送信し、収集したデータを分析し、
サービス等に活かす
12
IoTの例

14.  IPで通信できるモノと、それと通信できる
モノのつながり
13
IoTの構成
インターネット
ゲート
ウェイ
各種センサー
やRFIDタグ等
無線PAN
MQTT,
HTTPS等

15.  Personal Area Network
 個人の周辺のコンピュータデバイス間の通信のため
に使われるコンピュータネットワーク。範囲はせい
ぜい2~3mくらいを指す。
 有線PAN
 USB, FireWire等
 無線PAN
 Wifi
 Bluetooth
 BLE(Bluetooth Low Energy)
 Zigbee(IEEE 802.15.4)
 etc.
14
PAN

16.  RFID
 IPv6
 ビッグデータ
 M2M
 ユビキタス
 スマートグリッド
15
IoTと一緒に語られる単語

17.  IPで通信できるモノと、それと通信できる
モノのつながり
16
Internet of Things(再掲)
インターネット
ゲート
ウェイ
各種センサー
やRFIDタグ等
無線PAN
MQTT,
HTTPS等

18. 改めて
Web of Things とは
17

19.  “モノのWeb”
 Wikipedia
 Similarly to what the Web (Application Layer) is
to the Internet (Network Layer), the Web of
Things provides an Application Layer that that is
claimed to simplify the creation of Internet of
Things applications
 インターネット（ネットワーク層）にとっての
Web（アプリケーション）のように、WoTはIoT
アプリケーションの作成を簡単にするアプリ
ケーションレイヤを提供する。
18
Web of Thingsとは

20.  Web = ブラウザで見るもの？
19
Webとは

21.  モバイルを中心に、非ブラウザによるWeb
利用が進展
20
Web = ブラウザで見るもの？

22.  Webの主な構成要素と呼ばれるもの
 HTML, HTTP, URL, …
 Webの必要条件は何だろうか
 HTML(で書かれていること)?
 API等、HTMLを使っていなくてもWebと言えそう
 HTTP(で通信すること)?
 WebSocketやWebRTC、HTTP以外のプロトコルも
出てきている
 URL(でアクセスできること)?
 WebRTCってピアにURLないよね。。
21
Webの必要条件

23. 何があればWebと言えるか？
22

24. Webのプロトコルで
アクセスできること
23

25.  ブラウザでAPIが提供されているプロトコ
ル
 HTTP, WebSocket, WebRTC
 そもそもこんな定義に行き着いたのは、WebRTCなんて通信
手段ができてしまったからとも言える
 WebRTCがなければ、「Web = URLでアクセスできる」、と
いう定義にしてもよかった
24
Webプロトコル

26. ではWeb of Thingsとは
25

27.  Internet of Things
 インターネットプロトコルで通信できるモノのつながり
 Web of Things
 Webプロトコルで通信できるモノのつながり
 広大なIoTの環境の上で、サービスを提供するレイヤ
26
ここまでのまとめ
Internet of Things
Web of Things

28. Web of Thingsの
仕組み
27

29.  一般的なWeb
 ハイパーリンクをたどっていくもの
 検索すれば出てくるので、アドレス（URL）を
覚える必要がない
 モノのWeb
 現実世界のモノは、検索しても出てこない
 モノのアドレスを知る手段が必要
28
一般的なWebとの違い

30. モノのアドレスを
知る手段
29

31.  SSDP, mDNS等
 ローカルネットワーク内にブロードキャストで
メッセージを送り、応答を待つ
 ローカルネットワーク内、身近なモノの検出に
使用できる
 家電のDLNAプロトコルなどで使われている
30
手段1: 検出プロトコルを使う

32. 31
SSDP, mDNS
• SSDP
• mDNS
• etc.
Local Network
multicast UDP
SSDP server
Discovery message
SSDP server
SSDP server

33. 32
SSDP, mDNS
• SSDP
• mDNS
• etc.
Local Network
SSDP server
Response
SSDP server
SSDP server
unicast UDP

34.  ブローカサーバを介して、相手（モノ）の
アドレスを教えてもらう
 身近なモノ、遠隔地のモノ両方の検出に使
用できる
 WebRTCは主にこの手段
33
手段2: 仲介してもらう

35. 34
ブローカサーバによる仲介
ブローカサーバ 登録
問い合わせ
モノWebアプリ

36. 1. モノの検出
 SSDP, mDNS等の検出プロトコル
 ブローカサーバによる中継
2. モノと通信
3. モノ固有の方法（API等）でやりとり
35
WoTサービスのフロー

37. デモ
36

38. デモ1: カメラ連携
37

39.  検出:SSDP
 通信: HTTP
 モノとのやりとり: Camera Remote API
38
WoTデモ：Camera
SSDPサーバ
Webサーバ
SSDPクライアント
SSDPによる検出
Camera Remote API
HTTP
APIを呼ぶコード

40. デモ2: 遠隔ロボット連携
39

41. 40
WoTデモ：遠隔ロボット
ブローカサーバ
WebRTC
ロボットの登録
ロボットの検出

42. デモ3: 電飾(hue)
41

43. 42
WoTデモ：電飾デバイス(hue)
ブローカサーバ
ZigBee Light Link
センサーネットワーク用の無線
プロトコル
ブリッジ
②ブリッジ
の検出
①ブリッジ
を登録
hue
hue
hue

44. デモ4: テレビ(AirPlay)
43

45. 44
WoTデモ：AirPlay
検出
mDNS
AirPlay API
mDNSサーバ
Webサーバ

46.  機器検出のプログラムが必要
 SSDP, mDNS等のプロトコルを使う
→ Webプロトコルじゃない！！！！
WoTできない！！
 ブローカサーバを使う
→ サーバの用意が必要
 さらに、どちらの方法を使うにせよ、機器
固有のコードが必要となり、対象機器に広
がりが生まれない
45
WoTアプリを作るには?

47. じゃあどうすればよいか
46

48. 標準化
47

49.  Webに関する様々な仕様を検討しているコ
ンソーシアム
 HTML
 API
 CSS
 Security Model
 ete.
48
W3C(World Wide Web Consortium)

50.  Working Group: 仕様を決める権限を持つ
 Interest Group:仕様のユースケースの収集等、初期検討
を行う。
 Community Group: 仕様のユースケースの収集等、初
期検討を行う。Interest Groupより立ち上げるハードル
が低い。
 Business Group: テクニカルではなく、ビジネスサイド
から仕様を検討するグループ。W3Cに加盟せずとも会
費を払えば参加できる
 つい先日2015/1/15、「HTML5 Japanese Community
Group」が設立されました。
49
W3Cのグループ

51.  Webとデバイス、特にテレビを連携したい、
というニーズは2010年頃からあった
 Web and TV IG が2010年に設立
 TVのディスカバリやDRM等に関しての議論が開
始された
 WebIntents, Network Service Discovery API
など検討されていたが、プライバシー等の
問題でお蔵入り
50
Webとテレビ

52.  Web of Things IG
 2015/1/20にチャーターが制定された
 Second Screen Presentation WG
 Second Screen Presentation CG
今最も具体的にWebとモノが連携できるよう
な仕様を策定しているのが
Second Screen Presentation WGで策定中の
Presentation API
51
W3CにおけるWoT

53.  http://w3c.github.io/presentation-api/
 Webページをセカンドスクリーンに映し、操作
を可能にするAPI
 Second Screen Presentation CGで初期検討が行
われ、現在はSecond Screen Presentation WGで
仕様策定中
 まだEditor’s Draftしかない
 Editor‘s Draft: 仕様策定者の間で常に更新されている
最新の仕様。これが固まるとWorking Draftとなる。
 まだどのブラウザにも未実装
52
Presentation API

54.  Webページから、セカンドスクリーンと連携し、
操作を可能にするAPI
 セカンドスクリーン：テレビや、プロジェクタ等の
スクリーン系のデバイス
 Presentation APIでは、仕様の中では有線・無
線等、ファーストスクリーンとセカンドスク
リーンの接続方法はなんでもよい、としている
53
Presentation API
wired (HDMI, DVI, …)
wireless (DLNA, AirPlay,
MiraCast, Chromecast, …)

55.  はじめにUAはデバイスの検出を行っている
54
Presentation APIの動作概要
Device Display device
Discovery
User Agent Web server

56. 55
Presentation APIの動作概要
Device Display device
Web App
specified
by URL
Web App
Communication

57. 56
NSD APIとの比較
抜粋: startSession(“Wot Devices”) by Tatsuya Igarashi (Sony Corporation)

58.  プレゼンテーション
 ゲーム
 ビデオ・画像共有
 複数スクリーンへのメディア表示
57
Presentation APIのユースケース

59. あれこれって・・・
58

60. 59
AirPlay?

61.  AirPlayなどのベンダーロックされた機能を、
標準化してしまおう、というもの
 現実世界のモノとの相互接続を行うため、
IoT, WoTはプライバシーの問題の課題が大
きい
 Presentaion APIはその課題に対処している
60
Presentation API

62.  機器の検出機能がブラウザで実装されると
いうこと
61
Presentation APIが実装されると…
Device Display device
Discovery
User Agent Web server

63. それをPresentation機能だけに
しておくのはもったいない
62

64. スクリーン以外の
デバイスでも使いたい！
63

65.  Presentation APIの仕様を大きく変えずに、
non-screenデバイスにも適応できるので
は？
 もしnon-screenにも対象を拡張すると…
64
拡張提案

66.  各機器メーカが作る固有のAPIで作らな
きゃならない
 hue APIやCamera Remote APIなど、機器
固有のAPIではなく、もっと抽象度の高い
メソッドとして使えるようになる
65
機器固有のAPI

67.  2014年11月のW3Cの会議にてPresentation
APIの拡張の提案
66
W3C会議での提案

68. 67
navigator.presentation
.startSession('urn:schemas-sony-com:service:ScalarWebAPI:1')
.then(function(session) {…});
session.onmessage = function(mesg) {
showLiveView(mesg);
}
session.postMessage("getLiveView");
SSDP, Camera Remote API
Camera
urn
device-specific
method

69. 68
拡張したPresentation API
さまざまなデバイスが
検出＆操作できるように！
Web browser

70. 機器検出機能がブラウザに実装され
対応機器の広がりも生まれる

71.  みんなHappy！
70

72.  WoTは、Webとモノが連携すること
 Webから実世界のモノを動かせる
 現在のところ、WoTをやるには、
 SSDP等のクライアント
 ブローカサーバ
 のどちらかが必要
 WoTに関わるAPIはW3Cで検討中
 将来的にWebとモノとの連携がWeb APIだけで
できるようになる！
71
まとめ

73. ご静聴
ありがとうございました
72