Unityで作ったWebGLゲームをRailsとHeroku使って公開する手順


Tutorialの３章の内容をふまえてUnityで作ったもの(とりあえず空シーン)を表示できるようにする

## セットアップ

日本語版と英語版に差異がなさそうなのでそのまますすめる

```rails app作成
$ cd ~/workspace
$ rails _5.1.2_ unitywebapp
$ cd unitywebapp/
```

Gemfileを写経

```/Gemfile
source 'https://rubygems.org'

gem 'rails',        '5.1.2'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest-reporters',       '1.1.14'
  gem 'guard',                    '2.13.0'
  gem 'guard-minitest',           '2.4.4'
end

group :production do
  gem 'pg', '0.18.4'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```

bundlerたたいてGemfileの設定を反映

```
$ bundle update
$ bundle install --without production
```

Gitを初期化してここまでをコミット

```
$ git init
$ git add -A
$ git commit -m "add: first commit."
```

bitbucketにpush

```bitbucketにgit push
$ git remote add origin git@bitbucket.org:[ユーザー名]/unitywebapp.git
$ git push -u origin --all
```

とりあえずHello,World!してHerokuで確認できるようにする

``` app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end
```

```config/routes.rb
Rails.application.routes.draw do
  root 'application#hello'
end
```

GitにここまでをコミットしてHerokuにpush

```Bash
$ git commit -am "add: display hello, world!"
$ git push
$ heroku create
$ git push heroku master
```

[前回](https://qiita.com/dTAT@github/items/012d5758f634c53f8a43 "前回")はここでつまづいたが今度は問題なくいけた。

ただ、ここまでに何度かHerokuアプリを作ってしまっていたのでアプリ制限５個(無料アカウントなので...)に引っかかったために不要なものを削除した。

## サーバサイド作成


ここからちょっとチュートリアルから外れる

```
$ rails generate controller Game index
$ git add -A
$ git commit -m "add: game controller."
$ git push -u origin master
```

とりあえずゲーム画面さえあればいいかなということでindexだけ作成

つぎにゲーム建設予定地となるindex.htmlを作成する

```/public/index.html
<html>
  <body>
  Hello,World!
  </body>
</html>
```

controllerを編集してindex.htmlを呼び出す関数indexを追加し、routesを編集してこのindexを表示するようにする。

```/app/controllers/game_controller.rb
class GameController < ApplicationController
  def index
    render file: 'public/index.html'
  end
end
```

```/config/routes.rb
Rails.application.routes.draw do
  match '*all', to: 'game#index', via: [:get]
  root 'game#index'
end
```

プレビューで確認していけそうならmasterとherokuにpush.

```
$ git push heroku master
```

## クライアントサイド作成

ここでいったんBitbucketからこのリポジトリをクローンしてくる。

``` 
git clone git@bitbucket.org:[ユーザー名]/unitywebapp.git
```

※多分上記でいけるはず。いけるはずというのはSourceTree連携してHTTPSでクローンしてしまったため。

※後述するが、Windowsユーザーはマルチバイト文字列を含むパス以下にはしないほうがいいかも

そして/appとおなじ改装にunityフォルダを作成する。構成的には以下のようになっているはず。

- unitywebapp(workspace)
    - app
      + controllers
    ...
    + public
    + unity
        + Assets 
  
Unityの起動時にNew Projectし、上記のunityフォルダをプロジェクトフォルダとなるようにする。

とりあえず確認できるような画面をつくる。

![スクリーンショット 2017-11-21 11.13.32.png](https://qiita-image-store.s3.amazonaws.com/0/18557/7546cb20-b876-e68e-7309-b862158cef40.png "スクリーンショット 2017-11-21 11.13.32.png")

これをFile>Build SettingsからwebGLにSwitch PlatformしてからBuil&Runする。

この際、Build出力は(workspace)/publicにする

![スクリーンショット 2017-11-21 11.26.29.png](https://qiita-image-store.s3.amazonaws.com/0/18557/4e21fe98-ccd7-7beb-9e02-bb0e49b430c4.png "スクリーンショット 2017-11-21 11.26.29.png")


Build&Runが無事成功すればwebGL版のゲーム画面がみれるはず

![スクリーンショット 2017-11-21 11.24.22.png](https://qiita-image-store.s3.amazonaws.com/0/18557/a85f1a23-7d05-16cc-e349-3647e2821a07.png "スクリーンショット 2017-11-21 11.24.22.png")

※ Unity2017.2.0.f3において、Windowsのマルチバイトを含むパスにおくとwebGL出力時にエラーとなった。

この時点での構成は以下のようになっているはず。
publicの下にwebGLアプリのビルド結果が出力され、index.htmlが上書きされているはず。

- unitywebapp(workspace)
    - app
      + controllers
    + ...
    + public
	    + Build <-- New!
	    + TemplateData <-- New!
	    - index.html <-- update!
	    - ...
    + unity
        + Assets 


ここまできたらあとはコミットしてmasterにpushし、cloud9で確認してherokuにpushするだけでokとなる。

※ローカルから直接pushしてもいいかなーとおもったけど一旦stagingする気持ちでc9にpushした。





## 参考

Rails Tutorial Capter3.(日本語版)：　
https://railstutorial.jp/chapters/static_pages?version=5.1#cha-static_pages

Cloud9環境でRuby on Rails、Herokuを使用してUnityWebGL作品を公開する方法
https://qiita.com/kanatano_mirai/items/10ffeeca3e0d49db0caa