在宅勤務でオンライン会議中か一目で分かるモニタ「WFH Monitor M5」をM5Stackで作りました

妻から「オンライン会議中か知りたい」というリクエスト　

　最近在宅勤務で、自宅でオンライン会議をする機会も増えました。そんな中、妻から「在宅勤務中、オンライン会議中か一目で分かるようにして欲しい」とリクエスト受けました。

　たしかに「オンライン会議してるかも」と思うと、一緒に住んでいる人は気を使いますよね。あと、集中したいときも、なるべく割り込まれないようにするため、周りに分かるようにするのが、お互いにとって良さそうですね。

　最初は、ドアノブにメッセージプレートでもかけようかと思ったのですが、いちいちドアを開けるの面倒ですし、家族もいちいち見に来ないといけないので、気づかない可能性も高そうです。

　家にあるもので何か作れないかなーと思って色々調べたら、M5StackというマイコンとBlynkというウェブサービスの組み合わせが良かったです。

　早速プロトタイプを作って動作確認動画をTwitterにあげたらかなり反応がありました。

妻から「在宅勤務中、オンライン会議中か一目で分かるようにして欲しい」とリクエスト受けたのでM5 StackとBlynk使ってサクッと作ってみた。割と実用的な気がする pic.twitter.com/JvOmFQEJgy
— からあげ (@karaage0703) June 2, 2021

　結構、こういうの欲しい人いるのかもしれませんね。ということで、作り方を少し詳しく解説したいと思います。

　M5Stackという小型マイコンさえ買えば簡単に作れるので、是非作ってみてください！以降作り方を解説します。

M5Stack Basic

スイッチサイエンス

Amazon

追記：Blynkの仕様が変わり使えなくなったのでアップデートしました

　WebサービスのBlynkが大幅にサービスの仕様が変わり、使えなくなってしまったので、Blynk無しで動くようにしました。

Blynkがサービス大幅に変更して使えなくなっていたのでBlynk無しで動くようにしました（ローカル限定） > 在宅勤務でオンライン会議中か一目で分かるモニタ「WFH Monitor M5」をM5Stackで作りました - karaage. [からあげ] https://t.co/Edq2HWyXM5 pic.twitter.com/hiVkkGuLst
— からあげ (@karaage0703) January 29, 2023

　id:Kazuhito00 さんが作ってくださった以下のソフトをベースに、子供でも見やすいように表示をひらがなにしてカラー対応する、子ども用のモードを追加しました。

　子ども用のソフトはこちらでPRしました。

　追記：マージされたので、オフィシャルのリポジトリで子ども用のモードが使えます。

　M5Stackの書き込みでハマったところに関して、Zennにメモしました。

「WFH Monitor M5」の作り方

　在宅勤務（Work From Home）のときに使えるM5Stackのモニターということで「WFH Monitor M5」という名前にしました（そのまんま）。

　作り方は、おぎモトキ (id:motokiinfinity8) さんの以下の記事を参考にしています。

　というかほぼそのまんまです。むしろ私のほうが機能を削っているくらいですね。

　機能が少ない分、簡単なので最低限の作り方をまとめておきます。よく分からないときは、おぎモトキさんの記事も参考にしてみてください。

　流れは以下となります。動かすまでは30分程度でできました。

Blynkサービス登録とスマホアプリ作成
M5Stackへのソフト書き込み
テスト・設置・運用

　それぞれ説明していきます。

Blynkサービス登録とスマホアプリ作成

　Blynkというサービスを使用します。課金アプリですが、今回作るアプリであれば無料分で十分賄えます。Blynkに関して参考にした記事は、おぎモトキさんの記事でも紹介されていた以下サイトです。

　これ以降は「WFH Monitor M5」に必要な最低限の操作を記載していきますが、よくわからないところがあったら、上記記事を参考にしてください（私の記事より説明が丁寧に書かれていますので）。

　なお、私はiPhoneで実施していますが、Androidでもほぼ同じ操作でいけると思います（未確認です）。最初に、アプリストアでBlynkアプリをダウンロードして、Create New Accountでアカウントを作ります。

　登録が終わったら「Create New Project」から新規のプロジェクトを作成します。

　M5Stackを使う場合は、以下の通りデバイスは「ESP32 Dev Board」、接続タイプは「WiFi」を選択します。

　この後、Auth Tokenが自分のメールアドレスに送られます。Auth Tokenはこの後M5StackとBlynkのプロジェクトを連携させるときのキーとなります。Auth Token自体は、後からでもプロジェクトを起動したらいつでも確認できるので覚える必要はありません。

　プロジェクトが起動したら。画面の適当な場面をタップすると、色々なパーツが出てくるので「Styled Button」を選びます。設定は以下の通りです。

OUTPUT: V1
MODE: SWITCH
OFF LABEL: OFF AIR
ON LABEL: ON AIR

　設定した画面は以下のようになります。

　スマートフォンアプリはこれで完成です。右上の矢印をタップするとアプリが起動して、以下のような画面が表示されます。

　一回タップしましょう。以下のようにスイッチの表示がOFF AIR > ON AIRに切り替わるはずです。

　これでスマホアプリは完成です。簡単ですね。

　次にこのアプリとM5 Stackを連動させましょう。

M5Stackへのソフト書き込み

　ここからいよいよM5Stackを使っていきます。M5Stackの基本的なセットアップ方法やArduino IDEを使ったソフトの書き込み方は、以下記事を参考にしてください。

　基礎的なセットアップが終わったら、いよいよソフトを書き込みます。ソフトはGitHubにアップしてあります。

　GitHubに慣れている人でしたら、gitでcloneしてください。GitHubって何？？という人は、あまり深く考えず、上のリンク先のページの右の方にある「Code」というボタンをクリックして、Download ZIPをクリックしてダウンロードした後、ZIPを解凍してください。以下は参考のスクリーンショットです。

　使用するのは「wfh_monitor_m5.ino」というファイルだけです。あらかじめテキストエディタで以下の8〜10行だけ書き換える必要があります。

const char* auth   = "********";
const char* ssid     = "********";
const char* password = "********";

　authにはBlynkプロジェクトのAuth Tokenを、ssid, passwordには、自宅のWiFiのSSIDとパスワードを入力してください。

　また、私の場合は設置の都合で画面を逆さまにしています。逆さまにしたくない人は、以下24行の3を1に変えてください。

M5.Lcd.setRotation(3);

　ファイルを修正したら、Arduino IDEを使ってM5Stackにwfh_monitor_m5.inoを書き込みます。

テスト・設置・運用

　M5Stackに書き込みが終わったら、Blynkアプリを起動してプロジェクトを再生してスイッチを押してみましょう、以下のようにBlynkのスイッチとM5Stackの画面が連動して動いたらOKです。

妻から「在宅勤務中、オンライン会議中か一目で分かるようにして欲しい」とリクエスト受けたのでM5 StackとBlynk使ってサクッと作ってみた。割と実用的な気がする pic.twitter.com/JvOmFQEJgy
— からあげ (@karaage0703) June 2, 2021

　あとは設置して運用するだけです。私の場合は以下のような壁掛けの小物置き場に設置しました。設置と言ってもベルクロテープで貼り付けるだけです。

　まず、設置部分にマステ（マスキングテープ）を貼ります。

　続いてベルクロテープを貼ります

　M5Stackにもベルクロテープを貼ります

　くっつけます。

　電源を給電したらジ・エンドです。電源は、適当なUSBアダプタを用意してください。1Aもあれば十分なので、余っているスマートフォンの電源アダプタがあればそれを使うのがベストです。

　自分の部屋からスマートフォンで制御できます。

　実際に運用してみましたが。めっちゃ実用的ですね。モニタで妻にも私がオンライン会議していることが伝わったとのことです。なかなか好評でした。

オプション追加（ディスプレイオフモード）

　ずっと画面つきっぱなしも勿体ないので、ディスプレイオフモードも付け加えてみました。

　BlynkのプロジェクトでStyled ButtonでOUTPUT V1として以下のようなボタンを追加します。

　先程作ったV0(OFF AIR/ON AIR切り替えボタン）の下にV1を追加します。

　M5Stack側のソフトはすでに対応しているので、このまま動かしてV1のスイッチを切り替えるとディスプレイのOFF, ONを切り替えられます。

　もっとも、使わないときは電源抜いてやればよいので、そこまで重要な機能ではないかもしれませんね。

　ここで重要なのはこのようにスイッチを増やせばいくらでもバリエーションを増やせる点です。

　スイッチの代わりにメニューバーを設置すれば、ON AIR, OFF AIR以外にも休憩中等の第3のステータスを作ったりできますし、参考にしたおぎモトキさんの記事のように、会社帰り、家に近づいたら通知などもできて、幅広く応用できそうですね！

　Twitterでは「スイッチのユーザーインターフェースが悪い！」とか「カレンダーアプリとかオンラインミーティングアプリとか連携したら便利そう！」というフィードバックをいただきました。

　サクッと対応したいところですが、そこまでいくと多分Blynkだけだと難しくて、独自にクラウドにサービスを構築しないといけなくなりそうです。そうすると、自分のスキル的には辛いですね。こういうサービスは下手に機能増やして複雑にするより、思いっきりシンプルなものを安定稼働させるのが重要な気がするので、当面はこのまま運用してみようかなと考えています。

応用例

　「WFH Monitor M5」を参考に id:Kazuhito00 さんが作ってくださったM5Stackのモニタ。blynkライブラリを使わず実現しているので、ローカルネットワーク外から操作できないという欠点はあるものの、ライブラリやWebサービスに依存せずとてもシンプルです。

まとめ

　在宅勤務でオンライン会議中か一目で分かるモニタをM5Stackで作成しました。久しぶりに実用的なものを作ってしまった気がします。ラズパイの見守りカメラ以来かもです。応用も色々ききそうですね。

　同じようなことで悩んでいる人も多いかと思います。アナログなドアノブのメッセージプレートも良いですが、気分転換にIoT化・DX化にチャレンジしてみるのもいかがでしょうか？慣れている人なら1時間、初心者の方でも半日から1日あればできると思います。興味ある方は、是非M5Stackを購入してチャレンジしてみてください。