Algoliaで検索結果をグループ化して表示する方法

Algolia Advent Calendar 2020 8日目の記事になります！

Algoliaをご利用のインターネットショッピングサイト等を運営されているお客様から、よくお問い合わせいただく内容として、検索結果における色やサイズに関する表示方法があります。

こちらの記事では、Algoliaのドキュメントにある Item Variations に記載されているグルーピングのテクニックをご紹介させていただきます。

概要
データセットの例
APIを活用する

概要

異なるカラー展開など、バリエーションのある商品を扱っている場合、データを適切に構造化して表示をさせることは悩ましい問題です。よくある例としては、Tシャツの色や、スマートフォンにおけるストレージ容量などが挙げられます。

今回こちらの記事では、Tシャツやスエットを様々なモデルや色で販売しているeコマースサイトを例にして進めていきます。最もシンプルな解決策は、モデルごとに1つのレコードとして、色のバリエーションをそのレコードの中でリストとして保持することです。このアプローチの問題点は、”赤のTシャツ “を検索すると、一つでも赤のバリエーションを保持する全てのTシャツがヒットしてしまうということです。しかし、この場合はサムネイルが必ずしも赤であるとは限らず、混乱を招いてしまいます。

その代わりとして、”赤いTシャツ”と入力された場合に、赤いTシャツのサムネイルの商品のみが表示されるようにしていきたいと思います。そして、モデルごとに一つのアイテムしか表示させないようにしつつ、全てのバリエーションへの導線をカバーするような方法を見出していきます。

データセットの例

AとBの2つのTシャツのモデルと、CとDの2つのスウェットのモデルがあり、それぞれいくつかの色展開をしている在庫データがあるとします。

データセットは、それぞれのレコードがタイプ、モデル、色、サムネイル画像のURLを保持する以下のようなものであるとします。

[
  {
    "type": "t-shirt",
    "model": "B",
    "color": "blue",
    "thumbnail_url": "tshirt-B-blue.png"
  },
  {
    "type": "sweatshirt",
    "model": "C",
    "color": "red",
    "thumbnail_url": "sweatshirt-C-red.png"
  },
  ...
]

もう一歩踏み込んで、それぞれのレコードに全てのカラーバリエーションを追加することも出来ます。この方法の場合、フロントエンド側で商品ごとの全てのバリエーションを表示することができます。(例えばサムネイルの下に色の見本を配置することでエンドユーザーが欲しい商品にたどり着ける手助けになることでしょう。

[
  {
    "type": "t-shirt",
    "model": "B",
    "color": "blue",
    "thumbnail_url": "tshirt-B-blue.png",
    "color_variants": ["orange", "teal", "yellow", "red", "green"]
  },
  {
    "type": "t-shirt",
    "model": "B",
    "color": "orange",
    "thumbnail_url": "tshirt-B-orange.png",
    "color_variants": ["blue", "teal", "yellow", "red", "green"]
  },
  ...
]

このアプローチでは、全てのレコードが単一の商品を示すこともあり、常に一貫したデータを表示させることが可能です。また、バリエーションごとに1レコードを保持することで、詳細なCustom Rankingの設定、例えば number_of_sale といった検索結果の表示順の設定をしていただくことが可能です。これに加えて、AlgoliaのDistinct機能を用いることも出来ます。そうすることで、例えば”Tシャツ”と検索された時にそれぞれ1つのモデルだけを表示させる、といったことが可能になります。

APIを活用する

Indexing時

商品データの重複を取り除いていく前に、まずはどの項目が検索対象なのかを決定していきます。thumbnail_urlは検索対象として相応しくなくノイズを招きかねませんし、color_variantsも本来検索したかったもの以外がヒットしてしまうような事態を招いてしまうでしょう(赤いTシャツに関するレコードにおいて、緑色のカラバリもある場合に緑で検索してもヒットしてしまう)。ということで、今回は model, type, そして colorをsearchableAttributesに指定したいと思います。

例えばRubyクライアントを使う場合は以下のような設定になります。

index.set_settings({
  searchableAttributes: [
    'model',
    'type',
    'color'
  ]
})

distinct を使うには、まずmodel を attributeForDistinct にindexingの際に指定します。これによってdistinctをtrueにして検索結果の重複を取り除くことが出来ます。distinctのindexing時の指定はオプショナルで、クエリ時に指定することも可能です。

index.set_settings({
  attributeForDistinct: 'model',
  distinct: true
})

クエリ時

attributeForDistinct がセットされたら、distinctの設定をtrue にすることができます。distinctのtrueは1とすることもできます。

results = index.search('query', {
  distinct: true
})

ダッシュボードを使う

上記のattribute for distinctおよびenable distinctはAlgoliaのDashboard上で設定を行うことができます。

ダッシュボードに行き対象インデックスを選択
Configuration タブをクリック
Searchable Attributes セクションで、“Add a searchable attribute”ボタンをクリック
model, type そして color 属性をドロップダウンから選択
Search behaviorの下のDeduplication and Grouping タブをクリックし
Distinct ドロップダウンを trueにする
Attribute for Distinct ドロップダウンを modelにする
設定変更をsaveするのをお忘れなきよう！

distinctがtrueに設定されると、それぞれのモデルにおいてひとつずつの商品のみが取得されることになります。この並び順をコントロールしようとする場合は、新しいattributeをビジネスメトリクスと共に追加し(例えばnumber_of_sales)、custom rankingの設定を行います。