Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
mbed祭: mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
Search
kaiba
April 20, 2016
Technology
0
310
mbed祭: mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
mbed祭りに参加してきました! mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
kaiba
April 20, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
RAGHack: Building RAG apps in Python
pamelafox
0
110
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
430
エンジニア向け会社紹介資料
caddi_eng
15
250k
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
170
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
670
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
670
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
3.2k
Datadog を使ったプロダクトとクラウドの セキュリティモニタリング
mrtc0
0
520
2024年版 運用者たちのLLM
nwiizo
3
330
脆弱星に導かれて
nishimunea
1
1.5k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Music & Morning Musume
bryan
46
6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
For a Future-Friendly Web
brad_frost
173
9.3k
Infographics Made Easy
chrislema
239
18k
How to Think Like a Performance Engineer
csswizardry
15
920
Build The Right Thing And Hit Your Dates
maggiecrowley
29
2.2k
Raft: Consensus for Rubyists
vanstee
135
6.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Transcript
mbed × Milkcocoaで実現する 給湯室監視ウェブアプリ 「ROOM910」 @muramurasan, @kaiba ピクスタ株式会社
今日お話すること • 発表者紹介 • 会社紹介 • 導入の背景 • アプリケーション全体概要 •
センサ値取得 〜 データストアへの格納 • データストア 〜 ブラウザへのデータ表示 • やってみて悩み • 振り返り • 今後について • まとめ
@muramurasan 松村 康弘 • Webアプリケーションエンジニア ◦ バックエンド(Ruby On Rails)がメ イン
• mbedとの出会いは2015/11/14の mbed祭りIoTハンズオン • 前職は組み込みエンジニアで、ETロ ボコンとか出ていました • 好きな電子部品はサーボモータ(?) ETロボコン。同じ走行体を用いて 速さと設計の良さを競う。
@kaiba kaiba • 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につなぐのは良くないので、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);
データストア 〜 ブラウザへのデータ表示 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をいじくり回す時代は終 わったんや! <div
v-for="sensorData in humanSensorDataList"> <h4>{{sensorData.value.v == "1" ? "使用中 : "空き" }} </h4> ・・・ </div>
実演 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 studio IoTエンジニアは積極採用はしていませんが…
きっとやりたいことにチャレンジできます! 質問があれば受け付けます。 ありがとうございました。