こちらはAlgoliaのDeveloper RelationsチームのBryan Robinson(@brob)とChuck Meyer(@chuckm)が書いた Creating a better date-picking experience with the DateRangePicker component の翻訳記事です。
検索に関するユーザーインターフェースを作成する際に、AlgoliaのInstantSearchライブラリのパッケージを使うだけで十分な場合がありますが、それぞれのライブラリはあなたにとって使いやすいように異なったフレーバーなJavaScriptで提供されています。つまり、各ライブラリには、強力なUIを作成するにあたって必要な全てのパーツが揃っているということです。
しかし、時には、そこにある使えるものを超えるものが欲しくなることもあるでしょう。
そういった場合に、2つオプションがあります。AlgoliaのコネクターAPIを使ってあなた自身のパッケージを作るか、もしくは、pre-builtされたcustom widgetを使うかです。
Reactのdate pickerが欲しいと言われたときに、それを動かすのにできるだけ少ないコードで済ませたいと思うのは当然ですし、とにかくできるだけ良いUIが欲しいと思うでしょう。昨年末に開催されたAlgoliaのコーディングチャレンジのボーナス・チャレンジ5では、さらに必要なものがありました。私がアクセスしたのは？Algolia Code Exchangeです。
dateコンポーネントを検索すると、私はまさに私が必要としていたものを見つけました: その名も @algolia/react-instantsearch-widget-date-range-picker です！Reactを使っていない場合は、VanillaJS版もあります。
プロジェクトのセットアップ
React InstantSearchのプロジェクトは以下のように簡単にコマンドで作成することができます。
npx create-instantsearch-app concert-search \
--app-id latency \
--api-key 059c79ddd276568e990286944276464a \
--index-name concert_events_instantsearchjs \
--template "React InstantSearch"このモンスター級のコマンドはReact InstantSearchプロジェクトをセットアップして、Algoliaがホストしているコンサートに関するインデックスに接続を行います。
コマンドによって作成されたディレクトリに移動して、yarn startを実行すればアプリケーションが動作します。
これで、コンサートに関する検索体験が構築できました。
日付でフィルタリングを行う場合、<RefinementList>コンポーネントを設定して、そのappributeをdateに設定することができますが、この日付は(最も簡単な比較として)Unixタイムスタンプになります。すなわち、こちらはユーザー体験にとって理想的であるとは言えません。ということで、こちらを改善していきましょう。
ウィジェットのインストールと設定
date range(日付範囲) pickerを動作させるためにいくつかの依存コンポーネントをインストールする必要があります。
npm install @algolia/react-instantsearch-widget-date-range-picker @duetds/date-pickerこちらは、Algolia公式のReact Date Pickerウィジェットとそれが依存しているDuet Data Pickerをインストールするものです。
パッケージをsrc/App.jsにインポートして、Duet Date Pickerを使うために初期化していきます。
// create-instantsearch-app のコードに記述されているimportの後に追加
import { DateRangePicker } from '@algolia/react-instantsearch-widget-date-range-picker';
import { defineCustomElements } from "@duetds/date-picker/dist/loader";
// Windowオブジェクトで使うdate pickerからのカスタム要素を定義
defineCustomElements(window);ということで、パッケージがインポートできたので、表示に関する準備が整いました。
Data Range Pickerの追加
pickerをページについかするには、<InstantSearch>コンポーネントの中のスポットを選択する必要があります。こちらのベースとなるのはsearch-panelです。デフォルトでは、この中にあるのは検索結果だけですが、ここにフィルターパネルを追加することができます。
<InstantSearch searchClient={searchClient} indexName="concert_events_instantsearchjs">
<div className="search-panel">
<div className="search-panel__filters">
<DateRangePicker attribute="date" />
</div>
<div className="search-panel__results">
//... Results code
</div>
</div>
</InstantSearch>DateRangePickerはattributeとしてプロパティを受け取ります。ここでは検索結果から日付の属性であるdateを受け取ります。
Quick note: DateRangePickerはUnixタイムスタンプ(Epochミリ秒。秒ではない)を受け付けます。つまりデータ構造によっては、データの中にセカンダリーなタイムスタンプを作成する必要があるかもしれません。
では、レンダリングされたページを表示してみましょう。date pickerが表示できるようになっているはずです。ここではUIに関する微調整を行っていきます。
Duet Date pickerは多くのCSSカスタムプロパティを使ってスタイリングを行うことができます。src/App.cssファイルの冒頭で、こちらのプロパティを貼り付けてアプリに応じて設定する必要があります。
:root {
--duet-color-primary: #3c4ee0;
--duet-color-text: #333;
--duet-color-text-active: #fff;
--duet-color-placeholder: #666;
--duet-color-button: #f5f5f5;
--duet-color-surface: #fff;
--duet-color-overlay: rgba(0, 0, 0, 0.8);
--duet-color-border: #d6d6e7;
--duet-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif;
--duet-font-normal: 400;
--duet-font-bold: 600;
--duet-radius: 3px;
--duet-z-index: 600;
}2つのピッカー領域がまだ少し近いようにみえるので、こちらもCSSで調整していきましょう。こちらもsrc/App.cssに記述しますが、今回は下の方に記述していきます。2つのアイテムの間のスペースの調整方法は色々あるかと思いますが、手っ取り早く、CSS Gridとgapプロパティを使っていきます。
.date-range-picker {
display: grid;
gap: 1rem;
}これで、機能的で使いやすい日付選択機能が完成しました。もうUnixタイムスタンプを扱ったり、実際の日時に変換したりする必要はなくなりました。
さらに深堀り
今回作った日付ピッカーは良く機能すると思いますし、Algolia InstantSearchを使ったアプリケーションに持ち込むこともできます。こちらを更に発展させていきたい場合はsrc/App.jsのhitsコンポーネントを編集して、各hitにより良いUIを作成していくと良いでしょう。またCurrentRefinementsコンポーネントを使って現在適用されているフィルターを表示することも可能です。
コメント