Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kaiba
April 20, 2016

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

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

kaiba

April 20, 2016
Tweet

Other Decks in Technology

Transcript

  1. mbed × Milkcocoaで実現する
    給湯室監視ウェブアプリ
    「ROOM910」
    @muramurasan, @kaiba
    ピクスタ株式会社

    View Slide

  2. 今日お話すること
    ● 発表者紹介
    ● 会社紹介
    ● 導入の背景
    ● アプリケーション全体概要
    ● センサ値取得 〜 データストアへの格納
    ● データストア 〜 ブラウザへのデータ表示
    ● やってみて悩み
    ● 振り返り
    ● 今後について
    ● まとめ

    View Slide

  3. @muramurasan
    松村 康弘
    ● Webアプリケーションエンジニア
    ○ バックエンド(Ruby On Rails)がメ
    イン
    ● mbedとの出会いは2015/11/14の
    mbed祭りIoTハンズオン
    ● 前職は組み込みエンジニアで、ETロ
    ボコンとか出ていました
    ● 好きな電子部品はサーボモータ(?)
    ETロボコン。同じ走行体を用いて
    速さと設計の良さを競う。

    View Slide

  4. @kaiba
    kaiba
    ● Web/iOSエンジニア
    ● 物作り、日本酒、犬、散歩が好き。
    ● Arduinoでギターエフェクタを作ろうとし
    て断念
    ● 好きな電子部品はコンデンサ
    ● 親父は電子屋だったが残念ながら技術
    の伝承は成されず

    View Slide

  5. ストックフォト屋やってます!

    View Slide

  6. 約 17,000,000 点
    販売素材点数
    約 680,000 users
    会員登録数

    View Slide

  7. 導入の背景
    ✘ 社員が増えてきて色々と不便に感じると
    ころが増えてきた
    ✘ その一つが給湯室の混雑
    ✘ お弁当箱を洗ったり…
    ✘ コーヒーメーカー使ったり…
    ✘ それIoTで解決できるよ
    ✘ mbed祭り主催のmbedハンズオンに参加
    してきた!
    ✘ mbedでやってみよう!
    …..
    …..

    View Slide

  8. 導入の背景(本音)
    IoTをやって
    遊びたかった

    View Slide

  9. アプリケーション全体概要
    ✘ 自席にいながら……
    ✗ 給湯室の空き状況を把握できる
    ✗ コーヒーメーカの稼働状況を把握できる
    ✘ データストアにはMilkcocoaを利用
    ✘ シンプルで見やすいWebアプリ

    View Slide

  10. センサ値取得 〜
    データストアへの格納
    mbed → Milkcocoaデータストア

    View Slide

  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/

    View Slide

  12. 採用したセンサ
    ✘ GrovePIRモーションセンサ
    ✗ 物体の有無を検知し、物が有る場合は割り込み
    で 1 を返してくれる
    ✗ https://www.switch-science.
    com/catalog/1049/
    ✘ Grove音センサ
    ✗ 音の大きさを検知し、0.00000 〜 1.00000 の
    範囲で返してくれる
    ✗ 連続稼働していると、無音環境時の基準値が落
    ち込んでくる特性がある?
    ✗ https://www.switch-science.com/catalog/816/

    View Slide

  13. PIRモーションセンサ側の状態遷移

    View Slide

  14. 音センサ側の状態遷移図

    View Slide

  15. デバッグ
    ✘ ターミナルを使ったprintfデバッグ
    ✗ メリット
    通信量を気にせず、がんがん好きなものを出力
    できる
    ✗ デメリット
    ログの保存・管理が大変
    wifi接続と同時に使用ができない?
    ✘ Milkcocoaのデータストアを用いたデバッ

    ✗ メリット
    ログが残る。解析ツール(freeboard)の存在
    ✗ デメリット
    Milkcocoaには月間利用料制限がある

    View Slide

  16. Milkcocoaの データストア と freeboard

    View Slide

  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);

    View Slide

  18. データストア 〜
    ブラウザへのデータ表示
    Milkcocoaデータストア→Webアプリ

    View Slide

  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; // 配列にぶっ込む
    });

    View Slide

  20. ブラウザでデータの表示(2)
    ✘ 非同期なデータ取得
    dataStore.on("push", function(data) {
    // Data format:
    // {"id": "XXX","timestamp":1456045078635,"value":"{\"v\":
    \"1\"}"}
    humanSensorDataList.unshift(data); // 配列にぶっ込む
    });

    View Slide

  21. ブラウザでデータの表示(3)
    ✘ 今回はMVVMフレームワークVue.jsを試
    しました。
    ✘ 配列にぶっ込むと勝手に表示される!
    ✘ jQueryでDOMをいじくり回す時代は終
    わったんや!

    {{sensorData.value.v == "1" ? "使用中 : "空き" }}

    ・・・

    View Slide

  22. 実演
    https://kaibadash.github.io/room910/
    (2016/4現在メンテ中…)

    View Slide

  23. 古俣さん素材はフリー素材です^^
    https://pixta.jp/buzzword/2015

    View Slide

  24. Faviconで空き状態がわかる。
    空き
    青信号古俣さん

    View Slide

  25. いいfaviconが作れたと自負しております。
    使用中
    赤信号古俣さん

    View Slide

  26. https://github.com/kaibadash/room910

    View Slide

  27. よかったこと
    ✘ mbed、Milkcocoa初めてでもモノができた!
    ✘ mbedは開発環境準備が要らない
    ✘ Grove対応の部品を使うとハンダ付けも要ら
    ない
    ✘ ライブラリとサンプルが沢山あって、インポート
    も簡単。コピペでサクサク作れる
    ✘ MilkcocoaはWeb屋にも扱いやすい
    ✗ MQTTで送ったデータを保存
    ✗ JSONで取得
    ✗ 非同期も簡単でリロード要らず
    ✗ しかも無料で十分遊べる
    ✘ 0 SIMはIoTには最適。
    ✘ GitHub Pages、ありがたや〜

    View Slide

  28. なやみごと
    ✘ 通信しながらprintfデバッグができない?
    ✗ Screenでつなぐと通信内容と混じってしまった?
    ✗ #ifdef DEBUG を使って通信しないようにしてやった
    がコードは汚れた
    ✘ mbedは複数人でのコード管理がし辛い?
    ✗ やり方を知らないだけな気もする……
    ✗ (本当は)Githubでコードを管理したい
    ✘ Milkcocoaはチームで使いづらい部分がある
    ✘ センサが曲者。最初に徹底的にセンサの特性
    を掴んでおくのが実装の近道か。
    ※質問タイムに解決案を教わりました :)

    View Slide

  29. 今後の課題
    ✘ マルチタスク設計にする!(センサ複数
    ……)
    ✘ Milkcocoaにためている利用状況を分析
    してみたい!
    ✘ ウォッチドッグタイマー的なものを作れば
    よかった!
    ✘ 給湯室以外も便利にしていきたい!
    ✗ トイレの個室利用状況
    ✗ オフィスの最終退出確認
    ✗ 会議室のドア開けっ放しを警告

    View Slide

  30. インターネットで
    フラットな世界をつくる
    We're hiring!
    7336449 Photo by Sunny studio
    IoTエンジニアは積極採用はしていませんが…
    きっとやりたいことにチャレンジできます!
    質問があれば受け付けます。
    ありがとうございました。

    View Slide