M5StickCを使ってTeamsのミュートボタンをつくろう！

# はじめに

在宅勤務が普通となった今、ビデオチャットは欠かせません。
みなさんは、ビデオチャット中にこんな経験はないでしょうか？

- ビデオチャット中に家族から突然話しかけられる。
- 家族（子供）が急に膝の上に登ってきてカメラの視界に入ってしまう。

筆者は上記の様な事がしばしばあります。
ミュートボタンやカメラのOn/Offボタンを押して事なきを得ていますが、焦っている状況だとマウスからの入力や、キーボードのショートカットでは押しそびれてしまう場合もあるかもしれません。物理ボタンに置き換えられれば、咄嗟の状況でもすぐにミュートのOn/Offを切り替えられそうです。
そこで、M5StickCの入門を兼ねて、筆者が現在使用しているMicrosoft Teamsの、物理ミュートボタンを作りたいと思います。

# M5StickCとは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528033/0576e4b6-9651-1e88-e8f1-bad78f4d1c68.png)

>ESP32を搭載した小型のM5Stackです。ポータブルで使いやすいオープンソースのIoT開発基板で、プロトタイプを素早く作ることができます。
https://www.switch-science.com/catalog/5517/ より引用

引用元のページを見ると、小さい筐体に沢山の機能が搭載されていることがわかります。ディスプレイやバッテリーも搭載されており、アイディア次第でいろいろなことができそうです。
今回はM5StickCをBLE接続のキーボードとして、ボタン（正面のM5と書いてある部分）を押した際に特定のキーを送信させます。

# 環境

- Windows10
- M5StickC

# 環境構築

### 各種インストール

M5Stackのチュートリアルより
https://docs.m5stack.com/#/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows
1. Arduino IDE
2. ESP32ボードマネージャ
3. M5StickCライブラリをインストールします。

※M5StickCの開発には統合開発環境のArduino IDEを使用します。Arduino IDEを使用すると、プログラムの開発、転送などが一元管理できます。
https://ja.wikipedia.org/wiki/Arduino#Arduino_IDE

インストール後、M5StickCをPCに接続します。

### サンプルプログラム実行

Arduino IDEからサンプルプログラム（Arduinoでは「スケッチ」と呼ばれています）を実行してみましょう。
ツールバー > ファイル > スケッチ例 > M5StickC > Game > Dices を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528033/2fd68585-b66b-990d-302d-b70ff456fac8.png)

新規ウィンドウが立ち上がるので、ツールバー > スケッチ > マイコンボードに書き込む をクリックすると、M5StickCに書き込まれます。（5分ほどかかります）
書き込みが完了すると、画像の様にさいころゲームが起動します。他にもサンプルスケッチは沢山あるので、実行してみると楽しいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528033/ec04e1f6-f51e-7c4d-e2f6-9e3272694cf1.jpeg" width=50%>


# 実装

### ライブラリの追加
ツールバー > ファイル > 新規ファイル で、プログラムを作成していきます。
M5StackCをBLEキーボードとして振舞えるよう、簡単に実装できるライブラリが公開されているので、今回はこちらを使用します。ZIP形式でダウンロードします。
https://github.com/T-vK/ESP32-BLE-Keyboard

ツールバー > スケッチ > ライブラリのインクルード > .ZIP形式のライブラリをインストール で、ライブラリを取り込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528033/e2c5a382-0961-4fc9-16dd-a1cf485afa5a.png)

### プログラム
ライブラリのサンプルを参照しながら実装していきます。今回はミュートボタンに加え、ビデオ切り替えも追加してみました。btnAが正面にあるボタン、btnBが側面のボタンです。
それぞれのボタン押下時に、ショートカットキーを送信しています。

```c

#include <M5StickC.h>
#include <BleKeyboard.h>

BleKeyboard bleKeyboard;

void showstate(char *txt) {
    M5.Lcd.setCursor(0, 120);
    M5.Lcd.fillRect(0, 120, 320, 20, BLACK);
    M5.Lcd.printf(txt);
}

void setup() {
  M5.begin();
  bleKeyboard.begin();
}

void loop() {
  M5.update();

  if (bleKeyboard.isConnected()) {
    // ミュートの切り替え
    if (M5.BtnA.wasPressed() ) {
      showstate("Sending Mute key...");
      bleKeyboard.press(KEY_LEFT_CTRL);
      bleKeyboard.press(KEY_LEFT_SHIFT);
      bleKeyboard.print("m");
      delay(100);
      bleKeyboard.releaseAll();
    }
    // ビデオの切り替え
    if (M5.BtnB.wasPressed() ) {
      showstate("Sending Video key...");
      bleKeyboard.press(KEY_LEFT_CTRL);
      bleKeyboard.press(KEY_LEFT_SHIFT);
      bleKeyboard.print("o");
      delay(100);
      bleKeyboard.releaseAll();
    }
  }
  // ボタンのチャタリング（物理ノイズ）防止の為、Waitする
  delay(100);
  showstate("");
}
```

# 実行
ツールバー > スケッチ > マイコンボードに書き込む をクリックすると、M5StickCに書き込みます。
書き込み後、PCとBLE接続します。
Windowsの設定 > デバイス > Bluetoothとその他デバイスより「ESP32 BLE Keyboard」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528033/0d6c8d81-ee26-cdce-7ca5-29aec7036aab.png)

ボタン押下後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528033/a933da4f-c4d7-7497-18ea-658f9a1ab6f6.jpeg" width=50%>

実行の様子
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">M5StickCでMicrosoft Teamsのミュート切り替えをやってみた <a href="https://t.co/oxThl1BfBj">pic.twitter.com/oxThl1BfBj</a></p>&mdash; ykawai_r112 (@ykawai40355103) <a href="https://twitter.com/ykawai40355103/status/1334355451882790913?ref_src=twsrc%5Etfw">December 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以上でM5StickCを使ってMicrosoft Teamsのミュートボタンを作成できました！
M5StickCは内蔵の機能だけでなく、拡張キットも豊富なので、もっともっと遊んでみようと思います。