Web of

1. はじめての
Web of Things
2015/07/04 HTML5 Conference in 鹿児島
さっくる@NTTコミュニケーションズ

2. さっくる @sakkuru
本名：本間 咲来/ Saki HOMMA
 NTTコミュニケーションズ 技術開発部所属
 Webを専門に新規サービス開発、コミュニティ活動、
標準化活動などを担当
 html5jスタッフ
 たまにgihyoやCodezineで記事を書いたり
1
自己紹介

3.  Web of Thingsとは
 WoTサービスの仕組み
 WoTデモ
 今後のWoTの展望
2
今日の内容

4. Web of Things とは
3

5. …の前に
4

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

7. 6
10 倍以上！

8. 圧倒的！

9. まずは
Internet of Things
について
8

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

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

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

13. あらゆるモノ・データが
インターネットにつながり、
利用できる！
という概念
13

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

15. 15
IoTの典型的なモデル
他のWeb
サーバー
など
クラウド
無線PAN
ゲートウェイ
Sensor,
RFID 等
MQTT,
CoAP等
無線PAN
ゲートウェイ
Sensor,
RFID 等
Big
Data
Web
サー
バー
データの構造化
意味付け
グラフなど
(HTML)
Web API
(JSON, XML)

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

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

18. 改めて
Web of Things とは
18

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アプリ
ケーションの作成を簡単にするアプリケーションレ
イヤを提供する。
19
Web of Thingsとは

20.  ブラウザ？
20
Web

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

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

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

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

25. としよう（今は）
25

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

27. ではWeb of Thingsとは
27

28. Webプロトコルで
通信できるモノのつながり
28

29. 29
Webプロトコルの進化
1989
2009
2014
HTTP データの相互利用可能 :=>
モノのデータ利用が可能に
WebSocket
双方向通信が可能 :=>
モノの操作が可能に
WebRTC 映像ストリーミングが可能 :=>
モノとリアルタイム連携が
可能に

30. 30
Webプロトコルの進化とWoT
Webプロトコルが進化
Webからモノを操作したり、映像ストリーミングなど
リアルタイム連携が可能に
WoTという概念が生まれ、
新たなユースケースが創造され、
マーケットにイノベーションが引き起こされつつる

31. 31
WoTの例

32.  IoTの機器より比較的高機能・高性
能が要求される
 システムのインタフェースと通信
部分がWeb技術だけで実装可能
→開発が容易に
→マッシュアップによりサービス
が多様化
32
IoTと比較したWoT
HTTP
TCP
IP
Ethernet
RJ45/CAT5

33.  Internet of Things
 インターネットプロトコルで通信できるモノのつながり
 Web of Things
 Webプロトコルで通信できるモノのつながり
 Webページとモノが連携する
33
ここまでのまとめ
Internet of Things
Web of Things

34. Web of Thingsの
仕組み
34

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

36. モノのアドレスを
知る手段
36
?

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

38. 38
SSDP, mDNS
• SSDP
• mDNS
• etc.
Local Network
応答願う
SSDP server
Discovery message
SSDP server
SSDP server

39. 39
SSDP, mDNS
• SSDP
• mDNS
• etc.
Local Network
SSDP server
Response
SSDP server
SSDP server
私のアドレスは
192.168.0.10です

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

41. 41
ブローカサーバによる仲介
ブローカサーバ
①登録
私のアドレスは
192.168.0.10です②問い合わせ
モノWebアプリ

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

43. デモ
43

44. デモ1: カメラ連携
44

45.  検出:SSDP
 通信: Camera Remote API / HTTP
45
WoTデモ：Camera
SSDPサーバ
Webサーバ
SSDPクライアント
SSDP
Camera Remote
API
HTTP
APIを呼ぶコード
①検出
②通信

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

47. 47
WoTデモ：遠隔ロボット
ブローカサーバ
WebRTC
①登録
②問い合わせ
 検出:ブローカサーバ
 通信: オリジナル/ WebRTC
③直接通信

48. デモ3: 電飾(hue)
48

49. 49
WoTデモ：電飾デバイス(hue)
ブローカサーバ
ZigBee Light Link
センサーネットワーク用の無線
プロトコル
ブリッジ
②ブリッジ
の検出
①ブリッジ
を登録
hue
hue
hue
 検出:SSDP/ブローカサーバ(両方実装)
 通信: Philips hue API / HTTP
③通信

50.  機器検出の仕組みが必要
 SSDP, mDNS等のプロトコルを使う
→ Webプロトコルじゃない！
Web APIだけで実現できない！！！
 ブローカサーバを使う
→ サーバの用意が必要
 機器固有のコード、設備が必要となり、適用
範囲に広がりが生まれない
50
WoTアプリを作るには?

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

52. 標準化
52

53.  Webに関する様々な仕様を検討しているコン
ソーシアム
 HTML
 CSS
 API
 Security Model
 ete.
 W3Cスタッフとメンバー企業から構成される
 テーマ毎にグループに別れ議論を行う
53
W3C(World Wide Web Consortium)

54.  Working Group(WG): 仕様を固める
 Interest Group(IG): 仕様のユースケースの収
集等、初期検討を行う
 Community Group(CG): 仕様のユースケース
の収集等、初期検討を行う。Interest Groupより
立ち上げるハードルが低い。
 Business Group(BG): テクニカルではなく、
ビジネスサイドから仕様を検討する
54
W3Cのグループ

55.  HTML WG
 SVG WG
 Web Application WG
 Web Performance WG
 Digital Publishing IG
 Semantic Web IG
 Web Payments IG
45個のWG, 15個のIG、200を超えるCGがある(2015
年7月2日現在)
55
W3Cのグループ(一例)

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

57.  Web of Things IG
 2015/1/20 チャーターが制定
 2015/5/20-22 最初のF2F会議開催
 Second Screen Presentation CG
 2013/11: CGが誕生。Presentation APIの検討を開始
 Second Screen Presentation WG
 2014/11: Presentation APIの仕様を固めるため、CG
から独立しWGに
57
現在のW3CにおけるWoT

58. 今最も具体的にWoTに関わる
APIを策定しているのが
Second Screen Presentation WG
の
Presentation API
58

59.  Webページ(ファーストスクリーン)からセ
カンドスクリーンにWebページを表示させ
たり、操作を可能にするAPI
 セカンドスクリーン：テレビや、プロジェクタ
等のスクリーン系のデバイス
59
Presentation API
wired (HDMI, DVI, …)
wireless (DLNA, AirPlay,
MiraCast, Chromecast, …)

60.  http://w3c.github.io/presentation-api/
 Second Screen Presentation CGで初期検討が
行われ、現在はSecond Screen Presentation
WGで仕様策定中
 Working Draftの段階(2015/07/04時点)
 Working Draft: 仕様策定者の間で常に更新されて
いる最新の仕様。
 まだどのブラウザにも未実装
60
Presentation API

61.  はじめにUAはデバイスの検出を行う
 スクリーン間の接続方法は規定されていない
 有線の場合：単一のUA上の操作
 無線の場合：デバイス検出後、セカンドスクリーン上で別
のUAを操作する
61
Presentation APIの動作概要
Device Display device
Discovery
User Agent

62.  ファーストスクリーンとセカンドスクリーン上の
Webページ間でメッセージをやりとりする
62
Presentation APIの動作概要
Device Display device
Web App
specified
by URL
Web App
Communication

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

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

65. あれこれって・・・
65

66. 66
AirPlay?

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

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

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

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

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

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

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

74. 74
デモで使用したシステム
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

75. 75
An introduction to the Presentation API by François Daoust, W3C
非スクリーンデバイスへの拡張
Second Screen Presentation WGの議長の
2015年5月19日の資料

76. 76
Web browser
こうなるかも

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

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