検索ツールelasticsearch -reactive searchを使った基本的なUIの構築

機械学習技術 人工知能技術 自然言語処理技術 セマンティックウェブ技術 オントロジー技術 ウェブ技術 検索技術 データベース技術 アルゴリズム デジタルトランスフォーメーション技術 Visualization & UX ワークフロー&サービス 本ブログのナビ
検索ツールelasticsearch -reactive searchを使った基本的なUIの構築

前回はエラスティックサーチの立ち上げを行った。 今回は、実際のreactivesearchのコード例を以下に示す。

import React, {Component} from 'react';
import {DataSearch, ReactiveBase, ReactiveList, ResultList, SelectedFilters} from '@appbaseio/reactivesearch';
import './App.css';

const { ResultListWrapper } = ReactiveList;

class App extends Component {
render() {
return (
<div className="main-container">
<ReactiveBase
app="データベース名" ←
url="http://localhost:9200" ←
>
<DataSearch
componentId="title" ←
dataField={["入力データのフィールド名"]} ←
queryFormat="and"
/>
<SelectedFilters/>
<ReactiveList
componentId="resultLists" ←
dataField="出力データのフィールド名" ←
size={10}
pagination={true}
react={{
"and": ["title"] ←
}}
>
{({data}) => (
<ResultListWrapper>
{
data.map(item => (
<ResultList key={item._id}>
<ResultList.Content>
<ResultList.Title
dangerouslySetInnerHTML={{
__html: item."フィールド名" ←
}}
/>
</ResultList.Content>
</ResultList>
))
}
</ResultListWrapper>
)}
</ReactiveList>
</ReactiveBase>
</div>
);
}
}

export default App;

動作させる前にCORSの設定をelastcisearch側に行う。(elasticsearchフォルダ内の設定ファイルelastic.ymlに設定)

http.cors.enabled: true
http.cors.allow-origin: "*"

以上を設定してウェブブラウザ(localhost:3000)上で入力ボックスと結果のデータが見える。ボックスだけで結果の画面が見えていない場合は、elastcisearchがうまく動作していないか、インデックス名の設定がうまくいっていいないか、web通信(CORS等)がうまくいっていないことが考えられのでそれらをチェックする。

コードの構成としては、importでライブラリの導入を行い。(この場合はReactとreactiveserach、そしてCSS) 次にReactの描画クラスappを配置する。appのの中には描画(render)されるものとしてreactivesearchのコンポーネントが配置される構成となる。Reactのコンポーネントは、JSXというHTMLライクな構成で表現され、主要なコンポーネントとして、まず最上位のものとして<ReactiveBase>がある。これは全てのreacticesearchコンポーネントをwrapするもので、以下のような使い方をする。

<ReactiveBase
app="appname"
credentials="abcdef123:abcdef12-ab12-ab12-ab12-abcdef123456"
>
<Component1 .. />
<Component2 .. />
</ReactiveBase>

このモジュールで、elasticsearchとの接続や全体のテーマの設定を行う。

それらの中に入るコンポーネント(上コード例でのComponent1等)として、Mainの検索部である <DataSearch>コンポーネント(基本的な使い方としては以下のようなコード)や、

<DataSearch
componentId="SearchSensor"
dataField={["group_venue", "group_city"]}
/>

今回のコードでは導入していないが、データをfilterする役目の<SingleList>に代表されるLIST Componentと、<singleRange>に代表されるRange Component等がある。

更にその後ろに配置されるコンポーネントとしては、結果を表示する<ReactiveList>や<ResultList>のようなResultComponentとなる。

<ReactiveList>の基本構成は以下となり、

<ReactiveList
componentId="SearchResult"
react={{
"and": ["CitySensor", "SearchSensor"] }}
renderItem={(res) => <div>{res.title}</div>}
/>

<ResultList>の基本構成は以下となる。

<ReactiveList
react={{
"and": ["PriceFilter", "SearchFilter"] }}
componentId="SearchResult"
>
{({ data, error, loading, ... }) => (
<ResultListWrapper>
{
data.map(item => (
<ResultList key={item._id}>
<ResultList.Image src={item.image} />
<ResultList.Content>
<ResultList.Title
dangerouslySetInnerHTML={{
__html: item.original_title
}}
/>
<ResultList.Description>
<div>
<div>by {item.authors}</div>
<div>
({item.average_rating} avg)
</div>
</div>
<span>
Pub {item.original_publication_year}
</span>
</ResultList.Description>
</ResultList.Content>
</ResultList>
))
}
</ResultListWrapper>
)}
</ReactiveList>

ここまでで、Elasticsearchとの接続と、基本的な全文検索と結果の表示までの設定が可能となる。

次回は、更に細かなフィルタリングと全体の体裁を整えるCSSについて述べる。

コメント

  1. […] 前回までで基本的な検索が可能な形までの説明を行なった。今回は更に詳細な検索が可能になるfiltering componentsについて説明する。 […]

  2. […] 次回以降でreactivesearchを使った実際のUI構築について述べる。 […]

  3. […] 検索ツールElastic Search(3) UI(reactivesearchとの連携:基本) […]

  4. […] 検索ツールElastic Search(3) UI(reactivesearchとの連携:基本) […]

  5. […] 検索ツールElastic Search -UI(reactivesearchとの連携:基本) […]

モバイルバージョンを終了
タイトルとURLをコピーしました