p5.js ＋ iPad（Safari）の組み合わせで「DualShock 4」を扱う：ブラウザの Gamepad API利用＋ VSCode の活用 #JavaScript

はじめに

PC上のブラウザを使って試した、以下の記事に書いた内容を、今回は iPad で試してみたという内容の記事です。

●p5.js Web Editor上で Gamepad API を使う： DualShock 4 を使ったシンプルな接続確認・ボタン押下判定 - Qiita
　https://qiita.com/youtoy/items/997e5720de790e36b98b

けっこう前から、iPad自体はゲームコントローラーに対応していたはずなのですが（※ 以下が公式の関連ページ）、今回は iPad のブラウザ（Safari）の API（Gamepad API）で扱えるか動作確認をしたという感じです。

●ゲームコントローラをiPadに接続する - Apple サポート (日本)
　https://support.apple.com/ja-jp/guide/ipad/ipad4c38c119/ipados

デモ動画

最初に、今回の内容を試したみた時の様子の動画を掲載します。

ボタン押下時に、キャンバスの背景色が変わっているのが分かります。

実装した内容

今回の実装内容は、以下のとおりです。

HTMLファイル 1つに、CSS・JavaScript を直書きする形で含めています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style type="text/css">
      html,
      body {
        margin: 0;
        padding: 0;
      }
      canvas {
        display: block;
      }
    </style>
    <title>iPadでDualShock 4</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js"></script>
  </head>
  <body>
    <script>
      function setup() {
        createCanvas(600, 500);
      }

      function draw() {
        const gp = navigator.getGamepads()[0];
        if (gp?.buttons[0].pressed) {
          background(100, 150, 200);
        } else {
          background(220);
        }
      }
    </script>
  </body>
</html>

補足１：全体の話

まず、上で掲載した内容の全体的な部分の補足です。
JavaScript の実装内容は、基本的に冒頭に掲載していた記事のものを用いました。

そして、HTML・CSS は p5.js Web　Editor で用意されているものがベースですが、そこに少し手を加えています。手を加えた内容は、以下の記事に出てくる内容です。

●iPhone/iPadで動くWebBluetoothアプリをp5.jsで作る方向けのメモ - Qiita
　https://qiita.com/tetunori_lego/items/363d0a47a5bbc4ffabd1

上記の記事の中の「Webアプリとして使うための準備」「Canvasのサイズ」という項目に書かれている内容を、ベースにした内容の修正に使っています。

機器構成

デバイス

今回、iPad は以下でポストしていた Type-Cコネクタの第10世代を用いました。

そして、DualShock 4 は USBケーブルで直接 iPadに接続しています（※ iPad側は Type-C、DualShock 4側は Micro USB Type-B）。

さらに、Safari で表示しているページは、PC上のローカルサーバーを使って動作させています。そのローカルサーバーは、ローカルネットワーク内からだけでなく、インターネットから見えるようにしているのですが、以下でその話を補足します。

ネットワークまわりの部分

PC上のローカルサーバーをインターネットからアクセスできるようにする、という話です。

そういった構成をとるときに用いるもので「ngrok」が有名ですが、今回は、過去に以下の記事に書いていた VSCode標準の機能を使いました。

●VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
　https://qiita.com/youtoy/items/56e48c84d6a2f0549155

こちらを用いることで、「https://●●.devtunnels.ms/」という URL を使い、ローカルのサーバーにインターネット側からアクセスすることが可能になります。

p5.js ＋ iPad（Safari）の組み合わせで「DualShock 4」を扱う：ブラウザの Gamepad API利用 ＋ VSCode の活用