tanaka's Programming Memo

プログラミングについてのメモ。

Unityの作品をGitHub Pagesで公開する

Unityの作品を気軽に配信するには、Webブラウザ上で実行できるようにして、ホームページで配信するのがよいでしょう。ここでは、GitHub Pages上でUnityの作品を公開する手順を紹介します。

公開する際の注意

公開せずに個人で楽しむ分にはよいのですが、公開する場合はライセンスに気をつける必要があります。グラフィックや音声、フレームワークのプログラムなど、他の人が作成したデータを利用している場合は、利用してよいのか、利用する場合は何をしなくてはいけないのかを確認して、それに従ってください。

フリー素材でも、著作表示は必要とされる場合が多いです。どのような場所に、どのように表記するかのルールに従ってください。

作者が工夫をして表現したものには著作権が発生します。そのため、利用してよいかの条件が明記されていない場合は、著作者に利用してよいかを確認しないと正式には利用することはできません。

うっかり守らなかったらどうなるのか

無償で公開していた場合は、突然、賠償請求などがくることはありません。まずは確認の連絡が来きますので、その際には謝罪をして、正しい利用方法に改めて公開を続けてよいかをお願いしてください。相手の心証を著しく悪化させていた場合は、公開停止を命令される場合がありますので、そうならないように気を配りましょう。

著作権親告罪といって、著作権者に訴えられない限りは罰せられません。2次創作などの同人活動はこのあたりの暗黙のルールで成り立っています。だから大々的にセーフである、ということではなく、いつ訴えられても文句は言えない立場であることは認識しておく必要はあります。

UnityでWeb用にビルド

Unity5.2.3で説明します。この時点では、Web Player向けと、WebGL向けの2通りのビルド方法があります。

Web Playerは、WebブラウザにUnity Playerというプラグインをインストールしてその上で実行する方法で、高パフォーマンスが出ます。ただし、セキュリティ上の問題からFirefoxChromeなどで、プラグインを廃止する動きがあり、Web Playerは廃止が予定されています。

Web Playerに代わる実行方法として、プラグインを使わずにWebブラウザの機能で動かすようにするWeb GLビルドが準備されています。5.2.3の段階ではまだプレビュー版であり、実行できる機能がかなり限定されます。

まずWeb GLでビルドしてみて、問題なく動作するようであればWeb GL版を利用するとよいでしょう。動作しなかったり、動作に問題がある場合は、さしあたりWeb Player用にビルドしたものを公開しておきましょう。Unityのバージョンアップがあったら、WebGL版でビルドしてみて、動作するようになったら差し替えましょう。

Web GL向けビルド

Web GL向けにビルドしてみます。

  1. Unityを起動して、ビルドしたいプロジェクトを開く
  2. [File]>[Build Settings]を選択
  3. 必要なシーンを[Project]ビューからドラッグして、[Scenes In Build]欄にドロップ
    • f:id:am1tanaka:20151127113701p:plain
  4. [Platform]から[Web GL(Preview)]を選択して、下の[Switch Platform]ボタンを押す
  5. 隣の[Player Settings]ボタンを押す
  6. [Inspector]ビューで以下を設定
    • f:id:am1tanaka:20151127113708p:plain
    • [Company Name]に、名前を半角英数で入力
    • [Product Name]に、作品名を半角英数で入力
    • 画面の幅と高さを調整したい場合は、[Resolution and Presentation]欄を開いて、[Resolusion]欄を調整する。幅は[Default Screen Width]、高さは[Default Screen Height]
    • ページのイメージを[WebGL Template]で選択
  7. 以上設定したら、[Build And Run]ボタンを押す
  8. 初めてビルドするときは、出力先のフォルダーを作成する
    • f:id:am1tanaka:20151127113702p:plain
    • [新しいフォルダー]を押す
    • フォルダー名を半角英数の作品名にする
    • [フォルダーの選択]ボタンを押す

以上でビルドが開始します。完了するまで待ってください。ビルドに成功すると、Webブラウザーが起動して作品が動作するので、動きを確認してください。問題がなければ、GitHub Pagesによる公開に進んでください。

古いブラウザーで実行した場合、以下のようなメッセージが表示されます。
f:id:am1tanaka:20151127113703p:plain

[OK]を押すと動く場合もありますが機能が限定されます。FirefoxGoogle Chromeをインストールして、そちらで動かしましょう。アドレスバーの内容をコピーして、FirefoxChromeのアドレスバーに貼り付けて[Enter]で動かせます。
f:id:am1tanaka:20151127113704p:plain

動作しなかったり不安定な場合は、Web Player用にリビルドしましょう。

WebGLで動かす際の注意

フォントを設定しないと日本語が表示されません。また、WebGLへの割り当てメモリサイズが小さいと、途中でエラーが発生します。

対処方法はこちらを参照してください。

Web Player向けビルド

Web GL版でうまく動かなかった場合は、Web Player向けにビルドしなおしましょう。

  1. Unityの[File]>[Build Settings]メニューを選択
  2. [Platform]から[Web Player]を選択して、[Switch Platform]を押す
    • f:id:am1tanaka:20151127113705p:plain
  3. [Player Settings]を押す
  4. 以下について、必要に応じて設定する
    • f:id:am1tanaka:20151127113706p:plain
  5. [Build And Run]ボタンを押す
  6. [新しいフォルダー]を作成して、Web Player向けにビルドしたファイル一式を入れておくフォルダーとして選択。Web GLと同じフォルダーを使う場合は、あらかじめ中身を削除しておく

以上でビルドが開始します。ビルドに成功するとWebブラウザーでの実行が始まります。以下のような警告が表示されたら、[ブロックされているコンテンツを許可]を押してください。
f:id:am1tanaka:20151127113707p:plain

GitHub Pagesによる公開

公開するためのビルドが完了したら、GitHub Pagesで公開するための手続きをしましょう。

準備

あらかじめ、GitHubにSignUpして、アカウントを作成しておいてください。

GitHub Desktopがインストールされていない場合は、インストールしてください。GitHub Desktopは、GitHubの操作を楽にするためのツールです。手順はこちらで、GitHub Desktopのインストール完了までやってください。Win Mergeは今回は不要です。

GitHub Pages

GitHubには、ユーザーやリポジトリ用のホームページを公開することができるGitHub Pagesというサービスが用意されています。各リポジトリ用のページを作成するには、ブランチの作成が必要で少々煩雑なので、ここではユーザー用のGitHub Pagesを使って、自分の作品一覧を見れるようにしてみましょう。

GitHub Pagesの作り方の公式情報はこちらです。

1. リポジトリの作成

ユーザー用のGitHub Pagesは、「ユーザー名.github.io」という名前のリポジトリを作成して、そのフォルダーの中にHTMLなどのファイルをプッシュすることで公開できます。

このフォルダー内にindex.htmlを作成すると、Webブラウザーで「http://ユーザー名.github.io」にアクセスすると表示できます。index.htmlに自己紹介や自分の作品へのリンクを作成すると良いでしょう。

  1. GitHub Desktopを起動
  2. [+]を押して、[Create]であることを確認
    • f:id:am1tanaka:20151127113709p:plain
  3. [Name]に 自分のユーザーアカウント.github.io を入力。たとえばユーザーアカウントが datstudent だった場合、 datstudent.github.io というリポジトリ名にする
  4. [Create repository]ボタンを押す

以上で、Local pathの場所にGitHub Pages用のリポジトリができあがります。このフォルダー内が公開されるので、表示させたいHTMLファイルやデータをコピーしていきます。

2. 公開したいデータをコピー

公開したいHTMLやデータなどをリポジトリ用のフォルダー内に準備します。

  1. GitHub Desktopの左から作成したリポジトリを右クリック
    • f:id:am1tanaka:20151127113710p:plain
  2. [Open in Explorer]を選択

以上で、リポジトリのフォルダーが開きます。ここにWeb GLかWeb Player用にビルドした先のフォルダーをコピーします。

Unityのプロジェクトは[ライブラリ]>[ドキュメント]>[Unity Projects]内にあることが多いです。見当たらない場合は、Unityの[Project]ビューから適当なファイルを右クリックして、[Show in Explorer]を選択するとそのファイルの場所が開きますので、一つ上のフォルダーから探してください。

ビルド先のフォルダーが[UniScene]という名前だった場合、以下のようになればOKです。
f:id:am1tanaka:20151127113711p:plain

index.htmlファイルを作成して、Unityのプロジェクトフォルダー内のHTMLへのリンクを作成すれば、簡単にアクセスできるようになります。

3. プッシュする

ローカルで準備が整ったので、GitHubにアップロード(プッシュ)します。

  1. GitHub Desktopに切り替える
  2. 上部の[Changes●]をクリックして切り替える
    • f:id:am1tanaka:20151127113712p:plain
  3. 変更内容を[Summary]欄に入力。たとえば「Web用のファイルを追加」など
    • f:id:am1tanaka:20151127113713p:plain
  4. [Commit to master]ボタンを押してコミット
  5. [Publish]ボタンを押すと、Description(詳細)の入力ができるので、「自分の作品を公開するGitHub Pages]などと入力して、[Publish ????.github.io]を押してアップロードする
    • f:id:am1tanaka:20151127113714p:plain

以上でGitHub Pagesへのアップロード完了です。以下のURLでアクセスできますので、FirefoxChromeからアクセスしてみてください。

http://ユーザーアカウント名.github.io/作品フォルダー/

たとえば、ユーザーアカウント名が tanakaedu で、作品フォルダー名が UniScene だった場合は、以下のようなアドレスになります。
http://tanakaedu.github.io/UniScene/

最初のアップロードからページが見れるようになるまでに少々時間がかかる場合があります。ページが見つからない場合は、5分ほど待ってから再読み込みをしてください。それでも表示されない場合はリポジトリ名を間違えている可能性があるので確認してください。

作品一覧を作成

ここまでの手順でも、各作品のフォルダーへのURLを入力すれば実行できますが、複数の作品を持っている場合は一覧を表示して、リンクをクリックしたら起動できるようにしたら便利です。

GitHub Pages用のリポジトリフォルダーのルートに、index.htmlという名前のファイルを作成して、そこに作品へのリンク集をHTMLで記載します。以下は簡単な例です。これをUTF-8形式で保存します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf8" />
        <title>作品ページ</title>
    </head>
    <body>
        <h1>作品ページ</h1>
        <p>学籍番号:00</p>
        <p>氏名</p>
        <dl>
            <dt><a href="./folder1/">作品1</a></li></dt>
            <dd>作品1の概要をここに書きましょう。</dd>

            <dt><a href="./folder2/">作品2</a></li></dt>
            <dd>作品2の概要をここに書きましょう。</dd>
        </dl>
    </body>
</html>

index.htmlを保存したら、GitHub Desktopからコミット>Syncで公開できます。

しばらく待つと、 http://ユーザーアカウント.github.io にアクセスすれば一覧が表示されるようになります。

一覧ページの作成には、Bootstrapなどを活用すると簡単に見栄えのするページが作成できます。以下、参考にしてみてください。