Search Application クライアントを使用した検索体験の構築

この文書は、search applicationを使用して、Search Application clientで検索体験を構築するための手順ガイドです。このクライアントは、ブラウザで使用するために設計されたJavaScriptライブラリです。このライブラリをウェブアプリに統合して、検索アプリケーションへのクエリを簡素化します。

テストや実験のためのsandbox environmentが利用可能です。自分のウェブアプリを設定せずにクライアントを試したい場合は、こちらにジャンプしてください。

repositoryをクローンし、READMEの指示に従って始めてください。

目標

このガイドは、次の検索機能を持つウェブアプリを構築したいと仮定しています：

  • カスタム関連性を持つ検索バーと結果
  • フィールドの含め/除外や一致する用語のハイライトなど、結果の表示を制御
  • ファセット、フィルター、ソート、ページネーションなどのUIコントロール

検索アプリケーションは、Elasticsearchに変更を永続化する「サーバーサイド」と考えることができます。あなたのウェブアプリは、検索アプリケーションにクエリを送信する「クライアントサイド」として機能します。実装を完了するために、検索アプリケーションとウェブアプリの両方を編集します。

前提条件

このガイドに従うには、次のものが必要です：

  • Elastic deployment、検索アプリケーションを実行するための前提条件を満たすもの。
    • Elastic deploymentがない場合は、Elastic Cloudで無料トライアルを開始してください。
  • search application。
    • Kibana UIまたはAPIを使用して検索アプリケーションを作成および管理します。
  • web app、Search Application clientを使用して検索アプリケーションにクエリを送信します。

クライアントのインストールと設定

クライアントのインストール

npm、yarn、またはCDNを使用してクライアントをインストールします。

オプション 1: パッケージマネージャーを使用

npmを使用してクライアントをインストールするには、次のコマンドを実行します：

Bash

  1. npm install @elastic/search-application-client

yarnを使用してクライアントをインストールするには、次のコマンドを実行します：

Bash

  1. yarn add @elastic/search-application-client

オプション 2: HTML <script> タグを使用したCDN

また、CDNを使用してクライアントをインストールすることもできます。次の<script>タグをウェブアプリのHTMLに追加します：

Html

  1. <script src="https://cdn.jsdelivr.net/npm/@elastic/search-application-client@latest"></script>

クライアントのインポートと初期化

インストールが完了したら、クライアントをウェブアプリにインポートできます。クライアントを初期化するには、次の情報が必要です：

  • 検索アプリケーションの名前
  • 検索アプリケーションのURLエンドポイント
  • 検索アプリケーションのAPIキー

この情報は、Kibana UIのConnectページで見つけることができます。

オプション 1: JavaScriptモジュールを使用

次のインポート文を使用します：

Js

  1. import SearchApplicationClient from '@elastic/search-application-client';

クライアントを初期化するために、デプロイメントの詳細でクライアントを設定します。APIキーはKibana UIのConnectページで生成できます。Search > Search Applications >
<MY_SEARCH_APPLICATION> > Connectに移動します。クライアントを初期化するために必要な情報が事前に入力されているのがわかります：

Js

  1. import Client from '@elastic/search-application-client'
  3. const request = Client(
  4.   'my-search-application', // search application name
  5.   'url-from-connect-page', // url-host
  6.   'api-key-from-connect-page',  // api-key
  7.   {
  8.    // optional configuration
  9.   }
  10. )

設定が完了すると、client APIを使用して検索アプリケーションに検索リクエストを送信できるようになります。次のように：

Js

  1. const results = await request()
  2.   .query('star wars')
  3.   .search()

オプション 2: CDNを使用

CDNを使用している場合は、次の文を使用してクライアントをインポートできます：

Html

  1. <script>
  2.   const Client = window['SearchApplicationClient'];
  3. </script>

デプロイメントの詳細でクライアントを設定して、検索リクエストを送信できるようにします。APIキーはKibana UIのConnectページで生成できます。Search > Search Applications >
<MY_SEARCH_APPLICATION> > Connectに移動します。クライアントを初期化するために必要な情報が事前に入力されているのがわかります：

Html

  1. <script>
  2.   const request = Client(
  3.    'my-example-app', // search application name
  4.    'url-from-connect-page', // url-host
  5.    'api-key-from-connect-page',  // api-key
  6.    {
  7.    // optional configuration
  8.    }
  9. )
  10. </script>

設定が完了すると、client APIを使用して検索アプリケーションに検索リクエストを送信できるようになります。次のように：

Html

  1. <script>
  2.   const results = await request()
  3.    .query('star wars')
  4.    .search()
  5. </script>

検索テンプレートの操作

Search Application clientは、作成した任意のsearch templateと連携するように設計されています。Search Application APIsを使用して、検索テンプレートを作成および管理します。

テンプレートを管理するためにSearch Application APIsを使用する際には、Kibana Console構文を使用したAPIの例を提供します。

以下はテンプレートの例です：

Python

  1. resp = client.search_application.put(
  2.    name="my-example-app",
  3.    search_application={
  4.    "indices": [
  5.    "my-example-app"
  6.    ],
  7.    "template": {
  8.    "script": {
  9.    "lang": "mustache",
  10.    "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n              {\n                \"query_string\": {\n                  \"query\": \"{{query}}\",\n                  \"search_fields\": {{#toJson}}search_fields{{/toJson}}\n                }\n              }\n              {{/query}}\n            ]\n            }\n          }\n        }\n      ",
  11.    "params": {
  12.    "query": "",
  13.    "search_fields": ""
  14.    }
  15.    }
  16.    }
  17.    },
  18. )
  19. print(resp)

Js

  1. const response = await client.searchApplication.put({
  2.   name: "my-example-app",
  3.   search_application: {
  4.    indices: ["my-example-app"],
  5.    template: {
  6.    script: {
  7.    lang: "mustache",
  8.    source:
  9.    '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n              {\n                "query_string": {\n                  "query": "{{query}}",\n                  "search_fields": {{#toJson}}search_fields{{/toJson}}\n                }\n              }\n              {{/query}}\n            ]\n            }\n          }\n        }\n      ',
  10.    params: {
  11.    query: "",
  12.    search_fields: "",
  13.    },
  14.    },
  15.    },
  16.   },
  17. });
  18. console.log(response);

Console

  1. PUT _application/search_application/my-example-app
  2. {
  3.   "indices": ["my-example-app"],
  4.   "template": {
  5.    "script": {
  6.    "lang": "mustache",
  7.    "source": """
  8.    {
  9.    "query": {
  10.    "bool": {
  11.    "must": [
  12.    {{#query}}
  13.    {
  14.    "query_string": {
  15.    "query": "{{query}}",
  16.    "search_fields": {{#toJson}}search_fields{{/toJson}}
  17.    }
  18.    }
  19.    {{/query}}
  20.    ]
  21.    }
  22.    }
  23.    }
  24.    """,
  25.    "params": {
  26.    "query": "",
  27.    "search_fields": ""
  28.    }
  29.    }
  30.   }
  31. }

これにより、テンプレートに必要な任意のテンプレートパラメータを追加し、クライアントリクエストで値を提供できます。addParameterを使用して、テンプレートパラメータに実際の値を注入します。

たとえば、search_fieldsの値を次のように渡します：

Js

  1. const results = await request()
  2.   .query('star wars') // requires the template to use query parameter
  3.   .addParameter('search_fields', ['title', 'description'])
  4.   .search()

例のテンプレート

クライアントリポジトリに提供されているboilerplate templateから始めることをお勧めします。このスクリプトを表示して、どのように使用されているかを確認してください。dictionaryパラメータは、リクエストオブジェクトの構造と検証ルールを説明するJSONスキーマ定義を渡すために使用されます。このスキーマは重要であり、Elasticsearchクエリの特定の機能の使用を制限します。スキーマを表示。

このガイドの各検索機能は、このテンプレートに含まれる機能を必要とします。これらの機能は、テンプレートに特定のパラメータが存在することを要求します：

  • クエリ: query
  • フィルター: _es_filters
  • ファセット: _es_filtersおよび_es_aggs
  • ソート: _es_sort_fields
  • ページネーション: fromおよびsize

検索機能

検索体験に必要な基本的な要素をすべて探求します。検索アプリケーションを使用してそれらを実装し、クライアントを使用してクエリを送信する方法を学びます。

利用可能なメソッドとそのパラメータに関する情報は、client repoを参照してください。

関連性のカスタマイズ

私たちのシンプルなテンプレートは、すべてのフィールドにわたってquery_string検索を使用していますが、これはあなたのユースケースに合わないかもしれません。テンプレートを更新して、より良い関連性のリコールを提供できます。

以下の例では、multi-matchクエリをテンプレートに対して使用し、best_fieldsおよびphrase_prefixクエリが異なる検索フィールドをターゲットにしています。

Python

  1. resp = client.search_application.put(
  2.    name="my-example-app",
  3.    search_application={
  4.    "indices": [
  5.    "example-index"
  6.    ],
  7.    "template": {
  8.    "script": {
  9.    "lang": "mustache",
  10.    "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n              {\n                \"multi_match\" : {\n                  \"query\":    \"{{query}}\",\n                  \"fields\": [ \"title^4\", \"plot\", \"actors\", \"directors\" ]\n                }\n              },\n              {\n                \"multi_match\" : {\n                  \"query\":    \"{{query}}\",\n                  \"type\": \"phrase_prefix\",\n                  \"fields\": [ \"title^4\", \"plot\"]\n                }\n              },\n              {{/query}}\n            ],\n            \"filter\": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n          \"from\": {{from}},\n          \"size\": {{size}},\n          \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ",
  11.    "params": {
  12.    "query": "",
  13.    "_es_filters": {},
  14.    "_es_aggs": {},
  15.    "_es_sort_fields": {},
  16.    "size": 10,
  17.    "from": 0
  18.    },
  19.    "dictionary": {}
  20.    }
  21.    }
  22.    },
  23. )
  24. print(resp)

Js

  1. const response = await client.searchApplication.put({
  2.   name: "my-example-app",
  3.   search_application: {
  4.    indices: ["example-index"],
  5.    template: {
  6.    script: {
  7.    lang: "mustache",
  8.    source:
  9.    '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n              {\n                "multi_match" : {\n                  "query":    "{{query}}",\n                  "fields": [ "title^4", "plot", "actors", "directors" ]\n                }\n              },\n              {\n                "multi_match" : {\n                  "query":    "{{query}}",\n                  "type": "phrase_prefix",\n                  "fields": [ "title^4", "plot"]\n                }\n              },\n              {{/query}}\n            ],\n            "filter": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          "aggs": {{#toJson}}_es_aggs{{/toJson}},\n          "from": {{from}},\n          "size": {{size}},\n          "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ',
  10.    params: {
  11.    query: "",
  12.    _es_filters: {},
  13.    _es_aggs: {},
  14.    _es_sort_fields: {},
  15.    size: 10,
  16.    from: 0,
  17.    },
  18.    dictionary: {},
  19.    },
  20.    },
  21.   },
  22. });
  23. console.log(response);

Console

  1. PUT _application/search_application/my-example-app
  2. {
  3.   "indices": ["example-index"],
  4.   "template": {
  5.    "script": {
  6.    "lang": "mustache",
  7.    "source": """
  8.    {
  9.    "query": {
  10.    "bool": {
  11.    "must": [
  12.    {{#query}}
  13.    {
  14.    "multi_match" : {
  15.    "query":    "{{query}}",
  16.    "fields": [ "title^4", "plot", "actors", "directors" ]
  17.    }
  18.    },
  19.    {
  20.    "multi_match" : {
  21.    "query":    "{{query}}",
  22.    "type": "phrase_prefix",
  23.    "fields": [ "title^4", "plot"]
  24.    }
  25.    },
  26.    {{/query}}
  27.    ],
  28.    "filter": {{#toJson}}_es_filters{{/toJson}}
  29.    }
  30.    },
  31.    "aggs": {{#toJson}}_es_aggs{{/toJson}},
  32.    "from": {{from}},
  33.    "size": {{size}},
  34.    "sort": {{#toJson}}_es_sort_fields{{/toJson}}
  35.    }
  36.    """,
  37.    "params": {
  38.    "query": "",
  39.    "_es_filters": {},
  40.    "_es_aggs": {},
  41.    "_es_sort_fields": {},
  42.    "size": 10,
  43.    "from": 0
  44.    },
  45.    "dictionary": {
  46.    //  add dictionary restricting
  47.    // _es_filters, _es_sort_fields & _es_aggs params
  48.    // Use example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json
  49.    }
  50.    }
  51.   }
  52. }

テキスト検索、kNN検索、ELSER検索、RRFを使用したハイブリッド検索など、さまざまなタイプのクエリの例を参照してください。

ユースケース: 検索フィールドを動的に調整したい

クエリリクエスト時にsearch_fieldsを調整する必要がある場合は、テンプレートに新しいパラメータ（たとえば: search_fields）を追加し、addParameterメソッドを使用してフィールドをテンプレートに提供できます。

ユースケース: ユーザーに近い結果を強化したい

ユーザーのジオコーディネートを送信するために追加のテンプレートパラメータを追加できます。次に、特定のgeo_distanceに一致するドキュメントを強化するためにfunction_scoreを使用します。

結果フィールド

デフォルトでは、すべてのフィールドが_sourceフィールドに返されます。返されるフィールドを制限するには、テンプレートでフィールドを指定します。

Python

  1. resp = client.search_application.put(
  2.    name="my-example-app",
  3.    search_application={
  4.    "indices": [
  5.    "example-index"
  6.    ],
  7.    "template": {
  8.    "script": {
  9.    "lang": "mustache",
  10.    "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            \"filter\": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          \"_source\": {\n            \"includes\": [\"title\", \"plot\"]\n          },\n          \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n          \"from\": {{from}},\n          \"size\": {{size}},\n          \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ",
  11.    "params": {
  12.    "query": "",
  13.    "_es_filters": {},
  14.    "_es_aggs": {},
  15.    "_es_sort_fields": {},
  16.    "size": 10,
  17.    "from": 0
  18.    },
  19.    "dictionary": {}
  20.    }
  21.    }
  22.    },
  23. )
  24. print(resp)

Js

  1. const response = await client.searchApplication.put({
  2.   name: "my-example-app",
  3.   search_application: {
  4.    indices: ["example-index"],
  5.    template: {
  6.    script: {
  7.    lang: "mustache",
  8.    source:
  9.    '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            "filter": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          "_source": {\n            "includes": ["title", "plot"]\n          },\n          "aggs": {{#toJson}}_es_aggs{{/toJson}},\n          "from": {{from}},\n          "size": {{size}},\n          "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ',
  10.    params: {
  11.    query: "",
  12.    _es_filters: {},
  13.    _es_aggs: {},
  14.    _es_sort_fields: {},
  15.    size: 10,
  16.    from: 0,
  17.    },
  18.    dictionary: {},
  19.    },
  20.    },
  21.   },
  22. });
  23. console.log(response);

Console

  1. PUT _application/search_application/my-example-app
  2. {
  3.   "indices": ["example-index"],
  4.   "template": {
  5.    "script": {
  6.    "lang": "mustache",
  7.    "source": """
  8.    {
  9.    "query": {
  10.    "bool": {
  11.    "must": [
  12.    {{#query}}
  13.    // ...
  14.    {{/query}}
  15.    ],
  16.    "filter": {{#toJson}}_es_filters{{/toJson}}
  17.    }
  18.    },
  19.    "_source": {
  20.    "includes": ["title", "plot"]
  21.    },
  22.    "aggs": {{#toJson}}_es_aggs{{/toJson}},
  23.    "from": {{from}},
  24.    "size": {{size}},
  25.    "sort": {{#toJson}}_es_sort_fields{{/toJson}}
  26.    }
  27.    """,
  28.    "params": {
  29.    "query": "",
  30.    "_es_filters": {},
  31.    "_es_aggs": {},
  32.    "_es_sort_fields": {},
  33.    "size": 10,
  34.    "from": 0
  35.    },
  36.    "dictionary": {
  37.    //  add dictionary restricting _es_filters and _es_aggs params
  38.    // Use the dictionary example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json
  39.    }
  40.    }
  41.   }
  42. }

ユースケース: 結果フィールドを動的に調整したい

クエリリクエスト時に返されるフィールドを調整する必要がある場合は、テンプレートに新しいパラメータ（たとえば: result_fields）を追加し、addParameterメソッドを使用してフィールドをテンプレートに提供できます。

ハイライトとスニペット

ハイライトサポートは、テンプレートに簡単に追加できます。highlighting APIを使用して、一致するフィールドを指定できます。

以下の例では、titleおよびplotをハイライトフィールドとして指定します。titleは通常、plotに比べて短い値の長さを持ち、plotは可変で長くなる傾向があります。

ハイライトがある場合、タイトルをfragment_sizeの0として指定し、すべてのテキストを返します。プロットをfragment_sizeの200として指定し、各ハイライトされたフラグメントは最大200文字の長さになります。

Python

  1. resp = client.search_application.put(
  2.    name="my-example-app",
  3.    search_application={
  4.    "indices": [
  5.    "example-index"
  6.    ],
  7.    "template": {
  8.    "script": {
  9.    "lang": "mustache",
  10.    "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            \"filter\": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          \"_source\": {\n            \"includes\": [\"title\", \"plot\"]\n            },\n            \"highlight\": {\n              \"fields\": {\n                \"title\": { \"fragment_size\": 0 },\n                \"plot\": { \"fragment_size\": 200 }\n                }\n                },\n                \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n                \"from\": {{from}},\n                \"size\": {{size}},\n                \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n                }\n                ",
  11.    "params": {
  12.    "query": "",
  13.    "_es_filters": {},
  14.    "_es_aggs": {},
  15.    "_es_sort_fields": {},
  16.    "size": 10,
  17.    "from": 0
  18.    },
  19.    "dictionary": {}
  20.    }
  21.    }
  22.    },
  23. )
  24. print(resp)

Js

  1. const response = await client.searchApplication.put({
  2.   name: "my-example-app",
  3.   search_application: {
  4.    indices: ["example-index"],
  5.    template: {
  6.    script: {
  7.    lang: "mustache",
  8.    source:
  9.    '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            "filter": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          "_source": {\n            "includes": ["title", "plot"]\n            },\n            "highlight": {\n              "fields": {\n                "title": { "fragment_size": 0 },\n                "plot": { "fragment_size": 200 }\n                }\n                },\n                "aggs": {{#toJson}}_es_aggs{{/toJson}},\n                "from": {{from}},\n                "size": {{size}},\n                "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n                }\n                ',
  10.    params: {
  11.    query: "",
  12.    _es_filters: {},
  13.    _es_aggs: {},
  14.    _es_sort_fields: {},
  15.    size: 10,
  16.    from: 0,
  17.    },
  18.    dictionary: {},
  19.    },
  20.    },
  21.   },
  22. });
  23. console.log(response);

Console

  1. PUT _application/search_application/my-example-app
  2. {
  3.   "indices": ["example-index"],
  4.   "template": {
  5.    "script": {
  6.    "lang": "mustache",
  7.    "source": """
  8.    {
  9.    "query": {
  10.    "bool": {
  11.    "must": [
  12.    {{#query}}
  13.    // ...
  14.    {{/query}}
  15.    ],
  16.    "filter": {{#toJson}}_es_filters{{/toJson}}
  17.    }
  18.    },
  19.    "_source": {
  20.    "includes": ["title", "plot"]
  21.    },
  22.    "highlight": {
  23.    "fields": {
  24.    "title": { "fragment_size": 0 },
  25.    "plot": { "fragment_size": 200 }
  26.    }
  27.    },
  28.    "aggs": {{#toJson}}_es_aggs{{/toJson}},
  29.    "from": {{from}},
  30.    "size": {{size}},
  31.    "sort": {{#toJson}}_es_sort_fields{{/toJson}}
  32.    }
  33.    """,
  34.    "params": {
  35.    "query": "",
  36.    "_es_filters": {},
  37.    "_es_aggs": {},
  38.    "_es_sort_fields": {},
  39.    "size": 10,
  40.    "from": 0
  41.    },
  42.    "dictionary": {
  43.    //  add dictionary restricting _es_filters and _es_aggs params
  44.    // Use the dictionary example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json
  45.    }
  46.    }
  47.    }
  48. }

一致が見つかった場合、これはハイライトフィールドを持つ結果を返します。たとえば：

Js

  1. {
  2.   "hits": [
  3.    {
  4.    "_index": "movies",
  5.    "_type": "_doc",
  6.    "_id": "1",
  7.    "_score": 0.2876821,
  8.    "_source": {
  9.    "title": "The Great Gatsby",
  10.    "plot": "The Great Gatsby is a novel by F. Scott Fitzgerald that follows the story of Jay Gatsby, a wealthy and mysterious man, as he tries to win back the love of his life, Daisy Buchanan."
  11.    },
  12.    "highlight": {
  13.    "title": ["The Great <em>Gatsby</em>"],
  14.    "plot": [
  15.    "The Great <em>Gatsby</em> is a novel by F. Scott Fitzgerald that follows the story of <em>Jay</em> <em>Gatsby</em>, a wealthy and mysterious man, as he tries to win back the love of his life, Daisy Buchanan."
  16.    ]
  17.    }
  18.    }
  19.   ]
  20. }

ハイライトヘルパー

フロントエンドでフィールドを表示する際に、フィールドにハイライトがあるかどうかを最初に判断する必要があります。これを簡素化するために、ヘルパーを提供します。

Js

  1. import Client, { Highlight } from '@elastic/search-application-client'
  3. // example React component
  4. const ResultsList = ({ hits } ) => {
  5.   return hits.map((hit) => (
  6.    <div className="result">
  7.    <div className="title">{Highlight(hit, "title")}</div>
  8.    <div className="description">{Highlight(hit, "plot")}</div>
  9.    </div>
  10.   ))
  11. }

ページネーション

ページネーションを使用するには、ページ番号とページサイズを設定します。デフォルトでは、ページサイズは10です。sizeおよびfromパラメータを使用して、レスポンスで返されるページとヒット数を制御できます。

クライアントを使用して、setSizeおよびsetFromメソッドでこれを行うことができます。

Js

  1. // page 1
  2. const results = await request()
  3.  .setSize(20)
  4.  .setFrom(0)
  5.  .search()
  7. // page 2
  8. const results = await request()
  9.  .setSize(20)
  10.  .setFrom(20)
  11.  .search()

ソート

ソートを使用するには、フィールド名とソート順序を指定するか、関連性でソートするためにpass _scoreを指定します。検索テンプレートには_es_sort_fields_fieldsパラメータが必要です。これがどこで使用されているかを確認するには、example templateを参照してください。

デフォルトでは、結果はスコアの順にソートされます。スコア以外のフィールドでソートする必要がある場合は、setSortメソッドを使用してオブジェクトの配列を指定します。

Js

  1. const results = await request()
  2.  .setSort([{ year: 'asc' }, '_score'])
  3.  .search()

フィルタリング

Search application clientは、フィルターとファセットもサポートしています。これらを使用するには、2つのパラメータを追加する必要があります：

  • _es_filters
  • _es_aggs

これらがどこで使用されているかを確認するには、example templateを参照してください。

基本フィルタリング

フィルターを使用するように設定されたテンプレートを使用して、setFilterメソッドを使用してクエリにフィルターを追加します。

ボイラープレートテンプレートスキーマは、term、range、match、nested、geo_bounding_box、およびgeo_distanceフィルターのみをサポートします。特定の句を使用する必要がある場合は、テンプレートスキーマを更新できます。

以下はsetFilterを使用した例です。

Js

  1. // return only "star wars" movies that are rated PG
  2. const results = await request()
  3.   .query('star wars')
  4.   .setFilter({
  5.    term: {
  6.    'rated.enum': 'PG',
  7.    },
  8.   })
  9.   .search()

ファセット

クライアントは、結果にファセットを設定する機能をサポートしています。クライアント初期化呼び出しでファセットを指定します。たとえば、俳優、監督、IMDB評価のファセットを追加したいとします。

Js

  1. const request = Client(
  2.   'my-example-app', // search application name
  3.   'https://d1bd36862ce54c7b903e2aacd4cd7f0a.us-east4.gcp.elastic-cloud.com:443', // api-host
  4.   'api-key-from-connect-page', // api-key
  5.   {
  6.    facets: {
  7.    actors: {
  8.    type: 'terms',
  9.    field: 'actors.keyword',
  10.    disjunctive: true,
  11.    },
  12.    directors: {
  13.    type: 'terms',
  14.    field: 'director.keyword',
  15.    size: 20,
  16.    disjunctive: true,
  17.    },
  18.    imdbrating: {
  19.    type: 'stats',
  20.    field: 'imdbrating',
  21.    },
  22.    },
  23.   }
  24. )

Elasticsearchでは、keywordタイプは、正確で変更されていない形式で検索可能である必要があるフィールドに使用されます。これは、これらのクエリが大文字と小文字を区別することを意味します。このタイプは、ファセットが正確な値や用語に基づいてデータを集約およびフィルタリングする必要があるため、ファセットに使用されます。 

  2. 以下の例では、映画のみを返したいとします：  
  4. - ハリソン・フォードを俳優としてフィーチャー  
  5. - ジョージ・ルーカスまたはリドリー・スコットが監督  
  6. - IMBD評価が7.5を超える
  9. #### Js
  11. ``````js
  12. const results = await request()
  13.   .addFacetFilter('actors', 'Harrison Ford')
  14.   .addFacetFilter('directors', 'George Lucas')
  15.   .addFacetFilter('directors', 'Ridley Scott')
  16.   .addFacetFilter('imdbrating', {
  17.    gte: 7.5,
  18.   })
  19.   .search()
  20. `

結果のファセットにアクセスできます：

検索アプリケーションクライアントを使用した検索体験の構築

この文書は、search applicationを使用して、Search Application clientで検索体験を構築するための手順ガイドです。このクライアントは、ブラウザで使用するために設計されたJavaScriptライブラリです。このライブラリをウェブアプリに統合して、検索アプリケーションへのクエリを簡素化します。

サンドボックス環境は、search-application-clientライブラリをテストおよび実験するために利用可能です。自分のウェブアプリを設定せずにクライアントを試したい場合は、そこにジャンプしてください。

repositoryをクローンし、READMEの指示に従って始めてください。