Gustavo Llermaly - Elasticsearch Labs

Elastic Workflowsを使用したKibanaのダッシュボード表示の監視

Gustavo Llermaly — Fri, 03 Apr 2026 00:00:00 GMT

Kibanaは各ダッシュボードが何回閲覧されたかを追跡しますが、そのデータは組み込みのダッシュボードにはネイティブに公開されていません。この記事では、Elastic Workflowsを使って30分ごとにそのデータを自動収集し、Elasticsearchにインデックス化して、その上に独自の分析を構築します。

Elastic WorkflowsはKibana内部に組み込まれた自動化エンジンで、シンプルなYAML構成を使用して多段階プロセスを定義できます。各ワークフローはスケジュールやイベント、またはElastic Agent Builderのツールとしてトリガーでき、各ステップでKibana APIを呼び出し、Elasticsearchをクエリし、データを変換できます。

具体的な例としてダッシュボードのビュー数を使用しますが、同じパターンがKibanaの保存済みオブジェクトAPIを通じて提供されるすべてのメトリックにも当てはまります。

要件

Elastic Cloudまたはセルフマネージドクラスター（バージョン9.3を実行）
ワークフローが有効（詳細設定）

ステップ1：開発ツールで生データを調べます

何かを作る前に、どんなデータがあるのかを理解しましょう。Kibanaはほとんどの設定やメタデータを専用の内部インデックスに保存済みオブジェクトとして保存しています。Kibanaがこの方法で追跡している項目の一つに、使用量カウンターと呼ばれる、特別な保存オブジェクトタイプを使ったダッシュボードの閲覧数があります。次のように、開発ツールから直接クエリできます。

GET kbn:/api/saved_objects/_find?type=usage-counter&filter=usage-counter.attributes.domainId:"dashboard"%20and%20usage-counter.attributes.counterType:"viewed"&per_page=10000

応答は下記のようになります。

{ "page": 1, "per_page": 10000, "total": 1, "saved_objects": [ { "type": "usage-counter", "id": "dashboard:346f3c64-ebca-484d-9d57-ec600067d596:viewed:server:20260310", "attributes": { "domainId": "dashboard", "counterName": "346f3c64-ebca-484d-9d57-ec600067d596", "counterType": "viewed", "source": "server", "count": 1 }, ... } ]

counterNameフィールドはダッシュボードIDであり、countはそのダッシュボードに対する当日中の累積閲覧数です。Kibanaは、1つのダッシュボードにつき1日に1つのカウンターオブジェクトを作成します。オブジェクトIDに日付サフィックス（...views:server:20260310）が表示されます。ユーザーがダッシュボードを開くにつれて、その数は一日を通して増加していきます。

この日常的なドキュメントモデルをインデックスで複製するのではなく、ワークフローの実行ごとに1つのドキュメントを作成します。各ドキュメントは、キャプチャの瞬間におけるその日のダッシュボードの累積ビュー数を記録します。

ステップ2：宛先インデックスの作成

ダッシュボードビューのスナップショットを格納するためのインデックスが必要です。次のコマンドは明示的なマッピングで作成し、後で集約や可視化ができるようにします。Dev Toolsで実行してください：

PUT dashboard-views { "mappings": { "properties": { "captured_at": { "type": "date" }, "dashboard_id": { "type": "keyword" }, "dashboard_name": { "type": "keyword" }, "view_count": { "type": "integer" } } } }

IDと名前にkeywordマッピングを使用すると、アグリゲーションが可能になります。view_countのためにintegerを使用することは安全なデフォルト設定です。Kibanaはカウンターを毎日リセットするため、32ビットの制限（1日で20億回以上のビュー）に達することは現実的な懸念事項ではありません。数値演算も引き続きサポートしており、max、avg、minなどが含まれます。

ステップ3: ワークフローを作成する

Stack Management > Workflows > New Workflowに移動し、次のワークフローのYAML構成を貼り付けます。

name: dashboard-views-ingestion triggers: - type: scheduled with: every: 30m steps: - name: fetch_dashboard_views type: kibana.request with: method: GET path: >- /api/saved_objects/_find?type=usage-counter&per_page=10000&filter=usage-counter.attributes.domainId:"dashboard"%20and%20usage-counter.attributes.counterType:"viewed" - name: index_each_dashboard type: foreach foreach: "{{ steps.fetch_dashboard_views.output.saved_objects }}" steps: - name: fetch_dashboard_name type: kibana.request with: method: GET path: /api/saved_objects/dashboard/{{ foreach.item.attributes.counterName }} on-failure: continue: true - name: index_doc type: elasticsearch.request with: method: POST path: /dashboard-views/_doc body: dashboard_id: "{{ foreach.item.attributes.counterName }}" dashboard_name: "{{ steps.fetch_dashboard_name.output.attributes.title }}" view_count: "${{ foreach.item.attributes.count | plus: 0 }}" captured_at: "{{ execution.startedAt | date: '%Y-%m-%dT%H:%M:%SZ' }}"

次のセクションでは、ワークフローをステップごとに分解していきます。

ワークフローの仕組み

トリガー

ワークフローは30分ごとにスケジュールされたトリガーで実行されます。これにより、APIに負担をかけずに時系列データが得られます。

ダッシュボードビューを取得

kibana.requestを使ってKibanaの保存済みオブジェクトAPIを呼び出します。認証の設定は不要です。ワークフローエンジンは実行コンテキストに基づいて適切なヘッダーを自動的に添付します。

index_each_dashboard (foreach)

前のステップで返された saved_objects 配列を反復します。各反復の現在の項目は foreach.itemとして利用可能です。ループ内では、各ダッシュボードごとに2つの入れ子手順を実行します。

1. fetch_dashboard_name：

人間が読み取れるダッシュボードのタイトルを GET /api/saved_objects/dashboard/{id} を呼び出して解決します。on-failure: continue: true を追加することで、ダッシュボードが削除されてもビューカウンターが残っている場合、ループが継続して全体の実行が失敗しないようにします。

2. index_doc：

各ドキュメントをPOST /dashboard-views/_doc（明示的なIDなし）でインデックス化することで、Elasticsearchが自動でIDを生成します。これにより、毎回の実行時に新しいドキュメントが作成され、以前のスナップショットを上書きするのではなく、時間の経過とともにビューカウントの履歴が構築されます。

次の2点にご注意ください。

captured_atフィールドは日付フィルターを使ってタイムスタンプをISO 8601としてフォーマットします。それなしでは、値はJavaScriptの日付文字列として出力され（例：Tue Mar 10 2026 05:03:47 GMT+0000）、Elasticsearchは日付としてマップしません。
view_countは数値型を保持するために${{ }}構文を| plus: 0と共に用います。{{ }}を使うと文字列としてレンダリングされ、ダッシュボードでの計算操作ができなくなります。

UIでは、各ワークフローステップを快適にデバッグできます。

ステップ4：統計ダッシュボードを構築

ワークフローが数回実行されてデータが収集されたら、dashboard-views Data viewを使用してKibanaで新しいダッシュボードを作成します。

まずは以下のパネルから始めましょう：

トップのダッシュボード（閲覧数別）： X軸にdashboard_name、Y軸にlast_value(view_count)を持つ棒グラフを使用します。これはダッシュボードごとの現在の日次閲覧数を示しています。
時間経過に伴うビュー：X軸にcaptured_at、Y軸にlast_value(view_count)を用いた折れ線グラフを使用し、dashboard_nameで分類されます。各実行が新しいドキュメントを追加するため、重複を合計するのではなく、最後の値を使用して時間バケットごとのピークカウントを取得します。
現在のスナップショット：すべてのダッシュボードの最新のビュー数を表示するには、最新のcaptured_at を含むデータテーブルを使用します。

各ワークフローが新しいドキュメントを作成するため、時間範囲でフィルタリングして特定の期間のアクティビティを分析したり、週ごとの比較を行ったり、ダッシュボードのビューしきい値を下回ったときにアラートを設定したりすることができます。

まとめ

Elastic Workflowsは、ソース（Kibana API）と送信先（Elasticsearch）の両方がネイティブであるため、認証管理が全く必要なく、この種の定期的なデータ収集に適しています。ワークフローエンジンはkibana.requestとelasticsearch.requestのステップで認証を自動的に処理するため、記述するのはロジックだけです。

資料

Elastic Open Web Crawler をコードとして

Gustavo Llermaly — Mon, 22 Sep 2025 00:00:00 GMT

Elastic Open Web Crawlerとその CLI 駆動型アーキテクチャを使用すると、バージョン管理されたクローラー構成とローカルテストを備えた CI/CD パイプラインを実現するのが非常に簡単になります。

従来、クローラーの管理は手動で行われ、エラーが発生しやすいプロセスでした。これには、UI で直接構成を編集することや、クロール構成の複製、ロールバック、バージョン管理などに苦労することが含まれていました。クローラー構成をコードとして扱うことで、ソフトウェア開発で期待されるのと同じ利点（再現性、追跡可能性、自動化）が得られ、この問題が解決されます。

このワークフローにより、ロールバック、バックアップ、移行などのタスクを CI/CD パイプラインに Open Web Crawler を簡単に組み込むことができるようになります。これらのタスクは、Elastic Web Crawler や App Search Crawler などの以前の Elastic Crawler では非常に困難でした。

この記事では、次の方法を学習します。

GitHubを使用してクロール設定を管理する
デプロイ前にパイプラインをテストするためのローカルセットアップを用意する
メインブランチに変更をプッシュするたびに、新しい設定でウェブクローラーを実行するための本番環境設定を作成します。

プロジェクトのリポジトリはこちらです。執筆時点では、Elasticsearch 9.1.3とOpen Web Crawler 0.4.2を使用しています。

要件

Dockerデスクトップ
Elasticsearchインスタンス
SSH アクセス（AWS EC2 など）と Docker がインストールされた仮想マシン

ステップ

フォルダ構造
クローラー構成
Docker-compose ファイル (ローカル環境)
Githubアクション
ローカルテスト
本番環境へのデプロイ
変更と再展開

フォルダ構造

このプロジェクトでは、次のファイル構造になります。

├── docker-compose.yml # Local elasticsearch + crawler ├── config/crawler-config.yml # Crawler config ├── .github/workflows/deploy.yml # GH Action to deploy changes ├── local.sh # Script to run our local crawler

クローラー構成

crawler-config.yml,の下に次の内容を入力します。

output_sink: elasticsearch output_index: web-crawl-index max_crawl_depth: 1 elasticsearch: host: ${ES_HOST} api_key: ${ES_API_KEY} domains: - url: https://web-scraping.dev seed_urls: - https://web-scraping.dev/product/1 - https://web-scraping.dev/product/2 - https://web-scraping.dev/product/3

これは、製品の模擬サイトであるhttps://web-scraping.dev/productsからクロールします。最初の 3 つの製品ページのみをクロールします。max_crawl_depth設定により、クローラーはseed_urlsとして定義されたページよりも多くのページを検出することがなくなり、それらのページ内のリンクを開かなくなります。

Elasticsearch hostとapi_keyは、スクリプトを実行している環境に応じて動的に設定されます。

Docker-compose ファイル (ローカル環境)

ローカルdocker-compose.yml,には、クローラーと単一の Elasticsearch クラスター + Kibana をデプロイして、本番環境にデプロイする前にクロール結果を簡単に視覚化できるようにします。

services: es01: image: docker.elastic.co/elasticsearch/elasticsearch:9.1.3 environment: - discovery.type=single-node - xpack.security.enabled=false - ES_JAVA_OPTS=-Xms1g -Xmx1g ports: - "9200:9200" networks: [esnet] healthcheck: test: ["CMD", "curl", "-f", "http://localhost:9200"] interval: 5s timeout: 5s retries: 10 kibana: image: docker.elastic.co/kibana/kibana:9.1.3 environment: - ELASTICSEARCH_HOSTS=http://es01:9200 ports: - "5601:5601" networks: [esnet] depends_on: [es01] crawler: image: docker.elastic.co/integrations/crawler:0.4.2 environment: - ES_HOST=http://es01:9200 - CRAWLER_JRUBY_OPTS=--server container_name: crawler volumes: - ./config:/home/app/config networks: [esnet] entrypoint: ["/home/app/bin/crawler", "crawl", "/home/app/config/crawl-config-final.yml"] stdin_open: true tty: true networks: esnet: driver: bridge

Elasticsearch の実行準備ができるまでクローラーが待機する方法に注意してください。

Githubアクション

ここで、新しい設定をコピーし、メインにプッシュするたびに仮想マシンでクローラーを実行する GitHub アクションを作成する必要があります。これにより、手動で仮想マシンにアクセスしてファイルを更新し、クローラーを実行する必要がなくなり、常に最新の構成が展開されます。仮想マシンプロバイダーとして AWS EC2 を使用します。

最初のステップは、ホスト ( VM_HOST )、マシンユーザー ( VM_USER )、SSH RSA キー ( VM_KEY )、Elasticsearch ホスト ( ES_HOST )、Elasticsearch API キー ( ES_API_KEY ) を GitHub Action シークレットに追加することです。

この方法により、アクションはサーバーにアクセスして新しいファイルをコピーし、クロールを実行できるようになります。

それでは、 .github/workflows/deploy.ymlファイルを作成しましょう。

name: Deploy on: push: branches: [main] jobs: Deploy: name: Deploy to EC2 runs-on: ubuntu-latest steps: - uses: actions/checkout@v5 - name: Deploy crawler env: HOSTNAME: ${{ secrets.VM_HOST }} USER_NAME: ${{ secrets.VM_USER }} PRIVATE_KEY: ${{ secrets.VM_KEY }} ES_HOST: ${{ secrets.ES_HOST }} ES_API_KEY: ${{ secrets.ES_API_KEY }} run: | # Save private key echo "$PRIVATE_KEY" > private_key chmod 600 private_key # Generate final config locally envsubst < config/crawler-config.yml > config/crawl-config-final.yml # Copy the config folder to VM scp -o StrictHostKeyChecking=no -i private_key -r config ${USER_NAME}@${HOSTNAME}:~/config # SSH into VM and run crawler ssh -o StrictHostKeyChecking=no -i private_key ${USER_NAME}@${HOSTNAME} << EOF docker run --rm \ -v ~/config:/config \ docker.elastic.co/integrations/crawler:latest jruby \ bin/crawler crawl /config/crawl-config-final.yml EOF

このアクションは、クローラー構成ファイルに変更をプッシュするたびに、次の手順を実行します。

yml config に Elasticsearch ホストと API キーを入力します。
configフォルダをVMにコピーします
SSH経由でVMに接続します
リポジトリからコピーした設定でクロールを実行します

ローカルテスト

クローラーをローカルでテストするために、Docker からローカルのものを Elasticsearch ホストに入力してクロールを開始する bash スクリプトを作成しました。./local.shを実行して実行できます。

#!/bin/bash # Exit on any error set -e # Load environment variables export ES_HOST="http://es01:9200" # Generate final crawler config envsubst < ./config/crawler-config.yml > ./config/crawl-config-final.yml # Bring everything up docker compose up --build

Kibana DevTools を見て、 web-crawler-indexが正しく入力されていることを確認しましょう。

本番環境へのデプロイ

これで、メインブランチにプッシュする準備が整いました。これにより、仮想マシンにクローラーがデプロイされ、Serverless Elasticsearch インスタンスにログの送信が開始されます。

git add . git commit -m "First commit" git push

これにより、GitHub アクションがトリガーされ、仮想マシン内でデプロイスクリプトが実行され、クロールが開始されます。

アクションが実行されたかどうかを確認するには、GitHub リポジトリにアクセスして「アクション」タブにアクセスします。

変更と再展開

お気づきかもしれませんが、各製品のpriceはドキュメントの本文フィールドの一部です。価格を別のフィールドに保存して、それに対してフィルターを実行できるようにするのが理想的です。

抽出ルールを使用してproduct-price CSS クラスから価格を抽出するために、 crawler.ymlファイルに次の変更を追加してみましょう。

output_sink: elasticsearch output_index: web-crawl-index max_crawl_depth: 1 elasticsearch: host: ${ES_HOST} api_key: ${ES_API_KEY} # Index ingest pipeline to process documents before indexing pipeline_enabled: true pipeline: pricing-pipeline domains: - url: https://web-scraping.dev seed_urls: - https://web-scraping.dev/product/1 - https://web-scraping.dev/product/2 - https://web-scraping.dev/product/3 extraction_rulesets: - url_filters: - type: ends pattern: /product/* rules: - action: extract field_name: price selector: .product-price join_as: string source: html

また、価格にはドル記号 ( $ ) が含まれていますが、範囲クエリを実行する場合はこれを削除する必要があります。そのために、取り込みパイプラインを使用できます。上記の新しいクローラー構成ファイルでこれを参照していることに注意してください。

PUT _ingest/pipeline/pricing-pipeline { "processors": [ { "script": { "source": """ ctx['price'] = ctx['price'].replace("$","") """ } } ] }

このコマンドは本番環境の Elasticsearch クラスターで実行できます。開発用の場合は一時的なものなので、次のサービスを追加することで、パイプライン作成部分をdocker-compose.ymlファイルにすることができます。パイプラインが正常に作成された後にクローラーサービスが起動するように、 depends_onもクローラーサービスに追加されていることに注意してください。

crawler: image: docker.elastic.co/integrations/crawler:0.4.2 environment: - ES_HOST=http://es01:9200 - CRAWLER_JRUBY_OPTS=--server container_name: crawler volumes: - ./config:/home/app/config networks: [esnet] entrypoint: ["/home/app/bin/crawler", "crawl", "/home/app/config/crawl-config-final.yml"] depends_on: pipeline-init: condition: service_completed_successfully stdin_open: true tty: true pipeline-init: image: curlimages/curl:latest depends_on: es01: condition: service_healthy networks: [esnet] entrypoint: > sh -c " echo 'Creating ingest pipeline...'; curl -s -X PUT http://es01:9200/_ingest/pipeline/pricing-pipeline \\ -H 'Content-Type: application/json' \\ -d '{\"processors\":[{\"script\":{\"source\":\"ctx.price = ctx.price.replace(\\\"$\\\", \\\"\\\")\"}}]}'; echo 'Pipeline created!'; "

次に、 `./local.sh`を実行してローカルで変更を確認してみましょう。

素晴らしい！変更をプッシュしてみましょう。

git add crawler-config.yml git commit -m "added price CSS selector" git push

すべてが機能していることを確認するには、本番環境の Kibana をチェックします。変更が反映され、価格がドル記号なしの新しいフィールドとして表示されるはずです。

まとめ

Elastic Open Web Crawler を使用すると、クローラーをコードとして管理できるため、開発からデプロイメントまでのパイプライン全体を自動化したり、一時的なローカル環境を追加したり、クロールされたデータに対してプログラムでテストを実行したりすることができます。

公式リポジトリのクローンを作成し、このワークフローを使用して独自のデータのインデックス作成を開始してください。クローラーによって生成されたインデックスに対してセマンティック検索を実行する方法については、この記事を読むこともできます。

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

Gustavo Llermaly — Wed, 09 Oct 2024 00:00:00 GMT

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

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

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）ノードが必要です。詳細はこちらをご覧ください。

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

PUT _inference/sparse_embedding/my-elser-model { "service": "elser", "service_settings": { "num_allocations": 1, "num_threads": 1 } }

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

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

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

{ "properties":{ "authors":{ "type":"keyword" }, "categories":{ "type":"keyword" }, "longDescription":{ "type":"semantic_text", "inference_id":"my-elser-model", "model_settings":{ "task_type":"sparse_embedding" } }, "pageCount":{ "type":"integer" }, "publishedDate":{ "type":"date" }, "shortDescription":{ "type":"text" }, "status":{ "type":"keyword" }, "thumbnailUrl":{ "type":"keyword" }, "title":{ "type":"text" } } }

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

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

APIキー

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

POST /_security/api_key { "name": "books-blazor-key", "role_descriptors": { "books-blazor-reader": { "indices": [ { "names": ["books-blazor"], "privileges": ["read"] } ] } } }

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

{ "id": "XXXXXXXXXXXXXXXXXXXXXXXX", "name": "books-blazor-key", "api_key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "encoded": "XXXXXXXXXXXXXXXXXXXXXXXX==" }

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

Blazorプロジェクトの作成

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

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

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

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

dotnet add package Elastic.Clients.Elasticsearch

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

フォルダ構造

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

ファイルの説明:

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ファイルを確認してください。次のインポートが必要です。

@using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using static Microsoft.AspNetCore.Components.Web.RenderMode @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using BlazorApp @using BlazorApp.Components

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

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

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

@inherits LayoutComponentBase

@Body

An unhandled error has occurred. Reload 🗙

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

dotnet user-secrets init dotnet user-secrets set ElasticsearchCloudId "your Cloud ID" dotnet user-secrets set ElasticsearchApiKey "your API Key"

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

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

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

using BlazorApp.Services; using Elastic.Clients.Elasticsearch; using Elastic.Transport;

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

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

// Initialize the Elasticsearch client. builder.Services.AddScoped(sp => { // Getting access to the configuration service to read the Elasticsearch credentials. var configuration = sp.GetRequiredService(); var cloudId = configuration["ElasticsearchCloudId"]; var apiKey = configuration["ElasticsearchApiKey"]; if (string.IsNullOrEmpty(cloudId) || string.IsNullOrEmpty(apiKey)) { throw new InvalidOperationException( "Elasticsearch credentials are missing in configuration." ); } var settings = new ElasticsearchClientSettings(cloudId, new ApiKey(apiKey)).EnableDebugMode(); return new ElasticsearchClient(settings); });

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

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

builder.Services.AddScoped();

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

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

using BlazorApp.Models; using Elastic.Clients.Elasticsearch; using Elastic.Clients.Elasticsearch.QueryDsl;

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

namespace BlazorApp.Services { public class ElasticsearchService { private readonly ElasticsearchClient _client; // The logger is used to log information, warnings and errors about the Elasticsearch service and requests. private readonly ILogger _logger; public ElasticsearchService( ElasticsearchClient client, ILogger logger ) { _client = client ?? throw new ArgumentNullException(nameof(client)); _logger = logger; } } }

検索の設定

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

private static Action> BuildHybridQuery( string searchTerm, Dictionary> selectedFacets ) { var filters = BuildFilters(selectedFacets); return retrievers => retrievers.Rrf(rrf => rrf.RankWindowSize(50) .RankConstant(20) .Retrievers( retrievers => retrievers.Standard(std => std.Query(q => q.Bool(b => b.Must(m => m.MultiMatch(mm => mm.Query(searchTerm) .Fields( new[] { "title", "shortDescription", } ) ) ) .Filter(filters.ToArray()) ) ) ), retrievers => retrievers.Standard(std => std.Query(q => q.Bool(b => b.Must(m => m.Semantic(sem => sem.Field("longDescription") .Query(searchTerm) ) ) .Filter(filters.ToArray()) ) ) ) ) ); } public static List>> BuildFilters( Dictionary> selectedFacets ) { var filters = new List>>(); if (selectedFacets != null) { foreach (var facet in selectedFacets) { foreach (var value in facet.Value) { var field = facet.Key.ToLower(); if (!string.IsNullOrEmpty(field)) { filters.Add(m => m.Term(t => t.Field(new Field(field)).Value(value))); } } } } return filters; }

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

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

public async Task SearchBooksAsync( string searchTerm, Dictionary> selectedFacets ) { try { _logger.LogInformation($"Performing search for: {searchTerm}"); // Retrieve the hybrid query with filters applied. var retrieverQuery = BuildHybridQuery(searchTerm, selectedFacets); var response = await _client.SearchAsync(s => s.Index("elastic-blazor-books") .Retriever(retrieverQuery) .Aggregations(aggs => aggs.Add("Authors", agg => agg.Terms(t => t.Field(p => p.Authors))) .Add( "Categories", agg => agg.Terms(t => t.Field(p => p.Categories)) ) .Add("Status", agg => agg.Terms(t => t.Field(p => p.Status))) ) ); if (response.IsValidResponse) { _logger.LogInformation($"Found {response.Documents.Count} documents"); var hits = response.Total; var facets = response.Aggregations != null ? FormatFacets(response.Aggregations) : new Dictionary>(); var elasticResponse = new ElasticResponse { TotalHits = hits, Documents = response.Documents.ToList(), Facets = facets, }; return elasticResponse; } else { _logger.LogWarning($"Invalid response: {response.DebugInformation}"); return new ElasticResponse(); } } catch (Exception ex) { _logger.LogError(ex, "Error performing search"); return new ElasticResponse(); } } public static Dictionary> FormatFacets( Elastic.Clients.Elasticsearch.Aggregations.AggregateDictionary aggregations ) { var facets = new Dictionary>(); foreach (var aggregation in aggregations) { if ( aggregation.Value is Elastic.Clients.Elasticsearch.Aggregations.StringTermsAggregate termsAggregate ) { var facetName = aggregation.Key; var facetDictionary = ConvertFacetDictionary( termsAggregate.Buckets.ToDictionary(b => b.Key, b => b.DocCount) ); facets[facetName] = facetDictionary; } } return facets; } private static Dictionary ConvertFacetDictionary( Dictionary original ) { var result = new Dictionary(); foreach (var kvp in original) { result[kvp.Key.ToString()] = kvp.Value; } return result; }

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

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

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

namespace BlazorApp.Models { public class BookDoc { public string? Title { get; set; } public int? PageCount { get; set; } public string? PublishedDate { get; set; } public string? ThumbnailUrl { get; set; } public string? ShortDescription { get; set; } public LongDescription? LongDescription { get; set; } public string? Status { get; set; } public List? Authors { get; set; } public List? Categories { get; set; } } public class LongDescription { public string? Text { get; set; } } }

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

namespace BlazorApp.Models { public class ElasticResponse { public ElasticResponse() { Documents = new List(); Facets = new Dictionary>(); } public long TotalHits { get; set; } public List Documents { get; set; } public Dictionary> Facets { get; set; } } }

基本的なUIの設定

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

@using System.Threading.Tasks @code { [Parameter] public EventCallback OnSearch { get; set; } private string searchTerm = ""; private async Task SubmitSearch() { await OnSearch.InvokeAsync(searchTerm); } }

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

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

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

@using BlazorApp.Models @if (SearchResults != null && SearchResults.Any()) {

@foreach (var result in SearchResults) {

@if (!string.IsNullOrEmpty(result?.ThumbnailUrl)) { } else {

@result?.Title

}

@result?.Title

@if (result?.Authors?.Any() == true) {

Authors: @string.Join(", ", result.Authors)

} @if (result?.Categories?.Any() == true) {

Categories: @string.Join(", ", result.Categories)

}

@if (result?.PageCount != null) {

Pages: @result.PageCount

} @if (result?.Status != null) {

Status: @result.Status

}

@result?.LongDescription?.Text

@if (!string.IsNullOrEmpty(result?.PublishedDate)) {

Published Date: @FormatDate(result.PublishedDate)

}

} else if (SearchResults != null) {

No results found.

} @code { [Parameter] public List SearchResults { get; set; } = new List(); private string FormatDate(string? date) { if (DateTime.TryParse(date, out DateTime parsedDate)) { return parsedDate.ToString("MMMM dd, yyyy"); } return ""; } }

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

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

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

@if (Facets != null) { } @code { [Parameter] public Dictionary>? Facets { get; set; } [Parameter] public EventCallback>> OnFacetChanged { get; set; } private Dictionary> selectedFacets = new(); private void ToggleFacet(string facetName, string facetValue) { if (!selectedFacets.TryGetValue(facetName, out var facetValues)) { facetValues = selectedFacets[facetName] = new List(); } if (!facetValues.Remove(facetValue)) { facetValues.Add(facetValue); } OnFacetChanged.InvokeAsync(selectedFacets); } private bool IsFacetSelected(string facetName, string facetValue) { return selectedFacets.ContainsKey(facetName) && selectedFacets[facetName].Contains(facetValue); } }

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

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

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

@page "/" @rendermode InteractiveServer @using BlazorApp.Models @using BlazorApp.Services @inject ElasticsearchService ElasticsearchService @inject ILogger Logger Search

Semantic Search with Elasticsearch and Blazor

About

Current search term: @currentSearchTerm

Total results: @totalResults

@code { private string currentSearchTerm = ""; private long totalResults = 0; private List searchResults = new List(); private Dictionary> facets = new Dictionary>(); private Dictionary> selectedFacets = new Dictionary>(); protected override async Task OnInitializedAsync() { await PerformSearch(); } private async Task PerformSearch(string searchTerm = "") { try { currentSearchTerm = searchTerm; var response = await ElasticsearchService.SearchBooksAsync(currentSearchTerm, selectedFacets); if (response != null) { searchResults = response.Documents; facets = response.Facets; totalResults = response.TotalHits; } else { Logger.LogWarning("Search response is null."); } StateHasChanged(); } catch (Exception ex) { Logger.LogError(ex, "Error performing search."); } } private async Task OnFacetChanged(Dictionary> newSelectedFacets) { selectedFacets = newSelectedFacets; await PerformSearch(currentSearchTerm); } }

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

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

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

.page { position: relative; display: flex; flex-direction: column; } main { flex: 1; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

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

.input-group .input-group-svg { background: transparent; border: transparent; pointer-events: none; } .results-facet-container { display: flex; margin-top: 1rem; overflow-x: auto; } .search-details-container { display: flex; justify-content: space-between; margin-top: 1rem; } .searchbar-container { padding-top: 2rem; display: flex; flex-direction: column; flex-grow: 1; height: 100%; max-width: 100%; } .searchbar-container h4 { margin: 0; } .top-row { margin-top: -1.1rem; position: relative; background-color: hsl(216, 29%, 67%); border-bottom: 1px solid #d6d5d5; display: flex; align-items: center; height: 100%; padding: 0 1rem; } .top-row a { margin-left: auto; margin-top: -4rem; color: #000000; text-decoration: none; } .top-row a:hover { text-decoration: underline; } @media (max-width: 640.98px) { .top-row { justify-content: space-between; } .top-row ::deep a, .top-row ::deep .btn-link { margin-left: 0; } } @media (min-width: 641px) { .top-row.auth ::deep a:first-child { flex: 1; text-align: right; width: 0; } .top-row, article { padding-left: 2rem !important; padding-right: 1.5rem !important; } }

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

最後に仕上げましょう:

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

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

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

.facets-container { font-size: 15px; margin-right: 4rem; overflow-x: auto; white-space: nowrap; max-width: 300px; } .results-facet-container { display: flex; margin-top: 1rem; overflow-x: auto; } .results-facet-container > * { flex-shrink: 0; }

Results.razor.cssの場合:

.image-container { display: flex; justify-content: center; align-items: center; height: 100%; padding: 1rem; box-sizing: border-box; } .image-container img { max-width: 100%; height: auto; border-radius: 0.5rem; } .placeholder { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: #f0f0f0; border: 1px solid #ccc; font-size: 0.9rem; color: #888; text-align: center; padding: 1rem; border-radius: 0.5rem; } .card-body { padding: 1rem; } .details-container { display: flex; justify-content: space-between; padding: 1.5rem 0; } .date-container { margin-top: 1rem; display: flex; justify-content: flex-end; } .date-container .small-date { font-weight: bold; }

最終結果:

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

dotnet watch

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

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

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

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

private static Action> BuildSemanticQuery( string searchTerm, Dictionary> selectedFacets ) { var filters = BuildFilters(selectedFacets); return query => query.Bool(b => b.Must(m => m.Semantic(sem => sem.Field("longDescription").Query(searchTerm))) .Filter(filters.ToArray()) ); } private static Action> BuildMultiMatchQuery( string searchTerm, Dictionary> selectedFacets ) { var filters = BuildFilters(selectedFacets); if (string.IsNullOrEmpty(searchTerm)) { return query => query.Bool(b => b.Filter(filters.ToArray())); } return query => query.Bool(b => b.Should(m => m.MultiMatch(mm => mm.Query(searchTerm).Fields(new[] { "title", "shortDescription" }) ) ) .Filter(filters.ToArray()) ); }

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

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

public async Task SearchBooksAsync( string searchTerm, Dictionary> selectedFacets ) { try { _logger.LogInformation($"Performing search for: {searchTerm}"); // Modify the query builder to use the selected search method. var multiMatchQuery = BuildMultiMatchQuery(searchTerm, selectedFacets); // For full text search var semanticQuery = BuildSemanticQuery(searchTerm, selectedFacets); // For semantic search // In this case we will not use retrievers, but you can add them if you want to use them. var response = await _client.SearchAsync(s => s.Index("elastic-blazor-books") .Query(multiMatchQuery) // Change this line to use different search methods, for example: .Query(semanticQuery) for semantic search .Aggregations(aggs => aggs.Add("Authors", agg => agg.Terms(t => t.Field(p => p.Authors))) .Add( "Categories", agg => agg.Terms(t => t.Field(p => p.Categories)) ) .Add("Status", agg => agg.Terms(t => t.Field(p => p.Status))) ) ); if (response.IsValidResponse) { _logger.LogInformation($"Found {response.Documents.Count} documents"); var hits = response.Total; var facets = response.Aggregations != null ? FormatFacets(response.Aggregations) : new Dictionary>(); var elasticResponse = new ElasticResponse { TotalHits = hits, Documents = response.Documents.ToList(), Facets = facets, }; return elasticResponse; } else { _logger.LogWarning($"Invalid response: {response.DebugInformation}"); return new ElasticResponse(); } } catch (Exception ex) { _logger.LogError(ex, "Error performing search"); return new ElasticResponse(); } }

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

まとめ

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

Gustavo Llermaly - Elasticsearch Labs

Elastic Workflowsを使用したKibanaのダッシュボード表示の監視

要件

ステップ1：開発ツールで生データを調べます

ステップ2：宛先インデックスの作成

ステップ3: ワークフローを作成する

ワークフローの仕組み

トリガー

ダッシュボードビューを取得

index_each_dashboard (foreach)

ステップ4：統計ダッシュボードを構築

まとめ

資料

Elastic Open Web Crawler をコードとして

要件

ステップ

フォルダ構造

クローラー構成

Docker-compose ファイル (ローカル環境)

Githubアクション

ローカルテスト

本番環境へのデプロイ

変更と再展開

まとめ

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

Blazor とは何ですか?

Blazor を選ぶ理由

ESRE とは何ですか?

ELSER の設定

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

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

APIキー

Blazorプロジェクトの作成

フォルダ構造

初期設定

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

検索の設定

基本的なUIの設定

@result?.Title

@facet.Key

Semantic Search with Elasticsearch and Blazor

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

まとめ