@elastic/react-search-ui を React 19 + Next.js 15.5 で使う方法

はじめに React 19 と Next.js 15 を使用しているプロジェクトで @elastic/react-search-ui を使おうとすると、以下のような依存関係エラーに遭遇することがあります。 n n p p m m e e r r r r o o r r E p R e E e S r O L r V e E a c c t o @ u " l > d = n 1 o 6 t . 8 r . e 0 s o < l v 1 e 9 " f r o m @ e l a s t i c / r e a c t - s e a r c h - u i @ 1 . 2 3 . 1 この記事では、この問題の原因と解決方法を詳しく解説します。 ...

2026年1月19日 · 8 分 · Nakamura

Elasticsearch/OpenSearch クラスタ間のデータ移行ガイド

Amazon Elasticsearch Service から別の OpenSearch クラスタへデータを移行する方法を解説します。本記事では、Scroll API と Bulk API を使用したシンプルかつ確実な移行手法を紹介します。 背景 クラウドサービスの移行やコスト最適化のため、Elasticsearch/OpenSearch クラスタ間でデータを移行する必要が生じることがあります。今回は以下の環境間での移行を行いました。 移行元 : Amazon Elasticsearch Service (AWS) 移行先 : セルフホスト OpenSearch 移行の流れ 移行元・移行先のインデックス確認 マッピング情報の取得と調整 移行先にインデックスを作成 Scroll API + Bulk API でデータ移行 移行結果の確認 事前準備:インデックスの確認 まず、移行元と移行先のインデックス一覧を確認します。 # c # c u u 移 r 移 r 行 l 行 l 元 先 の - の - イ u イ u ン ン デ " デ " ッ u ッ u ク s ク s ス e ス e 一 r 一 r 覧 : 覧 : p p a a s s s s w w o o r r d d " " " " h h t t t t p p s s : : / / / / s d o e u s r t c - e c - l c u l s u t s e t r e / r _ / c _ a c t a / t i / n i d n i d c i e c s e ? s v ? & v s & = s i = n i d n e d x e " x " Step 1: マッピング情報の取得 移行元からマッピング情報を取得します。 ...

2025年11月28日 · 19 分 · Nakamura

校異源氏物語テキストDBに対する検索を行うAPIサーバの構築

概要 校異源氏物語テキストDBに対する検索を行うAPIサーバの構築したので、備忘録です。 https://genji-api.aws.ldas.jp/ 背景 以下のページで、『校異源氏物語』のテキストデータをTEI/XMLに準拠した形で公開しています。 https://kouigenjimonogatari.github.io/ このテキストデータをElasticsearchに登録し、コマごとの検索を可能にするAPIを作成します。 使い方 以下のURLで、OpenAPIおよびSwaggerを用いた使い方の説明ページにアクセスできます。 https://genji-api.aws.ldas.jp/ 工夫点 検索語の展開 例えば以下のURLは、「夕顔」を検索キーワードとした例です。JSON:APIに準拠した入出力形式としています。 https://genji-api.aws.ldas.jp/search?q=夕顔&page[limit]=20&page[offset]=0&sort=page&filter[expandRepeatMarks]=true&filter[unifyKanjiKana]=true&filter[unifyHistoricalKana]=true&filter[unifyPhoneticChanges]=true&filter[unifyDakuon]=true&filter[vol_str]=04 夕顔 この時、以下のような結果が返却されます。入力したキーワード「夕顔」に対して、バリエーションを生成し、これらに基づく検索を行います。 { } " " } d m a e " " ] " } " } " " " " " } t t q t , t , f , s l o t a a a u r " " " " " " " " " r " " " " " i " " " " " " o i f o g " } " " e a 夕 ゆ ゆ ゆ ゆ 夕 夕 ゆ ゆ a e u u u u l e u u u u v r m f t g v : : r n 顔 う ふ ふ う か か う ふ n x n n n n t x n n n n o t i s a r o " " " ] y s " か か か か お ほ 顔 顔 s p i i i i e p i i i i l " t e l e l d s b [ { " f , お お ほ ほ " " " " f a f f f f r a f f f f _ : " t " g _ o u u { } ] : o " " " " , , , o n y y y y s n y y y y s : " : a s c m c , r , , , , r d K H P D " d K H P D t " : t t _ _ k " " " m m R a i h a : R a i h a r p 2 7 i r c o e k d 夕 e O e n s o k e n s o k " a 0 0 , o " o t t e o 顔 d p p j t n u { p j t n u : g , , n : u h s y c " Q t e i o e o e i o e o e s n e " " _ , u i a K r t n a K r t n " " " { t r : : c e o t a i i " t a i i " 0 , : _ _ o r n M n c c : M n c c : 4 e d [ " u i s a a a C a a a C { r o 0 n e " r " l h t r " l h t 夕 r c 4 t s : k : K a r k : K a r 顔 o _ " " s a n u s a n u " r c 夕 : : { " t n g e " t n g e _ o 顔 : r a e : r a e , u u " 7 [ u " s u " s p n , t e : " t e : " p t r , : r , : e " u t u t r : e r t e r t _ , u r , u r b 0 e u e u o , , e , e u , , n d " : 0 , その結果、本文中に登場する「ゆふかほ」「夕かほ」「夕顔」を一度に検索することができます。 ...

2025年6月25日 · 23 分 · Nakamura

IIIF Presentation API v2のIIIFコレクションで、ページネーションを使う

概要 IIIF Presentation API v2のIIIFコレクションで、ページネーションを使う機会がありましたので、備忘録です。 背景 IIIFコレクションでは、以下のように、複数のマニフェストファイル(およびコレクション)の一覧を提供することができます。 https://iiif.io/api/presentation/2.1/#collection { } " " " " " " " " ] @ @ @ l v d a m c i t a i e t a { } o d y b e s t n n " p e w c r i " " " t : e l i r i f @ @ l e " " n i b e i t a x " : : g p u s d y b t h H t t t " p e " t " " i i i s : e l : t s T n o o " " " p c o t n n : " : : " : : p " " " h h / C : : : [ t " " t / o L t s B t e l e " " " p c o p x l v t D P : : o : a e e o e r / M k / m c l p s o / a / p t " c v e n 1 i l i C , r i x i " i e o o i d a f i . n l p e m e f o " l t d p s . r , e i l t i g c o b e " o t n y . , i i o a i o o E r p i n f x g i f a / / / f C m i p c o o p i r o r l l i e l l e f s l E e / e e x c O b n c a t r o t t m i g o a i p o a k t o l n n 1 i n e " i / o / , z m n t O a a / o r t n 2 p g i i / " a o f c , n n e o i " s n z , t t a " e t , x i t o . n j " s , o n " , この時、対象とするマニフェストファイルが多数になった場合、一つのIIIFコレクションでは配信が難しくなりました。 ...

2025年6月2日 · 7 分 · Nakamura

Dockerによるディスク圧迫の調査と対処法【Ubuntu 22.04 運用事例】

はじめに 本記事では、Dockerコンテナやイメージによるディスク圧迫が原因でElasticsearchにエラーが発生した事例と、その調査・対処方法について記録します。同様の問題に直面している方の参考になれば幸いです。 🔍 問題の発生 運用中のElasticsearchで以下のエラーが発生しました。 { } " } " e , s r " " " t r t r p a o y e h t r p a a u " e s s s : " o e " : n " : { " : " : 5 s " 0 e " q 3 a a u r l e c l r h y _ s " p h , h a a r s d e s _ e f x a e i c l u e t d i " o , n _ e x c e p t i o n " , 初期調査により、インデックスが close 状態になっており、ディスク容量不足が疑われました。 ...

2025年5月22日 · 4 分 · 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設定でソートを指定する方法は次のとおりです: 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つのプロパティを受け付けます: ...

2025年4月30日 · 2 分 · Nakamura

Algolia における「a に x を含み、b に y を含む」部分一致検索の調査

この記事は、AIが作成し、一部を人が修正したものです。 はじめに フルテキスト検索エンジンの中でも、Typesense、MeiliSearch、Algolia は小規模なプロジェクト向けの選択肢として注目されています。しかし、「a に x を含み、b に y を含む」部分一致検索 が可能かどうかは、プロジェクトの要件に関わる重要なポイントです。本記事では、Algolia での部分一致検索の可否や、Elasticsearch との比較を行います。 Algolia での部分一致検索 Algolia では、全文検索 (query) を利用できますが、特定のフィールドごとに部分一致検索を行うには制限があります。 方法1:query を使った検索(部分一致可能だがフィールド指定不可) i n d e x . s e a r c h ( ' x y ' ) 特徴: x や y を含むデータを全フィールドから検索。 どのフィールドでヒットしたかを制限できない 。 方法2:restrictSearchableAttributes を使う(単一フィールドの検索) i } i } n ) n ) d r ; d r ; e e e e x s x s . t . t s r s r e i e i a c a c r t r t c S c S h e h e ( a ( a ' r ' r x c y c ' h ' h , a , a b b { l { l e e A A t t t t r r i i b b u u t t e e s s : : [ [ ' ' a b ' ' ] ] 特徴: ...

2025年3月3日 · 2 分 · Nakamura

Nuxtで@elastic/search-uiを使ったサンプルリポジトリを作成しました。

概要 Nuxtで@elastic/search-uiを使ったサンプルリポジトリを作成しました。 https://github.com/nakamura196/nuxt-search-ui-demo 以下からお試しいただけます。 https://nakamura196.github.io/nuxt-search-ui-demo 背景 @elastic/search-uiは以下のように説明されています。 https://www.elastic.co/docs/current/search-ui/overview A JavaScript library for the fast development of modern, engaging search experiences with Elastic. Get up and running quickly without re-inventing the wheel. (機械翻訳)Elasticを使用して、モダンで魅力的な検索エクスペリエンスを迅速に開発するためのJavaScriptライブラリです。車輪を再発明することなく、すぐに使い始めることができます。 以下でVue.jsを使ったサンプルリポジトリが公開されています。 https://github.com/elastic/vue-search-ui-demo 今回は上記のリポジトリを参考に、Nuxtを使ったサンプルリポジトリを作成しました。 メモ 初期検索 以下のように指定することで、初期読み込み時の検索を実行することができました。 https://github.com/nakamura196/nuxt-search-ui-demo/blob/main/searchConfig.ts#L49 a l w a y s S e a r c h O n I n i t i a l L o a d : t r u e , 公式ドキュメントの以下に記載がありました。 ...

2024年8月23日 · 1 分 · Nakamura

DjangoとAWS OpenSearchを接続する

概要 DjangoとAWS OpenSearchを接続する方法に関するメモです。以下の記事が参考になりました。 https://testdriven.io/blog/django-drf-elasticsearch/ ただし、上記の記事はElasticsearchを対象にした設定のため、OpenSearchに応じた変更が必要です。 変更点 以下のElasticsearch Setupの部分から、OpenSearchに応じた変更が必要でした。 https://testdriven.io/blog/django-drf-elasticsearch/#elasticsearch-setup 具体的には、以下の2つのライブラリが必要でした。 ( ( e e n n v v ) ) $ $ p p i i p p i i n n s s t t a a l l l l o d p j e a n n s g e o a - r o c p h e - n p s y e a r c h - d s l その後は、django_elasticsearch_dslとなっている箇所をdjango-opensearch-dslに、elasticsearch_dslをopensearchpyに書き換えることで、記事の通りに進めることができました。 ...

2023年6月19日 · 18 分 · Nakamura

StrapiとAmazon OpenSearchを連携する

概要 StrapiとElasticsearchとの連携にあたり、以下の記事が参考になりました。 https://punits.dev/blog/integrating-elasticsearch-with-strapi/ ソースコードも公開されています。 https://github.com/geeky-biz/strapi-integrate-elasticsearch ここでは、上記の記事を参考にして、Amazon OpenSearchと連携するなど、一部カスタマイズした内容についてメモします。 カスタマイズしたソースコードは以下です。 https://github.com/nakamura196/strapi-integrate-opensearch 修正点 以下について、記事ではindexing_typeとなっていますが、indexing_request_typeとする必要がありました。 https://github.com/nakamura196/strapi-integrate-opensearch/blob/006c533d4d7882fc9779552db31a7b0e2ada5e57/elastic/cron-search-indexing.js#L16 またElasticsearchではなく、Amazon OpenSearchを使用するにあたり、以下のライブラリをインストールする必要があります。 n n p p m m i i n n s s t t a a l l l l @ @ o a p w e s n - s s e d a k r / c c h r - e p d r e o n j t e i c a t l / - o p p r e o n v s i e d a e r r c s h 認証の方法はいくつかあると思いますが、ここでは以下のように変更しました。 ...

2023年5月26日 · 1 分 · Nakamura

Elasticsearch 上のデータをローカルにダンプする

Elasticsearch 上のデータをローカルにダンプするにあたり、elasticsearch-dumpを使用しました。その備忘録です。 https://github.com/elasticsearch-dump/elasticsearch-dump 以下のように、vオプションを使用することで、コンテナ上で作ったファイルがホストの方に残ります。limitオプションなどは任意です。 d o c k e r r u n [ ホ ス ト デ ィ レ ク ト リ の 絶 対 パ ス ] : [ コ ン テ ナ の 絶 対 パ ス ] - r m - t i e l a s t i c d u m p / e l a s t i c s e a r c h - d u m p - i n p u t [ ソ ー ス と な る E l a s t i c s e a r c h イ ン デ ッ ク ス の エ ン ド ポ イ ン ト ] o u t p u t = [ コ ン テ ナ の 絶 対 パ ス ] / [ 出 力 フ ァ イ ル 名 ] . j s o n - l i m i t 1 0 0 0 0 具体的には、以下のような形です。 ...

2022年7月27日 · 2 分 · Nakamura

Elastic Searchにおける異なるキーと値(ラベルとID)を持つアグリゲーション

概要 現在Cultural Japanプロジェクトにおける検索アプリの更新を進めており、多言語データのアグリゲーションを行う必要がありました。本記事では、その方法に関する調査結果の備忘録です。 データ データとしては、以下のように、agential(人物を示す)フィールドに、id、ja、enの値を持つケースを想定します。 { } " ] a g { } e n " " " t j e i i a n d a " " " l : : : " : " " " 葛 K c [ 飾 a h 北 t n 斎 s a " u m , s e h : i 葛 k 飾 a 北 , 斎 " H o k u s a i " , 上記のデータに対して、idでフィルタリング処理などを行いつつ、言語設定に合わせてjaまたはenの値を表示することを想定します。 ...

2022年7月4日 · 16 分 · Nakamura

【開発者向け】AWS x Nuxt.js x Elasticsearchを用いた検索アプリケーションの開発環境の構築

2022年3月12日 · 0 分 · Nakamura