検索ツールElasticsearch -reactive searchを使ったUIの構築(応用)

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

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

検索したデータをfilteringするには、前回の説明の中にあったLIST componentsとRange componentsを利用する。

LIST componentsは主にstring系のデータをfilteringする際に利用するもので、候補の中から一つを選ぶもの(singlelist)、複数のものを選ぶもの(multilist)、それぞれがドロップダウンで表示されるもの(singledropdwonlistmultidropdownlist)がある。シンプルなfilteringを行う場合は、single dropdown listかmulti dropdown listを使えば良い。それぞれのBasic use code例を示す。

single dropdown list

<SingleDropdownList
  componentId="CitySensor"
  dataField="group.group_city.raw"
  title="Cities"
/>

multi dropdown list

<MultiDropdownList
  componentId="CitySensor"
  dataField="group.group_city.raw"
  title="Cities"
/>

その他のcomponentとしては、検索部と組み合わされた Single Data ListやMulti Data List、ボタンの選択UIであるTogglebutton、タグクラウドと組み合わされたTagCloudがある。

Range Compopnentsは主に数値系のデータに対するFilteringを行うもので、SilgeRane, MultiRange, SingleDropdownRange, MultiDropDownRangeから始まり、日時のfilteringを行うDatPickerやDateRange、検索等のRating(星の数)でfilteringを行うRatingFilter、またスライダー系のUIであるRangeSlider,DynamicRangeSlider等がある。

MultiDropDownRangeのsampleソースコードは以下の通り

<MultiDropdownRange
  componentId="PriceSensor"
  dataField="price"
  data={
    [{"start": 0, "end": 10, "label": "Cheap"},
     {"start": 11, "end": 20, "label": "Moderate"},
     {"start": 21, "end": 50, "label": "Pricey"},
     {"start": 51, "end": 1000, "label": "First Date"}]
  }
  title="Prices"
/>

これらFiltering componentsを検索系のSearchComponents等と組み合わせることで複数のfacetを会したUIを実現することができる。

filtering要素を左側のサイドバーに集め、Mainの検索結果を中央(右側)に出力するには、filteringのcomponentを一つのクラスとしてまとめれば良い。例えば以下のように記述する

 <div className="sub-container">
              <div className="left-bar">
                 
                   <SingleDataList
                    componentId="dta1-list"
                    dataField="data1"
                    className="data1-filter"
                    showSearch={false}
                    data={[
                      {
                        label: "data1-1",
                        value: "data1-1"
                      },
                      {
                        label: "data1-2",
                        value: "data1-2"
                      },
                      {
                        label: "data1-3",
                        value: "data1-3"
                      }
                    ]}
                    title="data1の種類"
                   /> 

    (他のコンポーネント)

           </div>
</div>

「他のコンポーネント」の部分にコンポーネントを加えて行けば、filter要素が連なったFacet検索を構築できる。

実際にfilter要素を検索に影響させるには、結果出力であるReactiveListのコンポーネントの中に”reactプロパティ”を加えれば良い。

                  <ReactiveList
                        componentId="resultLists"
                        dataField="Data1"
                        size={10}
                        pagination={true}
                        
                        react={{
                            "and": ["mainSearch", "filter1","filter2", "filter3"]
                        }}
                        className="result"
                         sortOptions={[
                         {label: "古い順", dataField: "Date", sortBy: "asc"},
                         {label: "新しい順", dataField: "Date", sortBy: "desc"}
                        ]}
                    >

上記のコードでは、結果としてDatasearchの出力結果に”and”で”filter1″,”filter2″,”filter3″が掛けられている。更に時間軸のデータでの昇順、降順に並べるUIも加えてある。

以上により、elasticsearchの立ち上げと、reactiveserachを用いて各種ファセットでの絞り込み検索まで可能な検索UIのベース部が構築できる。これらの検索ツールは一般的な全文検索で用いることの他に、機械学習の結果を確認する等、各種AI検証実験のプラットフォームとして広く利用することができる。

これらのツールを実際に活用する為には、更に細かな体裁をCSSの設定にて整え、出力結果の調整等にreactの汎用UIモジュールであるMaterial-UIを加えることが必要となるが、それらに関しては後日説明する。

次回は少し箸休めして、人工知能とテレビドラマについて述べる。

コメント

  1. […] ElasticsearchのUI構築で作成したページのレイアウト調整について述べる。まずシンプルなものとしては以下に記載されているものが参考になる。 […]

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

  3. […] 次回は、技術の話に戻り、前回述べたElasticsearchの体裁の調整であるCSSについて述べる。 […]

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

  5. […] 検索ツールElastic Search(4) UI(reactivesearchとの連携:応用) […]

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