mbed祭: mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」

mbed祭りに参加してきました! mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」

Transcript

1. mbed × Milkcocoaで実現する 給湯室監視ウェブアプリ 「ROOM910」 @muramurasan, @kaiba ピクスタ株式会社
2. 今日お話すること • 発表者紹介 • 会社紹介 • 導入の背景 • アプリケーション全体概要 • センサ値取得 〜 データストアへの格納 • データストア 〜 ブラウザへのデータ表示 • やってみて悩み • 振り返り • 今後について • まとめ
3. @muramurasan 松村 康弘 • Webアプリケーションエンジニア ◦ バックエンド(Ruby On Rails)がメ イン • mbedとの出会いは2015/11/14の mbed祭りIoTハンズオン • 前職は組み込みエンジニアで、ETロ ボコンとか出ていました • 好きな電子部品はサーボモータ(?) ETロボコン。同じ走行体を用いて 速さと設計の良さを競う。
4. @kaiba kaiba • Web/iOSエンジニア • 物作り、日本酒、犬、散歩が好き。 • Arduinoでギターエフェクタを作ろうとし て断念 • 好きな電子部品はコンデンサ • 親父は電子屋だったが残念ながら技術 の伝承は成されず
5. ストックフォト屋やってます！
6. 約 17,000,000 点 販売素材点数 約 680,000 users 会員登録数
7. 導入の背景 ✘ 社員が増えてきて色々と不便に感じると ころが増えてきた ✘ その一つが給湯室の混雑 ✘ お弁当箱を洗ったり… ✘ コーヒーメーカー使ったり… ✘ それIoTで解決できるよ ✘ mbed祭り主催のmbedハンズオンに参加 してきた！ ✘ mbedでやってみよう！ ….. …..
8. 導入の背景(本音) IoTをやって 遊びたかった
9. アプリケーション全体概要 ✘ 自席にいながら…… ✗ 給湯室の空き状況を把握できる ✗ コーヒーメーカの稼働状況を把握できる ✘ データストアにはMilkcocoaを利用 ✘ シンプルで見やすいWebアプリ
10. センサ値取得 〜 データストアへの格納 mbed → Milkcocoaデータストア
11. 採用した mbed と 拡張ボード ✘ mbed LPC1114FN28 ✗ 昨年末に勝さんのmbed祭りIoTハンズオンにて 出会う ✗ 安価で小さい ✗ https://www.switch-science. com/catalog/1714/ ✘ Simple IoT Board ✗ 昨年末に勝さんのmbed祭りIoTハンズオンにて 出会う ✗ WifiモジュールとGroveコネクタが組み込まれて いて、下回り知識無い勢に優しい ✗ https://www.switch-science. com/catalog/2538/
12. 採用したセンサ ✘ GrovePIRモーションセンサ ✗ 物体の有無を検知し、物が有る場合は割り込み で 1 を返してくれる ✗ https://www.switch-science. com/catalog/1049/ ✘ Grove音センサ ✗ 音の大きさを検知し、0.00000 〜 1.00000 の 範囲で返してくれる ✗ 連続稼働していると、無音環境時の基準値が落 ち込んでくる特性がある？ ✗ https://www.switch-science.com/catalog/816/
13. PIRモーションセンサ側の状態遷移 図
14. 音センサ側の状態遷移図
15. デバッグ ✘ ターミナルを使ったprintfデバッグ ✗ メリット 通信量を気にせず、がんがん好きなものを出力 できる ✗ デメリット ログの保存・管理が大変 wifi接続と同時に使用ができない？ ✘ Milkcocoaのデータストアを用いたデバッ グ ✗ メリット ログが残る。解析ツール(freeboard)の存在 ✗ デメリット Milkcocoaには月間利用料制限がある
16. Milkcocoaの データストア と freeboard
17. Milkcocoaへのセンサデータ送信 ✘ 後は状態遷移する箇所でMilkcocoaへの pushを書くだけ！ ✗ 勝さん提供のMilkcocoaライブラリを利用 ✘ 会社のWifiにつなぐのは良くないので、0 SIMを入れたAndroidでテザリング Milkcocoa milkcocoa = Milkcocoa(&client, MQTT_SERVER, MILKCOCOA_SERVERPORT, MILKCOCOA_APP_ID, MQTT_CLIENTID); … … DataElement elem = DataElement(); elem.setValue("v", detected); milkcocoa.push(MILKCOCOA_DATASTORE_HUMAN_SENSOR, elem);
18. データストア 〜 ブラウザへのデータ表示 Milkcocoaデータストア→Webアプリ
19. ブラウザでデータの表示(1) ✘ Webエンジニア大好き、JSの世界で JSONで取得 var milkcocoa = new MilkCocoa("**********.mlkcca.com"); var dataStore = milkcocoa.dataStore("human_sensor"); dataStore.stream().next(function(err, dataList) { // Data format: // [{"id": "XXX","timestamp":1456045078635,"value":"{\"v\":\" 1\"}"}] humanSensorDataList = dataList; // 配列にぶっ込む });
20. ブラウザでデータの表示(2) ✘ 非同期なデータ取得 dataStore.on("push", function(data) { // Data format: // {"id": "XXX","timestamp":1456045078635,"value":"{\"v\": \"1\"}"} humanSensorDataList.unshift(data); // 配列にぶっ込む });
21. ブラウザでデータの表示(3) ✘ 今回はMVVMフレームワークVue.jsを試 しました。 ✘ 配列にぶっ込むと勝手に表示される！ ✘ jQueryでDOMをいじくり回す時代は終 わったんや！ <div v-for="sensorData in humanSensorDataList"> <h4>{{sensorData.value.v == "1" ? "使用中 : "空き" }} </h4> ・・・ </div>
22. 実演 https://kaibadash.github.io/room910/ (2016/4現在メンテ中…)
23. 古俣さん素材はフリー素材です^^ https://pixta.jp/buzzword/2015
24. Faviconで空き状態がわかる。 空き 青信号古俣さん
25. いいfaviconが作れたと自負しております。 使用中 赤信号古俣さん
26. https://github.com/kaibadash/room910
27. よかったこと ✘ mbed、Milkcocoa初めてでもモノができた！ ✘ mbedは開発環境準備が要らない ✘ Grove対応の部品を使うとハンダ付けも要ら ない ✘ ライブラリとサンプルが沢山あって、インポート も簡単。コピペでサクサク作れる ✘ MilkcocoaはWeb屋にも扱いやすい ✗ MQTTで送ったデータを保存 ✗ JSONで取得 ✗ 非同期も簡単でリロード要らず ✗ しかも無料で十分遊べる ✘ 0 SIMはIoTには最適。 ✘ GitHub Pages、ありがたや〜
28. なやみごと ✘ 通信しながらprintfデバッグができない? ✗ Screenでつなぐと通信内容と混じってしまった？ ✗ #ifdef DEBUG を使って通信しないようにしてやった がコードは汚れた ✘ mbedは複数人でのコード管理がし辛い? ✗ やり方を知らないだけな気もする…… ✗ (本当は)Githubでコードを管理したい ✘ Milkcocoaはチームで使いづらい部分がある ✘ センサが曲者。最初に徹底的にセンサの特性 を掴んでおくのが実装の近道か。 ※質問タイムに解決案を教わりました :)
29. 今後の課題 ✘ マルチタスク設計にする！(センサ複数 ……) ✘ Milkcocoaにためている利用状況を分析 してみたい！ ✘ ウォッチドッグタイマー的なものを作れば よかった！ ✘ 給湯室以外も便利にしていきたい！ ✗ トイレの個室利用状況 ✗ オフィスの最終退出確認 ✗ 会議室のドア開けっ放しを警告
30. インターネットで フラットな世界をつくる We're hiring! 7336449 Photo by Sunny studio IoTエンジニアは積極採用はしていませんが… きっとやりたいことにチャレンジできます！ 質問があれば受け付けます。 ありがとうございました。