• Facebook
• X(旧:Twitter)
• LINE

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

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

1. 自身が管理するWebサイトで公開する
2. Unity公式の作品共有サイト「Unity Play」で公開する
3. Unity投稿サイト「Unity room」で公開する
   

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

大きい画面でプレイ

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

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

Unityでbuild

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

Platform の変更

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

解像度の指定

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

準備ができたら作品を作りましょう。

作品の Build

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

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

サーバーにアップロード

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

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

ファイルのアップロード

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

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

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

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

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

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

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

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

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

Webページに埋め込み

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

直接埋め込む

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

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

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

リンク作成

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

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

ファイブボックスでは実際に通って頂いての授業の他、ちょっとしたお困りごとに対するオンライン授業やオンラインサポートも行っております。
お困りごとのある方、ご興味がある方は、ぜひお問い合わせください。
お問い合わせは　こちら　から。
体験授業のお申込みは　こちら　から。

• Facebook
• X(旧:Twitter)
• LINE