FlutterFlowとSupabaseを使ったLike検索の実装方法

はじめに

このブログでは、FlutterFlowとSupabaseを使用して、キーワード検索を実現する方法を説明します。今回の例では、仕事情報を格納したデータベーステーブルから、説明文(description)に特定のキーワードを含むデータをあいまい検索(LIKE検索)で取得する機能を実装します。この手法は、アプリケーションのユーザーエクスペリエンスを向上させる非常に重要なポイントとなるため、具体的な手順を詳細に解説します。

備忘録的なブログで恐縮です！

ゴールイメージ

テーブル構造

以下のようなテーブル jobs_with_details をSupabaseで利用します。このテーブルは、仕事情報を包括的に管理するためのもので、各カラムがそれぞれの重要な情報を格納しています。

Name	Data Type	Description
job_id	integer	ユニークな仕事ID
employer_id	uuid	雇用者のID
title	character varying	仕事のタイトル
description	text	仕事の説明文
prefecture_name	character varying	都道府県名
city_name	character varying	市区町村名
pay_rate	numeric	支払いレート
main_visual	text	表示する画像パス
created_at	timestamp	作成日時

このテーブルは、アプリケーションで必要な情報を簡単に取得できるように設計されています。特に、descriptionカラムはLIKE検索の対象となるため、効率的な検索が可能です。

実装手順

画面上にリストビュー、検索用のTextFieldを配置

• 検索結果を表示するリストビューと検索用のキーワードを入力するTextFieldを設置します。
• 追加で都道府県も合わせて検索できるように都道府県用のドロップボックスも設置していますが、不要であれば設置しなくてもよいです。おまけです。
• 以下のようなイメージの画面です。既に完成形の画面を表示していますが、まずはキーワードを入力するTextFieldとリストビューがあればオーケーです。

1. Supabaseのクエリ設定

1. FlutterFlowの画面上に配置したListViewに対して以下の手順でSupabaseクエリを設定します。
   • Table: jobs_with_details
   • Query Type: List of Rows
2. Filtersで以下の設定を行います。
   • Field Name: description
   • Relation: LIKE (Case-insensitive)
   • Value: キーワード入力欄のテキストを利用
   • この際、% を前後に付ける必要があります（例: %キーワード%）。%が前後に無いと完全一致の検索になってしまいます。

この設定により、descriptionに指定したキーワードを部分一致で検索できるようになります。

2. キーワード入力欄の設定

• TextFieldウィジェットを作成（上述）し、変数名を keyword とします。
• On Submitアクションで Refresh Database Request を設定します。
  • 対象ウィジェット: ListView（表示リスト）

この設定により、ユーザーがキーワードを入力して「Enter」キーを押した際に、自動的にリストが更新されるようになります。

3. データ表示の設定

• ListViewウィジェットを使用し、取得したデータを表示します。
• 各フィールドを以下のようにバインドします。
  • タイトル: title
  • 説明文: description
  • 画像: main_visual（パスから画像を取得）

実行結果

最終的に、以下のような画面が構築できます。キーワードを入力すると、該当する説明文を含むデータがリスト表示されます。

このように、入力されたキーワードに応じて動的にデータを取得し、即座にユーザーに結果を表示できます。

キーワード（あいまい）検索に追加して都道府県で絞り込む場合も以下のようにフィルタを追加することで簡単に実装出来ます。（※シンプルに都道府県を設定したドロップボックスと一致するデータを取得すればよいですが、以下では全国に戻せるような処理もいれているのでConditional Valueが設定されています）

注意点

1. SupabaseのLIKE検索では、大文字小文字を区別しないよう設定できます（Case-insensitive）。これにより、検索がユーザーフレンドリーになります。
2. LIKE検索のため、性能上の負荷に注意が必要です。特にデータ量が多い場合は、クエリの最適化を検討してください。
3. 入力値がSQLインジェクションに対する脆弱性を持たないよう、必ずSupabaseのプリペアドステートメントやクエリビルダーを活用してください。これにより、セキュリティが強化されます。
4. アプリケーションのパフォーマンスをさらに向上させるために、全文検索エンジンやキャッシュ戦略を採用することも有効です。

まとめ

FlutterFlowとSupabaseを組み合わせることで、簡単にLike検索機能を構築できます。この方法は、ユーザーにとって直感的で使いやすい検索体験を提供します。また、今回の例では簡単な検索機能を実装しましたが、この仕組みを応用して、より高度な検索やフィルタリング機能を開発することも可能です。

この方法を利用して、ユーザー体験を向上させる便利な検索機能を実装しましょう。さらに、アプリケーションの要件に応じて、検索条件を追加したり、別のフィールドに対して同様のLIKE検索を適用したりすることで、アプリケーションの価値をさらに高めることができます。