CoderDojo青梅 午後の部の参加者に朗報です！
これまでラズタンクのリモート操作は、第二期までPCキーボードの矢印キーで動かし、第三期はNode-REDのダッシュボードのボタンで動かしました。ダッシュボードはスマホ画面のボタンでも操作できる優れたUI（ユーザー インターフェース）でした。今年、第四期ではUSBゲームパッドで操作のレスポンス向上にチャレンジします。ゲームパッドは、メンター西村さんが試作し、そのクイックなレスポンスに感動しました。この感動を午後の部参加者全員に体験していただきます。体験してほしいプログラミング技術は、（１）ブラウザに組み込まれたAPI と、（２）ブラウザとデバイスが双方向通信できるWebSocket の２つです。

やってみよう！

ブラウザで試す（PCクライアント）

ChromeやEdgeなどのWEBブラウザには、JavaScriptから使えるnavigatorというAPIが組み込まれています。WEBブラウザで[F12]キーを押してDevToolsを開きます。右下のコンソールで試すことができます。試しにOSの種類や言語を表示してみましょう。

> navigator.userAgent 　　　　　…ブラウザやOSの種類
> navigator.language 　　　　　　…言語［ja=日本語］
> navigator.onLine 　　　　　　　…オンライン か オフライン

ブラウザで Gamepad API を試す

Navigator APIでは、ゲームパッドの情報を取得できます。ゲームパッドのボタンを押さない状態でコマンドを実行し、次にゲームパッドのボタンを押しながらコマンドを実行して、表示される値を比べてください。

> navigator.getGamepads()	ゲームパッドの情報。()が必要です。

最初に表示される0: 1: 2: 3: は、最大接続4個までのゲームパッドの接続状態です。

Gamepad状態を表示するプログラミング

WEBブラウザで動く JavaScript コードを制作します。下記は、PCに接続したゲームパッドのボタンや上下左右スティックの状態をブラウザに表示するコードです。
今回はプログラムを読みながらタイピングしてほしいので、コードは画像を貼り付けています。VScodeやNotepadなどのテキストエディタでHTMLファイルを作ってみてください。HTMLの保存場所は、ラズパイの/var/www/htmlのWEBサーバーに保存するのが望ましいですが、動作確認を優先し、Windowsの好きなディレクトリに新しいファイル（例 C:\ユーザー\usb_gamepad.html）を作成してください。

WEBブラウザで動作検証

WEBブラウザで作成したHTMLを実行します。ゲームパッドを操作すると配列の値が変化します。なお、期待通り動かない時は[F12]キーを押してDevToolsのコンソールにエラーが表示されていないか確認します。

レベルアップ！ PCからラズパイに通信する

次はラズパイのプログラムにゲームパッドの状態を伝える方法を試します。ラズタンクを操作するには、ラズパイ側にPythonなどで動くAPIサーバーを開発しなければなりません。最初の一歩として、ネットワーク経由で通信できるかNode-REDで実験します。

Node-RED フローを準備する

［USBゲームパッド］→［PCブラウザ］→　ネットワーク　→［Node-RED］

新しいフローを開き、[websocket]と[debug]の２つのノードを配置します。

[websocket]のパラメータ

PCからの通信を待ち受けするURL（APIのパス）を定義します。[追加] → [完了]ボタンを押して設定完了。

フローを反映させるにはデプロイを忘れずに。

PCとラズパイの[websocket]が接続できた場合、Connectedと表示されます。

ゲームパッドのボタンを押すとデバッグ画面に、ゲームパッドの状態が表示されます。

ここまで成功した？　おめでとう🎉

次のステップは、ゲームパッドのボタン配列を調べること、そしてラズタンクの前後左右のコードを実行することです。