【デモアプリも作成してみました】Azure Cognitive Search を使ってサジェスター・オートコンプリート機能を試してみた！


#はじめに
Azure が提供しているクラウド検索サービス【Azure Cognitive Search】の

- サジェスター＝検索候補の提案
- オートコンプリート＝補完機能検索候補

について設定方法と利用方法を解説していきます。
Azure Portal 上で作成できるデモアプリの作成についても解説しています。

#本記事の概要
- サジェスター・オートコンプリートについて簡単に解説
- Azure Portal 上での設定方法
- Suggeter ・ Autocomplete の実行方法の紹介 (REST API を使用)
- デモアプリを作成してサジェスター機能を使用

#サジェスター・オートコンプリートとは

![hotel-app-suggestions-autocomplete (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/aee36290-6795-0611-bb53-c28097c1da8c.png)

- サジェスター(Suggester)とは
検索候補に入力されている語句に対して一致する用語を表示します。
上記画像では検索窓に入力された語句に対してインデックスから一致するドキュメントが生成されています。

- オートコンプリート(autocomplete)とは
用語全体のクエリの一部入力を補完する役割を担っています。
オートコンプリートを使用すると可能性のある語句が予測されます。上記の画像のように"tw"を入力すると"in"が補完されます。

# インデックスの作成と Suggester 機能の設定

###インデックスの作成
インデックスの追加 または データ インポート ウィザードを使用してインデックスを作成する場合は、suggester を有効にするオプションがあります。

- Cognitive Search のリソース画面から【データのインポート】を選択
![設定-データのインポート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/88d143f6-137c-cb53-2a63-d574d5a4a7d1.png)




- 使用するデータを選択。
※今回はサンプル → hotels-sample を選択しています。
![データソースのインポート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/8f09884d-3a8c-9cdc-43ae-88e83f0cbc18.png)


![データソースの選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/aa217a45-4d9c-aa82-3a10-daebe371932c.png)


- コグニティブスキルを追加

今回は省略します。
画面下の[スキップ先:インデックスをカスタマイズします]をクリック

![コグニティブスキルを追加(今回は省略)).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/18df601b-1b97-a35c-03e7-7f6d18ca2c60.png)


- Suggester 名で任意の名前を入力。

![対象インデックスのカスタマイズ-Sugger名の設定(任意の名前).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/111e3fe1-b657-3651-0233-53f53311c9ea.png)


- Suggester 列にチェックボックスをオンにして有効化します。

指定したい範囲がある場合は、指定するフィールド名列の Suggerter 列にチェックをいれてください。
なお、 チェックボックスは、文字列フィールドでのみ使用できます。


![Suggesterの設定(ここでチェックボックスを入れる).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/7de3b16e-ba70-9f11-9de1-9f1c59c9ed50.png)

![Suggesterの設定②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/c6e36767-f5ca-2ce2-4447-9ddcd1fce5f3.png)

- チェックが完了したら[次:インデクサーの作成]をクリック

※アナライザーの選択はトークン化とプレフィックス付けに影響します。 suggester を有効にする場合は、フィールド定義全体を考慮してください。

- インデクサー名やスケジュールの設定をしています。

スケジュールなどを設定する場合はここで設定します。
問題が慣れれば【送信】をクリック

![インデクサーの作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/3090f33b-cc0a-c0de-e2e7-bf495348546e.png)


ここまででインデクサーの作成と Suggester 機能の設定が完了です。


# Suggester 利用方法　

ここからはVSCodeで作業しています。
要求内容は以下の通りです。

```
POST https://[service name].search.windows.net/indexes/[dataname]/docs/suggest?api-version=[api-version name]
Content-Type: application/json   
api-key: [api-key]


{
      "search": "San", 　
      "searchFields": "HotelName",
      "suggesterName": "sg", 
      "top": 5
}
```

応答結果は以下の通りです。
"San" に該当する 検索ワードが返ってきました。

```
{
  "@odata.context": "https://[service name].search.windows.net/indexes('hotels-sample-index')/$metadata#docs(*)",
  "value": [
    {
      "@search.text": "Double Sanctuary Resort",
      "HotelId": "16"
    },
    {
      "@search.text": "Santa Fe Stay",
      "HotelId": "31"
    }
  ]
}

```

![2021-08-05_15h20_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/b08a7616-d14a-6f47-637f-c5abd03bcfb9.png)


#オートコンプリートの利用方法

先程の Suggester 利用と同じように行います。
suggester の箇所を autocomplete に変更します。

```
POST https://[servicename].search.windows.net/indexes/[dataname]/docs/autocomplete?api-version=[api-version name]
  Content-Type: application/json   
  api-key: [api-key]

{
    "search":"San",
    "searchFields":"HotelName",
    "suggesterName":"sg",
    "top":5
}
```

応答結果は以下の通りです。

```
 "@odata.context": "https://[service name].search.windows.net/indexes('data 
 name')/$metadata#Collection(Microsoft.Azure.Search.V2020_06_30_Preview.AutocompleteItem)",
  "value": [
    {
      "text": "sanctuary",
      "queryPlusText": "sanctuary"
    },
    {
      "text": "santa",
      "queryPlusText": "santa"
    }
  ]
}
```

![2021-08-05_17h58_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/0069e026-bd07-a3c1-752e-79a928252595.png)

# デモアプリの作成してサジェスター機能を使用
Azureポータル上で検索用のデモアプリケーションを作成できる機能があります。
HTMLファイルで生成されます。

###作成手順
使用するインデックスを選択します。
![ホーム画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/baf95655-7bc6-3c8a-3b3f-32d7fec3ee16.png)

CORS有効化を選択します。
「デモアプリの作成」を選択します。
![CORS有効化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/6003c3ba-c093-747b-a8e1-82424aea94ff.png)


検索結果で表示される項目を選択します。
「次へ」をクリック
![個々の結果.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/41306bfb-5a21-181d-6600-5fe31500af49.png)


サイドバーに表示されるフィルターを任意で選択します。
「次へ」をクリック
![サイドバー01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/c03ced7c-207a-5e93-2adf-e34d5e5b9e01.png)


検索ボックスのドロップダウンに候補として表示される項目を選択します。
「デモアプリの作成」をクリック
![候補01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/be305b80-56d2-68a1-de7c-82a79d1fa7b4.png)


デモアプリの準備完了の画面が出ました。
「ダウンロード」をクリック
![ダウンロード画面01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/e4cc098b-c93e-7f27-6469-768e06031198.png)

ダウンロードしたファイルを開きます。
![ダウンロードファイルを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/d79b4bac-c084-3913-646a-f67c61b4d95b.png)

以下のようにデモアプリが表示されました。
設定したサジェスト機能等も使えていますね。
お疲れ様でした。

![デモアプリ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614396/0c63986b-dcba-18cf-5ebc-44abdef60a1b.png)






#最後に
サジェスター機能とオートコンプリート機能を数ステップで試すことができました。
デモアプリについてもサジェスター機能が搭載されたものが数クリックで作成することができました。

検索エンジンを作成してからすぐに、アプリケーション上でどんな風に検索できるのか試すことができるのは便利だと思いました。


#参考資料
- [クエリでオートコンプリートと候補の結果を有効にする suggester を作成する](https://docs.microsoft.com/ja-jp/azure/search/index-add-suggesters)
- [Suggester 利用方法(REST API)](https://docs.microsoft.com/ja-jp/rest/api/searchservice/suggestions)
- [オートコンプリート利用方法(REST API)](https://docs.microsoft.com/ja-jp/rest/api/searchservice/autocomplete)
- [デモアプリの作成](https://docs.microsoft.com/ja-jp/azure/search/search-create-app-portal)