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

検索ツール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について述べる。