UnityのWebGLビルドでFirestoreからリアルタイムにデータを取得して反映する

![Peek 2020-12-07 18-30.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68981/638a1a84-33d8-e304-c2a5-e47e7f003e59.gif)

## 概要
UnityのWebGLビルドしたものからfirestoreにアクセスしたい

firebaseのSDKでWebGLで動作するものがないのでちょっと工夫する必要がある
流れとしては

1. C#からjslibの関数を呼び出し
2. jslib内でデータの取得をしたらSendMessage関数でC#の更新用の関数を呼び出し

## jslibの作成
Assets配下にPluginsというディレクトリを作成して.jslibという拡張子のファイルを作成
ES2015以降の記法は使えないので注意


```javascript:firestore.jslib

mergeInto(LibraryManager.library, {
  // 関数呼び出し
  Hello: function () {
    window.alert("Hello, world!");
  },
  Firestore: function() {
      // firebaseのconfig
      var firebaseConfig = {
          apiKey: "xxxxxxxxxxxxxxxxx",
          authDomain: "xxxxxxxxxxxxxxxxxxxxxxx",
          databaseURL: "xxxxxxxxxxxxxxxxxxx",
          projectId: "xxxxxxxxxxxxxxxxx",
          storageBucket: "xxxxxxxxxxxxxxxxxxxx",
          messagingSenderId: "xxxxxxxxxxxxxxxxxx",
          appId: "xxxxxxxxxxxxxxxxxxxxxxx"

      }
      // firebaseの初期化
      firebase.initializeApp(firebaseConfig);
      var db = firebase.firestore();
      db.collection("unity").doc("IHzXZcKpKwOiVFEVPbYT")
      .onSnapshot(function(doc) {
        console.log("Current data: ", doc.data());
        SendMessage('Text', 'UpdateText', doc.data().text);
    });
  }
});
```

## C#側のスクリプト

以下のスクリプトを空オブジェクトなんかにつけておく

```C#:TextManager.cs
using UnityEngine;
using System.Runtime.InteropServices;
using UnityEngine.UI;

public class TextManager : MonoBehaviour
{

    [DllImport("__Internal")]
    private static extern void Firestore();

// js側から更新が合った時に呼び出される関数
    public void UpdateText(string newText)
    {
// テキストコンポーネントの取得
        Text text = GameObject.Find("Text").GetComponent<Text>();
        text.text = newText;
    }


    void Start()
    {
//js側の関数を呼び出してデータの監視開始
        Firestore();
    }
}
```

## ビルドしてできたindex.htmlでfirebaseSDKを読み込むように修正

WebGLようにビルドするとindex.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 | firestore-test</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Build.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
        <div class="title">firestore-test</div>
      </div>
    </div>
    // ここでfirebaseを読み込む
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
  </body>
</html>
```
## おまけ
同じ様なやり方でデータの追加や更新もできるのでセーブデータとかの管理に使えるかも

## 参考
https://docs.unity3d.com/ja/2020.2/Manual/webgl-interactingwithbrowserscripting.html