Searchkit は、 Elasticsearchで優れた検索エクスペリエンスを構築するのに役立つオープン ソース ライブラリです。 Javascript、React、Vue、Angular などで動作します。
ウェブサイト |デモ |ドキュメント |不和
Searchkit は、Elasticsearch または Opensearch の検索 UI を提供します。 Searchkit を使用すると、検索ボックス、絞り込みフィルター、結果 (その他多数!) などの Instantsearch コンポーネントを使用して、検索エクスペリエンスを構築できます。
Searchkit は、検索エクスペリエンスを迅速に構築したい人に最適です。
Searchkit は Elasticsearch を使用して検索 UI を簡素化します。
Searchkit Bot は、このリポジトリをより深く理解するのに役立ちます。コード例、インストール ガイド、デバッグ ヘルプなどを求めることができます。
または、その他の例についてはドキュメントを参照してください。
npmまたはyarn経由でインストールします
npm install searchkit @searchkit/api @searchkit/instantsearch-clientまたはCDN経由
< script src =" https://cdn.jsdelivr.net/npm/@searchkit/instantsearch-client@latest " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/instantsearch.js@4 " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/searchkit@latest " > </ script > Searchkit には Elasticsearch 7.0 以降または Opensearch 2.4 以降が必要です。
以下では、Docker を使用して Elasticsearch を実行しています。
docker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e " discovery.type=single-node " -e " xpack.security.enabled=false " -e http.cors.enabled=true -e " http.cors.allow-origin='*' " -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2次に、インデックスとデータを追加しましょう
curl --location --request PUT ' http://localhost:9200/products '
--header ' Content-Type: application/json '
--data-raw ' {
"mappings": {
"properties": {
"name": {
"type": "text"
},
"description": {
"type": "text"
},
"price": {
"type": "integer"
},
"categories": {
"type": "text",
"fields": {
"keyword": {
"type": "keyword"
}
}
}
}
}
} '
curl --location --request POST ' http://localhost:9200/products/_doc '
--header ' Content-Type: application/json '
--data-raw ' {
"name": "Apple iPhone 12 Pro Max",
"description": "The iPhone 12 Pro Max is the most powerful iPhone ever. It has a 6.7-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro Max is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 800
} '
curl --location --request POST ' http://localhost:9200/products/_doc '
--header ' Content-Type: application/json '
--data-raw ' {
"name": "Apple iPhone 12 Pro",
"description": "The iPhone 12 Pro is the most powerful iPhone ever. It has a 6.1-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 700
} ' すべてのインスタントサーチ フレームワークと互換性のある Searchkit。以下は、react-instantsearch を使用した例です。
import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
// import your InstantSearch components
import { InstantSearch , SearchBox , Hits , RefinementList , Pagination , RangeInput } from 'react-instantsearch' ;
const sk = new Searchkit ( {
connection : {
host : 'http://localhost:9200' ,
// with an apiKey
// https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-api-key
// apiKey: '##########'
// with a username/password
// https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
//auth: {
// username: "elastic",
// password: "changeme"
//}
} ,
search_settings : {
search_attributes : [ { field : 'title' , weight : 3 } , 'actors' , 'plot' ] ,
result_attributes : [ 'title' , 'actors' , 'poster' , 'plot' ] ,
highlight_attributes : [ 'title' ] ,
facet_attributes : [
{ attribute : 'actors' , field : 'actors.keyword' , type : 'string' } ,
{ attribute : 'imdbrating' , type : 'numeric' , field : 'imdbrating' }
]
}
} )
const searchClient = Client ( sk ) ;
const App = ( ) => (
< InstantSearch
indexName = "imdb_movies"
searchClient = { searchClient }
>
< SearchBox / >
< div className = "left-panel" >
< RefinementList attribute = "actors" searchable = { true } limit = { 10 } / >
< RangeInput attribute = "imdbrating" / >
< / div >
< div className = "right-panel" >
< Hits / >
< Pagination / >
< / div >
< / InstantSearch >
}スタートガイドに従ってください。
Searchkit Node API を使用すると、ブラウザから Elasticsearch へのリクエストをプロキシできます。これは、ブラウザーから Elasticsearch を非表示にする場合、またはクエリにユーザー権限フィルターを追加する場合に便利です。
Searchkit にはすぐに使えるクエリ ビルダーが備わっていますが、getQuery 関数を apiClient に渡すことでクエリをカスタマイズすることもできます。
const results = await apiClient . handleRequest ( req . body , {
getQuery : ( query , search_attributes ) => {
return [
{
combined_fields : {
query ,
fields : search_attributes ,
} ,
} ,
] ;
} ,
} ) ;Searchkit は KNN クエリ検索をサポートしています。以下は KNN クエリ検索の例です。
const results = await client . handleRequest ( req . body , {
getKnnQuery ( query , search_attributes , config ) {
return {
field : 'dense-vector-field' ,
k : 10 ,
num_candidates : 100 ,
// supported in latest version of Elasticsearch
query_vector_builder : {
text_embedding : {
model_id : 'cookie_model' ,
model_text : query
}
}
}
}
} ) ;セマンティック検索のチュートリアルに従ってください。
リクエストフックを使用してクエリ全体をオーバーライドすることもできます。以下は、最初の検索リクエストにスコア クエリを追加するリクエスト フックの例です。
これはbeforeSearchとafterSearchで適用できます。
const results = await client . handleRequest ( req . body , {
hooks : {
beforeSearch : ( searchRequests ) => {
const uiRequest = searchRequests [ 0 ]
return [
{
... uiRequest ,
body : {
... uiRequest . body ,
rescore : {
window_size : 100 ,
query : {
rescore_query : {
match : {
plot : {
query : uiRequest . body . query ,
operator : "and" ,
} ,
} ,
} ,
query_weight : 1 ,
rescore_query_weight : 10 ,
}
}
}
} ,
searchRequests . slice ( 1 , searchRequests . length )
]
} ,
}
} ) ;詳細については、こちらの API ドキュメントをご覧ください。
クエリ ルールを使用すると、検索エクスペリエンスの動作をカスタマイズできます。クエリ ルールを使用すると、一連の条件に基づいて結果をブーストまたはフィルターしたり、結果のランキングを変更したりできます。
以下は、ダン エイクロイドまたはチャーリー シーンが出演する映画の結果を増やし、クエリが「movie」という単語の場合に映画のみを表示するように結果をフィルタリングするクエリ ルールの例です。
{
id : '1' ,
conditions : [
[
{
context : 'query' ,
value : 'movie' ,
match_type : 'exact'
}
]
] ,
actions : [
{
action : 'QueryBoost' ,
query : 'actors:"Dan Aykroyd" OR actors:"Charlie Sheen"' ,
weight : 2
} ,
{
action : 'QueryFilter' ,
query : 'type:"movie"'
}
]
}詳細については、クエリ ルールのドキュメントを参照してください。
Q: Elasticsearch をパブリック インターネットに公開する必要がありますか?
Searchkit はリクエストを Elasticsearch にプロキシします。
Searchkit では、ブラウザから直接検索を実行するか、Searchkit API を使用してリクエストを Elasticsearch にプロキシするかの両方のオプションが提供されます。ブラウザから直接、優れた開発者エクスペリエンスとプロトタイピングを提供します。デプロイの準備ができたら、Searchkit API を使用してリクエストを Elasticsearch にプロキシできます。
Q: React を使用する必要がありますか?
React、React Native、Vue、Angular を使用できます。フロントエンド フレームワークを使用する必要さえありません。インスタントサーチ.js ウィジェットでプレーンな Javascript と HTML を使用できます。
Q: Elasticsearch のどのバージョンがサポートされていますか?
Searchkit は Elasticsearch 7.0 以降 + Opensearch 2.0 以降と互換性があります。
Q: Android と iOS はサポートされていますか?
潜在的に。 Searchkit API は Algolia API を模倣しているため、いくつかの調整を加えることで、Searchkit API で Algolia Instantsearch クライアントを使用できるようになります。ご興味がございましたら、ぜひお知らせください。
Q: Algolia ではなく Searchkit を使用するのはなぜですか?
Elasticsearch には Algolia に比べて多くの利点があります。特に大規模なデータセットがある場合は、Algolia の安価な代替手段として Elasticsearch を使用することをお勧めします。独自のインフラストラクチャで Elasticsearch を実行したり、クエリの関連性をより詳細に制御したりすることが必要になる場合があります。
