はじめに
以下の「Nintendo Switch Proコントローラー」を WebHID API で扱う、という話です。
●周辺機器 | Nintendo Switch｜任天堂
https://www.nintendo.com/jp/hardware/switch/accessories/index.html
「Nintendo Switch Proコントローラー」の主な仕様
「Nintendo Switch Proコントローラー」の主な仕様を見てみます。
まず、画像で示されているものは以下です。
ボタンなどの情報
テキストで書かれたものを、主なものだけピックアップしてみます。
- ボタン
- Lスティック/Lスティックボタン
- Rスティック/Rスティックボタン
- A/B/X/Y/L/R/ZL/ZR ボタン
- ＋ボタン/－ボタン
- 十字ボタン
- HOMEボタン
- キャプチャーボタン
- シンクロボタン
- 通信機能
- Bluetooth 3.0／NFC（近距離無線通信）
- センサー
- 加速度センサー／ジャイロセンサー
- 振動機能
- HD振動（バリエーション豊かな振動表現が可能）
今回利用するテスト用サイト
今回、WebHID API で Nintendo Switch Proコントローラーを扱うのですが、まずはテスト用サイトで動作確認をしてみます。
具体的には、以下のサイトです。
●Joy-Con Operation Tester | Joy-Con with WebHID
https://aka256.github.io/joycon-webhid/pages/operation.html
ちなみに、以下が元データになるようです。
●aka256/joycon-webhid: Using various functions of Joy-Con and Pro Controller(buttons, HD rumble, player lights, NFC reader, SPI flash memory, etc.) with WebHID
https://github.com/aka256/joycon-webhid
Nintendo Switch Proコントローラーの接続
今回の用途で Nintendo Switch Proコントローラーを使う場合、PC に Bluetooth で接続する形になります。
その際、Nintendo Switch Proコントローラー側は、以下のシンクロボタンを長押しすると、ペアリング用のモードになります。
あとは Mac や Windows で、Bluetoothマウス／キーボードなどを無線接続する時と同じ手順で、Nintendo Switch Proコントローラーをペアリングしてください。
Windows でペアリングが完了した画面の例を以下に示します。
テスト用サイトでの動作確認
それではテスト用サイト（Joy-Con Operation Tester）での動作確認を行っていきます。
テスト用サイトのトップにある「Connect to Joy-Con」と書かれた青いボタンを押してください。そうすると以下のようなポップアップが出るので、「Wireless Gamepad」を選んでから、右下の接続ボタンを押します。
デバイス情報の取得
上記の接続操作が完了していれば、例えば以下の部分の「Get」ボタンを押すことで、ファームウェアバージョンやコントローラータイプなどの情報を取得して表示できます。
ボタンなどの動作確認
ボタンなどの動作確認も行えいます。それが行える箇所は以下の部分です。
ボタンを押したりスティックを動かしたりすると、上記の表示に色がついたりなど、ページ上の表示が操作に反応して変化するのが確認できます。
コントローラーの傾き
テスト用サイト上でコントローラーの傾きをセンサーの値として取得できる部分は以下です。
コントローラーを傾けると、この部分の数値が変動する様子を確認できます。
LED の点灯／消灯と振動
その他に LED の点灯／消灯や振動のテストを行える部分もあります。
上記の LED操作用のボタンを押したり、HD Rumble の部分の数値を変更してから「Enable Rumble」ボタンを押したりすると、LED の点灯／消灯やコントローラーの振動を行わせられることが確認できます。
他のテスト用サイト
今回、Joy-Con Operation Tester というテスト用サイトを試しましたが、他にも以下のサイトもあります。こちらも使いやすいサイトなので、おすすめです。
●Joy-Con and HVCController (ファミリーコンピュータ コントローラー) WebHID
https://tomayac.github.io/joy-con-webhid/demo/
●tomayac/joy-con-webhid: Use the Nintendo Switch Joy-Cons via the WebHID API
https://github.com/tomayac/joy-con-webhid
その他
WebHID API と Gamepad API
ブラウザでゲームパッド／ゲーム用コントローラーを扱う場合、WebHID API と Gamepad API のどちらかに使うのが主な方法になります。
それについて、過去に以下の記事を書いたことがあります。
●Joy-Con などをブラウザで使える API 2つの情報をまとめて見てみる： Gamepad API と WebHID API - Qiita
https://qiita.com/youtoy/items/109d1564ee2ff4bd463f
それらの違いについて、「Nintendo Switch Proコントローラー」や Joy-Con を扱う場合では、ボタン押下はどちらを使っても実現できます。
しかし、加速度センサーや NFC などの一部のハードウェアの機能を使う場合は、Gamepad API ではデータがとれず WebHID API を使うことになります。
WebHID API でセンサーを使った例
以下は、WebHID API で Joy-Con の傾きを取得した事例です。
その他、以下のような特殊なコントローラーを使う場合にも、WebHID API のほうが必要になったりします。
WebHID API が必要な特殊なコントローラー： ルーレットコントローラー
人生ゲーム for nintendo switch専用ルーレットコントローラー
WebHID API が必要な特殊なコントローラー： リングコン
リングフィットアドベンチャー用のリングコントローラー
●【WebHID API】リングコンのチカラセンサーの値を取得してみた
https://zenn.dev/mascii/articles/ring-con-with-web-hid
上記の記事などで公開された内容をもとに、自分も以下のようなものを作ってみたりもしました。
Gamepad API のテスト用サイト
ちなみに Gamepad API のテスト用サイトも、公開されている方がいます。
自分が過去に使ったり、Qiita の記事でも紹介したサイトに、以下があります。
●Gamepad Tester - Check Controllers and Joysticks Online
https://hardwaretester.com/gamepad
ちなみに、Nintendo Switch Proコントローラーを使えるようにした状態だと、以下のような表示になります。この状態にすると、ボタン押下のテストなどを簡単に行うことができます。
