%3Cbr%3E%0A%3Cbr%3Emicomia株式会社のエンジニア 西村です。今回は、FlutterFlowで簡単なSNSアプリを作るための、Firestoreでのデータベース設計について解説します。%3Cbr%3E%0A%3Cbr%3E以下の機能を備えたSNSアプリを実装するためのデータベースを設計していきます。・ユーザー登録・投稿(タイトル、詳細、画像2枚、日付)・投稿への「いいね」・投稿へのコメント%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3E1.作成するコレクション機能を実現するために、・usersコレクション(ユーザーの情報を保存)・postsコレクション(投稿の情報を保存)・favorite_postsコレクション(「いいね」の情報を保存)・commentsコレクション(コメントの情報を保存)の4つのコレクションを作成します。%3Cbr%3E%0A%3Cbr%3E2.usersコレクション%3Cbr%3E%0A%3Cbr%3EFlutterFlowのプロジェクトを開いて、左のメニューからFirestoreをクリックします。ここから、「Create Collection」、もしくは左上のプラスマークをクリックしましょう。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Eこの画面では、コレクション名を入力して、コレクションを作成します。まずは、ユーザーの情報を保存するコレクション、「users」を作ります。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Eusersという名前のコレクションを作ろうとすると、この画面が出てきます。Flutterflowでは、デフォルトのユーザーコレクションがあり、ここで「Yes」を選択するとそれを自動的に入力してくれます。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Eこれで、usersコレクションが作成できます。%3Cbr%3E%0A%3Cbr%3E3.postsコレクション%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3E次に、投稿の情報を保存するコレクション、「posts」を作ります。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Eコレクション作成では、用意されたテンプレートから選んで作成する方法もありますが、今回は自分で入力して作成していくので、「Start from scratch」をクリックします。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Eこの画面から、フィールドの名前とデータ型を決めていきます。Field Nameにフィールド名を入力し、Data Typeからデータの型を選択します。複数のデータを保存したい場合はis Listをオンにしましょう。入力し終えたら、右端の緑色のチェックマークをクリックして、そのフィールドを追加できます。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Epostsのフィールドは、画像のように作成しました。・user_ref投稿者のユーザー情報を参照するための情報を保存します。これがあることで、投稿から投稿者の情報が取得できます。・title投稿のタイトルを保存します。・detail投稿の詳細文を保存します。・images画像の保存されたURLを保存します。今回は、画像を2枚投稿できるようにしたいので、Listにしています。・created_timeデータが作成された時間、つまり投稿された時間を保存します。%3Cbr%3E%0A%3Cbr%3E4.favorite_postsコレクション%3Cbr%3E%0A%3Cbr%3E次に、投稿の「いいね」情報を保存するコレクション、「favorite_posts」を作ります。同じように「Start from scratch」で作成していきましょう。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Efavorite_postsのフィールドは、画像のように作成しました。・user_refいいねしたユーザーのユーザー情報を参照するための情報を保存します。・post_refいいねされた投稿の情報を参照するための情報を保存します。・created_timeいいねした時間を保存します。「いいね」をする→favorite_postsのドキュメントを作る「いいね」を解除する→favorite_postsのドキュメントを削除するという風に使うことで、誰がどの投稿に「いいね」をしているかの管理ができます。%3Cbr%3E%0A%3Cbr%3E5.commentsコレクション%3Cbr%3E%0A%3Cbr%3E最後に、投稿へのコメント情報を保存するコレクション、「comments」を作ります。%3Cbr%3E%0A%3Cbr%3E%3Cbr%3E%0A%3Cbr%3Ecommentsのフィールドは、画像のように作成しました。・user_refコメントしたユーザーのユーザー情報を参照するための情報を保存します。・post_refコメントされた投稿の情報を参照するための情報を保存します。・contentコメント内容を保存します。・created_timeコメントした時間を保存します。これで、必要な4つのコレクションが作成できました。%3Cbr%3E%0A%3Cbr%3E6.まとめ今回はFlutterFlowで簡単なSNSアプリを作るための、Firestoreでのデータベース設計について解説しました。micomia株式会社では他にもFlutterFlowの解説を行なっていますのでぜひ他の記事もご覧ください。%3Cbr%3E%0A%3Cbr%3E