Azure Search: 検索アプリケーションに検索候補 (オートコンプリート) を追加する方法
このポストは、1 月 20 日に投稿された Azure Search – How to Add Suggestions (auto-complete) to your Search Applications の翻訳です。
検索候補とは
多くのモバイル アプリケーションや Web サイトでは、情報を得るための主な手段として検索機能を使用します。そのため、検索ボックスはコンテンツをすばやく検索できるものでなければなりません。効果的な手法の 1 つが、検索候補 (オートコンプリート) です。検索候補とは、検索ボックスに入力した内容に対して一致する可能性のある用語を提案するプロセスのことです。以下は、Microsoft ストアで「sur」と入力した場合の検索候補の例です。
はじめに
今回の記事では、検索候補や画像検索、あいまい検索といった検索エクスペリエンスを向上する新機能の活用法を紹介します。
チュートリアルでは、野菜の一覧を検索できる MVC4 ベースの Web サイトを取り上げます。インデックス作成用のデータは Wikipedia (英語) から取得したものです。また、見栄えの良い検索ボックスを作成するために、Twitter の Type-Ahead (英語) JavaScript ライブラリを使用します。これらのコンポーネントを Azure Search と組み合わせることで、検索候補を表示するだけでなく、以下のように候補に画像を追加することも可能です。
前提条件
このチュートリアルでは、以下の要件が満たされていることを前提としています。
- Azure Search サービスへのアクセス (詳細はこちらのページを参照)
- Visual Studio 2012 またはそれ以降を使用
- サンプルのソース コード (英語) のダウンロード
- チュートリアル「Azure Search による最初の検索ソリューションの作成」の終了 (強く推奨)
Azure Search の検索候補サンプルの設定
サンプル プロジェクト (英語) をダウンロードし、Visual Studio で開いたところから始めます。まず、このサンプルの Visual Studio プロジェクトに、自身の Azure Search サービスの接続情報を追加します。
- CreateIndex プロジェクト内の app.config を開き、SearchServiceName と SearchServiceApiKey の値をそれぞれ Azure Search サービスと Azure Search サービスの API キーに合わせて変更します。この値は Azure 管理ポータルで確認できます。
- AzureSearchSuggestionsDemo プロジェクト内の web.config を開き、同様に SearchServiceName と SearchServiceApiKey の値を変更します。
Vegetables インデックスの作成
アプリケーションの設定が完了したら、CreateIndex アプリケーションを起動します。
- F5 キーを押してアプリケーションを起動します。
以下の手順を実行します。
- Vegetables インデックスが既に Azure Search サービスに存在する場合はインデックスを削除します。
- プロジェクトに含まれる schema.json ファイルを使用して、新規に Vegetables という検索インデックスを作成します。
- documents.json プロジェクト ファイルのドキュメントをこのインデックスに読み込みます。
正常終了すると、コンソール ウィンドウに以下の内容が出力されます。
Creating index…
Loading documents into index…
Complete. Press <enter> to continue:
このチュートリアルでは、検索インデックス作成の詳細には触れません。検索インデックス作成の詳細については、チュートリアル「Azure Search による最初の検索ソリューションの作成」をご覧ください。
Azure Search の検索候補サンプルの実行
“Vegetables” の Azure Search インデックスを作成したら、次に ASP.NET MVC アプリケーションの AzureSearchSuggestionsDemo を F5 で起動して、以下の手順を実行します。
1) 野菜の検索用の検索ボックスをページに読み込みます。
2) アルファベットを数文字入力し、Azure Search から返される検索候補の結果を確認します (注: 初回の検索には数秒かかります)。
コード内での検索候補のしくみ
サンプルを確認したところで、次に、検索候補のしくみを知るためにこの機能の主要コンポーネントについて説明します。
- アプリケーションを停止して、\Views\Home フォルダー内の Index.cshtml ファイルを開きます。
このページで取り上げるコードのほとんどは Twitter の typeahead.js ライブラリ (英語) を利用しています。このライブラリでは、見栄えの良い検索ボックスの表示などの複雑な処理が実行され、Azure Search への非同期の Ajax の呼び出しがとても簡単になります。さらに、typeahead.js ライブラリでは、検索候補の出力の表示形式を設定する handlebars.js を使用します。たとえば、サンプルのアプリケーションでは以下の表示形式を使用しています。
<p><img src=”{{thumbnail}}” style=”height:40px;width:60px;”> <strong>{{name}}</strong> - {{species}}</p>
これにより、検索候補のテキストと共に画像が表示されます。詳細については、次のセクションで説明します。
最後のポイントは、以下のとおり、HomeController.cs ファイルから MVC コントローラーの Suggest 関数への呼び出しを行うことです。また、ユーザーがテキスト ボックスに入力した文字に関係なくパラメーター q を渡し、パラメーター fuzzy を false に設定します。
remote: ‘/home/suggest?q=%QUERY&type=name&fuzzy=false’
あいまい一致をサポートするサンプルの拡張
あいまい検索は Azure Search の検索候補に最近追加された機能です。あいまい検索では、検索ボックスに入力した単語のスペルが間違っていても、ほぼ一致する単語が結果として得られます。
この機能を試すには、以下の行に変更を加えます。
remote: ‘/home/suggest?q=%QUERY&type=name&fuzzy=false’
以下のように変更します。
remote: ‘/home/suggest?q=%QUERY&type=name&fuzzy=true’
変更内容を保存して、F5 でアプリケーションを起動します。
- 「arta」などと入力してみます。完全に一致しなくても、結果が返されることを確認します。
Home コントローラー
サンプルの JavaScript コードを使った説明はここまでです。次に、検索候補要求を実行する C# コントローラーのコードについて説明します。
- Controller フォルダー内の HomeController.cs ファイルを開きます。
このコントローラーは以下の呼び出しを実行します。
SuggestionSearch _suggestSearch = new SuggestionSearch();
これにより、Azure Search サービスに接続する認証済みの HTTP クライアントの作成をはじめとする複数の処理が実行されます。このしくみの詳細については、チュートリアル「Azure Search による最初の検索ソリューションの作成」をご覧ください。
- Suggest 関数に移動します。
この関数は非常に単純で、パラメーター q (検索ボックスに入力する文字) とあいまい検索のブール値を取得し、_suggestSearch.Suggest に渡します。
- プロジェクトのルート フォルダー内の SuggestionsSearch.cs ファイルを開き、Suggest 関数に移動します。
渡されたパラメーターを使用して、Azure Search REST API の呼び出しが実行されます。次に、検索候補の結果が List<Suggestion> suggestionList というリスト オブジェクトに読み込まれます。
Suggestion クラスには、thumbnail という文字列が含まれています。Azure Search の Vegetable インデックスでは、この文字列は PNG 画像への URL 参照を表します。Azure Search にバイナリ画像を格納することは合理的ではないため (画像は全文検索できません)、ここでは (\Images フォルダーで確認できるように) プロジェクトにサムネイルを格納しています。Azure Blob Storage などに格納すれば、なお良いでしょう。
作成されたリストは Home コントローラーの Suggest 関数に再び渡され、さらに JSON 形式の Index.cshtml に返されます。Index.cshtml では解析が実行され、検索ボックスに候補として読み込まれます。
- (オプション) SuggestionsSearch.cs ファイルで Suggest 関数の開始位置にブレークポイントを追加してから、再度 F5 でアプリケーションを実行してみてください。検索ボックスに文字を入力する際の処理を確認できます。
まとめ: 検索結果ページへの接続
検索ボックスから項目を選択しても、検索結果は返されません。このサンプルはあくまでも、検索用語の表示形式の設定機能を示したものです。
このサンプルを改良するには、検索を実行して結果を返すコードを追加する必要があります。この処理を実行する方法には複数ありますが、最も一般的なのは、ユーザーが検索ボックス内で Enter キーを押したときに検索を実行する方法です。現在開いている Index.cshtml ファイルでは、以下のコードへの参照を確認できます。
.on(‘typeahead:selected’, function (obj, datum) {
console.log(obj);
console.log(datum);
})
提案された検索用語を 1 つ選択すると、このコードが呼び出されます。検索を実行して結果を返すには、console.log のコードをこのタスクを実行する Ajax の呼び出しに置き換えます。
検索結果ページを作成する方法の詳細については、チュートリアル「Azure Search による最初の検索ソリューションの作成」をご覧ください。
typeahead.js ライブラリを拡張する方法の詳細については、こちらのページ (英語) をご覧ください。
Azure Search の詳細については、Azure Search のドキュメントをご覧ください。
皆様からのフィードバック (英語) もお待ちしております。