Sensible を
試してみた
FxOS コードリーディングミートアップ #16
2015-04-11
自己紹介
ひらとり
● @flatbirdH
● FxOSコードリーディング
● html5j Webプラットフォーム
部
Sensibleって?
• WoTのリファレンス実装
• JavaScriptで書かれている
• 作ったのはMonohm
http://sensible.mono.hm/
Sensibleとは
Monohm?
Runcibleを作ってる所
SensibleのWoTって
どんなもの?
ホームLAN
• WiFi, Ethernet
• TCP/IP
https://www.iconfinder.com/iconsets/technology-and-hardware-2
提供する機能
1. ディスカバリー
2. REST API (データのやりとり)
3. UI (人間とのやりとり)
ディスカバリー
mDNS
‣Multicast DNS
‣a.k.a. Bonjour
DNSリクエストを
マルチキャストで同報
224.0.0.251:5353
[PTR] _sensible.tcp.local
サービス名、アドレス、ポー
ト番号が取れる
Printer._sensible.tcp.local
192.168.1.20:3010
A, TXT, SVR
REST API(データのやりとり)
$ curl --silent 192.168.1.101:3000/properties/get | jq .
[
{
"value": 76,
"minimum": 40,
"maximum": 100,
"readonly": false,
"type": "integer",
"name": "temperature"
}
]
UI
(人間とのやりとり)
HTML = 通常のWebアプリ
超単純!
現在のサンプル実装
● Firefox OS
● Chrome Apps
● Node.js
mDNS ➡ JavaScriptでUDPが必要
UDPをしゃべらないモノ(ブラウザ等)は
mDNSをしゃべるプロキシ経由で参加
アプリの作り方
(Firefox OS)
manifest.webapp
"type": "certified",
"permissions": {
"tcp-socket": {},
"udp-socket": {},
"wifi-manage": {}
}
sensible-config.js の用意
{
"name": "Sensible-Flashlight",
"type": "_sensible._tcp.local",
"port": 3000,
"description": "Firefox OS flashlight",
"hostname": "flashlight.local"
}
sensible-properties.js の用意
[
{
"name": "flashModes",
"type": "list",
"priority": 0,
"readonly": true,
"value": []
}
]
sensible.js の取り込み
(index.html)
<script src="sensible.js" defer></script>
<script src="app.js" defer></script>
アプリの実装 (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) {
...
}
);
プロパティの変更
// /properties/get で取得
gSensibleApplication.setProperty(
'flashModes', flashModes
);
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);
}
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」で固定)
超単純!
Demo
ソースの構成
メインのクラス
sensible.Application
sensible.ApplicationFactory
Sensible アプリのフレームワークを構成
mDNS
sensible.MDNS
sensible.DNSPacket
sensible.DNSPacket.parse
sensible.DNSPacketParser
sensible.DNSPacketSerialiser
sensible.Strategy
sensible.StrategyFactory
UDP 処理はプラットフォーム毎の Storategy クラスで実
装
Web サーバー
sensible.WebServer
sensible.RESTDispatcher
Web サーバーのための単純なヘルパー。
実際の実装は各プラットフォームの Server クラス。
プラットフォームごとの実装
# 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
Thank you!
● Sensible
http://sensible.mono.hm/
● Sensible虎の巻
https://github.com/mozilla-japan/hacking-
runcible/wiki/Sensible-%E8%99%8E%E3%81%AE%
E5%B7%BB

Sensibleを試してみた@FxOSコードリーディングミートアップ#16