こんにちは、@mihotoyama です！
この記事はLITALICO Engineers Advent Calendar 2021 2つめの18日目の記事です。
ことの始まり
突然ですが我が家のハムスター(ロボロフスキーハムスター)を見てください。
とってもかわいいですね！
しかし..
よく見ると...
なんかしけっているのです。
このgifの元動画は今夏に撮影したものです。
当時もちろんクーラーをかけていたのですが、ハムスターがしけっているということはやはり湿度が高すぎたのでしょうか...。
この頃から、部屋の中がハムスターにとって快適な温湿度になっているかがとても不安で、なにかいい手段はないかな？と思うようになりました。
エンジニアになったからにはIoTに挑戦していみたい気持ちもあったので、
せっかくならば温湿度を測定するセンサーでも買おうかな〜とか、
そんな機会があるとしたら、ついでに毎晩せっせと走っている回し車の回転数も取得したいな〜(この研究に触発された)とか考え、実現方法を調べていたところ...
神レポジトリを発見しました。
D+IO (ドゥーイングアイオー)との出会い
公式サイト：https://panasonic.co.jp/design/flf/works/doing_io/
Panasonic株式会社が2020年から始めた、「大切な誰かへ届けたいみんなのモノづくり」を応援するプロジェクトです。
このコンセプトのとおり、さまざまな相手に向けたものづくりをするべく、初心者でも挑戦しやすい丁寧なドキュメントや動画での解説を公開しています。
わたしが見つけたのは、このプロジェクトの第2弾となる「小動物ヘルスケアデバイス」のレシピでした→https://github.com/panasonic-corporation/doingio-small-pets-healthcare-docs
これは本当にすごくて、
- 材料を購入できる販売先も紹介
- 写真たっぷりでわかりやすい解説
- M5stackのソースコードも提供(Arduino開発環境構築から解説！)
という、初めて電子工作に挑戦する人に優しいすばらしいレシピです...こんな最高のものを無償で公開してくださるなんて神としか言いようがありません🙏 本当にありがとうございます！！
神レポジトリとの出会いにより一気にハムスター駆動開発の機運が高まり、ついに行動に移しました🐹
目的
- 以下のデータをセンサーで取得し、リアルタイムなハムスター関連のデータをブラウザから確認できるようにする
- 温湿度
- 回し車の回転数
- 餌場をうろうろした回数
- 寝床から出入りした回数
システム構成
システム構成は以下の図のとおりです。
APIとフロントエンドの技術スタックは、最近業務で使っているものを選択しました。(コーディングの練習をしたかったので...。)
VPSはたまたま契約していたものを使いました。
開発
具体的なコードは 成果物 を参照のこと。
大まかな手順は以下のとおりです。
- M5Stack(上述のD+IOのレシピに全て記載。今回は諸般の事情により重さセンサーのみ未実装)
- 材料を揃える
- センサーと接続する
- 提供されているコードをM5Stackに書き込む
- 自分のやりたいようにコードを編集する
- API
- 以下のAPIを用意
- POSTでM5StackからのJSONデータを受け付けるAPI
- 自宅のIPからのみ許可する
- GETで最新のデータのみ取得するAPI
- GETで直近30分間のデータを全て取得するAPI
- cronにより30分前のデータを削除
- POSTでM5StackからのJSONデータを受け付けるAPI
- 以下のAPIを用意
- フロントエンド
- 以下を表示するように作成
- 最新の回し車の回転数・餌場をうろうろした回数・寝床から出入りした回数
- 直近30分間の温湿度と回し車の回転スピード(rpm)のグラフ
- ライブラリはvue-chartjsを使用
- 以下を表示するように作成
- デプロイ
- APIをVPSにデプロイ
- (フロントエンドはうまくデプロイできず未達)
1.のM5Stackパートについて自分がポイントと感じた部分を書いておきます。
- このパートは2時間程度で完了
- 単線の皮膜を剥くのがちょっとむずかしい
- ペンチでじわじわ、中身を傷つけないように切れ目を入れて剥く
- 延長用コネクタはのレバー部分は思い切って持ち上げる(垂直になるまで)
- レシピ内で写真と説明文の不一致があったので、以下で実装した
- 温湿度センサの部分
- 単線は白と赤を使用
- 白が16、赤が3(写真に合わせた)
- PIRユニットの部分
- M5Stackの側部に3本接続(写真に合わせた)
- 温湿度センサの部分
成果物
最終的なコードは以下のレポジトリに置いてあります。
- M5Stack内のArduinoコード(公開レポジトリからの差分)
- APIとフロントエンドのコード
フロントエンドのローカルサーバを立ち上げてブラウザで確認しました。
ハムスターの活動時間を待って...表示された画面(iPhone6~8サイズ)はこんな感じです！
温湿度は悪くない感じで安定していることがわかり一安心。
回転スピードが0のときは休んでいるということがわかるのと、グラフを描画したときに回転スピードが速いと「がんばってるんだなあ」という気持ちになれますね。
しばらくしてから更新ボタンを押すと、最新のデータで描画されます💡
グラフが若干ガビガビしていますが、今回はこんな感じでおしまいです。
まとめ
D+IOのレシピのおかげで、家の中の違う部屋からもハムスターの様子をうかがい知ることができるようになりました。
近いうちにフロントエンドもデプロイして、外出中でも様子をチェックできるようにしていきたいです！
他に今回できなかったこととしては、
- テストを書く
- アクセス制限などのセキュリティ強化
- controllerでむりやりIP制限をしたが、Pipeなどを使えそう
- もっとリアルタイムなグラフ描画
- 初回取得時以外は最新のデータのみ受信して逐次グラフを自動更新するとよさそう？
などがあります。
また、今回の開発でいろいろなことを初めて経験することができました。
接続用の単線をどうやって選べばいいのか迷ったり...
C++のコードを(少しだけ)書いてみたところ、バッファオーバーフローでJSONをうまく書き出せなかったり...
Vue.jsのコンポーネントでデータの変化をうまくキャッチできなかったり...
通信やプログラムの処理時間が気になったり...
もっともっと学びたいことがたくさん見つかりました。
これからもハムスターの命ある限り、ハムスター駆動開発を進めていきたいです😄
最後に、今回の開発を強力に後押しする最高のレシピを公開してくださったPanasonic株式会社、そしてこんな素敵な機会をくれた我が家のかわいいハムスターに、最大限の感謝を...❤️
明日は我らがVPoE @kamesennin の記事の公開日です！お楽しみに😉