【Indeedトレース#3】検索ボックスを極めるpart1〜設計の考え方

はじめに

こんばんは！CODELESS編集部の鈴木です！

今回のテーマは、検索ボックスの実装についてです！
Bubbleには便利なエレメントとしてSearch Boxがありますが、特定のフィールドの検索指定やサジェスト機能を強化したい場合には、少し物足りなさを感じることもあります。そこで今回は、Inputエレメントを活用して、より高度な検索ボックスを作成する方法をご紹介します。

記事が長くなるため、本日は主に「設計」に焦点を当て、明日公開予定の記事では、実際の画面や設定内容を踏まえた解説を行います。

① 検索機能を分解する

検索ボックスを設計する際には、まずその機能を明確に分解して考えることが重要です。以下では、検索機能を「サジェスト」と「検索」に分けて解説します。

〈サジェスト機能〉
1. 検索ボックスをクリックする
ユーザーが検索ボックスをクリックした際に、事前に設定した「入力頻度の高いワード」を表示。
実装条件：
・データベース内で検索頻度の高いワードを記録し、それをサジェスト候補として動的に表示する仕組みが必要。

2. 検索ボックスに文字を入力する
入力された文字列に基づいて、部分一致する候補をリアルタイムでサジェスト。
実装条件：
・入力データをリアルタイムで検知するトリガー（例：Input’s Value is changed）を設定する。
・データベース検索で部分一致（contains条件）を実現するクエリ設定が必要。
・サジェスト候補をリスト表示するためのRepeating Groupを用意し、候補選択時の挙動を制御する。

〈検索機能〉
1. 検索ボタンをクリックする
検索ボタンを押すと、関連するデータ（例：求人情報）が一覧で表示される。
実装条件：
・ボタンを押したタイミングで検索条件をデータベースに反映させるトリガーを設定する。
・フィルタリングロジックを設定し、条件に一致するデータのみをRepeating Groupに表示させる。
・必要に応じて、検索結果画面を分岐（別ページ）または同一ページ内で表示する。

② 検索ボックスの一般的な作成方法

1. Search Boxエレメントを使用する場合
Search BoxはBubbleの標準エレメントで、以下のような特徴があります：
・入力補完機能がデフォルトで利用可能
・データベースにリンクして簡単に検索が可能
・カスタマイズ性が低く、特定のフィールドを指定した検索や複雑なサジェストには不向き

2. Inputエレメントを使用する場合
Inputエレメントは自由度が高く、以下のような実装が可能です：
・検索対象のフィールドを柔軟に指定できる
・入力内容に基づいてリアルタイムでサジェストを表示する
・検索条件や複雑なフィルタリング処理の設定に対応可能

③ Indeedの検索機能実装のために必要な条件

・データベース構造の整理

サジェストや検索対象とするフィールドを明確化し、効率的なデータ検索が可能な構造を設計。
例：求人情報テーブルには「企業名」「勤務地」「スキル」などのフィールドを用意。

・トリガーとワークフローの設定

ユーザー入力をトリガーにしてサジェストリストを動的に更新する。
検索ボタンクリック時にフィルタリングされたデータを表示。

・UIエレメントの連携

InputエレメントとRepeating Groupを組み合わせ、入力内容に応じたサジェスト表示を実現。
ボタン、リスト、検索結果画面の遷移にスムーズなUXを設計。

・検索パフォーマンスの最適化

検索対象データが多い場合は、検索クエリやフィルタリングロジックを効率化する。
サジェスト表示のデータ取得に制限（上位5件など）を設定してパフォーマンスを向上。

明日公開の記事では、これらの条件を踏まえた具体的な検索ボックス構築手順を、実際の画面例とともに解説します。お楽しみに！