Cloud9環境でRuby on Rails、Herokuを使用してUnityWebGL作品を公開する方法

こんにちは。

今回は、Cloud9環境でRuby on Rails、Herokuを使ってUnityWebGL作品を公開する方法を紹介します。


Cloud9環境でRails、Herokuを使用したUnityWebGL作品の公開方法がググっても見つからない！
↓
試行錯誤してなんとかできた！
↓
ネットに公開して、これから同じことをする人の助けになればいいな！

こんな考えから方法を紹介するに至りました。
Cloud9・Rails・Heroku・UnityWebGLとピンポイント気味ですが、
自分の備忘録的な感じにもなるかなと考えています。

# 対象者
Cloud9環境でRuby on Rails、Herokuを使用してUnityWebGL作品を公開したい人



# 手順

まず最初に、[Railsチュートリアル3章・3-1]
(https://railstutorial.jp/chapters/static_pages?version=5.0#sec-sample_app_setup)を参考に
新しいRailsプロジェクトを作ります。

僕の環境だと、新しいプロジェクトを作成するときに

`bundle install`

の前に

`bundle update`

を実行しないとダメでした。


リスト3.3、3.4は行わなくて良いです。
リスト3.5は

`root ‘static_pages#index’`

とします。


次に[Railsチュートリアル3章・3-2-1]
(https://railstutorial.jp/chapters/static_pages?version=5.0#sec-generated_static_pages)を参考に静的ページを作ります。
リスト3.6は

`rails generate controller StaticPages index`

として実行します。
ここで、`app/views/static_pages/index.html.erb`が作られていることを確認します。

次にUnityに移ります。
UnityのメニューからFile→BuildSettingsを選びます。

￼![スクリーンショット 2017-03-26 21.08.48.png](https://qiita-image-store.s3.amazonaws.com/0/154305/7424ec98-515f-f547-b181-c2c19c439f4d.png)


- ビルドしたいSceneをドラッグ
- PlatformでWebGLを選択してSwitch Platformを押す
- Development Buildのチェックを外す

これらを行ったら、Buildを押してビルドします。
ビルドには数分かかります。

ビルドが終わると、2つのフォルダと1つのファイルが作成されます。

※追記
Unity5.6では、作成されるファイルが5.5以前と違っています。
そのため、手順が若干違ってきます。注意してください！

## Unity5.6の場合

![スクリーンショット 2017-04-06 12.55.57.png](https://qiita-image-store.s3.amazonaws.com/0/154305/adecb735-edde-e824-9be7-e9f41706ce58.png)

index.htmlを適当なブラウザで開き、ページのソースを表示します。
（Chromeだと右クリック→ページのソースを表示）

そしてRailsに戻り、
HTMLの中身を全てindex.html.erbにコピーします。

Buildフォルダを`app/assets/javascripts`の中に置きます。
TemplateDataフォルダを`app/assets/images`の中に置きます。

次にindex.html.erbを編集します。

`TemplateData/***`
`Build/***`

となっている全てのパスの先頭に

`../assets/ `

を追加します。


また、Buildフォルダの中にある
◯◯.jsonも修正します。

`◯◯.data.***`
`◯◯.asm.***`

となっている全てのファイル名の先頭に

`../Build/ `

を追加します。

最後に、config/production.rbにある
config.assets.compile = falseを
config.assets.compile = trueに変更します。

ここまでできたら、cloud9上でサーバ起動を行い
UnityWebGLが表示できているかどうかを確認します。
表示できていたらgit、Herokuにpushします。

これでHeroku上でUnityWebGLが起動できていると思います。

## Unity5.5以前の場合

￼![スクリーンショット 2017-03-26 20.55.41.png](https://qiita-image-store.s3.amazonaws.com/0/154305/0468e6ef-56e5-cb1d-d9a4-0fb60b97f798.png)

index.htmlを適当なブラウザで開き、ページのソースを表示します。
（Chromeだと右クリック→ページのソースを表示）

そしてRailsに戻り、
HTMLの中身を全てindex.html.erbにコピーします。

Releaseフォルダを`app/assets/javascripts`の中に置きます。
TemplateDataフォルダを`app/assets/images`の中に置きます。

次にindex.html.erbを編集します。

`TemplateData/***`
`Release/***`

となっている全てのパスの先頭に

`../assets/ `

を追加します。

僕の場合、こんな感じです。

~~~HTML
<!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 | test</title>
    <link rel="stylesheet" href="../assets/TemplateData/style.css">
    <link rel="shortcut icon" href="../assets/TemplateData/favicon.ico" />
    <script src="../assets/TemplateData/UnityProgress.js"></script>
  </head>
  <body class="template">
    <div class="template-wrap clear">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
      <br>
      <div class="logo"></div>
      <div class="fullscreen"><img src="../assets/TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
      <div class="title">test</div>
    </div>
    <script type='text/javascript'>
  var Module = {
    TOTAL_MEMORY: 268435456,
    errorhandler: null,			// arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
    compatibilitycheck: null,
    backgroundColor: "#222C36",
    splashStyle: "Light",
    dataUrl: "../assets/Release/unityruby.data",
    codeUrl: "../assets/Release/unityruby.js",
    asmUrl: "../assets/Release/unityruby.asm.js",
    memUrl: "../assets/Release/unityruby.mem",
  };
</script>
<script src="../assets/Release/UnityLoader.js"></script>

  </body>
</html>
~~~

最後に、config/production.rbにある
`config.assets.compile = false`を
`config.assets.compile = true`に変更します。


ここまでできたら、cloud9上でサーバ起動を行い
UnityWebGLが表示できているかどうかを確認します。
表示できていたらgit、Herokuにpushします。

これでHeroku上でUnityWebGLが起動できていると思います。


# Unityデータの更新方法

Unity側で修正を行ったときに、
Rails側でUnityデータの更新を行う方法です。

- UnityでWebGLビルドを行う
- Releaseフォルダをapp/assets/javascriptsの中に置く
- TemplateDataフォルダをapp/assets/imagesの中に置く

以上を行ったあとcloud9上でサーバ起動を行い、
UnityWebGLが表示されていることを確認します。
その後git、HerokuにpushすればUnityデータが更新されます。


# おわりに

いかがでしたか？
あなたも手軽にUnityの作品を公開しちゃいましょう！

質問・意見などありましたらお気軽にどうぞ！