過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>Unity でブラウザゲームを公開するには <strong>File → Build Settings → WebGL</strong> でプラットフォーム切り替え</li><li><strong>Player Settings</strong>: 解像度・圧縮形式（Brotli / Gzip）・WebAssembly Streaming</li><li>ビルド時間短縮: <strong>Code Stripping High / Compression Format = Brotli</strong>、初回ビルドは 30 分かかることも</li><li>公開先: <strong>itch.io</strong>（無料・最も簡単） / <strong>Unity Play</strong>（unity.com 提供） / <strong>自前サーバー</strong></li><li>自前サーバーは Apache/Nginx で <strong>.gz / .br ファイルの MIME type 設定</strong>が必須（Content-Encoding 付与）</li></ul></td></tr></table>
<h2>Unity WebGL とは</h2>

<p>Unity プロジェクトを <strong>WebAssembly + JavaScript</strong> にビルドし、ブラウザだけで動作させる仕組み。プラグインインストール不要で、URL を開くだけでゲームが起動します。</p>

<h2>WebGL ビルドの準備</h2>

<ol>
<li>Unity Hub → モジュール追加で <strong>WebGL Build Support</strong> をインストール</li>
<li>File → Build Settings → <strong>WebGL</strong> 選択 → <strong>Switch Platform</strong></li>
<li>初回プラットフォーム切替は 5-30 分（全アセット再インポート）</li>
</ol>

<h2>Player Settings 推奨設定</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>推奨値</th><th>理由</th></tr></thead>
<tbody>
<tr><td>Compression Format</td><td><strong>Brotli</strong>（最高圧縮） or Gzip（互換性）</td><td>転送量を 4-5 割削減</td></tr>
<tr><td>Decompression Fallback</td><td>Off（HTTPS のみ運用なら）</td><td>サイズ削減</td></tr>
<tr><td>Data Caching</td><td>On</td><td>2 回目以降の起動高速化（IndexedDB キャッシュ）</td></tr>
<tr><td>Code Optimization</td><td><strong>Speed</strong>（リリース時）</td><td>実行速度優先</td></tr>
<tr><td>Linker Target</td><td>WebAssembly</td><td>asm.js は非推奨</td></tr>
<tr><td>Managed Stripping Level</td><td><strong>High</strong></td><td>不要コードを除去してサイズ削減</td></tr>
<tr><td>Default Canvas Width / Height</td><td>960 × 600 等</td><td>HTML テンプレートに反映</td></tr>
</tbody>
</table>

<h2>ビルド</h2>

<ol>
<li>Build Settings → <strong>Build</strong>（実行せずファイル生成のみ）</li>
<li>出力フォルダを選ぶ → 5〜30 分待つ</li>
<li>出力構成:</li>
</ol>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-text">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</code></pre>
<h2>ローカル確認（重要）</h2>

<p><code>file://</code> で開いても動きません。HTTP サーバーが必要です:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># Python 簡易サーバー
cd WebGLBuild
python3 -m http.server 8000
# → http://localhost:8000

# Unity 自体に試験サーバー: Build And Run で自動立ち上げ

# npx serve でも OK
npx serve -p 8000</code></pre>
<h2>公開先 1: itch.io（無料・最も簡単）</h2>

<ol>
<li><a href="https://itch.io">itch.io</a> でアカウント作成 → Upload new project</li>
<li>Kind of project: <strong>HTML</strong></li>
<li>WebGLBuild フォルダを zip 圧縮（Build / TemplateData / index.html を含める）</li>
<li>This file will be played in the browser にチェック</li>
<li>Viewport dimensions を Unity の Canvas サイズに合わせる</li>
<li>Save & view page</li>
</ol>

<p>itch.io は<strong>無料で広告なし</strong>、収益化（任意の値段 + 自動分配）も可能。</p>

<h2>公開先 2: Unity Play（公式ホスティング）</h2>

<p><a href="https://play.unity.com">play.unity.com</a> に Unity アカウントでログイン → <strong>Publisher Dashboard</strong> から WebGL ビルドの zip をアップロード。Unity 公式コミュニティに公開されます。</p>

<h2>公開先 3: 自前サーバー（Apache / Nginx）</h2>

<p>Brotli / Gzip 圧縮ファイルを配信する場合、<strong>Content-Encoding ヘッダの設定が必須</strong>です。設定しないと「Unable to parse Build/xxx.wasm」エラーで起動失敗します。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-apache"># .htaccess
<IfModule mod_mime.c>
    AddType application/octet-stream .data .wasm .symbols.json
    AddType application/javascript .js
</IfModule>

# Brotli 圧縮の場合
<FilesMatch "\.br$">
    AddType "application/octet-stream" .br
    Header set Content-Encoding br
</FilesMatch>

# Gzip 圧縮の場合
<FilesMatch "\.gz$">
    AddType "application/octet-stream" .gz
    Header set Content-Encoding gzip
</FilesMatch>

# .wasm の MIME type 修正
<FilesMatch "\.wasm$">
    AddType application/wasm .wasm
</FilesMatch></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-nginx"># 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;
    }
}</code></pre>
<h2>ビルドサイズを減らすコツ</h2>

<ul>
<li><strong>Texture Import Settings</strong>: WebGL 用に <strong>Max Size 1024</strong> + <strong>Compressed</strong></li>
<li><strong>Audio</strong>: Vorbis 圧縮、Quality 50% 程度</li>
<li><strong>Code Stripping High</strong> でリフレクション削除（IL2CPP）</li>
<li><strong>Addressables</strong> で必要時のみダウンロード</li>
<li><strong>Asset Bundles</strong> で起動時の DL を分割</li>
</ul>

<h2>iframe で埋め込む</h2>

<p>自分のサイトに埋め込みたい場合:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><iframe
    src="https://example.com/game/index.html"
    width="960"
    height="600"
    frameborder="0"
    allowfullscreen
    allow="autoplay; fullscreen; gamepad">
</iframe></code></pre>
<h2>よくあるトラブル</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>症状</th><th>原因</th><th>対処</th></tr></thead>
<tbody>
<tr><td>Failed to download file ... .wasm</td><td>サーバの MIME type 設定漏れ</td><td>Content-Encoding 設定 / Decompression Fallback 有効化</td></tr>
<tr><td>UnauthorizedAccessException</td><td>PlayerPrefs の保存先がブラウザ制限</td><td>IndexedDB が使えるか確認、ローカルストレージ確認</td></tr>
<tr><td>音が出ない</td><td>ブラウザの autoplay policy</td><td>ユーザー操作後に AudioListener.volume を設定</td></tr>
<tr><td>iOS Safari でクラッシュ</td><td>メモリ不足</td><td>Texture を縮小、初期 Heap Size を下げる</td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: モバイル対応はどうなる？</strong><br />
A: Unity 公式では「WebGL on mobile is not officially supported」だが、軽量なら動きます。タッチ操作は <code>Input.touchCount</code> で対応。</p>

<p><strong>Q: Unreal Engine でも WebGL ビルドできる？</strong><br />
A: UE4 までは可能でしたが、UE5 では HTML5 ターゲットは廃止されました。サードパーティの WebAssembly プラグインが必要。</p>

<p><strong>Q: WebGPU 対応は？</strong><br />
A: Unity 2023.2+ で Experimental サポート。Chrome 113+ で動作確認可能ですが、まだ実験段階です。</p>