投稿する
マガジン
著者：アソバース編集部公開：更新：約9分で読めます

GodotのHTML5エクスポート完全ガイド：公開までの全工程

遊びをつくる

執筆にClaudeを使用しています。

三つの透明な箱に並ぶ入力キー、球の動く仕組み、小さなゲームの舞台を赤い糸でつないだ模型。
記事のテーマをもとに制作したAI生成の写真風イメージ。

GodotでゲームをHTML5向けにエクスポートすると、インストール不要でブラウザからすぐに遊べるファイル一式が出力されます。しかし「エクスポートボタンを押せば終わり」ではなく、テンプレートの準備・サーバー要件・SharedArrayBufferの制約など、詰まりやすいポイントが工程ごとに存在します。この記事ではGodot 4系を前提に、エクスポートの設定から動作確認・公開までの全工程を順に解説します。 Godot 3系と4系ではエクスポートの出力ファイル構成や必要なHTTPヘッダーが異なります。すでにGodot 3で経験がある方も、4系では改めて確認が必要な箇所があるため、各ステップで両者の違いに触れます。

この記事の目次
  1. エクスポートテンプレートを準備する
  2. エクスポートオプションの判断基準
  3. 出力ファイルの構成と役割
  4. ローカルでの動作確認
  5. サーバーへのアップロードと公開設定
  6. 次の行動
  7. 参考資料

エクスポートテンプレートを準備する

HTML5エクスポートを実行するには、まず「エクスポートテンプレート」をダウンロードしてGodotに登録する必要があります。テンプレートはGodot本体とは別に配布されており、バージョンが一致していないとエクスポートが失敗します。

Godotのメニューから「エディター → エクスポートテンプレートの管理」を開き、「ダウンロード」ボタンから現在使っているバージョンと完全に一致するテンプレートを取得してください。ネットワーク経由で自動取得できない環境では、Godotの公式サイトからtpzファイルを手動でダウンロードし、同じ画面の「ファイルからインストール」で登録します。

テンプレートの登録が済んだら、「プロジェクト → エクスポート」でエクスポートダイアログを開き、「追加」から「Web」を選びます。プリセットが作成されたら、出力先のパスとファイル名（例：index.html）を指定します。ファイル名をindex.htmlにしておくと、多くのWebサーバーでパス末尾の/だけでアクセスできるため、公開後のURLがきれいになります。

エクスポートオプションの判断基準

エクスポートダイアログには多くのオプションがあります。初めて公開する場合に特に判断が必要な項目を以下に示します。

スレッドの有効・無効

Godot 4のHTML5エクスポートには「スレッドあり」と「スレッドなし」の二つのモードがあります。スレッドありのビルドは処理を並列化できる分パフォーマンスが高くなりますが、ブラウザ側でSharedArrayBufferが有効になっている必要があります。SharedArrayBufferはセキュリティ上の理由から、サーバーが特定のHTTPレスポンスヘッダーを返す場合にのみ使えます。

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

この二つのヘッダーを自分でサーバーに設定できる環境（VPS・自分で管理するホスティングなど）ならスレッドありを選べます。GitHub PagesやNetlifyなどの静的ホスティングでは、設定ファイルでこれらのヘッダーを追加できる場合とできない場合があります。公式ドキュメントや各サービスの設定ドキュメントで現在の対応状況を確認してください。

ヘッダーを設定できない環境では「スレッドなし」を選ぶのが安全です。スレッドなしでも多くの2Dゲームは十分に動作します。

GDScriptのデバッグ情報

デバッグビルドはエラーの詳細が残るため開発中には有用ですが、ファイルサイズが大きくなります。公開用には「リリース」を選んでください。

カスタムHTMLシェル

GodotはデフォルトのHTMLテンプレートを出力しますが、ローディング画面のデザインや周囲のUIを自分でコントロールしたい場合はカスタムHTMLシェルを使います。公式リポジトリにサンプルのHTMLテンプレートが公開されているので、それをベースに改変するのが最も効率的です。

出力ファイルの構成と役割

エクスポートが完了すると、いくつかのファイルが出力されます。代表的な構成は次のとおりです。

  • index.html、役割：エントリポイント。ブラウザはここを読み込む
  • index.js、役割：Godotエンジン本体のJavaScriptコード
  • index.wasm、役割：WebAssembly形式のバイナリ
  • index.pck、役割：ゲームのアセットとスクリプトが格納されたパック
  • index.audio.worklet.js、役割：オーディオ処理用のワーカースクリプト（Godot 4）

これらのファイルはすべて同じディレクトリに置く必要があります。一部だけアップロードすると読み込みに失敗します。また.wasmファイルは数MB〜数十MBになることが多く、転送量に注意が必要です。

ローカルでの動作確認

エクスポートしたファイルをダブルクリックでブラウザに開いても、セキュリティ制約により正常に動作しません。ローカルでテストするには、ローカルサーバーを立てる必要があります。

Pythonが使える環境では次のコマンドが手軽です（Python 3の場合）。

python -m http.server 8080

出力ディレクトリで実行し、ブラウザからhttp://localhost:8080を開くとゲームが動作するかを確認できます。スレッドありのビルドをテストする場合は、ローカルサーバー側でも前述のヘッダーを返す必要があります。Pythonの標準サーバーではヘッダーを追加できないため、http-server（Node.js）など設定できるツールを使ってください。

動作確認で確認すべき主なポイントは次のとおりです。

  1. ゲームが起動してタイトル画面まで進むか
  2. サウンドが再生されるか（ブラウザはユーザー操作前のオーディオ自動再生を制限する場合があります）
  3. ゲームパッドや特殊な入力が期待どおりに機能するか
  4. スマートフォンのブラウザでも表示が崩れないか（公開先がモバイル想定の場合）

サーバーへのアップロードと公開設定

ローカルで動作を確認したら、サーバーにファイルをアップロードします。静的ファイルのホスティングであれば、FTPやSFTPでファイル一式を転送するのが一般的です。

MIMEタイプの設定

サーバーが.wasmファイルに対してapplication/wasmというMIMEタイプを返さない場合、ブラウザが読み込みを拒否することがあります。Apache系サーバーでは.htaccessに次のような行を追加します。

AddType application/wasm .wasm

Nginxの場合はmime.typesファイルにwasmが含まれているかを確認してください。多くの最近のディストリビューションでは標準で含まれていますが、古い環境では手動追加が必要です。

SharedArrayBufferヘッダーの設定

スレッドありのビルドを公開する場合は、前述の二つのヘッダーをサーバー側で設定します。Apacheでは.htaccess、Nginxではlocationブロック内に記述します。設定後はブラウザのDevToolsのネットワークタブで、index.htmlへのレスポンスヘッダーを実際に確認してください。

アソバースへの投稿

出力されたファイル一式をZIPにまとめると、アソバースのZIPアップロード機能で直接投稿できます。index.htmlがZIPのルートに置かれている形式にしてください。すでにほかのサーバーで公開済みのURLがある場合は、URLを登録する方法でも公開できます。

次の行動

GodotのHTML5エクスポートを試すときは、まずスレッドなし・リリースビルドの組み合わせで出力し、Pythonのローカルサーバーで動作を確認してから公開先を検討するのが最も詰まりにくい順序です。動作確認が取れたファイル一式はZIPにまとめてアソバースに投稿できるため、公開URLを別途用意しなくてもすぐに共有できます。公開後にサーバー要件の変更が必要になった場合は、スレッドありビルドへの切り替えを改めて検討してください。

参考資料

  • Godot Engine 公式ドキュメント（Exporting for the Web）
  • Godot Engine 公式リポジトリ（カスタムHTMLシェルのサンプル）
  • MDN Web Docs（SharedArrayBuffer、Cross-Origin-Opener-Policy）
マガジン一覧に戻る