ティラノスクリプトにfirebaseを連携させて自在に操る

f:id:hollywis:20200809020407j:plain

前回、シナリオゲームが手軽に作れるティラノスクリプトに

強引にVue.jsを入れることをやりましたが。

次は、、、Firebaseを入れたい！！

やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。

そしてFirebaseのFirestoreならとても扱いやすい。

もし、Firebaseとティラノスクリプトが掛け算できるなら

どんなものでも作れそうですよね。

それではいきましょう！！

Firebaseを初期化する
呼び出す！
まとめ

Firebaseを初期化する

f:id:hollywis:20200809014750p:plain

例によって強引にindex.htmlにscriptタグを埋め込みます。
firestoreとauthを使いたかったのでそれも入れています。

first.ksなどで初期化します。

;Firebase
[iscript]
console.log("Init firebase");
// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
  apiKey: 'xxxxx',
  authDomain: 'yyyyy.firebaseapp.com',
  projectId: 'zzzzzzz'
});

f.db = firebase.firestore();
f.auth = firebase.auth();
[endscript]

初期設定をして

ティラノスクリプトのゲーム変数(f)にdbとauthを登録しておきます。

呼び出す！

こんな感じで、例えばscene1.ksのiscriptタグの中で

firebase authenticationのユーザログイン情報を取得したり。

;Firebase
[iscript]
f.auth.onAuthStateChanged(user => {
        if (user) {
          f.displayName = user.displayName;
          f.email = user.email;
          f.uid = user.uid;
        }
});
[endscript]

こんな感じで、firestoreの任意のコレクションからデータを取ったりできます

;Firebase
[iscript]
(async () => {
   let query = await f.db.collection("contact")
      .orderBy("created","asc").limit(20);

    const snapShot = await query.get();

    const datas = snapShot.docs.map(doc => {
      return doc.data();
    });
   console.log(datas);
})();
[endscript]


f.msg の内容 : [emb exp="f.msg"][p]