Sensibleを試してみた＠FxOSコードリーディングミートアップ＃１６

1. Sensible を
試してみた
FxOS コードリーディングミートアップ #16
2015-04-11

2. 自己紹介
ひらとり
● @flatbirdH
● FxOSコードリーディング
● html5j Webプラットフォーム
部

3. Sensibleって？

4. • WoTのリファレンス実装
• JavaScriptで書かれている
• 作ったのはMonohm
http://sensible.mono.hm/
Sensibleとは

5. Monohm？

6. Runcibleを作ってる所

7. SensibleのWoTって
どんなもの？

8. ホームLAN
• WiFi, Ethernet
• TCP/IP
https://www.iconfinder.com/iconsets/technology-and-hardware-2

9. 提供する機能
1. ディスカバリー
2. REST API (データのやりとり)
3. UI (人間とのやりとり)

10. ディスカバリー
mDNS
‣Multicast DNS
‣a.k.a. Bonjour

11. DNSリクエストを
マルチキャストで同報
224.0.0.251:5353
[PTR] _sensible.tcp.local

12. サービス名、アドレス、ポー
ト番号が取れる
Printer._sensible.tcp.local
192.168.1.20:3010
A, TXT, SVR

13. REST API(データのやりとり)
$ curl --silent 192.168.1.101:3000/properties/get | jq .
[
{
"value": 76,
"minimum": 40,
"maximum": 100,
"readonly": false,
"type": "integer",
"name": "temperature"
}
]

14. UI
(人間とのやりとり)
HTML = 通常のWebアプリ

15. 超単純！

16. 現在のサンプル実装
● Firefox OS
● Chrome Apps
● Node.js
mDNS ➡ JavaScriptでUDPが必要

17. UDPをしゃべらないモノ（ブラウザ等）は
mDNSをしゃべるプロキシ経由で参加

18. アプリの作り方
（Firefox OS）

19. manifest.webapp
"type": "certified",
"permissions": {
"tcp-socket": {},
"udp-socket": {},
"wifi-manage": {}
}

20. sensible-config.js の用意
{
"name": "Sensible-Flashlight",
"type": "_sensible._tcp.local",
"port": 3000,
"description": "Firefox OS flashlight",
"hostname": "flashlight.local"
}

21. sensible-properties.js の用意
[
{
"name": "flashModes",
"type": "list",
"priority": 0,
"readonly": true,
"value": []
}
]

22. sensible.js の取り込み
(index.html)
<script src="sensible.js" defer></script>
<script src="app.js" defer></script>

23. アプリの実装 (JavaScript)
// fxos.Application.prototype にハンドラをセット
var appProto = sensible.fxos.Application.prototype;
appProto.onBeforeStart = onBeforeStart;
appProto.onAfterStart = onAfterStart;
appProto.flash_set = setFlash; // /flash/set?mode=off
// createApplication でアプリの作成
sensible.ApplicationFactory.createApplication(
function (error) {
...
}
);

24. プロパティの変更
// /properties/get で取得
gSensibleApplication.setProperty(
'flashModes', flashModes
);

25. REST API ハンドラ
// /flash/set?mode=torch|off
function setFlash(request, callback) {
var mode = request.parameters.mode;
camera.flashMode = mode;
var response = {
type: 'json',
object: {}
};
callback(response);
}

26. UI の追加
fxos-sensible-app
│ app.js
│ index.html
│ manifest.webapp
│ sensible-config.json
│ sensible-properties.json
│ sensible.js
│
├─icons
│ icon128x128.png
│
└─web
index.html
ルート直下に「web」ディレクトリ
（名前は「web」で固定）

27. 超単純!

28. Demo

29. ソースの構成

30. メインのクラス
sensible.Application
sensible.ApplicationFactory
Sensible アプリのフレームワークを構成

31. mDNS
sensible.MDNS
sensible.DNSPacket
sensible.DNSPacket.parse
sensible.DNSPacketParser
sensible.DNSPacketSerialiser
sensible.Strategy
sensible.StrategyFactory
UDP 処理はプラットフォーム毎の Storategy クラスで実
装

32. Web サーバー
sensible.WebServer
sensible.RESTDispatcher
Web サーバーのための単純なヘルパー。
実際の実装は各プラットフォームの Server クラス。

33. プラットフォームごとの実装
# node
sensible.node.Application
sensible.node.Strategy
sensible.node.Server
sensible.node.WebServer
# fxos
sensible.fxos.Application
sensible.fxos.Strategy
sensible.fxos.Server
sensible.fxos.WebServer
sensible.fxos.SocketPump
# chrome
sensible.chrome.Application
sensible.chrome.Strategy
sensible.chrome.Server
sensible.chrome.WebServer

34. Thank you!

35. ● Sensible
http://sensible.mono.hm/
● Sensible虎の巻
https://github.com/mozilla-japan/hacking-
runcible/wiki/Sensible-%E8%99%8E%E3%81%AE%
E5%B7%BB