BlazorとElasticsearchを使用した検索アプリの構築

ベクトル検索から強力なREST APIまで、Elasticsearchは開発者に最も広範な検索ツールキットを提供します。GitHubのサンプルノートブックにアクセスして新しいことを試してみましょう。また、無料トライアルを始めるか、ローカルでElasticsearchを実行することもできます。

この記事では、C# スキルを活用して Blazor と Elasticsearch を使用した検索アプリケーションを構築する方法を学習します。Elasticsearch .NETクライアントを使用して、フルテキスト、セマンティック、ハイブリッド検索クエリを実行します。

注: Elasticsearch C# クライアントNESTの古いバージョンに精通している場合は、NEST クライアントの廃止と新機能に関するこちらのブログ投稿をお読みください。NESTは.NETクライアントの前世代であり、Elastic.Clients.Elasticsearch package

• Blazor とは何ですか?
• ESRE とは何ですか?
• ELSER の設定
• データのインデックス作成
• 建築申請

Blazor とは何ですか?

Blazor は、開発者がクライアントまたはサーバー上で実行される Web アプリケーションを構築できるようにするために Microsoft によって作成された、オープン ソースの HTML、CSS、および C# ベースの Web フレームワークです。Blazor を使用すると、再利用可能なコンポーネントを作成してアプリケーションをより速く構築することもできます。開発者は、同じファイル内に C# で HTML ビューとアクションを構築できるため、読みやすくクリーンなコードを維持できます。さらに、Blazor Hybrid を使用すると、.NET コードを介してネイティブ プラットフォーム機能にアクセスするネイティブ モバイル アプリを構築できます。

Blazor を優れたフレームワークにする機能の一部を以下に示します。

• サーバー側とクライアント側のレンダリングオプション
• 再利用可能なUIコンポーネント
• SignalRによるリアルタイム更新
• 組み込みの状態管理
• 組み込みルーティングシステム
• 強力な型付けとコンパイル時のチェック

Blazor を選ぶ理由

Blazor は他のフレームワークやライブラリに比べていくつかの利点があります。開発者はクライアント コードとサーバー コードの両方に C# を使用できるため、強力な型指定とコンパイル時のチェックが可能になり、信頼性が向上します。.NET エコシステムとシームレスに統合され、.NET ライブラリとツールの再利用を可能にし、強力なデバッグ サポートを提供します。

ESRE とは何ですか?

Elasticsearch Relevance Engine ™ (ESRE)は、強力な Elasticsearch 検索エンジンをベースに機械学習と人工知能を使用して検索アプリケーションを構築するためのツールセットです。

ESREについて詳しく知りたい方は、こちらのブログ記事をご覧ください。

ELSER の設定

Elastic のESRE機能を活用するために、モデルプロバイダーとしてELSER を使用します。

ElasticsearchのELSERモデルを使用するには、PlatinumまたはEnterpriseライセンスと、最低4GBの専用機械学習（ML）ノードが必要です。詳細はこちらをご覧ください。

まず推論エンドポイントを作成します。

ELSER を初めて使用する場合は、モデルがバックグラウンドで読み込まれるときに 502 Bad Gateway エラーが発生する可能性があります。Kibana のMachine Learning > Trained Modelsでモデルのステータスを確認できます。デプロイが完了したら、次のステップに進むことができます。

データのインデックス作成

ここからデータセットをダウンロードし、Kibana を使用してデータをインポートできます。これを行うには、ホームページにアクセスして「データのアップロード」をクリックします。次に、ファイルをアップロードしてImportをクリックします。最後に、 Advancedタブに移動して、次のマッピングを貼り付けます。

セマンティック クエリとフルテキスト クエリを実行できるインデックスを作成します。semantic_textフィールド タイプは、データのチャンク化と埋め込みを処理します。として インデックス付けしていることに注意してください 。フィールドを と text` の 両方としてインデックス付けしたい場合は、 copy_to を使用できます 。longDescriptionsemantic_textsemantic_text

BlazorとElasticsearchを使ったアプリ構築

APIキー

最初に行う必要があるのは、Elasticsearch へのリクエストを認証するための API キーを作成することです。API キーは読み取り専用であり、 books-blazorインデックスのクエリのみに許可される必要があります。

次のような画面が表示されます。

後で必要になるので、 encoded応答フィールドの値を保存します。Elastic Cloudで実行している場合は、Cloud ID も必要になります。(こちらで確認できます)。

Blazorプロジェクトの作成

まず Blazor をインストールし、公式の手順に従ってサンプル プロジェクトを作成します。

プロジェクトを作成すると、フォルダー構造とファイルは次のようになります。

テンプレートアプリケーションにはBootstrap v5.1.0が含まれていますスタイリング用。

Elasticsearch .NETクライアントをインストールしてプロジェクトのセットアップを完了します。

この手順を完了すると、ページは次のようになります。

フォルダ構造

ここで、フォルダーを次のように整理します。

ファイルの説明:

• Components/Pages/Search.razor: 検索バー、結果、フィルターを含むメイン ページ。
• コンポーネント/ページ/Search.razor.css:ページ スタイル。
• Components/Elasticsearch/SearchBar.razor: 検索バー コンポーネント。
• Components/Elasticsearch/Results.razor: 結果コンポーネント。
• Components/Elasticsearch/Facet.razor: フィルター コンポーネント。
• Components/Svg/GlassIcon.razor: 検索アイコン。
• Components/_Imports.razor: これにより、すべてのコンポーネントがインポートされます。
• Models/Book.cs: ブックフィールドのスキーマを保存します。
• Models/Response.cs: 検索結果、ファセット、ヒット数の合計を含む応答スキーマを保存します。
• Services/ElasticsearchService.cs: Elasticsearch サービス。Elasticsearch への接続とクエリを処理します。

初期設定

まずはクリーンアップから始めましょう。

ファイルを削除します:

• コンポーネント/ページ/Counter.razor
• コンポーネント/ページ/Weather.razor
• コンポーネント/ページ/ホーム.razor
• コンポーネント/レイアウト/NavMenu.razor
• コンポーネント/レイアウト/NavMenu.razor.css

/Components/_Imports.razorファイルを確認してください。次のインポートが必要です。

プロジェクトにElasticを統合する

次に、Elasticsearch コンポーネントをインポートします。

アプリケーションのスペースを増やすために、 /Components/Layout/MainLayout.razorファイルからデフォルトのサイドバーを削除します。

次に、ユーザー シークレットの Elasticsearch 資格情報を入力します。

このアプローチを使用すると、.Net 8 は機密データをプロジェクト フォルダー外の別の場所に保存し、 IConfigurationインターフェースを使用してアクセスできるようになります。これらの変数は、同じユーザー シークレットを使用するすべての .Net プロジェクトで使用できます。

次に、 Program.csファイルを変更してシークレットを読み取り、Elasticsearch クライアントをマウントします。

まず、必要なライブラリをインポートします。

• BlazorApp.Services: Elasticsearch サービスが含まれます。
• Elastic.Clients.Elasticsearch: Elasticsearch クライアント .Net 8 ライブラリをインポートします。
• Elastic.Transport: Elasticsearch トランスポート ライブラリをインポートします。これにより、ApiKey クラスを使用してリクエストを認証できるようになります。

次に、 var app = builder.Build()行の前に次のコードを挿入します。

このコードは、ユーザー シークレットから Elasticsearch 資格情報を読み取り、Elasticsearch クライアント インスタンスを作成します。

ElasticSearch クライアントの初期化後、次の行を追加して Elasticsearch サービスを登録します。

次のステップでは、 /Services/ElasticsearchService.csファイルに検索ロジックを構築します。

まず、必要なライブラリとモデルをインポートします。

次に、クラスElasticsearchService 、コンストラクター、および変数を追加します。

検索の設定

それでは、検索ロジックを構築してみましょう。

• BuildFilters ユーザーが選択したファセットを使用して、検索クエリのフィルターを構築します。
• BuildHybridQuery 全文検索とセマンティック検索を組み合わせたハイブリッド検索クエリを構築します。

次に、検索メソッドを追加します。

• SearchBooksAsync: ハイブリッド クエリを使用して検索を実行し、ファセットを構築するための集計が含まれた結果を返します。
• FormatFacets: 集計応答を辞書にフォーマットします。
• ConvertFacetDictionary: ファセット辞書をより読みやすい形式に変換します。

次のステップでは、検索ページの結果として出力される Elasticsearch クエリのhitsで返されるデータを表すモデルを作成します。

まず、ファイル/Models/Book.csを作成し、次の内容を追加します。

次に、 /Models/Response.csファイルに Elastic レスポンスを設定し、次のコードを追加します。

基本的なUIの設定

次に、SearchBar コンポーネントを追加します。ファイル/Components/Elasticsearch/SearchBar.razorに次の内容を追加します。

このコンポーネントには、検索バーと検索を実行するためのボタンが含まれています。

Blazor は、同じファイル内で C# コードを使用して HTML を動的に生成できるようにすることで、優れた柔軟性を提供します。

その後、ファイル/Components/Elasticsearch/Results.razorで、検索結果を表示する結果コンポーネントを構築します。

最後に、検索結果をフィルタリングするためのファセットを作成する必要があります。

注: ファセットとは、製品タイプ、価格帯、ブランドなど、特定の属性やカテゴリに基づいて検索結果を絞り込むことができるフィルターです。これらのフィルターは通常、クリック可能なオプション（多くの場合チェックボックス）として表示され、ユーザーが検索を絞り込み、関連性の高い結果を見つけやすくします。Elasticsearchでは、ファセットは集計を使用して作成されます。

ファイル/Components/Elasticsearch/Facet.razorに次のコードを配置してファセットを設定します。

このコンポーネントは、 author 、 categories 、およびstatusフィールドのterms集計を読み取り、Elasticsearch に送り返すフィルターのリストを生成します。

さて、すべてをまとめてみましょう。

/Components/Pages/Search.razorファイル内:

私たちのページは機能しています!

ご覧のとおり、ページは機能しますが、スタイルが欠けています。見た目をもっと整理してレスポンシブにするために、CSS を追加してみましょう。

レイアウト スタイルの置き換えを始めましょう。Components/Layout/MainLayout.razor.cssファイル内:

Components/Pages/Search.razor.cssファイルで検索ページのスタイルを追加します。

ページの見た目が良くなり始めました:

最後に仕上げましょう:

次のファイルを作成します。

• コンポーネント/Elasticsearch/Facet.razor.css
• コンポーネント/Elasticsearch/Results.razor.css

Facet.razor.cssのスタイルを追加します:

Results.razor.cssの場合:

最終結果:

アプリケーションを実行するには、次のコマンドを使用できます。

dotnet watch

やったね！検索バーを使用して Elasticsearch インデックス内の書籍を検索し、著者、カテゴリ、ステータス別に結果をフィルタリングできるようになりました。

全文検索とセマンティック検索の実行

デフォルトでは、アプリは 全文検索 と セマンティック検索の 両方を使用して ハイブリッド検索を 実行します。フルテキスト検索用とセマンティック検索用の 2 つの別個のメソッドを作成し、いずれかのメソッドを選択してユーザーの入力に基づいてクエリを構築することで、検索ロジックを変更できます。

/Services/ElasticsearchService.csファイルのElasticsearchServiceクラスに次のメソッドを追加します。

どちらのメソッドもBuildHybridQueryメソッドと同様に動作しますが、全文検索またはセマンティック検索のみを実行します。

選択した検索方法を使用するようにSearchBooksAsyncメソッドを変更できます。

完全な申請書はここからご覧いただけます

まとめ

Blazor は、C# を使用して Web アプリケーションを構築できる効果的なフレームワークです。Elasticsearch は、検索アプリケーションを構築できる強力な検索エンジンです。両方を組み合わせることで、ESRE のパワーを活用して、セマンティック検索エクスペリエンスを短期間で実現し、堅牢な検索アプリケーションを簡単に構築できます。

よくあるご質問