こんにちは！こちらのブログで初めて記事を投稿させていただきます、安田と申します。
Bubbleの全文検索では、検索処理が遅かったり詳細な検索設定が出来ないといった課題が多くありますが、今回はそんな検索における課題を解決してくれる優秀なSaas「Algolia（アルゴリア）」を使った検索の実装方法をご紹介します！
過去の記事でもAlgolia検索の実装方法が紹介されておりますが、そちらの記事では有料プラグインを使ってBubbleからAlgoliaのAPIを呼び出す検索方法が紹介されておりました。
今回はAlgolia関連のプラグインは使用せず、Bubbleの標準機能であるAlgolia Integrationを使った検索の実装手順についてのご紹介です。
- Algoliaとは
- Algolia Integrationとは
- 環境構築手順
- 【実践】Algolia Integration を使って実装してみよう
- 【参考】Algolia Integrationと有料プラグイン、どちらを使うべきか？
- まとめ
Algoliaとは
まずは、「Algolia」とはどんなサービスなのか、こちらの記事で紹介していますのでご参照ください。
補足情報として、Algoliaは検索速度がとにかく高速であることが特徴です。
一体どれくらい高速かといいますと、 上述した記事のなかでもBubbleの検索速度との比較を載せていますが、 Algolia公式で出しているこちらのデモでもその圧倒的速さを試すことができます。 react-instantsearch.netlify.app
Algolia Integrationとは
では、本記事のメインであるAlgolia Integrationとはなにか、といいますと、BubbleからAlgoliaの高速検索を使うことができるBubbleの標準機能のことです。 この機能はBubbleのプランがProfessional以上で使える機能であり、BubbleのエディターのSettingsページよりAlgolia Integrationを有効にすることができます。
Algolia Integrationに関してのBubbleの公式ドキュメントはこちらです。
環境構築手順
ここからはAlgolia Integrationを使う場合の環境構築手順のご紹介です。 プラグインでAlgoliaを使用する場合の手順とは一部異なりますのでご注意ください。
Algoliaアカウント登録（1/4）
まずはこちらからAlgoliaのアカウントを登録します。
BubbleとAlgoliaを接続（2/4）
Bubbleのエディター[Settings > General > General services API Keys]の赤枠の箇所よりAlgolia Integrationの設定にチェックを入れ、その下の欄にAlgoliaのapplication IDと各種Key情報を設定します。
Keyの情報は、Algolia管理画面[Settings > API Keys]に各種Keyが記載されているのでそちらからコピーしてきましょう。
Algoliaにデータを登録（3/4）
次に、Bubbleのデータベースの中身（検索対象となるデータ）をAlgoliaへ登録します。 プラグインを利用する方法だとAlgolia側に自分でインデックス（※BubbleでのData typesにあたるもの）を作成する必要がありましたが、Algolia Integrationの場合はその操作は不要です。
前章にあるAlgoliaのKeyがBubbleに正しく設定されていれば、[Data > Privacyタブ]で新たに「Index this type for Algolia search」という枠が出現します。
Algoliaで検索対象としたいData Typeを左のリストから選択し、右側のチェックを入れて「Trigger Algolia re-index」を押下します。 今回はMovieというデータを検索対象とします。
このようなモーダルが表示されるので、
左上のData type to indexのドロップボックスを「Movie」に変更し、右上の「Refresh test index」を選択した後に「Start re-indexing」を押下します。
Current Indexing tasksの欄に、successと表示されていればAlgoliaのインデックス作成とデータの登録は完了です。
注意点
Bubbleはプライバシー設定がpublicなフィールドをAlgoliaに送信します。逆にprivateになっているフィールドに関してはAlgoliaへ送信できません。
これに関しては、Bubbleの公式ドキュメントで「機密なデータの検索には適さない」旨の記述があります。
適さない理由は特に言及されていませんが、 もし機密なデータをAlgolia検索したい場合には下記のようなハードルがあると考えられ、Bubbleのプライバシー設定を維持した状態でAlgolia検索するのは難しいと推測します。
- Bubbleデータベースとは別に、Algoliaのインデックスにも高度なプライバシー設定をする必要がある
- 通常の検索API呼び出しではなく、セキュアな検索APIを呼び出す必要がある
Algoliaに送信したいデータの中に機密なデータを含んでしまっている場合は、構成を再検討してみましょう。
Algoliaの管理画面を確認（4/4）
では、実際にAlgoliaのインデックスを見てみましょう。
Algoliaの管理画面にアクセスし、左メニューより[Search]を選択します。
そうすると下記のようにMovieのデータが入ったことが確認できます。
MovieのデータはBubble側では下記のフィールドで構成されており、これら全てのフィールドがAlgoliaのデータとして登録されました。
- title（映画タイトル）：text 型
- cast（出演者リスト）：text[list] 型
- story（あらすじ）：text 型
- review（ユーザ評価）：number 型
- releaseDate（公開日）：date 型
ちなみに、Algolia管理画面の上部に表示されているApplication名については、左下の歯車アイコンから[General > Applications > Rename]と進むと名前を変更することができます。今回はAlgoliaTestとしました。
以上でAlgoliaとBubbleの環境設定は完了です。
【実践】Algolia Integration を使って実装してみよう
では、Algolia Integrationを使った検索をしてみましょう。 先ほどAlogliaへ登録したMovieデータを使って手順を紹介していきます。
データベースを検索する
まずは映画情報をデータベースから検索するツールでAlgoliaの検索処理を呼び出してみます。
こちらがツールのイメージです。
ツールの仕様としては右上の入力ボックスにキーワードを入力し検索ボタンを押すと、映画タイトルにヒットする映画リストを表示する単純な仕様です。
では、検索のトリガーとなるAlgolia検索ボタンのワークフローを実装していきます。
[Element Actions > Repeating Group > Display list]のアクションを追加し、 次に、Display listのData sourceの設定値でAlgolia search for Movies、Queryに入力キーワードを、Field to quelyにMovieデータのTitleフィールドを設定します。
Workflowの設定はこれだけです。Previewから実際に「トム」というキーワードで検索してみましょう。
Movieデータの中からキーワードと一致した映画タイトルを表示することができました。 プラグインでのAloglia検索の実装と比べると非常にシンプルです。
データを追加する／削除する
前項での検索はデータベースを参照するだけでしたが、データベースにデータを追加／削除する実装も見てみましょう。
こちらはMovieデータベースに映画情報を追加／削除するサンプルです。 右上のボタンを押すと、ポップアップが開き、「作品を追加する」ボタンを押すとデータベースにデータが追加されます。
では、「作品を追加する」ボタンを押したときのWorkflowを見てみますと、通常のBubbleでのデータ作成アクション（Create a new thing...）が入っています。特別な処理は入っていません。
データを追加、削除したい場合は、上記のように通常のデータ操作の実装のみでOKです。
任意のData TypeをAlgoliaのインデックスとして接続すると、BubbleのデータベースへのAction（Create a new thing... / Delete a thing... / Make a thing ...）を介して、自動でAlgoliaのインデックスにもデータの変更が反映されるようになっています。 そのためAlgoliaにデータを追加する／削除する処理の記述は必要ありません。
では、Previewで映画情報を追加してみます。今回は不朽の名作である「タイタニック」を追加しました。
Bubbleのデータベースには「タイタニック」のデータが作成され、Algoliaのインデックスにも同じデータが追加されたことが確認できます。
Workflowでデータを追加／データを削除する場合は、特別な実装はなく分かりやすいですね。 直接Bubbleのデータベースを変更した場合も同様に自動でAlgoliaのインデックスへ変更を反映してくれます。
プラグインの場合は、WorkflowのなかでAlgolia側のデータ追加とデータ削除を実装する必要があったり、データの同期を自分でとる必要があったので、データ管理においてはAlgolia Integrationはとても便利ですね。
【参考】Algolia Integrationと有料プラグイン、どちらを使うべきか？
個人的な感想ですが、実装方法でご紹介しました通りAlgolia Integrationの方が扱いやすい印象です。
特に、検索対象のデータの管理においてはほぼ自動でデータ管理してくれるのに対し、プラグインだといくつかの手動での操作が必要です。
開発段階においてはこの違いは大きいと思っています。例えば、テストデータを入れたい場合や、少しだけフィールドの中身を変更した場合に、常にデータの整合性（特にAlgolia側）を意識しなければならず人的ミスが発生しやすいポイントだと思います。
とは言え、プラグインでもデータ管理のことさえ気を付けてしまえば基本的な全文検索機能はAlgolia Integrationと同じように使うことができるので、Algolia Integrationかプラグインかどちらかを選択する基準としては、BubbleのプランがProfessional以上だったらAlgolia Integration、そうでなければプラグイン、という選択で問題ないと思います。
まとめ
今回はAlgolia Integrationの環境構築から簡単な実践までをご紹介しました。 データベース内のデータが多いほどAlgolia検索の速さを実感することができますので、ぜひお試しください！
次の記事ではAlgoliaでできる高度な検索の設定についてご紹介していきます。
