免責事項
本記事の内容は個人の見解であり、所属する企業の公式な見解や方針を代表するものではありません。
また、本記事の内容は完全に個人の趣味・学習の範囲で行っているものです。
本記事で紹介する取り組みは、業務とは切り離された個人のローカル環境およびプライベートリポジトリで実行しています。
内容には正確性を期していますが、誤りや不適切な記述が含まれている可能性があります。お気づきの点がございましたら、ご指摘いただけますと幸いです。

事の経緯

Godot 4を利用し、アプリのインストールが不要で手軽に遊べるWeb（PCブラウザ）向けのゲームを開発していました。
開発を進める中で、「せっかくならスマートフォンのブラウザでも遊べるようにしたい」と考え、スマホ対応を進めることにしました。

しかし、実装を進めていく内に、スマートフォン特有の操作感や、ブラウザ上で実際にゲームを起動した時のプレイフィールの検証が不可欠だと感じるようになりました。
そのため、PC上のGodotエディタから自分のスマートフォンへ繋ぎ、手軽に実機デバッグを行う環境が必要になりました。

本記事は、そのスマホデバッグ環境を構築しようとしていくつかの壁にぶつかり、最終的に解決するまで試行錯誤した過程の備忘録です。

前提環境

Godot Engine 4.x
開発用PCとテスト用スマートフォンが同一のローカルネットワーク（Wi-Fi）に接続されている状態

第1の壁：接続がタイムアウトする

最初に試したのは、Godotエディタに備わっている「ブラウザでリモートデバッグ」機能です。
PCのブラウザでは無事にゲームが起動したため、そのまま同じネットワークにいるスマートフォンからPCのIPアドレス（例：http://192.168.0.x:8060/）へとアクセスしてみたものの、接続がタイムアウトしてしまいました。

調べてみると、Godot内蔵の簡易HTTPサーバーは、初期状態でローカルホスト（127.0.0.1）にのみバインドされていることがわかりました。
外部ネットワークからのアクセスは全て拒否される仕様になっていたのです。

これは、Godotエディタのメニューから「エディター」の「エディター設定」を開き、「エクスポート」の「Web」の中にある「HTTP Host」の値を0.0.0.0に変更することで解決しました。

第2の壁： HTTP ERROR 404 (Not Found) になる

IPアドレスを指定しての接続が成功するようになったものの、今度はスマートフォンのブラウザに「HTTP ERROR 404 (Not Found)」と表示されてしまいました。

原因は、Godotの簡易HTTPサーバーがエクスポート時に特定のファイル名（プロジェクト名.htmlやtmp_export.htmlなど）でファイルを生成していることでした。
ルートディレクトリ（/）にindex.htmlを自動生成するわけではないため、ディレクトリ名だけのアクセスではファイルを見つけることができません。

PCのブラウザで正常に起動しているURLの末尾を確認し、スマートフォンのブラウザでもそのファイル名までを正確に入力する（例：http://192.168.0.x:8060/プロジェクト名.html）ことで、この壁は越えることができました。

第3の壁： Cross-Origin Isolationのエラーで起動しない

正しいファイル名にアクセスし、ようやくGodotのロード画面が表示されたのも束の間、直後にエラーが発生してゲームが停止してしまいました。
エラーメッセージには「Cross-Origin Isolationが欠如している」「HTTPSを使用する必要がある」といった内容が含まれていました。
HTTPS関連のエラーが出ていたことからブラウザのセキュリティ機能にブロックされているものと推測し、様々な方法でこれを回避しようとしました。

迷走：採用を見送ったその他の回避策

HTTPSにするのは面倒そうだったので、まずはHTTPS化を避けるためいくつかの手法も検討し、実際に試してみました。
しかし、どれも手軽なテスト環境という目的に合わず、採用を見送ることになりました。

AndroidのUSBワンクリックデプロイ
筆者はAndroidスマートフォンを使用しているので、この方法が使えるのではないかと考えました。
しかし、Godot側にAndroid SDKやKeystoreの設定が必要となり、手軽な動作確認としては準備のハードルが高すぎました。
Chromeのポートフォワーディング（chrome://inspect）
PCとスマートフォンをUSBで接続し、PCのポートをスマートフォンのlocalhostに直結させる手法です。
しかし、スマートフォンのUSBデバッグ権限やADB接続の事前設定が必要であり、環境構築の手間がかかります。
スマホ版Chromeの隠しフラグ（chrome://flags）
unsafely-treat-insecure-origin-as-secureにPCのIPアドレスを登録し、例外的に安全とみなさせる手法です。
こちらは実際に設定してみたものの、少なくとも筆者の環境では上手く機能しなかったため、断念しました。

最終的な解決策： TLS証明書（オレオレ証明書）の導入

色々と回り道をしましたが、最終的には「Godotの簡易HTTPサーバーをHTTPS化する」という正攻法に近いアプローチに落ち着きました。

コマンドラインでopensslなどを使用し、独自の暗号化鍵（debug.key）と証明書（debug.crt）を生成します。
生成したファイルをプロジェクトのディレクトリ内に配置します。
そして、Godotの「エディター設定」から「エクスポート」の「Web」を開き、「Use TLS」をオンにして先ほどの鍵と証明書のパスを指定しました。

あとはスマートフォンのブラウザから、http://ではなくhttps://で始まるURLにアクセスするだけです。
自己署名証明書のためブラウザからは警告が表示されますが、詳細設定から「安全ではないページへ移動」などを選択してアクセスします。

これにより、無事にHTTPS環境として認識され、Godotのセキュリティ要件をパスしてスマートフォン実機上でゲームが動作するようになりました。

まとめ

手軽にスマホでテストしたいだけだったのですが、Godot 4のWebエクスポートを利用してスマートフォン実機でデバッグを行うには、ネットワークアクセスとHTTPSの壁という複数の障壁を越える必要がありました。
結果的に、「HTTP Host」を0.0.0.0に変更し、TLS証明書を生成してエディタに読み込ませる手順がもっとも手軽で確実な方法だと感じています。
一度証明書を設定してしまえば、以後はWi-Fi経由で素早く動作確認が可能になります。

最後に、本記事の内容は執筆時点の検証に基づいたものであり、環境の差異等により想定通りに動作しない、あるいは記述に誤りが含まれている可能性がございます。
もし内容に間違いなどお気づきの点がございましたら、コメント等でご指摘いただけますと幸いです。