【micro:bit 2022】micro:bit V2 をゲームコントローラー（BLE接続の HIDデバイスのゲームパッド）にして Gamepad API と組み合わせてみる

## はじめに
この記事は、[micro:bit Advent Calendar 2022](https://qiita.com/advent-calendar/2022/microbit) の 16日目の記事です。
（今月、アドベントカレンダー用の記事として公開したものでは、27記事目になったりしていますｗ）

今回の内容は、[micro:bit のアドベントカレンダーの 7日目の記事（microbit-pxt-blehidを使ってオレオレHIDを数分でつくったはなし）]( ttps://qiita.com/Inoue_Minoru/items/844629142bd3b080a995)で初めて知った「[microbit-pxt-blehid](https://makecode.microbit.org/pkg/bsiever/microbit-pxt-blehid)」の話です。

micro:bit を手軽に、マウスやキーボードなどの HIDデバイスにできる！？

## microbit-pxt-blehid について
@Inoue_Minoru さんの記事にも書いていましたが、[microbit-pxt-blehid](https://makecode.microbit.org/pkg/bsiever/microbit-pxt-blehid) は、micro:bit V1 だと利用できないようです。
![制約](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/58b97b95-4ff5-170f-623c-69f1ea7bb865.png)

さらに、公式の GitHub のページで情報を見てみることにします。
●bsiever/microbit-pxt-blehid: Micro:bit MakeCode support to act as a Human Interface Devices (keyboard, mouse, etc.) over Bluetooth
　https://github.com/bsiever/microbit-pxt-blehid

冒頭の部分を見ると、何に使えるかというのが書いてあります。
![何に使えるか](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/eb1690cc-5546-b7ab-8f51-5b0f6dcdabcd.png)

- Bluetooth接続 で Human Interface Devices (HID) の以下のサービスを扱える
   - キーボード
   - マウス
   - Media Keys (再生、停止、ボリュームの増減など)
   - ゲームパッド
   - Absolute Mouse (puts the mouse at a specific position on the screen) ＝ ペンタブとかで使われているような位置座標の扱いをするやつっぽい

また、各OS での対応状況は以下となるようです。
![各種OSでの対応](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a8152905-c03f-f2d3-15a2-6af06ecff81e.png)
![対応状況の表](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/34c5314c-48e9-b2cd-98c4-60e7504b04c0.png)

個人的に、ゲームパッドを試してみたいと思いました。

## microbit-pxt-blehid を試してみる
### 今回試す内容
microbit-pxt-blehid を使ったマウス・キーボードは既に試されていたので、自分はゲームパッドを試してみようと思います。

どうやら、公式ページからリンクが貼られていた動画のこのあたり ⇒ https://youtu.be/n4J5GN72N_4?t=382 から再生を開始すると、情報が出てきそうです。
![ゲームパッドの利用例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/275cc811-7418-d5b1-b30e-79fc276a0e26.png)

上記のプログラムを元にしたものを作って、試してみようと思います。

### プログラムを作る
まずは、MakeCode にアクセスします。
　●Microsoft MakeCode for micro:bit
　　https://makecode.microbit.org/

拡張機能の画面を開きます。
![拡張機能](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/752bca66-655e-0ec5-d2f5-4c524e1702f0.png)

開いた画面で ble で検索しました。今回使いたい拡張機能が出てきました。
![bleで拡張機能を検索](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f0fcc5b2-e5d8-eecb-f534-ae9fb9cf823c.png)

これは、Bluetooth系の拡張機能を使う際に出てくる、無線機能ブロックと併用できないよ、というやつ。ピンク色のほうのボタンを押して、次に進みます。
![無線機能が使えないという話](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b7181fc-5047-8fa8-7e6a-ff1608ed8c1d.png)

拡張機能を追加したことにより、メニューが増えています。
![追加されたメニュー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2a954c9b-51de-827e-162b-6c9116501e67.png)

そして、今回試すゲームパッド関連のものはこちら（※ 一部抜粋して、掲載してみます）。
![ゲームパッド](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9513d23a-0da4-3e09-aa4e-a5b9572d1f89.png)
![選べるボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ec7c110f-5524-e682-e779-81c76fe1e668.png)
![パッドの選択肢](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/73e0792b-12df-46a5-6d64-b328ad9a3881.png)

それでは、プログラムを作っていきます。
上で動画からキャプチャしたプログラムを見ると、どうやら変数を作成していた感じがしました。

同じ名前の変数（「buttons」）を作成してみます。
![変数の作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/117d6ee2-f524-66f9-ddda-532d52f370e0.png)

そして、if文のブロックや、micro:bit の A・Bボタン関連のブロックなどを追加して、以下のプログラムとしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/21097b12-3b58-c00a-73a9-bb8c77af9ca7.png)

あとは、画面右上のアイコンから設定画面を開き、ペアリング設定の変更を（これも、MakeCode で Bluetooth系のやつを作る時に、よく行うやつ）。
![ペアリング設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d0e76bae-01c8-c91e-b7f9-d4ed88d48e48.png)

## Gamepad API との組み合わせ
ここまで準備ができたら、ゲームパッドとして動作しているかを、以下の Gamepad API のテストサイトで確認してみることにします。

●Gamepad Tester - Check Controllers and Joysticks Online
　https://gamepad-tester.com

### Mac と micro:bit のペアリング
Mac と micro:bit のペアリングを行います。
Mac の Bluetooth設定画面を開くと、micro:bit がペアリング対象として選択できるようになっていました。
![micro:bitがペアリングの対象候補として表示されている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7bddf291-ddfe-b238-d7e5-40a7efaa0093.png)

（この後、表示名が少し変わったりしました）

### Gamepad Tester上での動作確認
Mac とのペアリングもできたので、[Gamepad Tester](https://gamepad-tester.com) を開き、Gamepad API での接続を有効化するために、micro:bit のボタンを押します。
そしてサイト上で接続されているような見た目になったら、micro:bit　の A・B ボタンを押してみます。その結果、サイト上の B0 と B1 のところが反応しているので、ブラウザとの接続・ボタン押下のイベント取得はできたのが確認できました！

https://twitter.com/youtoy/status/1603592326751739904

### 余談： Gamepad API 関連で書いた記事
今回も使った Gamepad API については、今月のアドベントカレンダー用記事の中の、以下の記事でも扱っています。
もしよろしければ、ご覧ください。

- [【obniz 2022】#obniz と #p5js Web Editor と Joy-Con を組み合わせて動かしてみた！ - Qiita](https://qiita.com/youtoy/items/3bf2ca2ccf26e9960942)
- [【完走賞ゲット-13】p5.js Web Editor上でボールが跳ね返る時に DualShock 4 を振動させる（gamecontroller.js での実装） - Qiita](https://qiita.com/youtoy/items/c4d3b6fde5365090a5de)
- [【完走賞ゲット-11】gamecontroller.js を p5.js Web Editor上で使ってみる（DualShock 4 との組み合わせ） - Qiita](https://qiita.com/youtoy/items/1cf1fe244d992456140f)
- [【完走賞ゲット-10】gamecontroller.js を使って DualShock 4 を JavaScript で扱う - Qiita](https://qiita.com/youtoy/items/87c1c37b51ae9ef4ab4d)

### 余談2： HID 関連で書いた記事
ちなみに、HID関連でもアドベントカレンダー用の記事をいくつか書いています。
これらも、もしよろしければ！

- [【完走賞ゲット-15】Web上やアプリで HIDデバイスの情報を手軽に確認する方法：「HID Explorer」と「USB Device Tree Viewer」 - Qiita](https://qiita.com/youtoy/items/1c11c64aca75b0d733e4)
- [【完走賞ゲット-14】node-hid の hid-showdevicesコマンドで HIDデバイスに関する情報を出力（Node.js、JavaScript） - Qiita](https://qiita.com/youtoy/items/eb7f8418fa926266946f)
- [【完走賞ゲット-9】Awesome WebHID というページを見かけて気になった話 - Qiita](https://qiita.com/youtoy/items/f94d861ba5b433aa7008)
- [【今年のベストバイガジェット 2022】大垣でのメーカーフェア出展でも大活躍した「BOSS FS-1-WL（無線フットスイッチ）」 - Qiita](https://qiita.com/youtoy/items/715dd56fa756e18e87e6)
- [【完走賞ゲット-2】ボタン搭載小型デバイスで作る簡易ワンボタンキーボード（Maker Nano RP2040 を利用） - Qiita](https://qiita.com/youtoy/items/e8a9cf35ce16c0fee62e)