【Bubble】複数フィールドをまたぐAND検索の実装方法

ノーコードツールBubbleで、複数フィールドの値を結合し、1つの文字列としてAND検索を行う方法をご紹介します。

通常のtext型のフィールドをそのままappendで結合する方法や、MultiInputで入力されることが想定されるtext型のフィールドをfind&replaceで改行を空白に置換してから結合する手法も詳しく解説。また、List型のフィールドをformat as textを使って1つの文字列に変換し、appendで結合するプロセスについても触れます。

これらの関数の使い方や具体的な使用例をわかりやすく説明しますので、初心者の方でも簡単に理解でき、実践できます。

それではさっそく、複数フィールドをまたぐAND検索の実装をしていきましょう！

実装イメージ

今回、AND検索の対象となるフィールドは以下です。

• name：text型
• body：text型
• app：List of apps（Option set）

前２つはただのtext型。最後のappだけList型でOption setの値が保存されている感じです。また、bodyのほうはMultiInputエレメントで入力したデータが入る想定です。

上のサンプル動画では、RepeatingGroupでUserを一覧表示しており、検索窓にキーワードを入れ、「検索する」ボタンをクリック時にAND検索のワークフローを走らせています。

たとえば、鈴木まりなさんの場合、nameが鈴木まりな、bodyが「Twitterいや今はXか！」、appがXですが、「鈴木 X Twitter」と検索したときにAND検索でひっかかります。

実装手順

以下の手順で実装します。

検索キーワードを保存するデータベースを作成する

まずは、ユーザーがInputに入力した検索キーワードを検索ボタンをクリックしたときに保存するためのデータベースをSearch textというような名前で適当に作成します。

追加するフィールドはtext型で「query」のみでOKです。

検索ボタンクリック時に検索キーワードを加工してから保存する

RepeatingGroupでユーザー一覧を設置したり、検索キーワードを入力するInputエレメント、それに検索実行ボタンを設置し終えたら、検索ボタンをクリックしたときのワークフローを組みます。

まず、ワークフローStep1ではCreate newアクションを使い、前の項で作成した検索キーワード保存用のデータベースの新しいデータを作成します。

queryフィールドにユーザーが検索したキーワードをfind & replaceで上図のように正規表現を用いて加工してから保存します。find & replaceで必要な作業は以下だけです。

• Regex pattern：\s+
• Replace by：)(?=.*
• Use a regex patternにチェックする

正規表現の意味など詳細は、以下の記事で前回解説しているので気になる方は先にご覧ください。

＞Bubbleで複数ワード検索（AND/OR検索）を実装する方法

検索対象フィールドを１つの文字列に結合してAND検索する

次に、ワークフローStep2でDisplay listアクションを用いてRepeatingGroupのデータソースを更新します。

ポイントは、以下です。

• Do a Search forのあとでfiltered関数を使う
• filtered関数の設定はまず、一番下に出てくるAdvancedを選択する
• Advancedのあとは、検索対象フィールドをappend関数を用いて結合し１つの文字列としたものに対し、extract with Regexのcount > 0で絞り込みをかける
• extract with RegexのRegex patternでは、Step1で作成したデータを用いる
• List型のフィールドはそのままappendできないので、format as text関数を使い１つの文字列に加工してからappendする
• text型だが、データ内に改行が含まれることが想定されるフィールドに対してはappend前にfind & replaceで改行を空白に変換してからappendする

関数	説明
find&replace	文字列内の特定の部分を他の文字列に置き換えるための関数。 特定のパターンを探し、そのパターンを任意のテキストに変更することができる。 文字列内の改行を空白に置き換えるときなどに使用する。
append	複数の文字列を結合して１つの文字列にできる。
format as text	リスト型のフィールドを１つの文字列に変換するための関数。 リスト内の各アイテムを指定したフォーマットで結合し、１つの文字列に変換できる。

format as textの中身は、Content to show per list item欄にThis {フィールド名}をInsert dynamic dataで入れます。

text型フィールドの改行を空白に変換してからappendしたいときは、上の画像のようにfind & replaceで設定してあげます。Regex patternに/(\r\n)+|\r+|\n+|\t+/をペーストして、Replace byには空白のママでOKです。

Regex patternの正規表現の説明は以下の記事で詳しく解説しているので気になる方はご欄ください。

＞Bubbleで複数ワード検索（AND/OR検索）を実装する方法

とりあえずAND検索が動くことを早く確認したい方は、^(?=.* と、).*$でワークフローStep1で作成したデータをサンドイッチしてあげればOKです。