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
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
エンジニア向け会社紹介資料
caddi_eng
14
230k
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
840
実践ARMアーキテクチャ移行
pyama86
1
100
簡単に始めるSnowflakeの機械学習
nayuts
1
190
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
20
10k
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Navigating Team Friction
lara
181
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Gamification - CAS2011
davidbonilla
78
4.9k
Optimizing for Happiness
mojombo
373
69k
A designer walks into a library…
pauljervisheath
201
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
How to name files
jennybc
67
96k
KATA
mclloyd
20
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
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エンジニアは積極採用はしていませんが…
きっとやりたいことにチャレンジできます! 質問があれば受け付けます。 ありがとうございました。