Firebase Remote Config for JavascriptをWebGLで使う

Firebase Remote Config for Javascriptを WebGLビルドしたゲームで使ってみる 2019/11/20 @Gotanda.unity #14

今日話すこと - Firebase Remote Config for Javascript をWebGLビルドしたゲームで使おうとしてやったこと -
試してみてうまく実装できなかったパターンも載せます - “なぜJavascript?”については後ほど

じぇろめ Twitter @Jerome_1010 Web Engineer, Director / Game Developer.

こんなの作りました Halloween Scramble!! @unity1week “さがす” Voxel models

目次 - Firebase Remote Config - やりたいこと - なぜ for
Javascript - 構成 - 実装内容 - 結果 - まとめ - お世話になったリンク - おまけ：ボツ構成案

Firebase Remote Config - Remote で変更できる Config - リリース無しでアプリ内の文章や画像などを切り替えられる -
ABテストやキャンペーンに便利 - 全ユーザーの10%だけ新UIを試したり - iOS, Android, C++, Unityで使える - 最近Web(Javascript)でも使えるように

やりたいこと - WebGLビルドしたゲームにFirebase Remote Configを入れてA/Bテストしたい！ - unityroomで公開したり - Firebase hosting使って公開したり
- 「Webですぐ出せる」というのがA/Bテストと噛み合っていそう - アプリ出すための審査や申請が不要 - プロトタイプでもすぐ遊んでもらえる

普通に導入すればいいのでは？

普通に導入すればいいのでは？ ->厳しい理由がある

なぜfor Javascript

なぜfor Javascript - Firebase for UnityはWebGLビルドに対応していない・FirebaseAnalytics.unitypackage ・FirebaseAuth.unitypackage ・FirebaseDynamicLinks.unitypackage ・FirebaseRemoteConfig.unitypackage
　… Build OK OK NG

・firebase-app.js ・firebase-auth.js ・firebase-database.js ・firebase-analytics.js ・firebase-remote-config.js 　… なぜfor Javascript - 仮説：WebGLビルドしてからJavascript向けの機能を使えばいいのでは？
Build Firebase Server

- ビルド時に生成されるindex.htmlにscriptタグを追加 - javascriptからゲーム内のオブジェクトとメソッドを指定して実行構成 Firebase Server Build fetch remote
config values Update text in methods Call methods

実装内容 <head> <script src="/__/firebase/7.3.0/firebase-app.js"></script> <script src="/__/firebase/7.3.0/firebase-auth.js"></script> <script src="/__/firebase/7.3.0/firebase-database.js"></script> <script src="/__/firebase/7.3.0/firebase-messaging.js"></script>
<script src="/__/firebase/7.3.0/firebase-storage.js"></script> <script src="/__/firebase/7.3.0/firebase-analytics.js"></script> <script src="/__/firebase/7.3.0/firebase-remote-config.js"></script> <script src="/__/firebase/init.js"></script> <script src="TemplateData/UnityProgress.js"></script> <script src="Build/UnityLoader.js"></script> <script> var unityInstance = UnityLoader.instantiate("unityContainer", "ビルドを判定するためのjson", {onProgress: UnityProgress}); </script> </head>

実装内容 window.onload = function() { try { let app =
firebase.app(); setRemoteConfig(); } catch (e) { console.error(e); }; };

実装内容 function setRemoteConfig() { const remoteConfig = firebase.remoteConfig(); remoteConfig.settings =
{ minimumFetchIntervalMillis: 3600000, }; remoteConfig.defaultConfig = ({ 'text_param': 'firebase value is not loaded! this is default!', }); remoteConfig.fetchAndActivate().then(() => { var configText = remoteConfig.getString('text_param'); unityInstance.SendMessage("GameManager", "UpdateText", configText); }) .catch((err) => { console.error(err); }); };

実装内容(firebase側) - 言語によって出力するテキストを変える

結果 - 言語ごとに異なるテキストを出せた

まとめ - どうしてもjavascriptのライブラリを使いたいならこういう方法もありそう - index.htmlに書いたjsで実装するとunityroomに入れられないので工夫が必要(それをやろうとしたのがボツ構成・実装) - そもそもサクッとテストしたいならDeploygateとかで良いのでは。。。

お世話になったリンク 1/2 - Unity(WebGL)でC#の関数からブラウザー側のJavaScript関数を呼び出すまたはその逆(JS⇒C#)に関する知見(プラグイン形式[.jslib]) https://qiita.com/gtk2k/items/1c7aa7a202d5f96ebdbf - WebGL: ブラウザースクリプトとの相互作用 https://docs.unity3d.com/ja/current/Manual/webgl-interactingwithbrowserscript
ing.html - WebGLアプリをFirebaseにアップして遊べるようにする https://qiita.com/fukaken5050/items/03e07ba3700f5be8c35f

お世話になったリンク 2/2 - Unity(C#)+FirebaseをWebGLで使いたい①：環境整備編 http://robamemo.hatenablog.com/entry/2019/07/11/122923 - Firebase を JavaScript プロジェクトに追加する
https://firebase.google.com/docs/web/setup?hl=ja

ご清聴ありがとうございましたおわり 

- .jslibファイルを作りJSでやりたいことを書いた - 外部JS読み込みのためscriptタグをcreateElementしてsrcに各firebaseファイルを指定 - Remote Configから取得した値は_mallocしてstringToUTF8してC#に渡す - NGポイント -
scriptタグで指定した内容をうまく読めなかった - タイミングの問題でもありそうなので、非同期処理をうまくかければ問題ないかもボツ構成 MyFirebase.jslib Firebase Server Build createElement *when load page Load fetch remote config values return config val call methods

ボツ実装内容(.jslib) LoadScripts: function() { var urls = [ 'https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-auth.js',
'https://www.gstatic.com/firebasejs/7.3.0/firebase-database.js', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-messaging.js', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-remote-config.js', ]; var head = document.getElementsByTagName('head'); urls.forEach( function (value) { var scriptTag = document.createElement('script'); scriptTag.setAttribute('src', value); head[0].appendChild(scriptTag); }); },

ボツ実装内容(.jslib) InitializeFirebase: function () { var firebaseConfig = { apiKey:
"xxxx", authDomain: "xxx", databaseURL: "xxx", projectId: "xxx", storageBucket: "xxx", messagingSenderId: "xxx", appId: "xxx", measurementId: "xxx" }; firebase.initializeApp(firebaseConfig); firebase.analytics(); }

ボツ実装内容(C#) using UnityEngine; using System.Runtime.InteropServices; public class GameController : MonoBehaviour
{ [DllImport("__Internal")] private static extern void LoadScripts(); [DllImport("__Internal")] private static extern void Initializer(); private void Start() { LoadScripts(); InitializeFirebase(); } }

Firebase Remote Config for JavascriptをWebGLで使う

Firebase Remote Config for JavascriptをWebGLで使う

Jerome_1010

More Decks by Jerome_1010

Other Decks in Programming

Featured

Transcript

Firebase Remote Config for Javascriptを WebGLビルドしたゲームで使ってみる 2019/11/20 @Gotanda.unity #14

今日話すこと - Firebase Remote Config for Javascript をWebGLビルドしたゲームで使おうとしてやったこと -

じぇろめ Twitter @Jerome_1010 Web Engineer, Director / Game Developer.

こんなの作りました Halloween Scramble!! @unity1week “さがす” Voxel models

目次 - Firebase Remote Config - やりたいこと - なぜ for

Firebase Remote Config - Remote で変更できる Config - リリース無しでアプリ内の文章や画像などを切り替えられる -

やりたいこと - WebGLビルドしたゲームにFirebase Remote Configを入れてA/Bテストしたい！ - unityroomで公開したり - Firebase hosting使って公開したり

普通に導入すればいいのでは？

普通に導入すればいいのでは？ ->厳しい理由がある

なぜfor Javascript

なぜfor Javascript - Firebase for UnityはWebGLビルドに対応していない・FirebaseAnalytics.unitypackage ・FirebaseAuth.unitypackage ・FirebaseDynamicLinks.unitypackage ・FirebaseRemoteConfig.unitypackage

・firebase-app.js ・firebase-auth.js ・firebase-database.js ・firebase-analytics.js ・firebase-remote-config.js 　… なぜfor Javascript - 仮説：WebGLビルドしてからJavascript向けの機能を使えばいいのでは？

- ビルド時に生成されるindex.htmlにscriptタグを追加 - javascriptからゲーム内のオブジェクトとメソッドを指定して実行構成 Firebase Server Build fetch remote

実装内容 <head> <script src="//firebase/7.3.0/firebase-app.js"></script> <script src="//firebase/7.3.0/firebase-auth.js"></script> <script src="//firebase/7.3.0/firebase-database.js"></script> <script src="//firebase/7.3.0/firebase-messaging.js"></script>

実装内容 window.onload = function() { try { let app =

実装内容 function setRemoteConfig() { const remoteConfig = firebase.remoteConfig(); remoteConfig.settings =

実装内容(firebase側) - 言語によって出力するテキストを変える

結果 - 言語ごとに異なるテキストを出せた

お世話になったリンク 2/2 - Unity(C#)+FirebaseをWebGLで使いたい①：環境整備編 http://robamemo.hatenablog.com/entry/2019/07/11/122923 - Firebase を JavaScript プロジェクトに追加する

ご清聴ありがとうございましたおわり

- .jslibファイルを作りJSでやりたいことを書いた - 外部JS読み込みのためscriptタグをcreateElementしてsrcに各firebaseファイルを指定 - Remote Configから取得した値は_mallocしてstringToUTF8してC#に渡す - NGポイント -

ボツ実装内容(.jslib) LoadScripts: function() { var urls = [ 'https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-auth.js',

ボツ実装内容(.jslib) InitializeFirebase: function () { var firebaseConfig = { apiKey:

ボツ実装内容(C#) using UnityEngine; using System.Runtime.InteropServices; public class GameController : MonoBehaviour