LoginSignup
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@krile136

Unity作品をWebGLで書き出しRailsを使ってherokuにデプロイする

Posted at

Unityの作品を全世界に向けて公開したい！という人へ
私の備忘録をかねて、参考になればと思います。

ruby 2.5.1 （途中で2.6.3に上げます）
rails 5.2.3

Railsの準備

手前味噌ですが、RailsにPostgreを導入するでRailsのいつものYay!が見れるところまで進めてください。

コントローラーの作成

アプリのディレクトリにいるか確認する
$ pwd

gameコントローラーを作成する
$ rails g controller games

app/controllers/games_controller.rb を開き、以下のように編集

class GamesController < ApplicationController
  def index
  end
end

hamlのインストール

これは私の趣味ですが、erbよりhamlが好きなので入れます。

gemfileの一番下に
 gem 'haml-rails'
を追加

haml-railsのインストール
$ bundle install

erbをhamlに変換
$ rails haml:erb2haml

最後に
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
と聞かれるので、yを入力して完了

ビューの作成

app/views/games/　に新しいファイルを作成
ファイル名は "index.html.haml"

index.html.hamlを開き、１行目に
hello world
を書いておく。(""とかで囲う必要無し）

ルーティングの作成

config/routes.rb を開いて、以下のように編集

Rails.application.routes.draw do
  resources :games
  root 'games#index'
end

indexしか使わないのでほんとはresourcesの後にindexつけたほうが良いと思う。（面倒くさがり）

hello worldが見れるかチェックする

ターミナルに戻り、
$ rails s

ローカルホストにアクセスして、hello worldが見れるかチェックする。
http://localhost:3000/

ここまでOKならgitに登録する

$ git init
$ git -A
$ git commit -m "first commit"

必要なgemのインストール

Gemfile を開き、以下のように編集

group :development, :test do
の中に
  gem 'sqlite3'
を追加する
他にbyebugとか入っているが、触らないこと。

また、本番環境用の記述も追加する。中身は空っぽでOK
Gemfileの中の適当な場所に追加する。

group :production do

end

bundle installを忘れないように

$ bundle install

rubyのアップデート

ここまでで、UnityのWebGLファイルを適切な場所におけば動きます。
が、rubyのバージョンが低いためエラーが出るのでアップデートします。
すでに2.6.3以上の方は必要ない、かも？
参考：https://qiita.com/hellhellmymy/items/a32f53ba38f843a8f916

$ brew update && brew upgrade ruby-build
$ rbenv install 2.6.3
$ rbenv local 2.6.3
$ gem install bundler -v 2.0.2
$ rm Gemfile.lock

Gemfileを開き、
 ruby '2.5.1' 
を
 ruby '2.6.3'
に変更する。

$ bundle install

gitに登録しておく　(コミットメッセージは自分がわかればなんでも良いです）
$ git -A
$ git commit -m "update ruby"

これでRails側の準備は整いました。

herokuの準備

herokuへの登録

herokuを検索して、サクッと登録してしまいましょう。

herokuのインストール

brewを使ってインストール
$ brew tap heroku/brew && brew install heroku

インストールできたか確認する
$ heroku --version
heroku/7.30.0 darwin-x64 node-v11.14.0

herokuへログイン
$ heroku login
なんでも良いのでキーを押すとブラウザでログイン画面が出るのでログインする
ログインに成功すると、ターミナルでもログイン成功が報告される

herokuのURLにもなる名前をつける
$ heroku create <好きな名前>

これでherokuの準備ができました。

UnityのWebGL書き出し

作成したUnityプロジェクトを開き
File → Build Setting
Build_Settings.png
1.左からWebGLを選択
2.swith platformをクリック
（画像ではBuildになってますが、初期はswitch ~になってます）
3.Build And Runをクリック
出力先は、あとで移動するのでデスクトップにでもおいてください。

コーヒーブレイク

ここまでお疲れ様です。
WebGLの書き出しはかなり時間がかかるのでコーヒーでも飲みながら休憩しましょう。

WebGLファイルをRailsへ

参考：https://qiita.com/kanatano_mirai/items/10ffeeca3e0d49db0caa
参考：https://osouonna.hatenablog.jp/entry/2018/09/29/172951
出力先には、以下の３つのファイルがあると思います

index.html
Builderファイル
TemplateDataファイル

これらを移動します。

index.html
 → public の中へ移動

Builderファイル
 → app/assets/javascripts の中へ移動

TemplateDataファイル
 → app/assets/images の中へ移動

index.htmlの編集

public/index.htmlを開き
TemplateData/***
Build/***
となっている全てのパスの先頭に
../assets/
を追加します。

完成形

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unity WebGL Player | error</title>
  <link rel="shortcut icon" href="../assets/TemplateData/favicon.ico">
  <link rel="stylesheet" href="../assets/TemplateData/style.css">
  <script src="../assets/TemplateData/UnityProgress.js"></script>
  <script src="../assets/Build/UnityLoader.js"></script>
  <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "../assets/Build/deploy_test.json", { onProgress: UnityProgress });
  </script>
</head>

<body>
  <div class="webgl-content">
    <div id="gameContainer" style="width: 960px; height: 600px"></div>
    <div class="footer">
      <div class="webgl-logo"></div>
      <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
      <div class="title">error</div>
    </div>
  </div>
</body>

</html>

jsonファイルの編集

app/assets/javascripts/Build/◯◯.jsonを開き
◯◯.data.***
◯◯.asm.***
となっている全てのファイル名の先頭に
../Build/
を追加します。
(◯◯の部分はWebGLを書き出すときにつけた名前)

完成形
（このとき、WebGLに書き出す際の名前をdeploy_testとしてました）

{
  "companyName": "DefaultCompany",
  "productName": "error",
  "dataUrl": "../Build/deploy_test.data.unityweb",
  "wasmCodeUrl": "../Build/deploy_test.wasm.code.unityweb",
  "wasmFrameworkUrl": "../Build/deploy_test.wasm.framework.unityweb",
  "TOTAL_MEMORY": 268435456,
  "graphicsAPI": [
    "WebGL 2.0",
    "WebGL 1.0"
  ],
  "webglContextAttributes": {
    "preserveDrawingBuffer": false
  },
  "splashScreenStyle": "Dark",
  "backgroundColor": "#231F20",
  "cacheControl": {
    "default": "must-revalidate"
  }

compileの設定を変更

config/environments/production.rb　を開き

config.assets.compile = false
を
config.assets.compile = true
に変更する。

config.assets.js_compressor = :uglifier
を
config.assets.js_compressor = Uglifier.new(harmony: true)
に変更する。

コントローラーの変更

今のままだとhello worldしか表示されないので、
indexアクションの先を書き出したindex.htmlに変更する

class GamesController < ApplicationController
  def index
    render file: 'public/index.html'
  end
end

準備完了！

まずはローカル環境でテストして、OKならgitに登録しましょう！

$ rails s

うまくunityプロジェクトが表示されているようなら、
$ git -A
$ git commit -m "unity on rails"

いよいよherokuへのデプロイ

さぁ、herokuへデプロイしましょう！

$ git push heroku master

生成されたURLでアクセスする

デプロイが問題なく終了したら、生成されたURLでアクセスしてみましょう！
ターミナルのログの下の方が以下のようになってると思いますが
https://◯◯.herokuapp.com/
がアクセスするべきURLとなります。
このURL名は、上の方でheroku createした時の名前になります。

remote: -----> Compressing...
remote:        Done: 53.5M
remote: -----> Launching...
remote:        Released v7
remote:        https://◯◯.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/◯◯.git

お疲れ様でした！

以上がWebGLで書き出したUnityプロジェクトをRailsを使ってherokuに
デプロイするまでの手順となります。
ローカルと違い、heroku上のunityプロジェクトはロードに時間がえらくかかりますが
やはり全世界に発信できるというのは良いですね。

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?