Joy-Con などのゲームコントローラーを、ブラウザで扱える API があります。
今回、以下の「Gamepad API」と「WebHID API」について、記事執筆時点でのそれぞれの最新の情報や、最新のものに限らず便利に活用できそうな情報をいくつか見てみようと思います。
●ゲームパッド API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API
●WebHID API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WebHID_API
過去に書いた記事や今回の記事の流れ
Gamepad API と WebHID API について、それぞれ個別に試した過去があったり、記事を書いたりしたことがありました。
●「 Gamepad API user:youtoy」の検索結果 - Qiita
https://qiita.com/search?q=%20Gamepad%20API%20user%3Ayoutoy&sort=created
●「WebHID user:youtoy」の検索結果 - Qiita
https://qiita.com/search?q=WebHID%20user%3Ayoutoy&sort=created
それぞれ個別に扱っていたのですが、今回はそれらをざっくり 2つまとめて見ていくことにします。
WebHID はゲームコントローラーに限らない、他のデバイスも絡むものですが、今回はゲームコントローラーを対象とした部分を扱っていきます。
ブラウザの対応状況
ブラウザの対応状況を Can I use で見てみます。
Gamepad API
Gamepad API を見てみます。
上記から、主要なブラウザで利用可能と言えます。
WebHID API
次は WebHID API です。
こちらは、「PC用、かつ Chrome系のブラウザなら使える」という感じです。
MDN などで使い方などを確認する
MDN などのページをベースに、それぞれの使い方に関する情報が書かれたページを見てみます。
Gamepad API
Gamepad API の概要を知るのには、MDN の以下のページを見てみるのが良さそうでした。
また、API の動作テストをしたい場合は、以下の「完全な例: ゲームパッドの状態の表示」の部分を見ると良さそうです（デモページへのリンクや、そのソースへのリンクなども紹介されています）。
●ゲームパッド API の使用 - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
また、細かな情報について、以下のページを見るのが良さそうです。
●ゲームパッド API を使用したコントロールの実装 - ゲーム開発 | MDN
https://developer.mozilla.org/ja/docs/Games/Techniques/Controls_Gamepad_API
以下に、見ておくと良さそうな部分を、いくつかピックアップして並べてみます。
※ 途中まで掲載
複数あるボタンやアナログスティックに関する内容など、具体例をまじえた色々な情報を確認できます。
WebHID API
WebHID API の概要は、MDN のページの以下に少し書かれています。
●WebHID API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WebHID_API
それ以外で、WebHID の情報を得るには GitHub にある以下のページを見るのが良さそうです（こちらは、過去に WebHID API について書いた記事でも、少し紹介したものです）。
●awesome-webhid/README.md at master · robatwilliams/awesome-webhid
https://github.com/robatwilliams/awesome-webhid/blob/master/README.md
メニューには以下があり、それぞれの項目ごとに、さらに情報が書かれています。
個人的に見ておくと良さそうと思う部分を、いくつかピックアップして並べてみます。
組み合わせて使えるデバイス（ゲームコントローラー以外も含む）や、便利ツール・ライブラリなど、便利なものがリンク付で紹介されています。
Google公式の情報
Google が提供している公式情報について見てみようと思います。
それぞれ、ページを列挙する感じで書いていきます。
Gamepad API
●GamePad API - Chrome Platform Status
https://chromestatus.com/feature/5118776383111168
●ゲームパッドで Chrome Dino ゲームをプレイする | Articles | web.dev
https://web.dev/articles/gamepad?hl=ja
WebHID API
●WebHID (Human Interface Device) - Chrome Platform Status
https://chromestatus.com/feature/5172464636133376
●一般的ではない HID デバイスへの接続 | Capabilities | Chrome for Developers
https://developer.chrome.com/docs/capabilities/hid?hl=ja
●ウェブ上のヒューマン インターフェース デバイス: 簡単な例 | Capabilities | Chrome for Developers
https://developer.chrome.com/docs/capabilities/web-apis/hid-examples?hl=ja
●ウェブサイトを USB デバイス、シリアル デバイス、HID デバイスに接続する - Google Chrome ヘルプ
https://support.google.com/chrome/answer/12576972?hl=ja
おわりに
今回、情報の列挙だけで終わっている部分があります。
細かく見ていくと、わりと情報量が多いものが混じっているためです。
さらに深掘りしてみると良さそうな部分は、今後さらに情報を見てみて、記事にしてみようと思います。
余談
最近、「Joy-Con のセンサー系 ＋ JavaScript の描画ライブラリ（2D系の p5.js、3D系の Babylon.js）」という方向で、手をつけ始めました
以下の例は、Gamepad API のほうだと傾きは取得できないのがあり、WebHID API との組み合わせでやっています。