はじめに
今回は、FlutterFlowでFirestoreにコレクションを作成する方法を紹介します。
Firestoreにコレクションを作成するには、先にFirebaseの接続が必要となります。
まだFirebaseに接続していない場合、以下の記事からFirebaseの接続を行ってください。
【FlutterFlow】既存のプロジェクトにFirebaseを接続する方法
Firestoreにコレクションを作成
左ナビゲーションメニューからFirestoreを選択します。
Add new collectionボタンやCreate Collectionボタンをクリックし、Collectionを追加しましょう。
Collectionとは、ドキュメントのグループです。
Collectionは、データベースにおける「テーブル」と同様と認識すればわかりやすいです。
例えば、各ユーザーが保存されているのがUsersコレクションというイメージです。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ec2_65bc9917020e2d48bb1e6406_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.18.49.png)
Collectionの名前をつけて、Createボタンで作成します。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ef6_65bc9920c6437dcda5c519f7_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.19.17.png)
Collectionが作成されたら、Start from scratchボタンをクリックし、各Fieldを作成しましょう。
この他にも定番のテンプレートから作成したり、AIで自動生成することが可能です。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ee7_65bc99298e90f23aa21c2dd5_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.19.29.png)
この例ではplacesコレクションのFieldを入力しています。
フィールド名とData Typeを選択し、チェックマークで押して、変更を確定します。
配列のフィールドにしたい場合、is Listを有効にしてください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ebf_65bc9937fceb78980b9d4f16_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.20.18.png)
フィールドの編集が完了しました。
コンテンツを追加
Manage Contentボタンを押して、Firebase Content Manager画面に移動し、コンテンツを追加を行いましょう。
Firebase Content Managerでは、コンテンツの参照、追加、編集、削除などが行なえます。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ee0_65bca7654f47c48581f5da45_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.21.12.png)
Firebase Content Manager画面が別タブで開きました。
今回はUpload CSVボタンをクリックし、CSVファイルからコンテンツを一括追加しましょう。
手動でコンテンツを追加する場合、Add Documentボタンからコンテンツ追加ができます。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ed2_65bca803f0d88e12d9d31269_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.21.45.png)
Select Fileボタンをクリックし、CSVファイルを選択します。
今回は、あらかじめダウンロードした、places.csvを選択します。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ef1_65bca8693a1ce926bbba95b4_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.21.57.png)
Upload CSVボタンをクリックします。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ecf_65bca8bc899baaff6a94d553_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.22.09.png)
コンテンツに問題がなければ、Validate & Importボタンをクリックし、コンテンツをインポートします。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472eeb_65bca8edb882911ecf296ac0_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.22.19.png)
コンテンツのインポートが完了しました。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ee3_65bca923476e9eaa5b86fd74_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.22.43.png)
Firestore Rulesの設定
次にFlutterFlowのプロジェクト画面に戻り、Firestore Settingsタブを選択します。
Firestore RulesのDeployボタンを押して、Rulesをデプロイしてください。
Firestore Rulesは、Firebaseのデータを保護するための機能です。
許可されたユーザーのみが特定のデータにアクセスできるように制限をかけることができます。
制限に関する詳細な設定については以下の記事を参考にしてください。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472ed6_65bca937ce634d2ec19a894c_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.24.02.png)
Deploy Nowボタンをクリックし、デプロイしましょう。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472edd_65bcaacabff35ecccd2982c5_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.24.14.png)
デプロイが完了しました。
![](https://cdn.prod.website-files.com/65a632336ea3b09b1f0d5aa3/65cdf44af649ae7d60472eee_65bcaad6e8b7031b282cee16_%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-02-02%252015.24.30.png)
さいごに
今回は、FlutterFlowでFirestoreにコレクションを作成する方法を紹介しました。