ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
Unity WebGL とは
Unity プロジェクトを WebAssembly + JavaScript にビルドし、ブラウザだけで動作させる仕組み。プラグインインストール不要で、URL を開くだけでゲームが起動します。
WebGL ビルドの準備
- Unity Hub → モジュール追加で WebGL Build Support をインストール
- File → Build Settings → WebGL 選択 → Switch Platform
- 初回プラットフォーム切替は 5-30 分(全アセット再インポート)
Player Settings 推奨設定
| 項目 | 推奨値 | 理由 |
|---|---|---|
| Compression Format | Brotli(最高圧縮) or Gzip(互換性) | 転送量を 4-5 割削減 |
| Decompression Fallback | Off(HTTPS のみ運用なら) | サイズ削減 |
| Data Caching | On | 2 回目以降の起動高速化(IndexedDB キャッシュ) |
| Code Optimization | Speed(リリース時) | 実行速度優先 |
| Linker Target | WebAssembly | asm.js は非推奨 |
| Managed Stripping Level | High | 不要コードを除去してサイズ削減 |
| Default Canvas Width / Height | 960 × 600 等 | HTML テンプレートに反映 |
ビルド
- Build Settings → Build(実行せずファイル生成のみ)
- 出力フォルダを選ぶ → 5〜30 分待つ
- 出力構成:
WebGLBuild/
├── index.html # 起動 HTML
├── Build/
│ ├── WebGLBuild.loader.js
│ ├── WebGLBuild.framework.js.br # Brotli 圧縮 (or .gz)
│ ├── WebGLBuild.data.br
│ └── WebGLBuild.wasm.br
├── TemplateData/
│ ├── style.css
│ └── favicon.ico
ローカル確認(重要)
file:// で開いても動きません。HTTP サーバーが必要です:
# Python 簡易サーバー
cd WebGLBuild
python3 -m http.server 8000
# → http://localhost:8000
# Unity 自体に試験サーバー: Build And Run で自動立ち上げ
# npx serve でも OK
npx serve -p 8000
公開先 1: itch.io(無料・最も簡単)
- itch.io でアカウント作成 → Upload new project
- Kind of project: HTML
- WebGLBuild フォルダを zip 圧縮(Build / TemplateData / index.html を含める)
- This file will be played in the browser にチェック
- Viewport dimensions を Unity の Canvas サイズに合わせる
- Save & view page
itch.io は無料で広告なし、収益化(任意の値段 + 自動分配)も可能。
公開先 2: Unity Play(公式ホスティング)
play.unity.com に Unity アカウントでログイン → Publisher Dashboard から WebGL ビルドの zip をアップロード。Unity 公式コミュニティに公開されます。
公開先 3: 自前サーバー(Apache / Nginx)
Brotli / Gzip 圧縮ファイルを配信する場合、Content-Encoding ヘッダの設定が必須です。設定しないと「Unable to parse Build/xxx.wasm」エラーで起動失敗します。
# .htaccess
AddType application/octet-stream .data .wasm .symbols.json
AddType application/javascript .js
# Brotli 圧縮の場合
AddType "application/octet-stream" .br
Header set Content-Encoding br
# Gzip 圧縮の場合
AddType "application/octet-stream" .gz
Header set Content-Encoding gzip
# .wasm の MIME type 修正
AddType application/wasm .wasm
# Nginx の場合
server {
listen 80;
server_name game.example.com;
root /var/www/game/WebGLBuild;
location ~ \.wasm\.br$ {
default_type application/wasm;
add_header Content-Encoding br;
}
location ~ \.js\.br$ {
default_type application/javascript;
add_header Content-Encoding br;
}
location ~ \.data\.br$ {
default_type application/octet-stream;
add_header Content-Encoding br;
}
# gzip 版
location ~ \.wasm\.gz$ {
default_type application/wasm;
add_header Content-Encoding gzip;
}
}
ビルドサイズを減らすコツ
- Texture Import Settings: WebGL 用に Max Size 1024 + Compressed
- Audio: Vorbis 圧縮、Quality 50% 程度
- Code Stripping High でリフレクション削除(IL2CPP)
- Addressables で必要時のみダウンロード
- Asset Bundles で起動時の DL を分割
iframe で埋め込む
自分のサイトに埋め込みたい場合:
よくあるトラブル
| 症状 | 原因 | 対処 |
|---|---|---|
| Failed to download file ... .wasm | サーバの MIME type 設定漏れ | Content-Encoding 設定 / Decompression Fallback 有効化 |
| UnauthorizedAccessException | PlayerPrefs の保存先がブラウザ制限 | IndexedDB が使えるか確認、ローカルストレージ確認 |
| 音が出ない | ブラウザの autoplay policy | ユーザー操作後に AudioListener.volume を設定 |
| iOS Safari でクラッシュ | メモリ不足 | Texture を縮小、初期 Heap Size を下げる |
FAQ
Q: モバイル対応はどうなる?
A: Unity 公式では「WebGL on mobile is not officially supported」だが、軽量なら動きます。タッチ操作は Input.touchCount で対応。
Q: Unreal Engine でも WebGL ビルドできる?
A: UE4 までは可能でしたが、UE5 では HTML5 ターゲットは廃止されました。サードパーティの WebAssembly プラグインが必要。
Q: WebGPU 対応は?
A: Unity 2023.2+ で Experimental サポート。Chrome 113+ で動作確認可能ですが、まだ実験段階です。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
- ブラウザゲームの公開
- 重い場合の対処法
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Laravel キャッシュクリア完全ガイド(cache:clear / config:clear / 2026-05-18 07:42:07
- プロジェクトの作成と削除 2026-05-18 07:42:07
- インストール直後にNetbeansが反応しない 2026-05-18 07:42:07
- 動画やチャンネルの検索 2026-05-18 07:42:07
- APIキー取得方法 2026-05-18 07:42:07
- チャンネル情報の取得 2026-05-18 07:42:07
- API 入門 — Web API(REST / GraphQL / gRPC / 2026-05-18 07:42:07
- インストール(eclipseプラグイン) 2026-05-18 07:42:07
- Laravel「Dotenv values containing spaces must be surrounded 2026-05-18 07:42:07
- エラー一覧 2026-05-18 07:42:07
- curl: (51) SSL: certificate subject name '~' does not match 2026-05-18 07:42:07
- インストール方法(Windows版) 2026-05-18 07:42:07
- JSONから配列に変換 2026-05-18 07:42:07
- 処理を一定時間待つ 2026-05-18 07:42:07
- A non well formed numeric value encountered 2026-05-18 07:42:07
コメントを削除してもよろしいでしょうか?