2022年9月27日読了時間: 4分

Unityで作った作品をWebサイトに埋め込んでみる Vol.01

せっかく作った作品、自分だけで楽しむのはもったいない、ということで公開してみたいと思います。

公開する方法はいくつかありますが、主な方法は以下の３つ。

今回はそんな方法の中から、「自身が管理する Webサイトで公開する方法」を実践してみます。下は教室のカリキュラム、フィッシングゲームを埋め込んでみたサンプルです。解像度を高くして作っていますので、スクロールバーが発生しています。実際は埋め込む大きさを想定して、事前に大きさを指定する必要があります。

フィッシングゲームを大きい画面でプレイ

Unityの作品をWebサイトに埋め込む方法

「ファイブボックス」当サイトは「WordPress」というツールを使って作成しています。使用しているサーバーはレンタルサーバーではメジャーな「ロリポップサーバー」です。今回は作成済みの「フィッシングゲーム」をこのロリポップサーバーにアップロードして、サイトに埋め込むまでの手順をご紹介いたします。

１，Unityでbuild

作品をWebで公開するには、まずはUnity側で準備を行います。

1.1 Platform の変更

メニューの File から「Build Settings」を選択、 Platform「WebGL」を選択し、「Swich Platform」をクリック。

1.2 解像度の指定

platformがWebGLに変ったら「Player Settings」をクリック（上図、左下のボタン）。「Rezolution」から [Default Canvas Whdth] および [Default Canvas Height] を指定します。サイト埋め込む際の大きさをイメージして指定しましょう。

準備ができたら、いよいよ作品を作っていきます。

1.3 作品の Build

作品が出来上がったら、Buildします。メニューの File から「Build Settings」を選択、「Build」をクリックします。

その際、ダウンロードするファイルを聞いてくるので、わかりやすい任意の場所を指定、もしくは新たに作っておきましょう。サンプルではこの後使用する「WordPress」というキーワードのフォルダを作っています。

２，サーバーにアップロード

2.1 アップロードフォルダの確認

まずはアップロードする場所を確認しましょう。アップロード場所はサーバー内であれば任意ですが、他のアップロードファイルと同階層にあったほうが管理がしやすいと思います。サンプルでは [wp-content]⇒[uploads] のなかに[unity]というフォルダを作り、その中にBuildされたファイル群を入れたいと思います。作品を多くアップロードするのであれば、さらに[unity]配下に作品ごとのフォルダを作るのもいいかもしれません。

2.2 ファイルのアップロード

続いてファイルをアップロードするわけですが、Webサーバーの標準HTPツール（ファイルをアップロードするためにツール）には一度にアップロードできるファイル数、1ファイルあたりのサイズに上限があるものがあります。ロリポップサーバーのFTPツールでは、1ファイルあたり10MBという制限がありました。

今回Buildしたファイルの中には、最大50Mb近いファイルもあり、このままではアップロードができないようです。

このアップロード制限に対処する方法として次の2つの方法があります。

1,PHPなどのファイルに最大アップロードサイズ変更するコードを記述する 2,外部のFTPツールを使用する

今回は 2,外部のアップロードツールを使う方法を採用してみます。

使用するのはフリーのFTPツールの定番「FFFTP」、以前から安定した動きをしており、安心して使うことができるのでおすすめです。

使い方は省略しますが、詳しい使い方を知りたい方は使用方法を検索すれば、すぐに見つかると思います。

これで下の図のように、Unityというフォルダの中に、無事Buildしたファイル群がアップロードされました。

ここで重要なファイルが、下の図の「index.html」、Webに埋め込んだり、リンクを飛ばす際、このファイルがターゲットとなりますので、ディレクトリを覚えておきましょう。

３，Webページに埋め込み

ここからは各自のホーブページで、上で確認した「index.html」を埋め込んだり、リンクを指定したりするだけですね。

3.1 直接埋め込む

埋め込むには以下のコードを記述しましょう。

<p><iframe src="https://ご自身のドメイン/wp-content/uploads/unity/index.html" width="100%" height="600" scrolling="yes" frameborder="0"></p>

これはあくまでサンプルです。Width,height などは、各自の任意の値にして下さい。

※Unityで作品を作る際に、解像度を指定しないとこんな感じになってしまいます・・・。

3.2 リンク作成

これはもっと簡単ですね。事前に確認した「index.html」のURLを貼り付ければいいだけです。https://fivebox.pro/wp-content/uploads/unity/index.html これでサイトが違ってもUnityのゲームをきどうすることができます。

では次回は、作成したファイルを「Unity Play」を使って公開する方法をご紹介いたします。