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
350
mbed祭: mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
mbed祭りに参加してきました! mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
kaiba
April 20, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
CDK Vibe Coding Fes
tomoki10
0
210
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
9
2.1k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
560
TableauLangchainとは何か?
cielo1985
1
120
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
160
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
140
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
180
ゼロからはじめる採用広報
yutadayo
3
990
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
460
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
400
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Statistics for Hackers
jakevdp
799
220k
Documentation Writing (for coders)
carmenintech
72
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Writing Fast Ruby
sferik
628
62k
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エンジニアは積極採用はしていませんが…
きっとやりたいことにチャレンジできます! 質問があれば受け付けます。 ありがとうございました。