Unityで作成したWebGLをXserverで公開する方法

Unityで作成したゲームをブログで
公開してみたいという方

そういう方向けにエックスサーバーで
Unityのゲームの公開方法を書きました。

Unityで作成したWebGLをXserverで公開する方法
Unity WebGLでビルド
サーバーにゲームをアップロード
1. ファイルのアップロード方法
  1. Xserverのファイルマネージャーを利用する
  2. FTPを利用する(File Zillaを使用)
2. サーバにアップロードする
公開したゲームの確認
おわりに

Xserver上に作成したゲームを公開する方法は
以下の2つを行います。

作成したゲームをWebGLでビルドする
サーバーにアップロードする

これらを行うことで自分のブログで
作成したゲームを公開することができます。

今回はエックスサーバーを契約する必要がありますので、
まだの方は以下にリンクを張っていますので、契約するか
検討してみてください。

エックスサーバー

Unity WebGLでビルド

作成したゲームを「WebGL」を選択して、
ビルドします。

※ビルドができない場合
　保存先、プロジェクト保存フォルダの
　PATHに日本語が含まている場合は
　ビルドできない可能性がありますので、
　確認してみてください。

実行すると保存先に指定したフォルダに
以下のファイルとフォルダが作成されます。

Buildフォルダ
TemplateDataフォルダ
index.htmlファイル

この作成されたファイルとフォルダを
サーバーに配置することでゲームを公開
できます。

サーバーにゲームをアップロード

ファイルのアップロード方法

サーバーにファイルをアップロードする方法は
以下の2通りあります。

Xserverのファイルマネージャーを利用する
FTPを利用する(File Zillaを使用)

Xserverのファイルマネージャーは、Xserverの既存機能のため、設定が不要で使えます。
しかし、ファイルのアップロードが1つずつのため手間がかかります。
　今回のみ、アップロードしようと考えている方は、こちらがおすすめです。

FTPを利用してアップロードは、ファイルをまとめてアップロードをすることができるため、アップロードが簡単で早くできます。
しかし、初めて使うのみとき設定が必要です。
　これから、何度かアップロードしようと考えている方は、こちらが
おすすめです！

私の個人的な感想では、一度設定すれば楽にアップロードできるため、FTPを利用した方がらくでした。

Xserverのファイルマネージャーを利用する

Xserverのファイルマネージャーは簡単にアップ
ロードすることができますが、フォルダごとアップ
ロードできません。そのため、ファイルが多いと1つ
1つアップロードするため、時間がかかります。

Xserverのファイルマネージャー
※以下を入力してログインして使用します。
　（サーバーパネルのユーザー・パスワードと同一です）
　・【FTPユーザー】
　・【FTPパスワード】

FTPを利用する(File Zillaを使用)

FTPソフトを使用してファイルをアップロードすると
ファイルだけでなく、フォルダごとサーバにアップロ
ードするこができるため、簡単です。

XserverのFTPの設定は公式で以下のリンクで説明され
ています。
XserverのFTP設定

わかりにくい方は以下に私が参考にした方のページがあ
りますので、良かったら参考にしてください。
画像もついておりわかりやすかったため、おすすめです。
File Zillaの設定

サーバにアップロードする

サーバーにアップロードできるようになったため、
アップロードしていきます。

ファイルをアップロードする場所は以下のPATHの配下に
アップロードします。

/home/(ユーザー名) /(自身のサイトの名前)/public_html/wp-content/uploads

私の場合では以下の様にしました。
※rollaballというフォルダを作成し、配下に配置しています。
　今後、いくつかゲームを作成した際にわかりやすくするためです。

/home/(ユーザー名)/otaku-tomo.com/public_html/wp-content/uploads/rollaball

アップロードするのは、先ほどビルドした際に作成された
以下の3つを
rollaballフォルダの配下に配置しました。

Buildフォルダ
TemplateDataフォルダ
index.htmlファイル

配置できましたら、ブログで公開する準備が整いました。

公開したゲームの確認

配置できましたら、
http://(自身のサイト名)/wp-content/uploads(/フォルダ名)/
にアクセスすることで確認できます。

以下のリンクは実際に私が公開している「Roll a Ball」
というゲームです。
http://otaku-tomo.com/wp-content/uploads/rollaball/

以下のリンクは、私が作成した「tanks」というゲームです。

Unity WebGL Player | tanks

表示されたページのレイアウトを変更したい場合はindex.html
を編集する必要があります。
index.htmlを編集することで、ゲームの操作説明等を入れる
ことができます。

おわりに

Unityで作成したゲームをXserverで公開する方法について
書きました。

不明点や指摘等がありましたら、コメントいただけると助かり
ます。
※今回のこと以外でもゲームを公開する中で、不明点等でわからないことがでてくると思います。その際は、1人で悩まずに気兼ね
なく、相談してください。
コメントまたはtwitterで連絡をお待ちしています。
twiiterアカウント~otakutomo~