Unity

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

投稿日:2020年5月9日 更新日:

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

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

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

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」というゲームです。

http://otaku-tomo.com/wp-content/uploads/tanks/

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

おわりに

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

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

-Unity
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

Unity Learn premiumの無料化について

有料であったUnity Learn premiumが無料になったため、Unity Learn premiumについて説明していきます。 Unity Learn premiumの無料化について 先ほど、 …

Unity Learn Premiumとは?

Unity Learn Premiumとは何かやどんなことが学べるかを知りたい方に向けてまとめました。 Unity Learn Premiumとは? 「Unity Learn Premium」とは、U …

Unity LearnのRoll a Ballを作成 初心者おすすめ~カメラの移動~

Unityを学びたい初心者の方や基礎を学びたい方に向けて、Unityが公式で紹介しているRoll a Ballをまとめました。今回は第3章のカメラの移動についてです。 こちらは、以下の第2章からのつづ …

Unityのフォントサイズの変え方・変更できない場合の対応策

はじめに Unityを使い始めて、最初にフォントサイズの変え方に困りました。 UIのTextにあるFontSizeを変更しても文字のサイズが変更されませんでした。 フォントサイズの変え方 Textでは …

CanvasとText~Unity~

はじめに 今回は、UnityのUIである「Canvas」と「Text」についてです。これらは、Unityを使っていれば必要なものなので、参考になると思います。 Canvas Canvasとは、UIの要 …