Firebase で無料で作るハイスコアDB(2) : 課金・認証を考える

6565 ワード
Firebase JavaScript ゲーム制作 JavaScript テキストリンク

前回までの砂漠のひつじ

無料プログラム学習用ピコピコゲーム砂漠のひつじを作成しつつ、その過程を記事にしている。
現在はハイスコア実装編で、DBをfirebaseに選定し実装を行っている最中となる。

課金に関するあれこれ

読み取り、書き込みで課金が発生。
Spackプランの無料枠は以下。

処理 件数
書き込み 2万/日
読み取り 5万/日

「回数」ではなく「件数」っぽいので注意。

ハイスコアテーブルという性質上、上位のスコアとしての書き込みは極めて少ないハズ。
そこで、Functionsを利用して、『書き込みイベント時に上位レコードを集計して1レコードにまとめる処理』を作りたかったが、SparkプランではFunctionsが利用できなくなっていたので断念した。
※挫折気味のサンプルコードはリポジトリに一応コミットしておいた。

現状、20件程のダミーレコードを用いて少し開発していただけで、読み取り数が680となっていたため、まともなアクセスがあればあっという間に読み取り数5万件に到達するように思えた。

ユーザーにはハイスコア登録を行っている事を知らせるため、ファーストビューでハイスコアの表示を行いたいが、Functions が動かせないため、1日1回ハイスコア更新などの実装にはできない。
そこで、ハイスコアは起動時にキャッシュし、ハイスコアに「自分のスコア」がエントリーしない限りは更新されなくてもさして問題ないとして、取得したハイスコアより自分のスコアが上回った時のみハイスコアを更新する仕様として、可能な限り読み取り回数を減らすこととした。

DB書き込みについて

オールドゲームらしく誰でも任意のニックネームでハイスコアを登録可の仕様とする予定であった。
しかし、webapp の場合、firebaseのdatabaseURLが取得可能であるため、「誰でも」登録可とした場合、外部から何らかの方法でデータ登録が可能になり課金されることが懸念される。

そのためDBにスコア登録可能となるのはログイン済みのユーザーとすることにした。
firebase.auth.AuthUI()を使うと非常に簡単にSNSログインを実装できた。

auth.js
var firebaseAuthUiConfig = {
  autoUpgradeAnonymousUsers: true,
  signInFlow: 'popup',
  signInOptions: [
    // ログイン可能としたいproviderを列挙
    // Facebook, Twitter, Github はそれぞれアプリ作成が必要
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
  ],
  tosUrl: './terms-of-service.html',
  privacyPolicyUrl: './privacy-policy.html',
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      console.log('signed in')
      return false;
    }
  }
};

var firebaseAuthUi = new firebaseui.auth.AuthUI(firebase.auth());
game.js
// 指定したタグに対してログインUIを作成する
firebaseAuthUi.start('#firebaseui-auth-container', firebaseAuthUiConfig)
index.html
// firebaseによるログインUIが作成されるタグ
<div id="firebaseui-auth-container"></div>

ただ、無名のゲームでいきなり会員登録を求めるとそもそもプレイしてもらえないと思うので、結果画面でハイスコアが更新された時のみログインを求める実装とすることにした。

※ログインUI。ログイン方法を選択するとポップアップが表示される。

おわりに

今回はハイスコア処理を完成させる予定だったが、認証処理も追加したため完了しなかった。
とは言え、firebaseはSNSログインもクソ簡単ですごかった。

作業中のファイルは以下にコミット済：
https://github.com/kaku3/the-sheep-in-the-desert/tree/feature/firebase