Unity 2020.3.35f1で作ったWebGLをFFFTPで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-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への埋め込みは完了である
おわりに
Unity 2020.3.35f1で作ったWebGLをFFFTPでXServerにアップしてWordPressに埋め込む方法について説明した
コメント