はじめに
「FlutterFlowでSupabaseと連携して認証機能を実装する」の記事では、FlutterFlowとSupabaseを連携して認証機能を実装する手順をご紹介しました。
今回は、Supabase連携の第二弾として、日記アプリでSupabaseと連携してデータの取得・作成・編集・削除の機能を実装する手順をご紹介します。
前提
今回は、Supabase連携第一弾の記事「FlutterFlowでSupabaseと連携して認証機能を実装する」の手順を全て完了している前提で進めます。本記事の内容に着手する前に第一弾の記事の手順を完了させてください。
また、今回実装するメインの機能は下記の4つになります。
- Insert Row…Supabaseのテーブルに行を追加する
- Update Row…Supabaseの行を指定された値で更新する
- Delete Row…Supabaseのテーブルから行を削除する
- Query…Supabaseのデータを表示する
詳細はドキュメントからも確認できます。
Supabaseでの作業
まずはSupabaseで必要な作業を行います。
連携テーブルの作成
Supabaseで連携するテーブルを作成します。今回は例として日記アプリを作成しますので、日記を保存する「diary」テーブルを作成します。
SupabaseのDashboardにアクセスし、プロジェクトを選択したらナビゲーションメニュー「Table Editor」>「Create a new table」をクリックします。
下記を参考に、diaryテーブルを作成してください。
- Name…
diary - Enable Row Level security(RLS)…チェックをオフ ※今回は本番公開しないためルール設定を行っていませんが、本番公開する場合はチェックをオンにして適切なルール設定を行ってください（Supabaseドキュメント「Row Level Security」）。
- columns…下記のカラムを追加してください。
| Name | Type | 保存内容 |
|---|---|---|
| id | int8 | diaryデータのid。Primaryにチェックをつけます。 |
| created_at | timestamptz | データ作成時のタイムスタンプ。 |
| created_by | uuid | 作成者。userテーブルのデータと紐づけて保存します。 |
| date | date | 日記の対象の日付。 |
| body | text | 日記の本文。 |
| title | text | 日記のタイトル。 |
created_byは、userテーブルのデータと紐づけたいので、カラム名の隣のリンクアイコンをクリックしてforeign key relationの設定画面を開きます。各項目は下記を参考に設定してください。
FlutterFlowでの作業
それでは、FlutterFlowでの作業に移ります。
Supabase設定の更新
Supabaseで設定を更新したので、FlutterFlow側での取得情報も最新化します。
FlutterFlowのナビゲーションメニュー「Settings and Integrations」>「Supabase」を開き、「Get Schema」ボタンをクリックします。
「Supabase Storage」以下にdiaryテーブルが表示されれば更新成功です。
ページ・エレメントの追加
まず、今回必要な下記の3ページを「New Page」から追加します。現時点ではBlankの状態で構いません。
- CreateDiary…日記作成ページ
- EditDiary…日記閲覧・編集ページ（完成したCreateDiaryをコピー）
- DiaryList…日記一覧ページ
次に、過去の記事で作成したマイページに、CreateDiaryページに遷移できるようにButtonエレメントを追加し、遷移アクションを設定します。
CreateDiary（日記作成ページ）
このページでは新規日記を追加する「Insert Row」を主に実装していきます。
ページ作成
まずは、日記を作成するページを作成します。Blankで新規ページを追加し、diaryテーブルのField通り、下記のエレメントでタイトルと本文の入力欄、日付を選択するDatePickerを作成します。
- 日付選択欄…Iconエレメント（カレンダー）とText Fieldエレメント（Read Only）
- タイトル・本文入力欄…Text Fieldエレメント
- 保存ボタン…Buttonエレメント
完成図
Date Pickerの設定
FlutterFlowでは、DatePickerはボタンなどの好きな素材にアクションで実装することができます。
今回は、カレンダーのIconエレメントをクリックしてDate Pickerを実行し（Action1）、選択した日付をText Fieldに表示する（Action2）アクションを設定します。
それではIconエレメントを選択してAction Flow Editorを開き、以下を参考に設定します。
Action1
| 項目 | 設定内容 |
|---|---|
| Action |
Widget/UI Interactions>Date/Time Picker。 |
| Date/Time Picker Type |
Date。今回は日付のみ保存したいのでDateを選択します。 |
| Default Date/Time |
Global Properties>Current Time。 |
| Allow Past Date/Time | オン。今回は過去日付の日記も作成できるようにしたいのでチェックをオンにします。 |
| Allow Future Date/Time | オフ。未来の日記は作成できないようにします。 |
Action2
| 項目 | 設定内容 |
|---|---|
| Action |
State Management>Set Form Field
|
| Value |
Widget State>Date Picked
|
| Available Options | DateTime Format |
| DateTimeFormat Options | Custom |
| Custom Format | yyyy/M/d |
※Date Pickerで選択した日付は「Widget State」>「Date Picked」で使用できます。
アクション設定
新規日記を作成するアクションを設定します。
「保存」ボタンをクリックしてAction Flow Editorを開き、下記を参考にAction1、2を設定します。
- Action1
| 項目 | 設定内容 |
|---|---|
| Action |
Backend/Database>Supabase>Insert Row
|
| Action Type | Insert Row |
| Table | diary |
各Fieldは下記を参考に設定します。
| Field | Value |
|---|---|
| created_by | User ID |
| date | Date Picked |
| body | TextField2（本文を入力） |
| title | TextField1（タイトルを入力） |
※id Field…SupabaseでPrimary Keyにチェックを入れているので、int8の範囲で重複しないように自動で採番してくれます。ここでの設定は不要です。
※created_at Field…SupabaseでFieldのDefault Valueにnow()を設定しているので、自動で現在時刻を保存してくれます。ここでの設定は不要です。
- Action2
| 項目 | 設定内容 |
|---|---|
| Action | Navigate To |
| Select Page | DiaryList |
これで、新規日記の作成ページは完了です。
DiaryList（日記一覧ページ）
次に、本人が作成した日記すべてを表示する一覧ページを作成します。このページでは主に「Query」を実装します。
ページ作成
下記のエレメントで日記のタイトルを表示する一覧を作成します。
- 一覧…ListViewエレメント
- 一覧のタイトル表示部…Textエレメント
※ListTitleエレメントで代用も可。
ListViewで、作成した日記を表示する設定をします。ListViewエレメントをクリックして「Backend Query」を開き、「Add Backend Query」をクリックします。
ListViewで表示するデータの設定画面が表示されるので、下記を参考に設定します。
| 項目 | 設定内容 |
|---|---|
| QueryType | Supabase Query |
| Table | diary |
| Query Type | List of Rows |
| Filter 1 | ログインしているユーザー自身が作成した日記のみを表示できるように設定します。 |
| Filter 1 - Field Name | created_by |
| Filter 1 - Relation | Equal To |
| Filter 1 - Value | User ID |
| Order By 1 | 日記の日付が新しい順に表示されるように設定します。 |
| Order By 1 - Table Field Name | date |
| Order By 1 - Order | Decreasing |
次に、ListView上でタイトルを表示するTextエレメントの設定をします。Textエレメントをクリックして、「Text」に「diary Row」>「title」を選択します。
これで、自分が作成した日記をリスト表示できるようになりました。
アクション設定
タイトルを表示するTextエレメントをクリックして、選択した日記の閲覧・編集ページ（EditDiary）に遷移するアクションを設定します。
Textエレメントを選択して「Action Flow Editor」を開き、下記を参考に設定します。
| 項目 | 設定内容 |
|---|---|
| Action | Navigate To |
| Select Page | EditDiary |
ここで、クリックした日記情報をEditDiaryページに渡せるようParameterを設定します。「Parameters」>「Define」をクリックするとEditDiaryページのParameter設定パネルが開くので、下記を参考に設定します。
| 項目 | 設定内容 |
|---|---|
| Parameter Name | diary |
| Type | 「Supabase Row」。選択した行の情報をパラメータとして渡せます。 |
| Table Name | diary |
「Confirm」をクリックすると、DiaryListページに戻ってきます。再度ListView上のTextエレメントのAction Flow Editorを開き、「Parameters」>「Pass」をクリックします。
すると「diary」が表示されるので、Valueに「diary Row」を設定します。
これでページ遷移の設定は完了です。
EditDiary（日記編集ページ）
次に、選択した日記を編集する一覧ページを作成します。このページでは主に「Update Row」と「Delete Row」を実装します。
まずは必要なエレメントを配置します。基本的にCreateDiaryページと同じ構成なので、っコピーして作成するのがおすすめです。
最下部にゴミ箱のIconエレメントを追加しています。
ページ作成
※CreateDiaryのエレメントをコピーしている前提で進めます。
各エレメントで、選択した日記のデータを表示する設定をしていきます。
- 日付…「Text Field Properties」>「Initial Value」
| 項目 | 設定内容 |
|---|---|
| Set from Variable |
Page Parameters>diary
|
| Supabase Row Fields | date |
| Available Options | DateTime Format |
| DateTime Format Options | Custom |
| custom Format | yyyy/M/d |
※Date Pickerの設定はCreateDiaryと同じです。
- タイトル…「Text Field Properties」>「Initial Value」
| 項目 | 設定内容 |
|---|---|
| Set from Variable |
Page Parameters>diary
|
| Supabase Row Fields | title |
- 本文…「Text Field Properties」>「Initial Value」
| 項目 | 設定内容 |
|---|---|
| Set from Variable |
Page Parameters>diary
|
| Supabase Row Fields | body |
アクション設定（日記の編集）
「変更を保存」をクリックして、日記を上書き保存するアクションを設定します。
「変更を保存」Buttonエレメントを選択して「Action Flow Editor」を開き、下記を参考に設定します。
日記の編集アクションは分岐が発生するので今までよりは多少複雑になります。下記が一連のアクションです。
- 手順1. Condition設定…日付の変更有無を確認するCondition
EditDiaryページのDate Pickerで再度日付を選択しないと、「Widget State」>「Date Picked」の値は空欄になります。そのため、再度日付を選択した場合（Is Set=IF）としない場合（Is Not Set=ELSE）でdate fieldに保存する値をそれぞれ設定する必要があります。
「Add Conditional」をクリックしてConditionを設定します。下記を参考に設定してください。
| 項目 | 設定内容 |
|---|---|
| Condition |
Conditions>Single Condition
|
| First Value |
Widget State>Date Picked
|
| ConditonのType | Is Set |
- 手順2. Action1・Action2設定…選択した日記データを更新するアクション
各Fieldの値以外はIFとELSEで同じ設定になります。
| 項目 | 設定内容 |
|---|---|
| Action |
Backend/Databas>Supabase>Update Row
|
| Action Type | Update Row |
| Table | diary |
「Matching Rows」の部分で、本アクションの対象となるRowを決めるFilterを設定します。
| 項目 | 設定内容 |
|---|---|
| Field Name | id |
| Relation | Equal To |
| Value |
Page Parameters>diary>id
|
各Fieldの値を設定します。ここはIFとELSEで異なる部分になります。
編集で変更できるFieldのみ設定するので、date、body、title Fieldが対象となります。
| Field | Value |
|---|---|
| date - IFの場合 |
Widget State>Date Picked
|
| date - ELSEの場合 |
Page Parameters>diary>date
|
| body | TextFieldBody（body） |
| title | TextFieldTitle（title） |
- 手順2. Action3設定…DiaryListページに遷移するアクション
| 項目 | 設定内容 |
|---|---|
| Action | Navigate To |
| Select Page | DiaryList |
これで、日記を編集後、日記一覧ページに遷移するアクションが設定できました。
アクション設定（日記の削除）
次に、日記を削除するアクションを設定します。ゴミ箱のIconエレメントを選択して
Action Flow Editorを開き、下記を参考に設定します。
| 項目 | 設定内容 |
|---|---|
| Action |
Backend/Database>Supabase>Delete Row
|
| Action Type | Delete Row |
| Table | diary |
Delete Rowアクションでも、対象となるRowを決めるFilterの設定が必要になります。
| 項目 | 設定内容 |
|---|---|
| Field Name | id |
| Relation | Equal To |
| Value | 「Page Parameters」>「diary」>「id」 |
これでアクション設定は完了です。
動作確認
日記作成→リストで確認→編集→削除という流れで動作確認をしていきます。
サインアップまたはログインしたら、「日記を作成」をクリックしてCreateDiaryページを開きます。
日記の日付、タイトル、本文を入力したら「保存」をクリックします。
DiaryListページに遷移後、作成した日記タイトルが表示されているのが確認できます。いくつか作成すると、日記の日付（date Field）降順でリストに表示されます。
では、上から2番目の「7/12の日記」を編集してみます。クリックしてEditDiaryページに遷移し、日付を最も新しい日付にし、タイトルと本文を変えてみます。
日記一覧の表示順が入れ替わり、再度編集画面を開くと先ほどの編集がきちんと反映されています。
それでは、この日記を削除してみます。
削除アイコンをクリックしてDiaryListページに戻ると、削除した日記がリストから消えていますね。
まとめ
今回は、Supabaseと連携してデータを取得・作成・編集・削除する方法をご紹介しました。
編集・削除については「Matching Rows」で対象のRowを決めるFilterを設定するのがポイントでした。
データの取得から表示までそれほど時間もかからなかったので、ぜひSupabaseとの連携を検討してみてくださいね。
Discussion