More than 5 years have passed since last update.

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

Last updated at 2018-02-21Posted at 2017-11-21

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

セットアップ

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

$ cd ~/workspace
$ rails _5.1.2_ unitywebapp
$ cd unitywebapp/

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

$ git remote add origin [email protected]:[ユーザー名]/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

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

前回はここでつまづいたが今度は問題なくいけた。

ただ、ここまでに何度か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 [email protected]:[ユーザー名]/unitywebapp.git

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

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

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

unitywebapp(workspace)
- app
  - controllers
    ...
- public
- unity
  - Assets

Unityの起動時にNew Projectし、上記のunityフォルダをプロジェクトフォルダとなるようにする。

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

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

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

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

※ 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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up