ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Algolia Integrationで全文検索を実装する(2)

こんにちは!安田です。 前回のAlgolia Integrationの内容に続き、第2弾となります。

前回の記事では、Algolia Integrationの環境構築とAlgolia検索の簡単な実装方法をご紹介しました。

blog.nocodelab.jp

今回は、検索サービスの機能が格段にアップするようなAlgoliaの検索設定についてご紹介していきます!

Algoliaの便利な検索設定

Algoliaは、検索速度が高速であるだけでなく、細かな検索の設定ができるのも特徴の一つです。 今回は特に便利な検索の設定3つをご紹介します。

1.複数のフィールドを対象としたキーワード検索

設定1つ目は、複数のフィールドを検索対象としたいときに便利な設定です。

前回のAlgolia記事で紹介していた映画検索のサンプルを使ってご紹介します。 前の記事ではMovieデータの中のタイトルの文字列を検索して、部分的に一致している映画リストを表示させていました。

この検索はデータベースの中のTitleフィールドを文字検索しているので、「単一のフィールドの検索」となります。

一方で、複数のフィールドの検索は、 この映画検索機能でいうとタイトル・あらすじ・出演者の中からキーワードを検索する、ということになります。

Bubbleではそのような複数フィールドを対象とする検索を実装しようとすると処理が複雑になってしまうのですが、Algoliaを使うと簡単に実装できてしまいます。この映画検索機能をアップデートして設定方法をみていきましょう。

設定方法

Bubbleのエディターで、検索のトリガーとなるAlgolia検索ボタンのワークフローを開きます。 Display listの検索値のなかのAlgolia search for MoviesのField to quelyにAny fieldを設定します。

Bubble側の設定は以上で、次にAlgoliaの設定をします。 Algoliaの管理画面で対象のインデックスページを開き、[Configuration > Searchable attributes]と進みます。 このページで、検索対象とするフィールドを設定していきます。

デフォルトでは全てのフィールドが設定されている状態ですので、deleteアイコンを押して検索対象としたいフィールドを残します。

今回は、下記の3つのフィールドを検索対象としました。

  • cast_list_text(出演者)
  • story_text(あらすじ)
  • title_text(タイトル)

設定後は、画面右下のReview and Save Settingsボタンを押して変更内容をセーブしましょう。 設定は以上です。

では、実際に動作を見てみましょう。 検索キーワードに「トム」と入力して検索ボタンを押すと、出演者「トム・クルーズ」の「ミッション:インポッシブル」が検索結果として表示されるようになりました。

通常、Bubbleでこのような複数のフィールドを対象としたOR検索を実装する場合は、下記のような方法をとります。

  • 各フィールドの文字の一致条件をORで繋ぐ

  • 正規表現を使って各フィールドの文字の一致を判定する

しかし、このような検索をすると、検索速度は遅くなり、さらにエディターの可読性も悪くなるのがデメリットです。

一方で、今回のようにAlgoliaを使用する場合は、Algoliaの管理画面で検索対象のフィールドを設定しておくことができるので、Bubble側に細かな処理を記述する必要はありません。 可読性もよく、文字の判定はすべてAlgoliaの高速処理に任せられるので、とっても便利な機能となります。

2.検索結果の重みづけを設定する

便利な検索の設定2つ目は、検索結果の表示順を細かく指定したいときに使える設定です。

今回は検索結果を下記のようなルールで表示する場合の設定をしたいと思います。

ルール1 タイトルにキーワードが含まれる映画を上に表示したい

ルール2 評価が高い映画を上に表示したい

映画検索で「トム」と検索すると、現状はデータベースの登録順に基づいて「ミッション:インポッシブル」が一番上にヒットしてきます。 タイトルにキーワードが含まれないものが一番上に表示されてしまっているので直していきましょう。

また、タイトルにキーワードが含まれる2作品についても、評価が高いものを優先的に表示させたいので、これらの表示順のルールをAlgoliaへ設定していきましょう。

設定方法

Algoliaの管理画面で対象のインデックスページを開き、[Configuration > Searchable attributes]と進みます。 先ほど、このページで検索フィールドの設定をしましたが、次は検索優先度の設定をします。

ルール1ではタイトルにキーワードが含まれる映画を上に表示するというものですので、検索の順番をルールに沿って入れ替えます。

今回は、下記の順で設定しました。

  • title_text(タイトル)
  • cast_list_text(出演者)
  • story_text(あらすじ)

この設定によって、タイトルでキーワードが一致した作品が一番上に表示されるようになります。

右側のドロップボックス[orded / unorderd]は、キーワードが一致した文字列の位置における優先順をつけるかどうかの設定です。キーワードが文字の先頭で一致したものを優先的に表示したい場合は、ordedを設定しておきましょう。

次に、[Configuration > Ranking and Sorting]と進みます。 このページでAlgoliaでの検索結果の並べ替え方法を設定できるので、ルール2の評価が高い映画を優先的に表示するように設定しましょう。

Add custom ranking attributeボタンを押してreview_numberを追加し、Descending(降順)としましょう。

デフォルトで設定してあるRanking Criteriaは、簡単にいうと検索結果の表示順基準です。タイプミスの数やキーワードが一致した数などの細かな項目に対して優先順を設定することができますが、今回はデフォルトのままにします。

設定は以上ですので、動作を見てみましょう。

タイトルでキーワードがヒットした映画が優先的に表示され、その中でもレビュー評価の高いものが上に表示されるようになりました。

検索結果の表示順位は検索機能の使い勝手を左右する重要な項目となりますので、ルール設定をしておくことをおすすめします。

3.あいまい検索(類似検索)

便利な検索の設定3つ目は、あいまい検索です。 あいまい検索とは、検索キーワードと完全一致していなくても類似した情報を検索結果として返すことができるユーザにとって便利な機能となります。

  • 大文字 / 小文字、かな / カナ  (例) Play Station, PlayStation, play station / めがね, メガネ, 眼鏡
  • 同義語 (例) ズボン, パンツ, スラックス / データベース, DB
  • 表記揺れ、スペルミス (例) ユーザー, ユーザ / appple

このようなあいまい検索をBubbleで実装するのは難しいですが、Algoliaでは簡単にあいまい検索を設定することができます。

設定方法1(タイプミス耐性の設定)

Algoliaの管理画面で対象のインデックスページを開き、[Configuration > Typo Tolerance]と進みます。 ここのページの各設定項目で入力されたキーワードのタイプミスをどのくらい許容するかを設定します。

タイプミスを全く許容しない場合は一番上の項目Typo Toleranceをfalseに設定してください。 Typo Toleranceをtrueにした場合、その下の項目で何文字以上のキーワードでタイプミスを判定するか等を細かく設定します。

設定方法2(同義語の設定)

Algoliaの管理画面で対象のインデックスページを開き、[Configuration > Synonyms]と進みます。 ここのページで同義語を管理することができます。

手動で登録していくこともできますし、CSVでのインポートも可能です。 Algoliaで公開している同義語リストは存在しないので、検索サービスに合わせてユーザ自身で登録していく必要があります。

設定方法3(検索言語の設定)

Algoliaの管理画面で対象のインデックスページを開き、[Configuration > Language]と進みます。

検索時に日本語で検索される場合は、Index LanguageにJapaneseを追加し、さらにひらがな、カタカナ、漢字の違いを許容する場合はその下のTransliterationに"*"を追加します。

※Algoliaの日本語の判定は、執筆時点(2022年10月)でひらがなの入力に対して漢字/カタカナの結果をヒットさせます。(漢字は音訳のみ)

【参考】Algolia検索を使う場合の注意事項

Algoliaの検索処理のロジックは、まとまりごとに結果を返却するページネーション方式を採用しています。 そのため、検索の結果を受け取る際は、まとまりごと(=ページごと)に結果を受け取ることになりますが、執筆時点(2022年10月)ではAlgolia Integrationでは2ページ目以降のデータを受け取ることができませんでした。

もしページごとに検索結果を受け取りたい場合は、有料プラグインで実装するかAlgoliaが公開しているAPIを使う方法となりますのでご注意ください。

1つのページに格納するデータ数は管理画面[Configuration > Pagenation]より設定できます。

この設定値は、Algoliaではパフォーマンス上1000以下を推奨しているので、サービスの仕様に合わせて調節してみてください。

まとめ

前回投稿のAlgoliaIntegrationの記事に続き、今回はAlgoliaの検索設定についてご紹介しました。 Algoliaを使うとBubbleでは難しかったリッチで高速な全文検索機能が実現できます。ご自身のサービスの仕様に合わせてAlgoliaの検索を設定してみてくださいね。