■経緯
WordPressで自作ゲームを公開したいと思い試行錯誤してみました。圧縮方式(Gzip)と.htaccess設定に少々悩んだので共有します。
なお、サーバはConoHa Wingです。
必要な作業
1. Build Settings -> Player Settings -> Publishing Settings -> Compression Format ->Gzip
2. Unityで作成したゲームをWebGLとしてBuildする。
3. ファイルマネージャを使用し、以下のフォルダにビルドされたファイルをおく。
https://【ドメイン】/wp-content/uploads/【ゲーム名】
├── index.html
├── Build/
└── TemplateData/
4. ConoHaコントロールパネル -> サイト管理 -> サイト設定 -> 応用設定 -> .htaccess設定
5. 以下を入力
.htaccess設定
# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
# Unity WebGLゲームのMIMEタイプとエンコーディング設定
<IfModule mod_mime>
# 圧縮されたファイル用のMIMEタイプを設定
AddType application/wasm .wasm.gz
AddType application/javascript .js.gz
AddType application/octet-stream .data.gz
</IfModule>
<IfModule mod_headers.c>
# .gzで終わるファイルにContent-Encoding: gzipヘッダーを付与
<FilesMatch "\.(js|unityweb|wasm|data)\.gz$">
Header set Content-Encoding gzip
</FilesMatch>
# 各ファイルタイプに正しいContent-Typeを設定
<FilesMatch "\.js\.gz$">
Header set Content-Type application/javascript
</FilesMatch>
<FilesMatch "\.data\.gz$">
Header set Content-Type application/octet-stream
</FilesMatch>
<FilesMatch "\.wasm\.gz$">
Header set Content-Type application/wasm
</FilesMatch>
</IfModule>
6. 埋め込みたいページにカスタムHTMLブロックを設置し、以下を入力(サイズは任意)
WebGL埋め込み
<iframe src="https://【ドメイン】/wp-content/uploads/【ゲームフォルダ】/index.html" width="100%" height="600" style="border:0;"></iframe>
コツ：適宜ブラウザのキャッシュを削除したほうが良いです。