【完走賞ゲット-15】Web上やアプリで HIDデバイスの情報を手軽に確認する方法：「HID Explorer」と「USB Device Tree Viewer」

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy
) の 15日目の記事です。

この記事で出てくるのは、今年のアドベントカレンダー用の記事を大量に書く中で、以下の記事でも扱った HID 関連の話です。

- [【完走賞ゲット-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)

HID関連の話は、この後もさらにお試しなどをやっていきたいと思っているものです。
そのような想定の中で、HIDデバイスを開発で扱っていくのに便利なツール・サービスも探したいという意図があり、この方向の話を本記事では書いていきます。

## HIDデバイスの情報などを取得する
冒頭に少し触れた記事の 1つ目では、Node.js のパッケージを使って HIDデバイスの情報を取得してみるということをやっていました。Node.js で扱うものなので、パッケージのインストールなど一手間必要な方法でした。

これを、もう少し手軽に行えそうな方法が、今回の記事のネタです。

### Web上で WebHID の情報が取得できるページ： HID Explorer
1つ目は、Webサイト上で WebHID をつかった情報取得ができる以下のページです。

●HID Explorer
　https://nondebug.github.io/webhid-explorer/
![HID Explorer](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a913007b-9c90-a3fa-9aab-c5b6db4ef0a3.png)

見た目はとてもシンプルな作りです。
そして、利用手順も、左上にある「Connect」ボタンを押して、そこで出てくるポップアップで WebHID の接続許可の操作を行うといった流れで良さそうです。

#### お試し1： 無線のフットスイッチ
具体的にデバイスを使って試していきます。
1つ目は、以下の記事でも扱った無線のフットスイッチです。

●【今年のベストバイガジェット 2022】大垣でのメーカーフェア出展でも大活躍した「BOSS FS-1-WL（無線フットスイッチ）」 - Qiita
　https://qiita.com/youtoy/items/715dd56fa756e18e87e6
●【Node-RED 2022】フットスイッチ「BOSS FS-1-WL」を有線接続 ＋ MIDIモードで Node-RED で使う - Qiita
　https://qiita.com/youtoy/items/7194f1ebf7f88f23f97e

デバイスを Bluetooth で接続した後に、HID Explorer のページ上で WebHID の接続許可の手順を進めていきます。以下の画面で、該当するデバイスを選び、許可する操作をします。
![フットスイッチの接続許可](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e489240b-cb32-62bb-a7bb-9392497dccfd.png)

接続が完了すると、ID の情報やその他いろいろな情報が、ページの下のほうに表示されました。
![フットスイッチの情報表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d999cc58-da73-0555-15bb-03355aedd7a1.png)

#### お試し2： 有線のコントローラー
フットスイッチとは別のデバイスでも試してみます。
具体的には、先日手に入れたばかりの有線のコントローラーをつないで、情報を見てみます。
![有線のコントローラー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/910cc16b-45eb-2da6-98a1-bf16ae29a035.png)

接続要求を許可するポップアップで、リストの中にコントローラーの項目が出てきました。
その中では、以下のような名前で出てきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e37d56b9-ceb5-d873-3550-3eb7a9ae5d74.png)

そして、接続が完了した後は、さきほどと同様に ID などの情報が出てきます。
また、この有線コントローラーの場合、先ほどのフットスイッチの時とは異なり、別の情報も出てきました。

具体的には、ページ上の「Input report」という項目の中で、おそらくコントローラーから送られてくるセンサーの情報などが、以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c7fb6e73-12e4-fda8-548c-10d0ee0f8ff9.png)

どういった数値なのかは、別で取り出しなどを行う処理が必要そうです。

### Windows用の情報取得アプリ： USB Device Tree Viewer
今度は、Web上で使うものでなく、Windows のアプリとして使えるもので試します。

これについて、実は冒頭に少し触れた記事（2つ目の記事のほう）で情報が出ていました（※ 同記事の中で出てくる [Awesome WebHID](https://github.com/robatwilliams/awesome-webhid)というページ内にて）。

その中で、自分が気になって試したものが 1つあります。
それは、以下の「USB Device Tree Viewer」です。

> - USB Device Tree Viewer - View device information including interface and HID descriptors.

その公式ページは、以下です。

●USB Device Tree Viewer
　https://www.uwe-sieber.de/usbtreeview_e.html
![USB Device Tree Viewer](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/271093e9-1650-ab79-7e3a-f878b65b1b56.png)

これを試してみたのですが、ダウンロードした ZIPファイルを解凍すると EXEファイルが含まれており、その EXEファイルを実行すると HIDデバイスに関する情報が表示されるというものでした。

とても手軽に HIDデバイスに関する情報を取得できました。