ESP32でiPadのキーボードショートカットを快適にする

ESP32のBLE機能を使えば、ESP32をBLEのキーボード(HID)にすることができます。
ということは、キーボードのないiPadのキーボードショートカット代わりにすることができるということです！
構成はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/870767fc-65fa-2ce1-0809-1b930870b472.png)

用意するものは、以下です。iPadやMacは除きます。

* M5StickC または M5StickC Plus
* M5Stack用赤外線送受信ユニット (https://www.switch-science.com/products/5699)
* 赤外線テレビリモコン

赤外線テレビリモコンから赤外線信号を送信し、
M5StickCにつないだ赤外線送受信ユニットで受信し、
M5StickCからiPadにBLEでキーボード押下を送信します。

（M5StickCを使っていますが、ESP32であれば何でも構いません。）

今回ボタン押下として赤外線テレビリモコンを選んだのは、ボタンも大きく、ボタンもたくさんあり、卓上に置いたまま押すことができて、Amazon等いろんなところで安価に入手できるためです。ご自身でお気に入りのテレビリモコンを探してみてください。
私は以下を用意しました。

ELPA-大きなボタンで押しやすさと見やすさを追求-国内主要メーカー対応-IRC-202T-BK/dp/B015DVZH3U

　https://www.amazon.co.jp/gp/product/B015DVZH3U

ちなみに、M5StickCのボタンを長押しすることで、Editモードとなって、リモコン・ショートカットキーの登録ができるようにしてあります。その時は以下の構成となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/1057a15f-de06-da14-5e7d-aff1c53dc5f7.png)

Editモードにすると、M5StickCがWebサーバとして立ち上がりますので、ブラウザからショートカットキーを登録する作業ができます。

## 使うための準備

まずは使ってみてください。
M5StickCを用意して、さらにM5Stack用赤外線送受信ユニットをつなげておきます。

以下からダウンロードしてきます。
Visual Studio Code＋PlatformIOで作りました。

https://github.com/poruruba/CustomKeyboard

先に、platformio.iniファイルに、M5StickCの ポート番号を指定しておきます。
以下の部分です。

```ini:platformio.ini
upload_port = COM3
monitor_port = COM3
```

ショートカットキー情報は、ESP32のCPU内のSPIFFSに保存しています。
ですので、まずは、Flash Eraseします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8112c028-3be2-43ae-afd9-2e36924303f6.png)

Visual Studio Codeの左側のPlatformIOのアイコンをクリックし、左上のProject Tasks→Platform→Erase Flashをクリックします。

次に、Webページを書き込みます。
Editモードで起動したとき、PCのブラウザからショートカットキーを登録するためのWebページを表示できるようになります。ちなみに、Webページは、フォルダ```data/html``` にあります。

左上のProject Tasks→Platform→Build Filesystem Imageをクリックしてから、Project Tasks→Platform→Upload Filesystem Imageをクリックします。

最後に、左下の→ボタンをクリックして、ESP32のファームウェアイメージのビルドと書き込みを行います。
これで書き込みは完了しましたので、Serial Monitorを立ち上げます。Ctrl＋Shift＋Pを押して、PlatformIO: Serial Monitorを選択します。

最初は、すでに起動完了してしまっているので、シリアル上の出力も終わってしまっていますので、M5StickC本体のボタンを押下して、再度M5StickCの電源Off・電源Onします。あるいは、M5StickCのAボタンの長押しでリブートできるようにしてあります。また、再起動した後もそのままAボタンを押し続けると、Editモードになります。LEDが点灯するのでわかります。

Editモードになると、WiFiルータにつなぎに行こうとします。
最初は、SSIDとパスワードが未設定なので、Serial Monitor上で入力が促されます。それぞれ入力してください。接続できるとM5StickCのLCDにIPアドレスが表示されます。この設定は覚えてくれているので、1回だけやればOKです。

それでは、ブラウザから、そのIPアドレスを入力してページを開いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/0b4850b4-ded6-4e63-86f2-75906dda6ede.png)

更新ボタンを押してください。ですが、最初は何も登録されていません。
そこで、新規追加ボタンを押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/afe03ab6-4f33-16b3-89af-a5fe0bbceff8.png)

リモコン信号待ちとなります。10秒ほど待ち受けるようにしてあります。
赤外線リモコンのうち、適当なボタンを押してください。たとえば、チャネル④ボタンを押してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ab3ffcd5-b81c-440c-18db-96c1530cc6f3.png)

リモコン信号を検出しました。
適当な名前を付けて登録します。例えば4とでもしておきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/4e98e3b1-acb6-e91c-92f3-ff783ece5649.png)

次に、このリモコン信号に対して、ショートカットキーを割り当てます。
Key更新ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/fbedda27-a684-dd4b-597f-54ed7257d206.png)

今回は、スクリーンショットのショートカットキーである、Command＋Shift＋3を入力しました。iPadのキーボードはちょっと特殊なので、key_typeはkey_macに、key_langはusに指定してください。key_nameにはわかりやすくスクリーンショットとしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ae5ad236-cb44-b84f-8eed-7564f1c705a8.png)

これで準備完了です。同じWebページにあるリブートボタンを押すか、M5StickCのAボタンを長押しします。

# iPadから使ってみる

設定→Bluetoothを開いてみると、「CustomKeyboard」というのが見つかるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/d12d666d-8f7d-1b33-e790-59f1141d4159.png)

これがM5StickCですので、タップしてペアリングします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3d94db4c-c5d1-aeec-4831-84d1887b4686.png)

接続済みと表示されれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2494d9ee-bf8c-a754-da15-dfbbf99a6edc.png)

さっそく、先ほど登録したチャネル4のボタンを押してみましょう。
無事にスクリーンショットが撮れたのではないでしょうか。

他にも有用なショートカットキーがあるので、明記しておきます。

* Command＋Shift＋3：スクリーンショット
* Control＋Command＋Q：画面ロック
* Option＋Command＋D：Dock表示
* Command＋H：ホーム画面

(参考) https://support.apple.com/ja-jp/HT201236

ついでに、以下も追加しておきました。カーソル操作もよくするので。

* →：カーソル右
* ←：カーソル左

追加でショートカットキーを追加したり編集したりしたい場合は、M5StickCのAボタンを長押ししてEditモードにすることをお忘れなく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/d0b311dc-f90c-68b8-1126-819a9f2acc32.png)

# グルーバルキーを活用する

最近のiPadでは、地球儀の刻印がされたグローバルキーも活用できます。以前はFnキーと呼ばれていたようです。
以降で、グローバルキーを絡めたショートカットキーを設定します。
その前に準備が必要です。一般的なHIDキーボードでは、地球儀のキーがないので、今回はあまり使わないCaps Lockキーをグローバルキーと見立てます。

設定→一般→キーボード→ハードウェアキーボード→装飾キーを選択します。
キーボードとして「CustomKeyboard」を選択状態にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/830927e0-6023-80d4-68cc-ae2b4c06c8b6.png)

そして、Caps Lockをタップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8132a2d3-c49b-38f3-ed5a-7ad481e4fcd6.png)

この画面で、地球儀を選択状態にすることで、Caps Lockを押下すると地球儀を押下したことになります。
ちなみに、この設定は、選択した「CustomKeyboard」でのみ有効ですので、別のハードウェアキーボードを接続していたとしても、そちらの方は変わりません。

戻るとこんな感じになっています。Caps Lockキーのところが地球儀になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f6939b17-8701-a48c-f1f1-2cce8559672c.png)

それではこれから以下のショートカットキーを登録していきます。（★がついているもの）

* 地球儀＋H・・・デスクトップ表示
* 地球儀＋F・・・フルスクリーン ★
* 地球儀＋A・・・ドック表示（アプリを矢印キーで選択してenterで起動できる）
* 地球儀＋C・・・コントロールセンター ★
* 地球儀＋N・・・通知センター ★

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8bc0d675-6bef-df85-5bf5-2fe5d3567d64.png)

M5StickCをリブートして、割り当てたリモコンボタンを押下すると、期待していた動作になったのではないでしょうか。

# 参考

ショートカットキーの参考となるページを張り付けておきます。

https://blog.skeg.jp/archives/2021/10/global-key-shortcut.html
https://support.apple.com/ja-jp/HT201236
https://www.sunmattu.net/pctablet/30882
https://www.sunmattu.net/pctablet/19516

過去の記事

[SwitchBotとESP32と汎用リモコンで作るスマート家電](https://qiita.com/poruruba/items/9882870ff1b170386bf9)

# その他

iMacでも同様なことができます。
また、Windowsでも、key_langをjpとしていただければ、同様に使えますので、ぜひ使ってみてください。
不明な点や拡張してほしい点があればお知らせください。

以上