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