ロバメモ - 素人のUnity覚書と奮闘記

素人のUnity覚書と奮闘記

Unity(C#)+FirebaseをWebGLで使いたい①:環境整備編

やりたいこと

お題の通り、Unity(C#)でFirebaseを使ってユーザー管理とセーブデータの管理をしたい。
でもって、WebGLで公開したい。

お目当はデータベースなのだが、どうやらデータベースにアクセスできる条件にユーザーとしてログインしているか?などを設定しなければいけないらしい。ルールというやつ。
ユーザー別にセーブデータを管理したいので、とりあえずAuthenticationとやらも使うことにした。

仕組み

困ったことに、FirebaseにはUnity向けのSDKがあるけど、WebGLはサポートしてませんでした。(2019/07/10現在)
SDKが使えないので、UnityとFirebaseをつなぐ方法は、Javascriptしかないんじゃない?ってことで、調べてみた。

公式
WebGL: ブラウザースクリプトとの相互作用 - Unity マニュアル

イメージとしては、こんな感じ
f:id:nico-taniku:20190711091549p:plain

.jsファイルじゃなくて、.jslibにして、UnityのAsset/Plugins/WebGL に置くとUnity(C#)からJavascriptの関数を実行したり、戻り値を受け取ったりできるらしい。
お恥ずかしいかな、Javascriptはほとんど使ったことがないので、公式は呪文にしか見えない。もう、不安しかない。でも、やるしかない。

Firebaseを使える環境にする

Firebaseにプロジェクトを作ると案内がでるので被るけど。

1:Firebase CLIをインストールする

CLIとは、コマンドラインインターフェースの略で、コマンド入力で色々操作できるようにするためのツールらしい。

公式リファレンス
Firebase CLI リファレンス  |  Firebase

Macならターミナル、Winならコマンドプロンプトを開き、次のコマンドを入力する。

$ npm install -g firebase-tools

2:Firebaseにログイン

次のコマンドを入力する。ログアウト状態ならブラウザが開いでログイン画面が出るのでログインする。

$ firebase login

3:フォルダを作成する

デスクトップなど任意の場所に新規フォルダを作成しておき、ファイルパスをコピーしておく。
作成したフォルダへ移動するコマンドを入力する。

$ cd(半角スペース)ファイルパス

4:コマンドで初期設定をする

次のコマンドでfirebaseの初期設定が始まる。

$ firebase init

f:id:nico-taniku:20190711095503p:plain:w600
利用するサービスを聞かれるので選ぶ。
・矢印キーでカーソル移動
・スペースで選択
・Enterで決定

Firebaseのデータベースは、Realtime Databaseと Cloud Firestore の2種類ある。
推奨はCloud Firestoreらしいので、そっちにした。
コンソールで作成すると、こんな感じのメニューがある。
f:id:nico-taniku:20190711102856p:plain:w300
これを参照にすすめてく。
今回は、FirestoreとHostingの二つを選択した。
おそらく、選択したサービスで以降の質問が変わってくると思われる。

プロジェクトも同様に矢印キーで選択してEnter。
f:id:nico-taniku:20190711100348p:plain:w600

データベース設定:ルールを聞かれる。そのままEnter。
f:id:nico-taniku:20190711102738p:plain:w600

データベース設定:インデックスを聞かれる。そのままEnter。
f:id:nico-taniku:20190711102714p:plain:w600

ルートフォルダを聞かれる。フォルダ名がpublidで良ければ、そのままEnter。
f:id:nico-taniku:20190711102433p:plain:w600

謎の質問をされる(笑) そのままEnter押すとN選択になり404.htmlが生成される。
f:id:nico-taniku:20190711102610p:plain:w600

詳細はこちら
firebase init 時に聞かれる「Configure as a single-page app (rewrite all urls to /index.html)?」は選択によって何がどう変わるのか - Qiita

初期設定終了
作成したフォルダはこんな感じになる。
f:id:nico-taniku:20190711101923p:plain:w300
publicフォルダに公開したいプロジェクトを入れる。

localhostで実行する

任意で作成したフォルダに移動。(移動済みの場合は不要)

$ cd(半角スペース)ファイルパス

次のコマンドを実行

$ firebase serve

http://localhost:5000/ にアクセスすると、publicフォルダにあるindex.htmlが表示される。

サーバーを終了するには

ターミナルで ctrl+c

デプロイ

デプロイというのは「配備する」という意味の英単語らしい。
私は「配備して使えるようにゴニョゴニョ設定してくれる呪文」と認識した。

本番のサーバーへデプロイするには、cdで移動してから次のコマンドを入力

$ firebase deploy

本番のサイトというのは、Firebaseコンソール > Hosting > ダッシュボード > ドメインの表に書かれたドメインのサイトになる。
ここにドメインを追加したら、そこにもデプロイされるらしい。

本番サイトを停止

$ firebase hosting:disable

以上。
次はログイン編→ Unity(C#)+FirebaseをWebGLで使いたい②:ログイン編 - Roba Memo - 素人のUnity覚書と奮闘記