【FlutterFlow】Algolia検索を使ってみよう

FlutterFlowではAlgolia検索が利用できます。Algolia検索を使うことで高性能な全文検索が実現できるようになります。

便利な機能なのですが、導入方法がわかりにいところもあるかと思いますので、導入方法を説明しますので参考にしてください。Algolia検索の導入に関する部分を中心に説明をしますので、他のところは別のブログで解説してますのでそちらを参考にしてくださいね。

Algoliaとは
ゴールイメージ
前提条件
実装方法
まとめ

Algoliaとは

Algoliaは、高速で柔軟性の高い検索機能を提供するAIパワードの検索・発見プラットフォームです。以下にAlgoliaの主な特徴をまとめます。

リアルタイム検索: 最初のキーストロークから100ミリ秒以内に結果を提供します。
ホステッドソリューション: クラウドベースのサービスで、独自のインフラストラクチャを構築する必要がありません。
カスタマイズ可能: ダッシュボードを通じて、コーディングなしで検索をカスタマイズし、分析を表示できます。
開発者フレンドリー: 多言語に対応したAPIクライアント、フロントエンドウィジェット、人気のあるフレームワークとの統合を提供します。
透明性: 検索エンジンの動作原理が公開されており、ほとんどの設定をカスタマイズできます。

Algoliaを使用することで、開発者は複雑な検索機能を簡単に実装でき、ビジネスチームは検索分析を通じてユーザー行動を理解し、製品を改善することができます。

ゴールイメージ

以下のように検索ボックスにキーワードを入力するとそれに合致したポスト（SNSをイメージ）が検索結果に表示されるようにします。

前提条件

FirebaseのプランをBlaze Planにする必要があります。
今回の実装にあたり、以下のようなデータベース（コレクション）を準備しています。SNSのpostをイメージしてます。検索で使うのは”post_description”（投稿内容）だけなので他は自由に設定してください。

実装方法

Algoliaアカウントとアプリケーションの作成

Algoliaの公式サイトにアクセスしてアカウントを作成
アプリケーションを作成。Create Applicationからアプリケーションを作成できます。（もしくは最初からあるunnamed application）を使って設定を行います。

Firebaseの設定

Firebaseに移動して以下の設定を行います。ほぼ、FlutterFlowのページの内容と同じ記載ですが、今回のケースに合わせた設定内容を追加で記載しています。

Firestore DatabaseでExtensionsを選択。Firestore with Algoliaをインストール。

請求と使用状況の確認
請求に関する情報が表示されます。「次へ」をクリックします。
有効なAPIと作成されたリソースの確認
この拡張機能は、Algoliaと連携するためのCloud Functionを自動的に作成します。「次へ」をクリックします。

拡張機能の設定。Algoliaに関する情報を入力する必要があります。

コレクションパス:Algoliaで検索可能にしたいコレクションの名前を入力します。今回はpostsというコレクションを設定します。
インデックス可能なフィールド:この項目はスキップできますが、postsの中のpost_description（投稿内容）をindexに登録したいのでpost_descriptionを設定します。
Algoliaインデックス名:今回はコレクションと同じpostsを設定します。Algoliaダッシュボードにアクセスし、新しいインデックスを作成する際に、このフィールドと同じ名前を入力してください。
AlgoliaアプリケーションID:Algoliaダッシュボードに表示されるapplication_idをコピーして入力します。[Settings（画面左下）]　＞　[API Keys]で確認できます。

Algolia APIキー:Algoliaダッシュボードの[Settings] > [API Keys] > [All API Keys]に移動し、「New API Key」をクリックします。ACLフィールドに以下のオプションを追加します: addObject, deleteObject, listIndexes, deleteIndex, editSettings, settings。
「Create」をクリックし、生成されたAPIキーをコピーして該当するフィールドに入力します。※このいろいろと権限が許可されたAPIでないとデータ追加・更新時のIndexのアップデートが出来ません。

以下のような構成になります。

既存データのインポート

既存データのインポートは公式サイトにやり方が載っていますが、ちょと面倒なので説明は割愛します。
テストとして簡単に追加したい場合は、新たにデータを追加もしくは更新すると自動的にAlgoliaに登録されます。
AlgoliaのSearch API Logsを見ると以下の右画像のようにデータ更新時に更新された内容が登録されています。

FlutterFlowでのセットアップ

次に、FlutterFlowプロジェクトでAlgoliaをセットアップします。

FlutterFlowプロジェクトを開きます。
「Settings」タブに移動し、「Integrations」から「Algolia」を選択します。

AlgoliaのAPplication IDとSearch API Keyを入力します。
Search API KeyはFirebaseで設定したキーとは別のモノです。API Keysの中にあるSearch API Keyと書かれたものを設定してください。
Indexed Collectionsは今回の検索対象となるコレクション（posts）を設定します。