Firebase のデータベースの利用事例

Firebase のデータベースの利用事例

Firebase のデータベースの活用方法の一つを紹介します。 通常のデータベースとして利用する以外にも便利な利用方法があります。 それは、Firebase のデータベース（Cloude Firestore）は、高速にアクセスが可能というメリットがあります。 これを利用すると、Web アプリや Web サービスの価値を高める事が可能です。

意外にアクセスに時間がかかる外部の Web サービス

Web アプリを開発する場合、全て自分で開発する場合もありますが、必要なサービスを自分のサービスに取り込んで利用する形で実装するケースも意外に多い物です。

外部のサービスを取り込んで利用する例としては、

＊　オンライン決済（PayPal や Stripe など）

＊　メッセージの送信（MailChamp や SendGrid など）

＊　Google の各種サービス（Map や Google Analytics など）

などいろいろあります。

機能的には、こうした外部のサービスがサポートしている API を利用すると、特に Firebase のデータベースを利用する必要はありません。

しかし、実際にこうした外部のサービスを利用する場合の多くは、フロントエンド（Web ブラウザ）から直接アクセスするよりは、バックエンドを介して実装する仕組みになっている場合が多くなります。主な理由は、セキュリティです。外部のサービスが発行する秘密鍵（Private Key）を利用してアクセスする必要があるため、ソースコードが参照可能なフロントエンドのプログラムではなく、バックエンドでアクセスを中継する形で実装する場合が多くなります。

実際に、実装をしてみると、機能上は問題が無い物の、必要なデータを外部サービスのサーバーから取得して表示するまでに待ち時間が多いことがあります。

開発時のテストの場合は、データ量も少ない場合が多いですが、「待たされる」という感じる事が結構あります。

Firebase のデータベースのアクセスは高速！

一方で、Firebase のデータベース（Cloud Firestore）の実施例（チュートリアル）などでよく紹介されているアプリにチャットアプリ（メッセンジャーアプリ）がよく取り上げられています。これは、Firebase のデータベースは、チャットアプリのように比較的リアルタイムに近い形でデータを共有できる特長があるからです。

例えば、MailChamp や SendGrid のように、マーケティングメッセージを送るサービスの場合、マーケティングのメッセージを送る送付先の一覧を取得したい場合があります。UI でそのリストから送付先を選択したりする機能を作る場合、こうしたアクセスが必要です。

この画面を呼び出した時に、一覧を表示するには、送付先の一覧を外部のサービスプロバイダから取得する必要があります。その際、取得に時間がかかって画面が表示されるまでに数秒から数十秒かかる場合があります。数秒ならば余り気にならないレベルですが、数十秒かかるとなると、利用者は「待たされている」と感じるようになります。

そうした、待ち時間の削減や、利用者に快適な利用（よりよいユーザー体験）をしてもらうために、改善策ができるとより質の高いサービスが提供できる事になります。

そこで、よく利用されるのが、Firebase に必要なデータのコピーを作って、データをそちららか取得するという方法があります。アクセスの時間は条件やデータによって結構幅がありますが、外部のサービスプロバイダーから取得すると、数十秒かかるアクセスが、Firebase からデータを取れると、数秒で済むという事例もあります。そう考えると、１０倍から１００倍程度高速化できる場合もあるという事になります。

データの「キャッシュ」として Firebase のデータベースを利用

一言で言うと、Firebase のデータベースを外部サービスのデータの「キャッシュ」として利用すると言う事です。「キャッシュ」と言う言葉はよく CPU のメモリアクセスを高速化する技術として使われています。CPU の外にある「メモリ」は、十分高速なアクセスができますが、CPU の命令を実行するスピードと比べるとまだまだ時間がかかる物です。そこで、メモリにあるデータの一部を CPU の中にあるより高速でアクセスできるメモリにコピーしておいて、命令の実行に合わせてデータを取り出せるようにしています。

それと似たことを、サービスで使うデータに使う事ができます。 予め、必要なデータを Firebase のデータベースにコピーしておいて、フロントエンドのプログラムは、外部のサービスではなく、Firebase からデータを取得できるようにすると、利用者の待ち時間は多くの場合、劇的に改善される場合が多くなります。

利用のコツは？

こうした仕組みを作る場合のコツは幾つかあります

＊　いつデータをコピーするか

＊　データの更新はどうするか

＊　更新されたデータをどうやって取得するか

この 3 点がこうした仕組みを作る場合のポイントです。

いつデータをコピーするか？

これは、最初にサービスを起動した時（Web サービスの入り口のページにアクセスした時）に裏方でデータのリクエストをして、Firebase のデータを最新にするようにすると上手くいく場合が多いです。この時点では、データはまだ必要がないので、別のページを表示しているときに予め必要になるであろうデータのリクエスをして、外部のサービスプロバイダーの持っている「マスタデータ」を Firebase に入れる処理を呼び出して置きます。

これで、データが必要な時は、外部のサービスプロバイダからではなく、Firebase のデータベースからデータを取得できます。

データの更新はどうするか？

サービスを利用していると、外部のサービスプロバイダのデータを追加したり、修正したり、あるいは削除する場合が発生します。基本的にこうした処理もバックエンドを経由して行われるので、そのリクエスがあった場合に、外部のサービスプロバイダのデータだけでなく、Firebase のデータを一緒に更新しておけば、Firebase のデータは常に外部のサービスプロバイダと同じにする事ができます。

このように、Firebase のデータベースのデータを最新に保つように処理することで、毎回外部のサービスプロバイダからデータを読む手間を省く事ができます。

更新されてデータをどうやって取得するか？

外部のサービスプロバイダのデータの更新は、他の利用者が行う可能性もあります。そうすると、表示中のデータは古い物になってしまう可能性があります。 定期的に、Firebase のデータをチェックして表示を更新する方法もありますが、Firebase のデータベース（Cloud Firestore）では、「onSnapshot」と言う機能を提供していて、Firebase のデータベースの指定したデータが更新されたイベントを検出して、処理を呼び出す事が可能です。この機能を利用すると、他の利用者が外部サービスのデータを更新した場合でも、Firebase のデータが更新されたのを検出して、表示データを更新する事が簡単にできます。

firebase

  .firestor()

  .collection("sample")

  .onSnapshot((querySnapshot) => {

    updateDisplay(querySnapshot);

  });

のように書いておくと、更新されたデータで表示を自動的に更新することが簡単にできます。 この方法だと、例えば、Firebase からデータを取得する処理を呼び出す前に、外部のサービスに Firebase のデータベースにコピーを作る呼び出しをしておいて、この「onSnapshot」の処理を呼び出すと、最初のデータがまだ Firabase にない場合でも、Firebase のデータベースの更新の処理が終わると、自動的に画面のデータを更新するような処理になるため、外部サービスの処理の完了を待たずに処理を進めることができるので効率的な処理が可能になります。

まとめ

Firebase のデータベース（Cloud Firestore）は、高速なアクセスが可能なので単なるデータベースとしての利用はもちろん、別の余り高速でないサービスのデータの「キャッシュ」としても利用できます。

同じ機能を利用者に提供する場合でも、利用者の待ち時間が少ないと利用者のサービスに対する印象は大きく変わる物です。ちょっとした工夫ですが、より良いユーザーエクスピリエンスを提供する事で、より魅力的なサービスにする事が可能です。

Firebase のデータベース（Cloud Firestore）はデータの更新のイベントを検出して処理する機能も提供しているのでこうした利用でも簡単なプログラムで実現できます。