Unityで吐いたWebGLをPWAで動かしてみた

# PWAを触ってみたかった
始めの動機はそんなもので、PWAというのがあるすごい！UnityはWebGLで吐ける！…いけるんじゃね？
ってことでやってみました。

[PWA for Unity Sample](https://pwaforunitysample.firebaseapp.com)
![ezgif-5-edf42d3870eb.gif](https://qiita-image-store.s3.amazonaws.com/0/127761/116bba29-3543-41a4-3720-97c51404e69f.gif)

はい結構適当ですが、UI Buttonを押してカウントアップするものです。

## 環境
- Unity 2018.2.8f1
- Vue.js
    - [vue-unity-webgl](https://www.npmjs.com/package/vue-unity-webgl)
- Firebase

UnityやVueのセットアップは他の記事を参考に行った方が良いと思うので今回は省きます。
Vueに関してはこちらを参考にさせて頂きました。
- [Vue.jsで始めるPWA](https://qiita.com/gyarasu/items/2f18edc4ae251180d89e#22-web-server-for-chrome)
- [VueコンポーネントでWindowサイズ変更検知＆値取得](https://qiita.com/yuukive/items/ede7c087843d2f7ef979)

最初に言うとWeb畑の人間でないのでVue.jsとかの記述、設定諸々はよくわかってないです行き当たりばったりでやってるのでお手柔らかにお願いします。
Unity WebGLのCSSの適応の仕方がわからなくて詰んで放り投げました。

以下が今回のプロジェクトリポジトリになります。
[GitHub](https://github.com/MizoTake/PWAForUnitySample)

一応、GitHub Pagesも試しましたが何故かAndroidで動かしたときにショートカットを追加とかの機能が動いてなかったぽいので今回はFirebase Hostingを使ってみました。

# Unityの設定

設定もなにもWebGLでビルドできるようにコンポーネント追加してビルドするだけです。

ただ、ビルドする場所はVue.jsのstaticフォルダ配下にビルドするようにします。Vue.jsの静的なファイルを置くところらしいです。
個人的にはstaticフォルダ配下にUnityビルド用のフォルダを作ってまとめておくとよいと思います。

今回だと`unityBuild`というフォルダを作っています。

# Vueの設定

UnityのWebGLの読み込みを自分で書いても良かったのですが既にライブラリがあったため使わせていただきました。
[vue-unity-webgl](https://www.npmjs.com/package/vue-unity-webgl)

上記をインストールしてまずはindex.htmlのヘッダーに

```html:index.html
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/unitybuild/TemplateData/favicon.ico">
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.publicPath %>static/unitybuild/TemplateData/style.css">
  <script src="<%= htmlWebpackPlugin.files.publicPath %>static/unitybuild/TemplateData/UnityProgress.js"></script>
  <script src="<%= htmlWebpackPlugin.files.publicPath %>static/unitybuild/Build/UnityLoader.js"></script>
```

を追加します。static配下の`unitybuild`フォルダ名は各自が命名したフォルダ名にしてください。

そして、App.vueを

```vue:App.vue
<template>
  <div id="app">
    <header>
      <span>Vue.js PWA</span>
    </header>
    <main>
      <unity src="static/unityBuild/Build/unityBuild.json"
        v-bind="{ width: gameWidth, height: gameHeight }"
       unityLoader="static/unityBuild/Build/UnityLoader.js"></unity>
    </main>
  </div>
</template>

<script>
import unity from 'vue-unity-webgl'

export default {
  name: 'app',
  data: function () {
    return {
      gameWidth: window.innerWidth,
      gameHeight: window.innerHeight * 0.96 - 134 // 134はヘッダー等の値
    }
  },
  methods: {
    handleResize: function () {
      this.gameWidth = window.innerWidth
      this.gameHeight = window.innerHeight
    }
  },
  ready: function () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize)
  },
  components: { unity }
}
</script>

/// <style>は初期状態のまま編集してないので略 ///
```

と編集することで、とりあえずはそれっぽくUnityのWebGLを表示できるかと思います。

PWAなのでモバイルでも動かすことを想定していますが、最初に出てくるアラートが鬱陶しい場合はテラシュールブログさんの
[【Unity】WebGLとWebAssembly](http://tsubakit1.hateblo.jp/entry/2017/03/31/235900)
にある`モバイルで動作させる`を参照してください。

# Firebase
今回は静的ファイルばかりなのでhosting機能を使っています。
セットアップとデプロイに関しては公式のドキュメントで充分だと思います。
[Firebase Hosting](https://firebase.google.com/docs/hosting/quickstart?hl=ja)

# 所感
Vue.jsが楽…
PWAなのでちゃんとホーム画面でインストールしたかのように扱えますし、オフライン動作部分を調整すればストアに出さなくてもゲームらしく出来るんじゃないか？と思います。
cssをきちんと適応させることはもちろんですが横画面にすることも考慮してできれば結構気楽にゲームなどをデプロイできる気がします
あと、最近はPWAをWindows等の上でも動かせるのでデスクトップゲーム風とかもできるかもしれません。
本当はUnityでWebGLビルド時に勝手にVueProject作ってPWA環境にする！みたいなフレームワーク的なところまで妄想してましたが妄想で止まってしまいました。。

何かの参考になればと思います。

(GitHubのアラートはいつかなおすんだ…いつか…)