The Round

合同会社ナイツオの開発ブログ

[PR] 5分から相談できるGCP™ 開発コンサル!→こちら

Firebaseでチャットアプリを作る日記(5日目)〜 ルームを作成する

本日よりいよいよチャット本体の作成にとりかかります。

まずはチャットルーム(SlackでいうところのChannel)の追加機能をつくります。

Cloud Firestore (Native mode)

FirestoreのNative modeについて調べます。

firebase.google.com

眺めてざっくりと所感。

階層的なデータ構造

ドキュメントというデータと、それを複数含むコレクションというものがあるらしい。フムフム。 RDBでいうとドキュメントはレコード、コレクションはテーブルみたいなイメージでしょうか。Cloud Datastore(以降Datastore)だとエンティティとカインドですね。

ドキュメントはさらにサブコレクションを持ちコレクションはまたドキュメントを複数持つことができるとのこと。100階層までいけるらしい(さすがにアンチパターンな匂いがする^^;)。

なんだかすごく複雑ですが、これってDatastoreにおけるエンティティグループの構造に似てますね。Key('Room', 123, 'Message', 456) みたいなKeyがあったときにRoomがコレクション、Messageがサブコレクションっぽいです。 的外れだったらごめんなさい 🙇

あと、ドキュメントはスキーマレスとのこと。ますますDatastoreに似てますね。まぁFirestoreとDatastoreは親戚みたいなもの(?)なのであながち間違っていないかも。

高機能なクエリ

クエリの機能もDatastoreに限りなく似てます。

インデックスが必要な点や、制約 もほぼ同じ。

最近 array-contains-any in などがサポートされたみたいですね。ソートまでしてくれるとしたらかなり便利そう。

Collection Group Queryというのもサポートされたらしいですが、みたカンジDatastoreでは一般的なグローバルクエリ(非Ancestorクエリ)ぽいです。

リアルタイム アップデート

これはDatastoreにはないですね。

Realtime Databaseから継承した機能の様です。チャットの更新につかえそう(^^)

オフライン サポート

これも便利そう!今回の開発で使うかどうかは未定ですが、時間があったら調べてみます。

ルームを作成

それではルームを作成します。

ルーム仕様

ルームの仕様はとりあえずこんなカンジです。

  • ルーム名と参加者(とりあえずメールアドレス)を指定して作成
  • 作成者含むユーザー複数の参加者で構成される
  • 参加者ユーザーはサインインすると自分が参加してるルーム一覧が表示できる
  • ユーザーは自分の参加するルームを横断して検索できる(難しそう?)

登録画面イメージ

参加者ユーザーの存在確認や招待機能はとりあえずなしで。 (とりあえず、ばかりでゴメンナサイ 🙇)

データ構造

  • コレクション - rooms
  • id - 自動採番
プロパティ 説明
name string ルーム名
owner string 作成ユーザー
members array 参加者リスト

実装の前に

firebase init で生成したindex.htmlに下記のコードが入っています。

    <script defer src="/__/firebase/7.5.2/firebase-database.js"></script>

これはRealtime Database用のコードの様なので、Firestore用に書き換えます。

    <script defer src="/__/firebase/7.5.2/firebase-firestore.js"></script>

コード

参考: Add data to Cloud Firestore  |  Firebase

export function addRoom(name, owner, members) {
  let db = firebase.firestore();

  return db.collection("rooms").add({
    name: name, 
    owner: owner,
    members: members
  })
  .then(function(docRef) {
    let roomId = docRef.id;

    console.log("A document written with ID: ", roomId);

    // 登録したコードを追加(Svelte)
    let room = {id: roomId, name: name, owner: owner, members: members};
    _rooms = [..._rooms, room];
    rooms.update(list => list.concat(room));

    return room;
  });
}

追加されました!\(^o^)/

ちなみに認証に続いて今回もローカル実行でプロダクションのFirestoreに保存されてしまいました。

お手軽だけどちょっと怖いですね。エミュレータがあるはずだけどどうやって有効にするのだろう→宿題

まとめ

非常に簡単にデータをインサートできました(^^)

しかし、ユーザーがスクリプト実行して簡単に不正データを登録したり参照したり出来そう。

Firestore Native modeにはセキュリティルールという機能があってこれを使って不正アクセスを防ぐ様です。この辺り今後調べていきます。