Search UI

Next.js × Search UI × Fuse.js 検索アプリケーション

概要 Next.js、Elastic Search UI、Fuse.jsを組み合わせた検索アプリケーションの技術構成と実装について説明します。作成したサイトは以下です。 https://nsf-psi.vercel.app/ja/ GitHubリポジトリは以下です。 https://github.com/nakamura196/nsf サンプルデータとして、「東京帝國大學本部構内及農學部建物鳥瞰圖（東京大学農学生命科学研究科・農学部）」を使用します。 https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970 以下はAIが作成しました。アプリケーション概要このアプリケーションは、東京大学の建物画像データを対象とした検索システムです。IIIF（International Image Interoperability Framework）プロトコルに対応した建物画像を検索し、地理情報（緯度・経度）やメタデータを表示します。主な特徴多言語対応 next-intlによる日本語・英語の多言語対応機能を実装しています。検索機能簡易検索 : キーワードによる直感的な検索詳細検索 : 複数条件を組み合わせた精密な検索（AND/OR条件）ファセット検索 : subject（学部）などカテゴリー別の絞り込み機能ソート機能 : スコア、タイトル、属性値での並び替え曖昧検索 : Fuse.jsによる入力ミスに寛容な検索（閾値0.3） UI/UX Tailwind CSSによる洗練されたデザインダークモード対応レスポンシブデザインでモバイルフレンドリー React IconsによるアイコンUI カスタム検索コネクタ Elastic Search UIとFuse.jsを組み合わせたカスタムコネクタを実装し、フロントエンドのみで全文検索機能を実現しています。地理情報対応各建物データには緯度・経度情報が含まれています。技術スタックフロントエンド Next.js 15 (App Router) React 19 TypeScript Tailwind CSS 4.0 検索システム Elastic Search UI（検索インターフェース） Fuse.js（全文検索エンジン）カスタムAPIConnector（独自実装）国際化 next-intl その他 ...

2025年7月25日 · 更新: 2025年7月25日 · 1 分 · Nakamura

Elasticsearch Search UIでの初期ソート順の指定方法

概要本記事はAIが作成しました。 ElasticsearchとSearch UIを使って検索インターフェースを構築する際、検索結果のソート順を制御することは一般的な要件です。このガイドでは、Search UI Reactライブラリでソートを設定する方法を説明します。参考 https://www.elastic.co/docs/reference/search-ui/api-react-search-provider#api-react-search-provider-initial-state 初期状態とソート設定の理解 Search UIライブラリでは、検索の初期状態を指定することができ、ソートの方向とソートするフィールドを含めることができます。これは、ユーザーがページに最初にアクセスしたときに、検索結果が事前に決められた順序で表示されるようにしたい場合に特に役立ちます。基本的なソート設定の例 Search UI設定でソートを指定する方法は次のとおりです： const config = { // その他の設定オプション... initialState: { sortDirection: 'asc', sortField: 'field_tz_id', }, }; return ( <SearchProvider config={config}> {/* 検索コンポーネント */} </SearchProvider> ); ソート設定オプション initialStateオブジェクトは、ソート関連の2つのプロパティを受け付けます： sortField : ソートしたいElasticsearchインデックス内のフィールド sortDirection : ソートの方向、'asc'（昇順）または'desc'（降順） TypeScriptの型安全性 TypeScriptを使用している場合、ソート方向を定義するときにas constを使用して型安全性を確保できます： const config = { // その他の設定... initialState: { sortDirection: 'asc' as const, // 'asc' | 'desc'として型付け sortField: 'field_tz_id', }, }; これにより、sortDirectionは「asc」または「desc」のみを取り得るようになり、潜在的なエラーを防ぐことができます。結論 Elasticsearch Search UIで初期ソートを設定する際の参考になりましたら幸いです。

2025年4月30日 · 更新: 2025年4月30日 · 1 分 · Nakamura