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

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」定番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)http://****.xsrv.jp/ の場合
     →/****.xsrv.jp/public_html

 (例2)http://独自ドメイン名/ の場合
     →/独自ドメイン名/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:%{HTTP: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に埋め込む方法について説明した

参考
Unity | WebGLをWordPressブログに貼り付ける | Blue_Breath_Blog
参考:Uncaught ReferenceError: unityFramework is not defined at HTMLScriptElement.script.onload (WebGL)
【Unity2020】WebGLをWordPressにアップしよう!!!
最近Unityで制作していたゲームが完成しまして、あるぱかUnityで作っていたゲームをブログにアップしたい!と思って色々と試してみましたが、これがなかなか難しい・・・調べてみてもなかなか情報が無かったため、今回は私が実体験に基づく「Web
FFFTPでWordPressにファイルをアップロードする使い方 : RB College
WordPressでFTPソフトを使った方がいいってなぜ?サーバーにファイルをアップロードするFTPの使い方が知りたい! こんなお悩みに答える記事となっています。 ✅本記事の内容 FFFTPはファイル転送ソフトです。 基 …
【Unity】WebGLでのビルド時にInvalid build pathのエラーが出る解決法 : Lab 7 in Singapore
Unity での開発時、私はターゲットのプラットフォームを WebGL で開発する機会がなかったのですが。最近開発して知った知識を備忘を兼ねて共有します。WebGLにビルドする際のエラーについて。他のプラットフォームで開発していた人が WebGLで初めてビルドすると「Invalid bui
UnityのWebGLでwasmのMIMEに関して表示される警告を回避する - Qiita
Unityで練習として構築中のプロジェクトをWebGLでサーバにアップロードしたら変なメッセージが出た。 多分、MIMEが登録されていないという警告だと思う。 MIMEについては世界中に良い説明がたくさんあると思うので割愛けど、今...

コメント

タイトルとURLをコピーしました