前半の記事では、Unityを使ってドロップダウンリストで選択したオブジェクトの色をボタン操作で変更する方法を紹介しました。この記事では、そのUnityプロジェクトをWebGL形式でビルドし、ロリポップサーバーにアップロードするプロセス、そしてSTUDIOを使ってウェブサイトに実装する手順を解説します。この一連のプロセスを通じて、Unityを使ったウェブ開発の可能性を広げることができます。

プロジェクトをWebGL形式でBuild

WebGLとは？
WebGL（Web Graphics Library）は、ウェブブラウザでインタラクティブな3Dと2Dグラフィックスを描画するためのJavaScript APIです。簡単に言うと、WebGLはウェブページにリアルタイムで高品質の3Dグラフィックスを表示するための技術です。WebGLはウェブブラウザに組み込まれているため、追加のソフトウェアをインストールする必要がなく、多くの現代のブラウザでサポートされています。

まず初めに、Unityで作成したものをWEBサイトで利用できるように、WebGLという形式でビルドします。下記のようにUnityエディタで[File] > [Build Settings]を開き、プラットフォームをWebGLに変更します。

そうすると下記のような画面が出てきます。この状態では、Platformの設定が「Windows ,Mac,Linux」となっているので、ここを「WebGL」に変更します。

上記の手順で、プラットフォームをWebGLに変更できたら、今度はビルドする時の詳細な設定項目を変更していきます。まずは、下記のように「Player Settings…」をクリックしてください。

Project Settingsのページが開いたら、「Player」→「Publishing Settings」の項目の中の「Decompression Fallback」の欄にチェックを入れてください。チェックを入れたらこのProject Settingsのページを閉じます。

Build Settingsのページに戻ったら、右下にあるBuildボタンを押してビルドを開始します。この時、「Build」と「Build And Run」という２つのボタンがありますが、どちらを押しても問題ないです。「Build And Run」を押すと、プロジェクトをビルドした結果がローカルで開かれます。

ちなみに、「Build And Run」のボタンを押すと、下記のようにローカルでUnityのプロジェクトを開くことができます。

これで、Unityで作成したものをWebGL形式でビルドできたので、Unity側で実施する作業は完了です。
次の章では、ここでビルドしたファイルを公開サーバーへアップロードする方法を解説します。

サーバーへアップロード(ロリポップ)

ここからは、先ほどビルドしたファイルを自分以外の人が見られるように、公開サーバーへアップロードしていきます。今回はロリポップのサーバーへアップロードしていきます。

今回のように、Unityでビルドしたファイルはおそらく10MB以上はあることがほとんどだと思いますので、FTPソフトを利用して、ロリポップサーバーへファイルをアップロードします。
今回はMac OSで利用できるフリーのFTPソフトである「FileZilla」を利用する方法をご紹介します。

FTPソフトとは？
FTPソフト（FTPクライアント）は、File Transfer Protocol（ファイル転送プロトコル）を使用して、コンピュータとサーバー間でファイルを転送するためのソフトウェアです。このソフトウェアを使って、ユーザーはインターネット上のサーバーにアクセスし、ファイルをアップロード（サーバーに送る）またはダウンロード（サーバーから取得する）することができます。簡単に言うと、FTPソフトはインターネットを通じてファイルをやり取りするためのツールです。

ロリポップの操作

まずはロリポップの公式サイトへ行き、ご自身のアカウントでログインしてください。

ログインができたら下記の画面のように、「ユーザー設定」→「アカウント情報」を選択します。

アカウント情報のページが開いたら、少し下にスクロールすると下記のような「サーバー情報」の項目が表示されていると思います。その中の「FTPSサーバー」「FTPアカウント」「FTPパスワード」は後で解説するFileZillaで利用するので、メモするか覚えておいてください。

これらの確認ができたら一旦、ロリポップ側での作業は終了です。

FileZillaの準備

では次に、FTPソフトである「FileZilla」を利用する準備をしていきます。まず、Mac版の「FileZilla」をダウンロードはこちらのサイトからダウンロードできます。

上記のリンクから「FileZilla」のサイトを開いたら、下記のような画面が出てくるので、「Download FileZilla Client」をクリックします。

すると、下記のような画面が表示されます。その一番左側の「Download」ボタンをクリックすると、ダウンロードが開始されます。

ダウンロードが完了すると、以下のBZ2ファイルがダウンロードフォルダにダウンロードされます。

このファイルを開くと、「FileZilla」のアプリが使えるようになります。このアプリのアイコンをクリックして、アプリを開きます。

FileZillaの操作

ここまでで、FileZillaを利用する準備ができました。ここからは実際にファイルをロリポップサーバーへアップロードしていきます。

FileZillaアプリを開いたら、下記のように左上にあるボタンをクリックしてサーバーへの接続準備を開始します。

すると、下記のような画面が表示されるので、「新しいサイト」をクリックし、先ほどロリポップのサイトで確認したサーバー情報を入力してください。入力ができたら右下の「接続」ボタンをクリック。

接続が成功すると、下記のような画面が表示されるはずです。
この画面の左側には、自分自身のローカルに置いてあるデータが表示されています。
一方、画面の右側半分には、今回接続したサーバー(※僕の場合はロリポップ)にあるデータが表示されています。

では、今回はUnityでWebGL形式でビルドした「testproject10」というデータをロリポップサーバーへアップロードしたいので、該当するファイルを探して画面左から画面右へドラッグ&ドロップでファイルをコピーします。

下記のように、アップロードしたいファイルが画面右側の意図したファイル構造の中に表示されていることが確認できれば、FTPソフト「FIleZilla」を使ったサーバーへのアップロードは完了です。

アップロードの確認

次に、ロリポップサーバーへアップロードしたデータを問題なく閲覧できるか、念のために確認します。今回は、ロリポップサーバーの「wp-content」→「uploads」フォルダの中に「testproject10」という名前でビルドしたファイルをアップロードしたので、以下のようなURLをChromeのURLの検索欄に入力します。

すると、下記の動画のように、Unityで作成したゲームをWEBブラウザ上で表示することができました。

WEBページへの埋め込み(STUDIO)

最後は、WEBサーバー上で見ることができたゲームをSTUDIOで作成したWEBサイトに埋め込みます。

下記のようにSTUDIOのカスタムコードを使うことで、簡単にゲームを埋め込むことができます。

カスタムコードに埋め込むスクリプトは下記です。※※※※※※※※※※※※の部分に先ほどのURLを入れてください。

<iframe width="960" height="600" src="※※※※※※※※※※※※"
 frameborder="0" allowfullscreen>
</iframe>

まとめ

この記事を通じて、Unityで作成したアプリケーションをWebGL形式でビルドし、ロリポップサーバーにアップロードしてウェブサイトに組み込む一連のプロセスを学びました。Unityを使ったウェブ開発は、インタラクティブで魅力的なコンテンツを提供する強力な方法です。この技術を活用して、よりダイナミックでエンゲージメントの高いウェブ体験を創出しましょう。