Unityで作ったゲームをXserverにアップロードしてWordpressの記事に載せる方法の備忘録です。
WebGL設定
参考記事
【Unity】WebGLをFFFTPでXServerにアップしてWordPressに埋め込む
Unity 2020.3.35f1で作ったWebGLをFFFTPでXServerにアップしてWordPressに埋め込む方法について説明する
mtkbirdman.com
WebGLビルド手順
- ビルド設定を開く
- メニューから「File > Build Settings…」をクリックします。
- シーンの選択
- 「Scenes In Build」でビルドするシーンにチェックを入れます。
- 左下の「Player Settings…」をクリックします。
- プロジェクト設定の変更
- Project Settingsが開きます。
- 「Player > Settings for WebGL > Publishing Settings」で以下を設定します：
- 「Decompression Fallback」にチェックを入れます。
- 「Data Caching」のチェックを外します。
- 「Compression Format」を「Disabled」に設定します。
- ビルドの実行
- Project Settingsを閉じて、Build Settingsの右下にある「Build」をクリックします。
- プロジェクトディレクトリ内に新しいフォルダを作成して選択し、「Select Folder」をクリックします。
- ビルドの完了
- ビルドが始まり、数分で完了します。
- ビルドフォルダ内に「Build」「TemplateData」「index.html」が作成されます。
以上でUnityでのWebGLビルドが完了です。
特に、「Compression Format」を「Disabled」に設定しないと、アップロードした後にwordpress側で読み込むとエラーが出ます。
XserverへのWebGLビルドのアップロード手順
1. ビルドファイルの準備
UnityでWebGLビルドを完了させ、以下のファイルとフォルダが生成されていることを確認します：
index.htmlBuildフォルダTemplateDataフォルダ
2. Xserverのファイルマネージャーにアクセス
- Xserverの管理パネルにログインします。
- 管理パネルから「ファイルマネージャー」にアクセスします。
3. アップロード先フォルダの作成
public_html/wp-content/uploadsフォルダに移動します。- 新しいフォルダを作成します。例えば、
unity_game1という名前のフォルダを作成します。
4. ビルドファイルのアップロード
- 作成した
unity_game1フォルダに、Unityで生成された以下のファイルとフォルダをアップロードします：
index.htmlBuildフォルダTemplateDataフォルダ
5. .htaccessファイルの作成または編集（しなくていい場合もあり）
uploadsフォルダに.htaccessファイルを作成または編集します。- 以下の内容を
.htaccessファイルに追加します：
# Set the correct MIME type for .wasm files
<IfModule mod_mime.c>
AddType application/wasm .wasm
</IfModule>
# Ensure .wasm files are not served with gzip encoding
<IfModule mod_headers.c>
<FilesMatch "\.wasm$">
Header unset Content-Encoding
</FilesMatch>
</IfModule>6. URLの確認
- ブラウザで以下のURLにアクセスし、ファイルが正しく表示されるか確認します：
https://yourdomain.com/wp-content/uploads/unity_game1/index.html
7. WordPress記事に埋め込む
- WordPressにログインし、新しいページまたは投稿を作成します。
- 以下のHTMLコードをページまたは投稿に埋め込みます：
<iframe src="https://yourdomain.com/wp-content/uploads/unity_game1/index.html" width="960" height="600"></iframe>- 記事を公開して、埋め込まれたゲームが正しく表示されるか確認します。
これで、Unity WebGLビルドをXserverにアップロードし、WordPressで表示するための手順が完了です。
