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
330
mbed祭: mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
mbed祭りに参加してきました! mbed × Milkcocoaで実現する給湯室監視ウェブアプリ「ROOM910」
kaiba
April 20, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
2.8k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
54k
pg_bigmをRustで実装する(第50回PostgreSQLアンカンファレンス@オンライン 発表資料)
shinyakato_
0
150
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
1k
Storage Browser for Amazon S3を触ってみた + α
miura55
0
100
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
0
210
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
330
効率的な技術組織が作れる!書籍『チームトポロジー』要点まとめ
iwamot
2
190
30分でわかるデータ分析者のためのディメンショナルモデリング #datatechjp / 20250120
kazaneya
PRO
16
3.9k
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
140
怖くない!ゼロから始めるPHPソースコードコンパイル入門
colopl
0
240
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
97
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
230
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Being A Developer After 40
akosma
89
590k
Practical Orchestrator
shlominoach
186
10k
How GitHub (no longer) Works
holman
312
140k
Site-Speed That Sticks
csswizardry
2
220
Measuring & Analyzing Core Web Vitals
bluesmoon
5
190
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エンジニアは積極採用はしていませんが…
きっとやりたいことにチャレンジできます! 質問があれば受け付けます。 ありがとうございました。