![見出し画像](https://assets.st-note.com/production/uploads/images/102480278/rectangle_large_type_2_a1c529d0a399ac6fd10a730258c3575c.jpeg?width=800)
みんなで協力して、センサーデータを蓄積してリモート監視できる仕組みを作った話
こんにちは hibit です。プログラムは心得はありますが電子工作は苦手です。諸事情あって、ある共用スペースについて、その在室/不在をどこからでも監視できる仕組みを作りたいということになりました。そこで、「部屋の照度が一定以上なら誰か部屋にいる確率が高いのでは?」という仮説のもと、そのようなシステムを作りました。最近流行りのDXですね。
システムの概要
以下がシステムの概要になります。
![](https://assets.st-note.com/img/1680862128984-kXfWGe2NZS.png?width=800)
Arduino(や、それに伴って必要となるブレッドボード・ジャンパ線・抵抗)は知り合いから借りることができたので、今回新たに必要となったのはフォトレジスタだけです。といっても数百円ですが。
フォトレジスタから照度を取得する
今回、私は電子工作が苦手、というかほぼやったことがなかったため、電子工作の知識が豊富な知り合いに相談してみました。以下がそのやりとりになります。
![](https://assets.st-note.com/img/1680862353207-EcGATfmejN.png?width=800)
これをコピペしたらなんとかなりました。
照度をシリアル通信で取得してPythonで処理できるようにする
これについてもあまり経験がなかったので、電子工作と Python の連携に詳しい知り合いに聞いてみました。以下がそのやりとりになります。
![](https://assets.st-note.com/img/1680862501178-RLyoFfmeUC.png?width=800)
これでなんとかなりました。
照度を http POST で飛ばせるようにする
これについてもあまり経験がなかったので、Python と Web の連携に詳しい知り合いに聞いてみました。以下が(以下略
![](https://assets.st-note.com/img/1680862594621-Iv0IOpNK8Z.png?width=800)
送られた照度を記録するサーバーを立てる
これについてはわりと経験があるので多分自分一人でもなんとかなった気がしますが、面倒くさかったので Python を用いた Web 開発に詳しい知り合いに聞いてみました。
![](https://assets.st-note.com/img/1680862656835-zUU53oYtqN.png?width=800)
記録した照度を元にグラフを描く仕組みを作る
これも経験があるのですが、こういう作業って死ぬほどめんどいので任せました。
![](https://assets.st-note.com/img/1680862758239-rctaREJjCO.png?width=800)
ところが雲行きが怪しくなります。
![](https://assets.st-note.com/img/1680862791841-BSLzixSkMG.png?width=800)
![](https://assets.st-note.com/img/1680862806313-Jei2Byl3Dt.png?width=800)
いくらやり取りしてもバグが取れない。役に立たない知り合いだなあ……!?
ここで私が政治的判断をして方針転換。
![](https://assets.st-note.com/img/1680862869239-Nal2sLlnFs.png?width=800)
この方針転換は上手くいき、結果的にはこの方向で落ち着きました。
トークン認証を実装する
現状だと、誰でもサーバーにデータを記録することができるので悪用する人が出てきてしまいます。実際にはいないと思いますが、対策します。
このあたりも、原理とかは知っていますが、細かい実装とかはしたことなかったので、WebAPI に詳しい友人に聞いてみました。
![](https://assets.st-note.com/img/1680863100977-CMdCZVL5vI.png?width=800)
うまくいきました。
デプロイする
デプロイ(Web で公開すること)をします。これも面倒くさいので以下略。
![](https://assets.st-note.com/img/1680863173755-sgKKmdkqTI.png?width=800)
デプロイ成功しました。ここで一休み。
![](https://assets.st-note.com/img/1680863203276-zRLmt6ajff.png?width=800)
Web サイトのUI改善
グラフが自動更新されるようにしたいので、フロントエンドに詳しい友人に。
![](https://assets.st-note.com/img/1680863345963-SqGjo2azlt.png?width=800)
実際にやってみたら遷移処理で画面が白くなるのがウザすぎたので、作ってもらった3秒後に悪いけど修正指示。
![](https://assets.st-note.com/img/1680863405130-m37w7fS5Zq.png?width=800)
なんでこれで伝わって、正しい修正結果が返って来るんだ!??
いや、JavaScriptによるDOM更新って、デバッグしづらいし、コード内の要素をいったりきたりするから、これで修正ができるって普通のプログラムを修正するより数段すごいことですよ……。AI技術……違った、知り合いってのは本当にすごいんだな……。
他にも時差の修正に迅速に答えてもらったり。
![](https://assets.st-note.com/img/1680863629874-djxMpe5GLX.png?width=800)
Bootstrap を入れてもらったり。
![](https://assets.st-note.com/img/1680863679279-9Qd6UZih8l.png?width=800)
ユーザーの閲覧制限
今のままだと全世界の誰からでも見られてプライバシーが危ないので、ログイン制にして、限られたユーザーしか閲覧できないようにします。セキュリティに詳しい知り合いに。
![](https://assets.st-note.com/img/1680863743535-1RUG1crlLy.png?width=800)
![](https://assets.st-note.com/img/1680863770188-LKdeqq5IiV.png?width=800)
当たり前にように CSS を含めて対応してくれる。
開発終了
本来なら数日間悪戦苦闘するはずだった処理が一晩で終わってしまったChatGPT4、有能すぎる。上でも一回言ったけど、なぜ会話が成り立って、その上役に立つ答えが返ってくるのか、すごすぎて本当に理解できない。
あ、今まで知り合いと書いていましたが、相談した相手はすべて ChatGPT4 でした。まあ、ほとんどの分野において、その分野に精通していてかつ献身的な友人がいるぐらいのインパクトはあるということで。
なお、Arduinoを貸してくれた知り合いは ChatGPT4 ではなく実在しています。
完成品
センサー+Arduino はこんな感じ。
![](https://assets.st-note.com/img/1680944206538-oKOsJoPccu.jpg?width=800)
いつもだったらここに Web のリンクを貼って「これが完成品で~す!」とドヤ顔するところですが、今回は身内のためのプログラムなのでそんなリスクを増やす行為はしません。実際に動いているところのキャプチャだけ載せておきます。
![](https://assets.st-note.com/img/1680864142697-tgfN4yrZEZ.png?width=800)
こんな感じで、仕様通りの動きをしてくれています。持つべきものは高性能 AI ですね。
GitHubリポジトリ
このままだとマジで ChatGPT に相談したらなんとかなりました! いかがでしたか? だけの記事になるので、一応再利用可能なように GitHubリポジトリを置いておきます。
センサー→Arduino→PCの部分
システム図で言うとこの部分
![](https://assets.st-note.com/img/1680943670405-1mvTZJfLVA.png?width=800)
上の部品を用意してこれをクローンすればなんとかなります(多分)。
個別設定として、以下のような内容を記載した local.py(本番環境においては環境変数)が必要です。
URL_SEND_ENDPOINT="https://example.com"
ACCESS_TOKEN="your secret token"
サーバーの処理
システム図でいうとこの部分。
![](https://assets.st-note.com/img/1680943866008-wbDbHJom7F.png?width=800)
上をクローンして、Heroku なり AWS なり適当なインフラに打ち込めばなんとなかります(多分)。
個別設定として、以下のような内容を記載した local.py(本番環境においては環境変数)が必要です。
SECRET_KEY="django secret key"
MY_SECRET_KEY="your access token" # 上のファイルの ACCESS_TOKEN と同一
MY_ROOM_NAME="your room name" # 部屋の名前。サンプル画像の黒塗りした部分
この記事が気に入ったらサポートをしてみませんか?