Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

778 views

Published on

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

Published in: Software
  • Be the first to comment

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

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

×