Web会議「ZOOM」用 手元操作スイッチ「ずむずむスティック」(Zomzom Stick)

14237 ワード
M5StickC ESP32 ESP32 テキストリンク

Web会議の「ZOOM」で利用できる、手元操作スイッチ「ずむずむスティック」(Zomzom Stick)を作ってみたのでシェアさせて頂きます。
※2021.2.9 更新
　・M5StickC[無印]を入手したので、動作確認の上、修正しました。
　・バッテリー残量表示機能を追加しました。

動かすとこんな感じ。

こんな人におすすめ（利用用途）

ヘッドホンをワイヤレスにしている人

ちょっと席を外すときにZomzom Stickを一緒に持ち歩けば、とっさに発言を求められたときにすぐに対応できます。

いわゆる「カフスイッチ」が欲しい方

自分がしゃべっているときに、急な咳・くしゃみがしたくなったときにすばやくミュートできます。

内職派に

ZOOMを裏画面に退避させて別の作業をしているときでも、ウィンドウを切り替えずにON/ミュートの操作ができるし、ON/ミュートの状態をZomzom Stickで確認することもできます。

作ったきっかけ

先日、１日中、ZOOMのWeb会議に参加しないといけない日があったんです。
研修的なやつなので、基本的にはマイクもビデオもミュートで、話を聴き続ける系のWeb会議です。ほぼ話を聴くだけといっても、有線のヘッドホンで終日PCにくくりつけられるのは、さすがにしんどいと想定されました。
そこで思い切ってアップルのairpodsを購入したんです。そしたら、やっぱワイヤレスヘッドホンは快適だったんですよね。ちょっと画面から離れるときでもいちいちヘッドホンを外すことはないし、話の内容は聴けるし。

ところがですよ、Web会議の途中で、ちょくちょく発言を求められるときがあるんですよ。
そうすると、あわててPCの前に戻って、そしてあたふたとマイクをONにする操作をするじゃないですか。
そこで、リモートでON/ミュートができるグッズがあったらいいなと思ったんです。

いろいろリサーチしたところ、そのものズバりのものがなかった（見つけれなかった）ので、それなら作っちゃえってことになりました。

なんでZOOMだけなの？

ZOOMには、「グルーバルショートカットを有効化」という機能があります。ウィンドウが一番手前でなくても、ショートカットキー操作を受付できる設定です。これがないと、「ずむずむスイッチで操作したつもりなのに切り替わっていない！」という事故が多発することが予想されます。
他のWeb会議ツールはこの機能がありませんでした。（自分調べ）
そういうわけでZOOM専用にしていますが、他に見つかれば対応していきたいと思います。

インストール方法

M5StickCを用意する。

自分は千石電商さんで買いました。
みなさんは、身の回りに転がっていたりするのではないでしょうか。
M5StickCの「無印」と「Pluｓ」の両方に対応するよう動作確認しました。

Arduinoの開発環境をセットアップする。

＜自分はこのあたりのサイトを参考にしました＞

　M5StickCであそぶ 〜開発環境を構築する〜
　https://make-muda.net/2019/08/6891/

　M5StickC クイックスタート - Arduino Win
　https://docs.m5stack.com/#/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows

USBでつないで書き込みができる状態まで準備してください。

ファイルをダウンロードして、M5Stickに書き込む。

※Windowsでの説明になります。

(1)任意の場所に、"ZomzomStick" という名前のフォルダを作成します。

(2)ライブラリマネージャーの設定(2021.2.9追記）
　M5StickCのIncludeファイルが利用できるよう、ライブラリマネージャーを設定するのですが、「無印」と「Plus」で指定するファイルが異なるのでご注意ください。

以下のスクショは、「Plus」はインストール済で、「無印」を追加でインストールしようとしていることろです。実際には、使用する機種のほうだけインストールすればよいです。

(3)ファイルの取得
　https://github.com/daisuke1974x/ZomzomStick
　から、以下の２つのファイルをとってきて、"ZomzomStick" フォルダに保存します。
　　・ZomzomStick.ino
　　・icon.h
　　※ソースの解説は後述。
　　
(4)Arduino IDE から、ZomzomStick.ino を開きます。
　　
(5)M5StickC に書き込みします。
　　
　　自分の環境では、１分ぐらいかかりました。

ずむずむスティックをPCに接続する方法

(1)M5StickCを起動する
　書き込んだ直後は自動的に起動すると思います。
　そうでなければ電源スイッチを長押しして起動してください。
　"Start BLE" という表示が出るまで待ちます。
　　

(2)ペアリングする
　・Windowsの場合
　　スタートボタンから順番にたどって、Bluetoothの設定画面を開きます。
　　
　　
　　

　　ZomzomStick が表示されるので、クリックします。
　　
　　PINコードの1234を入力して「接続」をクリックします。
　　
　　接続されたことが確認できます。
　　

　・macの場合

　　※2015年頃のmacbook airで資料取りしたので、古いかも。

　　スタートメニューから順番にたどって、システム環境設定を開きます。
　　
　　

　　ZomzomStick が表示されるので、「接続」をクリックします。
　　
　　PINコードの1234を入力して「接続」をクリックします。
　　
　　接続されたことが確認できます。
　　

(3)ペアリングが完了すると、ずむずむスティック側もこの表示になると思います。
　　
　　※macで使用する場合は、[B]ボタンを長押しして、設定を切り替えてください。

(4)ZOOM側の設定（重要）
　・ZOOMを起動して、設定画面を開きます。
　・キーボードショートカットの設定から、「グルーバルショートカットを有効化」にチェックを入れます。これをしておかないと、ZOOMのウィンドウが一番手前に来ていないときに誤操作の原因になります。
　・ZOOMのバージョンによっては、画面が変わる可能性があるので、ご注意ください。

　　＜Windowsの場合＞
　　
　　＜macの場合＞
　　

使い方

　各ボタン・スイッチの場所
　　
　　

[A]ボタン [B]ボタン
短押し マイクのON/ミュートの切り替え ON/ミュートの表示リセット
（両方ミュート表示にします）（※１）
長押し ビデオのON/ミュートの切り替え Windowsとmacの切り替え（※２）

（※１）PC側のZOOMの実際の設定状況をずむずむスティック側に自動的に反映するわけではないので、起動させたら手動で一致させてください。
（※２）起動時にデフォルトでmacにしたい場合は、ソースコードの設定を参照してください。

終了するときは、電源ボタンを長押し（割と長め）してください。

ソースコードの設定について

M5StickCの 無印 と Plus の切り替え

無印とPlusでは、ヘッダーファイルが異なるので、それぞれに合っているファイルを指定してください。
加えて、それぞれの画面に最適化するために、フラグを作ってプログラム内で切り替えているので併せて設定してください。
以下の例では、Plusにしています。

ZomzomStick.ino
//  M5StickC の無印,Plusの種類に応じてコメントアウトしてください。

//#include <M5StickC.h>
//int M5StickSystem = 0;// 0:M5Stick  1:M5StickC Plus

#include <M5StickCPlus.h>
int M5StickSystem = 1;// 0:M5Stick  1:M5StickC Plus

起動時のOS選択の変更

[B]ボタンの長押しで切り替えはできるのですが、起動時にmacにしておきたい場合は、以下の箇所を設定してください。

ZomzomStick.ino
int flag_os = 0;            //起動時のOS選択　 0:Windows  1:mac

画面に対する[A]ボタンの位置の変更

初期設定では、[A]ボタンは右側です。右利きの方にお勧め。左利きの方は、左側に設定するといいかも。

ZomzomStick.ino
M5.Lcd.setRotation(1);// 画面に対して[A]ボタンが・・・1:右側、3:左側

アイコン

githubに公開しているバージョンでは、ZOOMのアイコン画像は使用せず、別の似たものに差し替えています。どうしてもZOOMのアイコンで使いたい方は、以下の方法でデータが作成できます。
（自己責任においてご使用ください）


詳細はこちら（クリックで展開）
１．画像ファイルを用意する。（10個）
　　M5Stick(無印)用・・・・32x32のビットマップファイルを作成します。
　　　・img_app_32 アプリのアイコン
　　　・img_mic_mute_32 マイクミュートのアイコン
　　　・img_mic_on_32 マイクONのアイコン
　　　・img_video_mute_32 ビデオミュートのアイコン
　　　・img_video_on_32 ビデオONのアイコン
　　M5Stick Plus 用・・・・64x64のビットマップファイルを作成します。
　　　・img_app_64 アプリのアイコン
　　　・img_mic_mute_64 マイクミュートのアイコン
　　　・img_mic_on_64 マイクONのアイコン
　　　・img_video_mute_64 ビデオミュートのアイコン
　　　・img_video_on_64 ビデオONのアイコン
　　※無印とPlusのどちからしか使わない場合は、片方は作成不要です。
　　※ファイルの作成方法(Windows)
　　　・ZOOMを起動して、PrtScキーでスクショを撮る
　　　・ウィンドウズのPAINTを起動して貼り付ける
　　　・64x64ないし32x32のサイズに調整し、ビットマップで保存する
２．画像ファイルをコードに変更して、ヘッダーファイルに保存する
　　以下のサイトを利用します。
　　https://lang-ship.com/tools/image2data/
　　各ファイルで変換作業を行い、「icon.h」の該当箇所をコピペして差し替えます。
　　変数名を変更したり、変数を減らしたりしないようにしてください。
　　（コンパイルが通りません）
～～～～展開ここまで～～～～

開発にあたって参考にしたサイト

　以下のサイトを参考にしたり、ソースを使わせて頂いたりしました。ありがとうございました。

　ESP32でキーボードショートカットを作ってしまおう
　https://qiita.com/poruruba/items/eff3fedb1d4a63cbe08d

　M5Stick-Cに画像を表示する
　https://wak-tech.com/archives/1799

　バッテリー残量表示機能（2021.02.09追加）
　https://tofu-so.hatenablog.jp/entry/2019/09/07/090000

留意事項など

・ソースコードは、無印とPlusで分岐して処理するところなどが、冗長的になってます。パッと見て分かりやすくしたいと思ったためですが、長くなってしまいました。
・アイコンの画像は、ファイルのままM5StickCに転送する方法があるようですが、手間がかかるようなので、ヘッダーファイルにしました。そのため、画像を変更するのにコードに変換するのに手間がかかります。
・コールバック関数の挙動がよくわからなくて、PINコードを入れた後の画面遷移がうまくいきませんでした。やむを得ず、flag_pairing という、ペアリングが完了しているかどうかフラグを作って無理くり画面遷移してます。
・M5StickCの[A]ボタンって固いのが難点。押すのに疲れる。M5Stackのほうが押しやすいのかも。
・自分の環境では、コンパイルから書き込みまで１分弱かかる・・・。遅い・・・。
・バッテリー残量表示機能は、参考にしたサイトのとおり、簡易的に、「線形で4.2Vで100%、3.0Vで0%」という表示にしており、正確なものではありません。
・バッテリーは意外と持たないので、長い会議のときは電源につないでおき、離席するときに外して持ち歩くって運用になります。

終わりに

・使ってみたって方、ぜひ感想をお聞かせください。頂いたご意見に基づき、バージョンアップもしていきたいと思います。

Ver1.0 2021.01.28　初出
Ver1.1 2021.02.09　「無印」への対応とバッテリー残量表示機能の追加