Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Gamepad

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Gamepad はゲームパッド API のインターフェイスで、それぞれのゲームパッドやその他のコントローラーを定義し、ボタン押下や軸位置や ID といった情報にアクセスできるようにします。

Gamepad オブジェクトを取得する方法は 2 つあります。 gamepadconnected または gamepaddisconnected イベントの gamepad プロパティか、 Navigator.getGamepads() から返される配列の任意の位置から取得します。

デバイスAPI

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Gamepad`	21	12	29	10.1	25	10.3
`axes` Gamepad.axes はインターフェイスのプロパティで、機器（例えばアナログスティック）上に存在する軸を持つコントロールを表す配列を返します。	21	12	29	10.1	25	10.3
`buttons` Gamepad.buttons はインターフェイスのプロパティで、機器上に存在するボタンを表す gamepadButton オブジェクトの配列を返します。	21	12	29	10.1	25	10.3
`connected` Gamepad.connected はインターフェイスのプロパティで、ゲームパッドがシステムに接続されているかどうかを示す論理値を返します。	25	12	29	10.1	25	10.3
`id` Gamepad.id はインターフェイスのプロパティで、コントローラーに関するいくつかの情報を含む文字列を返します。	21	12	29	10.1	25	10.3
`index` Gamepad.index はインターフェイスのプロパティで、現在システムに接続されているそれぞれの機器の整数の固有番号（自動採番）の整数を返します。	21	12	29	10.1	25	10.3
`mapping` Gamepad.mapping は Gamepad インターフェイスのプロパティで、ブラウザーが機器のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列を返します。	21	12	29	10.1	25	10.3
`secure_context_required` 実験的安全なコンテキストが必要	86	86	91		86
`timestamp` Gamepad.timestamp は Gamepad インターフェイスのプロパティで、このゲームパッドのデータが最後に更新された時刻を表す DOMHighResTimeStamp を返します。	21	12	29	10.1	25	10.3
`GamepadButton` GamepadButton インターフェイスは、ゲームパッドなどのコントローラーの各ボタンを定義します。このインターフェイスによって、コントローラー上で使用できるボタンの状態を確認することができます。	21	12	29	10.1	25	10.3
`pressed` GamepadButton.pressed は GamepadButton インターフェイスのプロパティで、現在ボタンが押されている (true) か、押されていない (false) かを示す論理値を返します。	21	12	29	10.1	25	10.3
`secure_context_required` 実験的安全なコンテキストが必要	86	86	91		86
`value` GamepadButton.value は GamepadButton インターフェイスのプロパティで、トリガーなど、現代の多くのゲームパッドにおけるアナログボタンの現在の状態を表すために使用する double 値を返します。	21	12	29	10.1	25	10.3
`GamepadEvent` GamepadEvent はゲームパッド API のインターフェイスで、システムに接続されているゲームパッドへの参照が含まれています。これは、ゲームパッドイベント Window.gamepadconnectedevent と Window.gamepaddisconnectedevent が応答として発生するものです。	21	12	29	10.1	25	10.3
`gamepad` GamepadEvent.gamepad は GamepadEvent インターフェイスのプロパティで、Gamepad オブジェクトを返し、発生した Window.gamepadconnectedevent イベントと Window.gamepaddisconnectedevent イベントの関連するゲームパッドデータへのアクセスを提供します。	21	12	29	10.1	25	10.3
`GamepadEvent` GamepadEvent() コンストラクターは、新しい GamepadEvent オブジェクトを作成します。	35	12	29	10.1	35	10.3
`secure_context_required` 実験的安全なコンテキストが必要	86	86	91		86
`getGamepads` Navigator.getGamepads() メソッドは Gamepad の配列を返します。それぞれがこの端末に接続されているゲームパッドを表します。	35	12	29	10.1	35	10.3
`getGamepads (secure context required)` 実験的安全なコンテキストが必要	86	86	91		86
`gamepadconnected_event` gamepadconnected イベントは、ゲームパッドが接続されたことをブラウザーが検出したとき、またはゲームパッドのボタン/軸が初めて使用されたときに発生します。	143	143	89	16	143	16
`gamepaddisconnected_event` gamepaddisconnected イベントは、ゲームパッドが切断されたことをブラウザーが検出したときに発行されます。	143	143	89	16	143	16
その他
`html.elements.iframe.allow.gamepad` 実験的			91

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

window.addEventListener('gamepadconnected', (e) => {
  console.log('Controller connected:', e.gamepad.id);
});
function update() {
  const gp = navigator.getGamepads()[0];
  if (gp) console.log('A button:', gp.buttons[0].pressed);
  requestAnimationFrame(update);
}

実務での使いどころ

Gamepad の活用

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

注意点

古いブラウザでは対応していない場合がある。

対応ブラウザ

基本構文

実務での使いどころ

Gamepad の活用

注意点

アクセシビリティ

参考リンク