【Unity】WebGLをFFFTPでXServerにアップしてWordPressに埋め込む

Unity 2020.3.35f1で作ったWebGLをFFFTPでXServerにアップしてWordPressに埋め込む方法について説明する

はじめに
WebGLをビルドする
XServerにアップロードする
WordPressに埋め込む
おわりに

はじめに

↓最終的にはこんな感じになる

↓作成したゲームの内容についてはこちら

それではいってみよう

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でのビルドは完了である

XServerにアップロードする

ビルドしたファイルをXServerにアップするために，FFFTPをインストールする

窓の杜にアクセスして，FFFTP（64bit版）をダウンロードする

窓の杜

「FFFTP」定番FTPクライアントソフト

ダウンロードした「ffftp-v5.7-x64.msi」をダブルクリックしてインストールする

「次へ」

「次へ」

「インストール」

すぐに終わる

「完了」

Windowsキーを押して検索窓に「ffftp」と入力し，出てきたFFFTPを実行する

「Host List>New Host...」をクリックする

「Profile Name」「Host Name/Address」「Username」「Password/Phrase」を入力する

Profile Nameは任意の文字列，残り3つの文字列はXServerを契約した際のメールに記載されている

【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] (****.xsrv.jp)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▼作成したホームページデータのアップロードについて

お客様にてサイトデータを制作・ご準備の場合、「ファイルマネージャー」やFTPソフトを用いてサーバー上にデータをアップロードすることで、ウェブサイトの公開が可能です。

FTPソフトやホームページ作成ソフトなどでご入力いただくFTP情報は以下のとおりでございます。

　■FTP情報
　--------------------------------------------------------
　FTPホスト名（FTPサーバー名）　　： sv****.xserver.jp
　FTPユーザー名（FTPアカウント名）： ****
　FTPパスワード　　　　　　　　　： ****
　--------------------------------------------------------

　※FTPユーザー/FTPパスワードは、サーバーID/サーバーパスワードと同一です。

FTPソフトの設定手順詳細は、以下のマニュアルをご参照ください。

　◇[マニュアル] FTPソフトの設定
　　https://www.xserver.ne.jp/manual/man_ftp_setting.php

サイトデータのアップロード先（ルートディレクトリ）は/ドメイン名/public_htmlでございます。
また、アップロード後のルートディレクトリの変更には対応しておりません。

　（例1）https://****.xsrv.jp/　の場合
　　　　　→/****.xsrv.jp/public_html

　（例2）https://独自ドメイン名/　の場合
　　　　　→/独自ドメイン名/public_html

アップロード先に誤りがありますと、正しくホームページの公開ができませんので、ご注意ください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ホストを追加したら左下の「Connect」をクリックする

左の窓にはUnityでビルドしたファイルがあるローカルのパスを入力する
右の窓にはXServer上の任意のパス（今回は「XXX/public_html/wp-content/uploads/Unity」を新しく作成）

左の窓で3つのファイルを選択し，右の窓にドラッグ&ドロップする

ファイルがアップロードされる

以上でXServerへのアップロードは完了である

WordPressに埋め込む

XServerにアップしたWebGLのファイルをWordPressに埋め込む

WebGLを埋め込みたいページにHTMLブロックを追加し，以下のコードを入力する

<iframe src="https://XXX.com/wp-content/uploads/Unity/index.html" width="1024" height="576" scrolling="no" frameborder="0"></iframe>

srcはXServerにあるindex.htmlへのパスを設定する

この状態でプレビューを見てみると下のような警告が出ている

上記のエラーをなくすために，「XXX.com/public_html/.htaccess」をローカルにダウンロードして書き換える

書き換えは以下の通り

SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode

<IfModule mod_mime.c>
AddType application/wasm wasm
</IfModule>

#SITEGUARD_PLUGIN_SETTINGS_START
#==== SITEGUARD_RENAME_LOGIN_SETTINGS_START
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /
    RewriteRule ^wp-signup\.php 404-siteguard [L]
    RewriteRule ^wp-activate\.php 404-siteguard [L]
    RewriteRule ^login_mtkbirdman(.*)$ wp-login.php$1 [L]
</IfModule>
#==== SITEGUARD_RENAME_LOGIN_SETTINGS_END
#SITEGUARD_PLUGIN_SETTINGS_END

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{https:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

4～6行目が追記した部分である

書き換えたらFFFTPでXServerにアップしなおす

これでWordPressへの埋め込みは完了である