Firebase Remote Config for JavascriptをWebGLで使う

https://learning.unity3d.jp/4161/
https://www.youtube.com/watch?v=XAooJ7qZ-j8

Transcript

1. Firebase Remote Config for Javascriptを WebGLビルドしたゲームで使ってみる 2019/11/20 @Gotanda.unity #14
2. 今日話すこと - Firebase Remote Config for Javascript をWebGLビルドしたゲームで使おうとし てやったこと - 試してみてうまく実装できなかったパターンも載せます - “なぜJavascript?”については後ほど
3. じぇろめ Twitter @Jerome_1010 Web Engineer, Director / Game Developer.
4. こんなの作りました Halloween Scramble!! @unity1week “さがす” Voxel models
5. 目次 - Firebase Remote Config - やりたいこと - なぜ for Javascript - 構成 - 実装内容 - 結果 - まとめ - お世話になったリンク - おまけ：ボツ構成案
6. Firebase Remote Config - Remote で変更できる Config - リリース無しでアプリ内の文章や画像などを切り替えられる - ABテストやキャンペーンに便利 - 全ユーザーの10%だけ新UIを試したり - iOS, Android, C++, Unityで使える - 最近Web(Javascript)でも使えるように
7. やりたいこと - WebGLビルドしたゲームにFirebase Remote Configを入れてA/Bテストしたい！ - unityroomで公開したり - Firebase hosting使って公開したり - 「Webですぐ出せる」というのがA/Bテストと噛み合っていそう - アプリ出すための審査や申請が不要 - プロトタイプでもすぐ遊んでもらえる
8. 普通に導入すればいいのでは？
9. 普通に導入すればいいのでは？ ->厳しい理由がある
10. なぜfor Javascript
11. なぜfor Javascript - Firebase for UnityはWebGLビルドに対応していない ・FirebaseAnalytics.unitypackage ・FirebaseAuth.unitypackage ・FirebaseDynamicLinks.unitypackage ・FirebaseRemoteConfig.unitypackage 　… Build OK OK NG
12. ・firebase-app.js ・firebase-auth.js ・firebase-database.js ・firebase-analytics.js ・firebase-remote-config.js 　… なぜfor Javascript - 仮説：WebGLビルドしてからJavascript向けの機能を使えばいいのでは？ Build Firebase Server
13. - ビルド時に生成されるindex.htmlにscriptタグを追加 - javascriptからゲーム内のオブジェクトとメソッドを指定して実行 構成 Firebase Server Build fetch remote config values Update text in methods Call methods
14. 実装内容 <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>
15. 実装内容 window.onload = function() { try { let app = firebase.app(); setRemoteConfig(); } catch (e) { console.error(e); }; };
16. 実装内容 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); }); };
17. 実装内容(firebase側) - 言語によって出力するテキストを変える
18. 結果 - 言語ごとに異なるテキストを出せた
19. まとめ - どうしてもjavascriptのライブラリを使いたいならこういう方法もありそう - index.htmlに書いたjsで実装するとunityroomに入れられないので工夫が必要(そ れをやろうとしたのがボツ構成・実装) - そもそもサクッとテストしたいならDeploygateとかで良いのでは。。。
20. お世話になったリンク 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
21. お世話になったリンク 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
22. ご清聴ありがとうございました おわり

23. - .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
24. ボツ実装内容(.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); }); },
25. ボツ実装内容(.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(); }
26. ボツ実装内容(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(); } }