@johtani さんと弊社サービスの Elasticsearch について話しました(実装編2)

前回のエントリでは、検索アルゴリズムとしては単純な、でも弊社のサービスにはマッチしている N-gram を採用しているということをお伝えしました 。また Elasticsearch ではどういう設定しているかもお伝えしました。

検索結果のハイライト(highlighting)

今回のエントリはハイライト(highlighting)についてです。 弊社サービスの Re:lation では前述のとおり検索機能があり、検索結果は本文に直接ハイライトをかけてます。

いわゆる Google のようなページ検索・文書検索の場合は、キーワード検索をかけたあと、「文書(ページ)へのリンク」と合わせて「キーワードにマッチした部分およびその前後のテキスト(snippet)」が検索結果として表示されます。その snippet 内のマッチしたワードがハイライトされてるというわけです。

当然、Elasticsearch にもその機能はあります。しかしRe:lationの場合は、Gmail やメールソフトでの検索をイメージしてもわかるとおり、検索結果ページがあるわけではなく、メール一覧に検索にひっかかったメールが表示され、本文を開いた際に検索キーワードがハイライトされていてほしいため、Elasticsearch の機能が使えないのです。

Re:lation での実装

ここはゴリゴリにクライアントサイドで実装しています。 つまり本文内(HTMLドキュメント内)の検索キーワードを探して <span class="search-highlight"></span> で囲むという処理を書いているのです。

この方法で基本的には何の問題もありません。

ですが、問題がおこることもあります。

まず問題のないケースを考えてみます。

<div>
インゲージ永田です。<br>
いつもお世話になっております。<br>
<br>
この度はかくがくしかじか・・。<br>
..
</div>

というメールにに「お世話」で検索した際は、以下のようになります。

<div>
インゲージ永田です。<br>
いつも<span class="search-highlight">お世話</span>になっております。<br>
<br>
この度はかくがくしかじか・・。<br>
..
</div>

問題ありません。しかし。

<div>
インゲージ永田です。<br>
いつも<b></b>世話になっております。<br>
<br>
この度はかくがくしかじか・・。<br>
..
</div>

極端な例ですが、こんな場合にうまくHTML上でキーワードを見つけられずハイライトに失敗します。

これは今でも残っている課題です。

もし解決方法をご存知の方がいらっしゃいましたらお声をかけてくださればと思います。