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

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

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

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

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

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

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

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

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

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

Firebaseを初期化する

例によって強引に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]

この例では、contactコレクションから20個データを取って来て

メッセージに１つ目の内容を表示しています

まとめ

ティラノスクリプトでもFirebase使える！

[iscript]タグは万能！

いやぁー。もう何でも作れそうですね。