Searchui

概要 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 その他 ...

概要 本記事は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設定でソートを指定する方法は次のとおりです： c } r ) o ; e ; n i } t < s n , u S / t i s s r e { S そ t o o n a / e c の i r r r * a o 他 a t t ( c r n の l D F h 検 c f 設 S i i P 索 h i 定 t r e r コ P g オ a e l o ン r プ t c d v ポ o = シ e t : i ー v ョ : i d ネ i { ン o ' e ン d . { n f r ト e . : i r . e c > ' l o / a d n } s _ f c t i ' z g , _ = i { d c ' o , n f i g } > ソート設定オプション initialStateオブジェクトは、ソート関連の2つのプロパティを受け付けます： ...