こんにちは。

今回は、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を選びます。

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

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

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

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

Unity5.6の場合

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以前の場合

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

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

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

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

TemplateData/***
Release/***

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

../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 | 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の作品を公開しちゃいましょう！

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