Sensible を

試してみた

FxOS コードリーディングミートアップ #162015-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.Applicationsensible.ApplicationFactory

Sensible アプリのフレームワークを構成

mDNSsensible.MDNSsensible.DNSPacketsensible.DNSPacket.parsesensible.DNSPacketParsersensible.DNSPacketSerialisersensible.Strategysensible.StrategyFactory

UDP 処理はプラットフォーム毎の Storategy クラスで実装

Web サーバー

sensible.WebServersensible.RESTDispatcher

Web サーバーのための単純なヘルパー。

実際の実装は各プラットフォームの Server クラス。

プラットフォームごとの実装

# nodesensible.node.Applicationsensible.node.Strategysensible.node.Serversensible.node.WebServer# fxossensible.fxos.Applicationsensible.fxos.Strategysensible.fxos.Serversensible.fxos.WebServersensible.fxos.SocketPump

# chromesensible.chrome.Applicationsensible.chrome.Strategysensible.chrome.Serversensible.chrome.WebServer

Thank you!

● Sensiblehttp://sensible.mono.hm/

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