Building modernapplicationwithelasiccloud

Elastic Cloud で
快適なアプリ開発を実現するには
鈴⽊章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁ソリューションアーキテクト

Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki

Agenda
• Elastic 概要、Elastic Cloud デプロイ、データ投⼊⽅法
• Elastic アーキテクチャ、基本的な概念、クエリ
• ネイティブ / Web アプリを使った検索エクスペリエンス実装
• Elastic APM と Elastic Observability
• まとめ

Elastic 概要、Elastic Cloud デプロイ、
データ投⼊⽅法

3億5,000万ダウンロード以上、12,000以
上の企業での採⽤
40カ国以上で2,000⼈の従業員
IPO 2018, NYSE: “ESTC”
2012年設⽴
Elastic 会社概要
Distributed by design
About Elastic
世界の#1データベース検索エンジン
(DB-Engines)

なぜ Elasticsearch なのか︖
• 企業では主にリレーショナルデータベースを使⽤して
データを格納
• テーブルを簡単に結合し必要なデータベースからこのデータを取得できる
• しかし、時間の経過とともに、データベースとテーブルが肥⼤化して、数百万の
データセットを含む⼤規模なデータベースになると、操作を実⾏できなくなる
• ⼀⽅、Elasticsearch は、数百万のドキュメントを数秒で簡単に検索できる
• Elasticsearch は柔軟で強⼒、オープンでフリーな
分散型リアルタイム検索及び分析エンジン
• Elasticsearch はドキュメントベースのデータベースでデータを JSON 形式
で保存（⾮正規化）
• Elasticsearch は、アプリケーションの強⼒な検索ツールとして使⽤できる
• インデックス、ドキュメント、フィールド等を作成し、データを Elasticsearch に
プッシュで、検索の準備が整う
• Elasticsearch の2つのユニークで重要な機能
• ⽔平スケール
• ⾼可⽤性

CQRS (コマンドクエリー責任分離）との関係
•
•
https://docs.microsoft.com/ja-jp/azure/architecture/patterns/cqrs

Google Cloud サンプルアプリ構成
Cloud
Function
Firebase
Firestore
Elastic Cloud
プロジェクト
northeast1-b リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://google-cloud-day-
digital-2021.es.asia-
northeast1.gcp.cloud.es.io
:9243
検索結果
全⽂検索クエリ
データ保存
Cloud Function で同期
Elastic エンタープライズサーチ
VSCode
iOS / Android
Mobile App
React
Native
Elastic
APM
Agent
Elastic
Search UI
React Web App
Elastic APM Agent

Azure Cosmos DB サンプルアプリ構成
Azure
Functions
Azure
Cosmos DB
Elastic Cloud
東⽇本リージョン
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
検索結果
全⽂検索クエリ
データ保存
Elastic エンタープライズサーチ
検索・更新 UI
APM .NET Agent
ASP.NET 5
Web App,
Blazor App
Reactive
Search
検索専⽤ UI
APM SPA Agent
Azure Static
Web Apps
Azure サブスクリプション
VSCode
Azure
App Service
Azure Functions で同期
Change Feed

⽇本語のサジェスト機能を実装する際の課題と
Elasticsearch を使⽤してこれらの課題を克服する⽅法
https://www.elastic.co/jp/blog/implementing-japanese-autocomplete-suggestions-in-elasticsearch
…
⽇本語のサジェストの例
詳細な説明に⼊る前に、⽇本語のサジェスト機能の実装例を⾒
てみましょう。
主な要件
•ユーザーが検索キーワードを⼊⼒すると、関連する候補が表⽰さ
れる。例︓「⽇本」と⼊⼒すると、「⽇本」、「⽇本地図」、「⽇本
⼈⼝」などが提案される。
•不完全な検索キーワードを⼊⼒した場合でも、関連する候補が
表⽰される。例︓「にほｎ」と⼊⼒すると、「⽇本」、「⽇本地図」、
「⽇本の⼈⼝」などが提案される。
•タイプミスした場合でも、意味の通る候補が提案される。例︓「に
ｈん」、「にっほん」、「⽇本ん」と⼊⼒すると、「⽇本」、「⽇本地
図」、「⽇本の⼈⼝」などが表⽰される。
•候補となる単語が、キーワードが検索された回数が多い順に⼀
覧表⽰される。
...

無料かつオープンな
アプリケーションパフォーマンス監視
https://www.elastic.co/jp/apm
https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/react-integration.html

アナリストが利⽤する資産運⽤での⾼速情報検索に向け Elasticsearch を導⼊。
35種類のデータソースを Elasticsearch に集約し、圧倒的な検索パフォーマンスで業務を⽀援
https://www.elastic.co/jp/customers/smd-am
事例︓三井住友 DS アセットマネジメント株式会社

膨⼤なデータ処理とリアルタイム性を要求
される配⾞マッチング検索で Elastic を活⽤
1秒あたりのデータ投⼊件数︓ 85万から130万メッセージ
1⽇あたりのデータ投⼊量︓ 12TB
1秒あたりのドキュメントスキャン︓ 1億から40億のドキュメント数
データサイズ︓ 1PB
クラスターサイズ︓ 700台の Elasticsearch
インジェスションパイプライン︓ 100 + Data パイプラインジョブ
2018年4⽉の Qcon での Uber 様講演より
https://www.infoq.com/presentations/uber-elasticsearch-clusters/

Elastic アーキテクチャ、基本的な概念、クエリ

3 Solutions, 1 Stack, Deploy Anywhere
Elastic Stack
Kibana
Elasticsearch
Beats Logstash
Elastic エンタープライズサーチ Elastic セキュリティ
Elastic オブザーバビリティ
3 つのソリューション
SaaS
(AWS/Azure/GCP)
IaaS
(クラウド & オンプレ）
Elastic Cloud
on Kubernetes
Elastic Cloud Elastic Cloud
Enterprise
豊富なデプロイ選択肢
Kubernetes
(クラウド & オンプレ）
蓄積、検索、分析
可視化 & 管理
収集

Elastic Cloud デプロイ (Elastic & 各 Marketplace)
https://www.elastic.co/jp/
https://portal.azure.com/#create/hub
https://aws.amazon.com/marketplace/
https://console.cloud.google.com/marketplace
Elastic
Azure
AWS
GCP

Elasticsearch for VSCode
https://marketplace.visualstudio.com/items?itemName=ria.elastic
http://user:pass@host:9200
https://elastic:RHGj80iJUO6CF7WBUMiwyu
1x@8009bf958b6w5923b3c56983d4048df
824.japaneast.azure.elastic-
cloud.com:9243

Elasticsearch ドキュメントの操作
•
•
https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html

Elasticsearch の概念
- インデックス・ドキュメント・フィールド
•
•
•
•
Elasticsearch
の概念
具体例
SQL Server, MySQL,
PostgreSQL 等
インデックス
書籍データが
格納される
場所
テーブル
ドキュメント書籍データレコード
フィールド
書籍タイトル、
著者、ISBN、
出版⽇、等
カラム

.NET クライアントライブラリ等ご紹介

Elasticsearch.NET & NEST
特⻑
• Open source / Apache License Version 2.0
• Elasticsearch.NET
−low level client
−依存関係フリー（組み込み等でも使える）
• NEST
−high level client
−全てのリクエスト/レスポンスオブジェクトをマッピング
−クエリ DSL サポート

Elasticsearch.Net & NEST
インストール
• NuGet パッケージマネージャーよりインストール
Install-Package Elasticsearch.Net
Install-Package NEST

NEST 特⻑
• Mapping CLR types
−https://www.elastic.co/guide/en/elasticsearch/client/net-
api/current/auto-map.html
• Fluent and Object Initializer Syntax API for query
−https://www.elastic.co/guide/en/elasticsearch/client/net-
api/current/query-dsl.html
• Fluent and Object Initializer Syntax API for
Aggregations
−https://www.elastic.co/guide/en/elasticsearch/client
/net-api/current/reference-aggregations.html

Azure サンプルアプリ構成
Azure Static
Web Apps
Reactive
Search
検索専⽤ UI
Azure
Web Apps
Azure
SQL Database
Elastic Cloud
Azure サブスクリプション
Logstash
Azure
VM
(Linux)
検索・更新 UI
VSCode ※
※ 今回は⼿動。同期⽅法例︓https://www.elastic.co/jp/blog/how-to-keep-elasticsearch-synchronized-with-a-relational-database-using-logstash
APM .NET Agent
https://booksindex.azurewebsites.net/
東⽇本リージョン
ML ノード x 1
https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
ASP.NET 5
Web App,
Blazor App
APM SPA Agent
https://brave-ocean-06f61b600.azurestaticapps.net/

ネイティブ / Web アプリを使った
検索エクスペリエンス実装

EC サイトを例にした検索のエクスペリエンス
フリーワード検索
サジェストページング
集計
絞り込み
ハイライト
ソート

Reference UI
⽣成が容易
数回のクリックで検索インターフェイスを
設定するだけ
統合が容易
ZIP パッケージをダウンロードし、
アプリケーションでコードを使⽤する
最初の出発点
新しい検索を開始しておいて、
後でカスタマイズすることが可能

Search-UI
https://github.com/elastic/search-ui Elastic AppSearch または ElasticSite Search
特徴
•Elastic によって管理
•迅速な実装 - 数⾏のコードで完全な検索エクスペリエンス
を構築
•カスタマイズ可能 r- コンポーネント、マークアップ、スタイル、
および動作を好みに合わせて調整
•スマート URL - 検索、ページング、フィルタリングなどが
URL に取り込まれ、結果を直接リンク
•ヘッドレス-アプリケーションロジックを活⽤して、独⾃のコンポ
ーネントまたはビューを提供
•柔軟なフロントエンド – React のみならずあらゆる
JavaScript ライブラリで使⽤可能
•柔軟なバックエンド – ElasticAppSearch のみならず任
意のバックエンドで使⽤可能
優れた React 検索エクスペリエンスを迅速に構築する⽅法
https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly

ReactiveSearch
https://opensource.appbase.io/reactivesearch/

Firebase 全⽂検索
https://firebase.google.com/docs/firestore/solutions/search?provider=elastic
全⽂検索
ほとんどのアプリでは、ユーザーがアプリのコンテンツを検索できるようになっています。たとえば、特定の単語を含む投稿や、特定のトピックに
ついて書いたメモを検索する、といったケースが考えられます。
Cloud Firestore では、ネイティブインデックスの作成やドキュメント内のテキストフィールドの検索をサポートしていません。
さらに、コレクション全体をダウンロードして、クライアントサイドでフィールドを検索することは現実的ではありません。
Cloud Firestore データの全⽂検索を有効にするには、専⽤のサードパーティの検索サービスを使⽤します。これらのサービスは、単純な
データベースクエリで実現できる機能をはるかに上回る、⾼度なインデックス作成と検索の機能を提供します。
続⾏する前に、調査して以下の検索プロバイダのいずれかを選択してください。
● Elastic
● Algolia
● Typesense

Firestore ⽤ Elastic App Search 統合
https://www.elastic.co/jp/blog/accelerate-search-experiences-with-elastic-app-search-and-google-firebase
Firebase 統合
なぜこれが重要なのか
- アプリケーション内で効果的な検索エクスペリエンスを
構築することは困難
- ユーザーは、ストアで商品を検索する場合も、サポート
サイトの記事を検索する場合も、会社のブログに投稿
する場合でも、迅速な結果を期待
- 拡張機能を使⽤して⾼速でスケーラブルで関連性の
⾼い検索エクスペリエンスを Firebase モバイルおよび
Web ベースのアプリケーションに簡単に組み込める
- アプリケーションに検索を追加する⽅法と、数回クリック
するだけで開始する⽅法の詳細
Google Firebase 拡張機能ディレクト
リの Elastic App Search 拡張機能
Elastic App Search エンジン作成と
Firebase からドキュメントを受信する準備
https://firebase.google.com/products/extensions/firestore-elastic-app-search/
Elastic 7.15 新機能

Elastic APM と
Elastic Observability

APM Real User Monitoring
JavaScript Agent Reference
• 概要
• https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/index.html
• React Integration
• https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/react-
integration.html#react-integration
npm install @elastic/apm-rum-react –save
import { ApmRoute } from '@elastic/apm-rum-react’
import { withTransaction } from '@elastic/apm-rum-react'

Elastic と Google Cloud を⽤いた
オブザーバビリティ（可観測性）
参考アーキテクチャ

まとめ
• Elasticsearch は分散ドキュメントストア
• インデックス、ドキュメント、フィールドで構成される JSON オブジェクト
• CRUD 処理と⾼速検索・集計が可能
• 可観測性、セキュリティの各ソリューションを展開可能
• 開発⽣産性を上げるツール
– VSCode for Elasticsearch
– 各⾔語⽤ネイティブクライアントライブラリ
– (React) Search UI
– Firebase 全⽂検索連携、Firestore ⽤ Elastic App Search 統合
• 詳細は公式のドキュメントをご参照ください

リソース
• Elastic 公式ドキュメント
– https://www.elastic.co/guide/index.html
• Firebase と Google Cloud の統合
– https://firebase.google.com/docs/storage/gcp-integration
• Elastic Search UI
– https://github.com/elastic/search-ui
• Reactivesearch
– https://opensource.appbase.io/reactivesearch/
• 優れた React 検索エクスペリエンスを迅速に構築する⽅法
– https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly
• APM Real User Monitoring JavaScript Agent Reference
– https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/index.html
• React Integration
– https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/react-integration.html#react-integration

アプリケーション開発オンデマンドウェビナー特集
https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx
• Elastic の Search API を Visual Studio
Code でコーディングする (1) - (3)
• Elastic Cloud で Azure Kubernetes
Services の様々な Log/Metrics/APM を
可視化する
• ASP.NET Core 3.x Web アプリのログを
Elastic Cloud で収集・分析してみよう︕

Elastic Observability & App Search ワークショップ
https://event.cloudnativedays.jp/cndt2021/hands-on https://elastic.connpass.com/event/228222/

IT Media DX Summit vol 10
Cloud Native Week 2021
https://enq.itmedia.co.jp/on24u/form/clna2111

【無料 e-Book
ダウンロード開始︕
Elastic on Microsoft
Azure︓データをさらに
活⽤する 4 つの⽅法】
msft.it/6010XhzVe
#Microsoft
#elasticsearch
#kibana
#Azure ポータルから #Elastic Cloud
を使ってデータ投⼊、検索、システム監視、
管理する⼿順をご紹介したガイドを無料
公開中です。

データを収集、投⼊する

Logstash による Elasticsearch へのデータ⼀括挿⼊

保存、インデックス、分析
• 弾⼒性のある、スケールアウトを
考慮した設計
• ⾼可⽤性、マルチテナンシー
• 構造化/⾮構造化データ対応
分散型かつ
スケーラブル
開発者にとって
親しみやすい
検索と分析
• スキーマレス
• ネイティブな JSON
• クライアントライブラリ
• Apache Lucene
• リアルタイム
• 全⽂検索
• 集計
• 地理空間データ
• 多⾔語データ

可視化 → 気付き（洞察）を得る
• データ内に存在するパターン
の探索と分析: 任意のレベ
ルへのドリルダウンが可能
• Elasticsearch の強⼒
な分析機能を活⽤
洞察の発⾒カスタマイズと共有
• 棒グラフ、折れ線グラフや散
布図、マップ、ヒストグラムの
作成
• ダッシュボードを共有し、
運⽤ワークフローに組み込み
• 組込み可能なアーキテクチャ:
• ダッシュボードや可視化をアプリとして作成
• セッション管理、ユーザーロール、
セキュリティ統合
アプリ構築向け
UX プラットフォーム

幅広い展開⽅法
お客様のニーズに合わせて最適なサービスを選択する
AWS、Azure、GCP に
即座にデプロイ
単⼀のパッケージを
インストールする
SaaS オーケストレーション
Elastic Cloud Elastic Cloud
on Kubernetes
Elastic Cloud
Enterprise
インフラ上で複数の展開を⼀元管理
セルフマネージド
スタンドアロン

⾃動的にデータを分散
• インデックスをシャードと呼ばれる複数の部分に分割する機能を提供
• シャーディングが重要な理由
• コンテンツボリュームを⽔平に分割/スケーリング可能
• シャード間（場合によっては複数のノード上）で操作を分散および並列化できるためパフォーマンス/スループットが向上
• インデックスを作成するときは、必要なシャードの数を簡単に定義できる
• 各シャードは、それ⾃体が完全に機能する独⽴した「インデックス」であり、クラスター内の任意のノードでホストできる

標準システム構成
標準システム構成
• 上記構成は10ノード構成
• データノードとマスターノード、ML ノードが有償サブスクリプションとして計上
• コーディネーティングノード以下は有償の契約ノードに計上されない

(参考)
Logstash による
Elasticsearch へのドキュメント⼀括挿⼊

Logstash による Elasticsearch へのドキュメント⼀括挿⼊
https://docs.microsoft.com/en-us/sql/connect/jdbc/download-microsoft-jdbc-driver-for-sql-server?view=sql-server-2017
sqlazuredb.conf という名前で作る

Logstash インストール（macOS の場合）
// brew の更新
brew update
// Elasticsearch インストール
brew install elasticsearch
// サービスを⼀覧表⽰したり、サービス（Elastic など）起動もできる
brew services list
brew services start elasticsearch
//Elastic が正常にインストールされたら、Logstash をインストール
//このタスクを達成するために必要なのは、別の brew コマンドだけ
brew install logstash
//インストールが終わったら同じくサービス起動
brew services start logstash

Azure SQL Database ⽤設定ファイル(logstash.conf)のコード例 (1)
"jdbc:sqlserver://hostname.database.windows.net:1433;
database=AdventureWorksLT;encrypt=true; hostNameInCertificate=*.database.windows.net"
”<username>@hostname"
”<password>"
/Users/(username)/Documents/sqljdbc_8.4/jpn/mssql-jdbc-8.4.1.jre8.jar"
"com.microsoft.sqlserver.jdbc.SQLServerDriver"
"Select * from [SalesLT].[Customer]"
sqlazuredb.conf
com.microsoft.sqlserver.jdbc.SQLServerDriver

Azure SQL Database ⽤設定ファイル(logstash.confB)のコード例 (2)
sqlazuredb.conf
filter{}
output
{
stdout{
codec=>json_lines
}
elasticsearch{
cloud_id
=>":bynGyXZ6lYXN0LmF6dXJlLmVs8w867943534egGKh6GBZXQITdk34XN0aWMtY2xvdWQuY29tOjkyN…DMkNzA==="
cloud_auth => "elastic:pHkMI91iGYZ4DG9KCVNjxn2y”
index=>"customer1"
}
}

Logstash によるデータ取得と
Kibana によるインデックスパターン作成・データの表⽰

新しいドキュメントの作成 -1
PUT booksbasic/_doc/1
{
"id": "1",
"title": ”Elastic ⼊⾨",
"date":"Oct 1, 2020",
"isbn": "ISBN123-4-56789-101-1",
"author":{
"first_name": ”Shotaro",
"last_name": ”Suzuki"
}
}
•
•
•
•
•

新しいドキュメントの作成 -2
“title”: ”Elastic ⼊⾨ - Elasticsearch/Kibana/Logstash/Beats”
“title”: ”Elastic & ASP.NET Core 3.x プログラミング”
“title”: ”Elastic による AKS Log/Metric/APM 管理”
“title”: ”Visual Studio Code による Elasticsearch プログラミング”
“title”: ”Elastic Logstash/Beats 開発と管理徹底解説”
•
•

ドキュメントの取得 - 1
•
•
(結果)
{
"_index": "books",
"_type": "_doc",
"_id": "1",
"_version": 2,
"_seq_no": 5,
"_primary_term": 1,
"found": true,
"_source": {
"title": "Elastic 入門",
"date": "Oct 21, 2020",
"isbn": "ISBN123-4-56789-101-1",
"author": {
"first_name": ”Shotaro",
"last_name": "Suzuki"
}
}
}
GET booksbasic/_doc/1/

ドキュメントの取得 – 2 _source のみ
•
•
(結果)
{
"title": "Elastic 入門",
"date": "Oct 21, 2020",
"isbn": "ISBN123-4-56789-101-1",
"author": {
"first_name": "Shotaro",
"last_name": "Suzuki"
}
}
GET booksbasic/_doc/1/_source

ドキュメントの検索 – 1 全てのデータを検索
•
•
•
took – Elasticsearchが検索を実⾏するのにミリ秒単位の時間
timed_out –検索がタイムアウトしたかどうかを⽰します
_shards –検索されたシャードの数と、検索されたシャードの成功/失敗の数を⽰す
hits –検索結果
hits.total –検索条件に⼀致するドキュメントの総数
hits.hits –検索結果の実際の配列（デフォルトは最初の10ドキュメント）
hits.sort -結果のソートキー（スコアでソートする場合は⽋落）
POST booksbasic/_doc/_search
{
”query": {
“match_all” : {}
}
}

ドキュメントの検索 – 2 シャードとは
•
•
•
•
• コンテンツボリュームを⽔平に分割/スケーリングすることが可能
• シャード間（場合によっては複数のノード上）で操作を分散および並列化できるためパフォーマ
ンス/スループットが向上

ドキュメントの特定のデータの検索 – クエリ DSL とは︖
•
•
POST booksbasic/_doc/_search
{
"query": {
"match" : {
"title" : ”Elastic"
}
}
}
Elasticsearch データをクエリする⽅法はたくさんあります。詳細についてはこちら。
https://www.elastic.co/guide/en/elasticsearch/guide/current/_most_important_queries.html

ドキュメントの更新 - 1（データの変更）
•
POST booksbasic/_doc/1/_update
{
"doc": {
"title": "Elastic ⼊⾨ -
Elasticsearch/Kibana/Logstash/Beats"
}
}
GET booksbasic/_doc/1
{
"title": "Elastic ⼊⾨ –
Elasticsearch/Kibana/Logstash/Beats",
"date": "Oct 21, 2020",
"author": {
"first_name": "Taro",
"last_name": "Sato"
}
}

ドキュメントの削除（データの削除）
•
• DELETE booksbasic
DELETE booksbasic/_doc/3

新しい ASP.NET Core Web アプリ作成
dotnet new mvc

Model の作成
• Elasticsearch のデータ
から JSON にシリアライズ
のため必要
• Book という名のクラスを
追加
public class Book
{
public string Title { get; set; }
public string Isbn { get; set; }
public int PageCount { get; set; }
public string ThumbnailUrl { get; set; }
public string ShortDescription { get; set; }
public string LongDescription { get; set; }
public string Status { get; set; }
public string Authors { get; set; }
public string Categories { get; set; }
}

Elasticsearch への接続を作成
• NEST ライブラリ追加
• Startup.cs のサービス構成メソッド( )内に接続を作成
dotnet add package NEST
using Elasticsearch.Net;
using Nest;
===
var pool = new SingleNodeConnectionPool
(new Uri(“http://localhost:9200”)); //ローカル実⾏の場合
var settings = new ConnectionSettings(pool)
.DefaultIndex("books");
var client = new ElasticClient(settings);
services.AddSingleton(client);

Elasticsearch への接続を作成 - Elastic Cloud ⽤
•
var pool = new SingleNodeConnectionPool
(new Uri(http://localhost:9200/));
// Elastic Cloud デプロイ時に取得した値3つ (例）
https://elastic:oRHGj80iJUO6CF7WBUMiwyu1x@8009bf95
8b6w5923b3c56983d4048df824.japaneast.azure.elastic
-cloud.com:9243

Search ⽤の HTML を作成 (index.cshtml 編集)
@model Nest.ISearchResponse<Book>
<form asp-controller="Home" asp-action="Index"
method="post">
<input type="text" name="query" />
<input type="submit" value="Search" />
</form>
@if (Model.Documents.Any())
{
<h3>検索結果</h3>
<ul>
@foreach (var book in Model.Documents)
{
<li>Title: @book.Title (ISBN:
@book.Isbn)</li>
}
</ul>
}
• @model を
[ISearchResponse]<Book>
に設定
• これは Elasticsearch 呼び出し
からの応答のタイプ
• 検索クエリをサーバーにポストバック
できる HTML フォームを追加
• Elasticsearch に渡して結果をレ
ンダリング
• ⼀致するドキュメントのタイトルと
ISBN をレンダリングする単純な
ループを追加

Elasticsearch クエリー ① MatchAll
•
•
private readonly ElasticClient _client;
public HomeController(ILogger<HomeController> logger, ElasticClient client)
{
_logger = logger;
_client = client;
}
public IActionResult Index()
{
var results = _client.Search<Book>(s => s
.Query(q => q
.MatchAll()
)
);
return View(results);
}
インデックス内の全てのドキュメントを返す
クエリ
≒ RDBMS の "SELECT *" クエリ

Elasticsearch クエリー ② Term
•
public IActionResult Index()
{
ISearchResponse<Book> results;
if (!string.IsNullOrWhiteSpace(query))
{
var results = _client.Search<Book>(s => s
.Query(q => q
.Term(t => t)
.Field(f => f.Isbn)
.Value(query)
)
)
);
}
else
{
.Query(q => q
.MatchAll()
)
);
…
⽤語クエリ
正確なクエリに⼀致するドキュメントを
⾒つける

Elasticsearch クエリー ③ Match
•
public IActionResult Index(string query)
{
ISearchResponse<Book> results;
if (!string.IsNullOrWhiteSpace(query))
{
results = _client.Search<Book>(s => s
.Query(q => q
.Match(t => t
.Field(f => f.Title)
.Query(query)
)
)
);
}
else
{
…
ユーザーにテキストを⼊⼒し、そのテキ
ストをドキュメント内のコンテンツの任意
の部分と⼀致させる
[重要な点]
• 複数のドキュメントを照合
• すべての⼀致する⽂書には、タイトル
に、当該テキストが含まれる
• ⼩⽂字で指定したのにマッチする
• この動作はカスタムアナライザーで
上書き可能
• これは別の⾼度なトピック
• Elasticsearch でサポートされる
クエリは他にも多数
• Term クエリと Match クエリは
基本的ユースケース

Elasticsearch Aggregations ー集計

Elasticsearch Aggregations ー範囲集計
•
…
results = _client.Search<Book>(s => s
.Query(q => q
.MatchAll()
)
.Aggregations(a => a
.Range("pageCounts", r => r
.Field(f => f.PageCount)
.Ranges(r => r.From(0),
r => r.From(200).To(400),
r => r.From(400).To(600),
r => r.From(600)
)
)
…
[重要な点]
• MatchAll クエリに加えて、集計メソ
ッドを使⽤
• "範囲" 集計を指定
• Index.cshtml も編集必要

Elasticsearch Aggregations ー条件集計
•
…
)
.Aggregations(a => a
.Range("pageCounts", r => r
.Field(f => f.PageCount)
.Ranges(r => r.From(0),
r => r.From(200).To(400),
r => r.From(400).To(600),
r => r.From(600)
)
)
.Terms("categories", t => t
.Field("categories.keyword")
)
)
…
• タグバブルやファセットUIシステム
のユースケース
• ⽤語集計
• ≒ RDBMS の“GROUP BY”句
• ドキュメント間でさまざまな単語
(または「⽤語」)に関する統計を
取得可能
• Index.cshtml も編集必要
フィールド値が⽂字列 “categories.keyword”
に設定されているのは、⽤語の集計は負荷の⾼い
操作であり、通常は "text" フィールドでは実⾏され
ないため

Search ⽤の HTML を修正 (index.cshtml 編集)
@model Nest.ISearchResponse<Book>
<form asp-controller="Home" asp-action="Index" method="post">
<input type="text" name="query" />
<input type="submit" value="検索" />
</form>
@if (Model.Documents.Any())
{
<h3>検索結果</h3>
<ul>
@foreach (var book in Model.Documents)
{
<li>Title: @book.Title (ISBN:
@book.Isbn)</li>
}
</ul>
}
@if (Model.Aggregations != null)
{
<h3>集計</h3>
@if (Model.Aggregations.ContainsKey("pageCounts"))
{
<h4>ページ数 (範囲)</h4>
<ul>
@foreach (var bucket in
Model.Aggregations.Range("pageCounts").Buckets)
{
<li>@bucket.Key: @bucket.DocCount</li>
}
</ul>
}
@if (Model.Aggregations.ContainsKey("categories"))
{
<h4>カテゴリ (Terms)</h4>
<ul>
@foreach (var bucket in
Model.Aggregations.Terms("categories").Buckets)
{
<li>@bucket.Key: @bucket.DocCount</li>
}
</ul>
}
}

便利な機能のご紹介
- ReactiveSearch

ブートストラッププロジェクト
プロジェクトをスキャフォールディング
するために必要なステップ
● Elasticsearch クラスター作成
● データセットの取得
● データセットを Elasticsearch
にインポートする
● React プロジェクトの作成
● Reactive search インストール
● <ReactiveBase /> での
Elasticsearch への接続

<ReactiveBase
app="yelp"
url="YOUR_ELASTICSEARCH_CLUSTER_URL"
// 他のコンポーネントがこの中に配置される
<div>
Hello ReactiveSearch!
</div>
</ReactiveBase>
<DataSearch
componentId="SearchSensor"
dataField={["name", "name.search",
"name.autosuggest"]}
onValueSelected={(value, cause, source) => {
console.log("value", value);
console.log("source", source);
}}
/>
<DataSearch
dataField={[
"name",
"name.search",
"name.autosuggest",
"city",
"city.search",
"city.autosuggest"
]}
}}
/>
<DataSearch
dataField={[
"name",
"name.search",
"name.autosuggest",
"city",
"city.search",
"city.autosuggest"
]}
fieldWeights={[3, 1, 1, 2, 1, 1]}
}}
/>
<MultiList
componentId="CategorySensor"
dataField="categories.keyword"
/>
<ReactiveList
componentId="SearchResult"
react={{
and: ['CategorySensor’,
'SearchSensor'],
}}
renderItem={res =>
<div>{res.name}</div>}
/>
import { ReactiveOpenStreetMap } from
'@appbaseio/reactivemaps';
<ReactiveOpenStreetMap
react={{
and: ['CategorySensor',
'SearchSensor'],
}}
dataField="location"
/>
<link rel="stylesheet”
href="https://cdnjs.cloudflare.com/ajax/libs
/leaflet/1.3.4/leaflet.css"/>
<DataSearch /> サンプルコード
検索フィールドの追加
フィールド内の重み付け
<MultiList />サンプルコード
<ReactiveList /> サンプルコード
<ReactiveMap /> サンプルコード
Add Map Styles の追加
ReactiveSearch
実装例

ReactiveSearch インストール
yarn add @appbaseio/reactivesearch
https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/

<ReactiveBase
app="yelp"
url="YOUR_ELASTICSEARCH_CLUSTER_URL"
// 他のコンポーネントがこの中に配置される
<div>
Hello ReactiveSearch!
</div>
</ReactiveBase>
https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/

<DataSearch
dataField={["name", "name.search",
"name.autosuggest"]}
}}
/>
<DataSearch /> サンプルコード
https://docs.appbase.io/docs/reactivesearch/v3/search/datasearch/

<DataSearch
dataField={[
"name",
"name.search",
"name.autosuggest",
"city",
"city.search",
"city.autosuggest"
]}
}}
/>
検索フィールドの追加

フィールド内の重み付け
<DataSearch
dataField={[
"name",
"name.search",
"name.autosuggest",
"city",
"city.search",
"city.autosuggest"
]}
fieldWeights={[3, 1, 1, 2, 1, 1]}
}}
/>

<MultiList
componentId="CategorySensor"
dataField="categories.keyword"
/>
<MultiList />サンプルコード
https://docs.appbase.io/docs/reactivesearch/v3/search/multilist/

<ReactiveList /> サンプルコード
https://docs.appbase.io/docs/reactivesearch/v3/search/reactivelist/
<ReactiveList
react={{
and: ['CategorySensor', 'SearchSensor'],
}}
renderItem={res => <div>{res.name}</div>}
/>

ReactiveMap インストール
yarn add @appbaseio/reactivemaps
参考︓ renderalldata
https://docs.appbase.io/docs/reactivesearch/v3/map/reactiveopenstreetmap/

<ReactiveMap /> サンプルコード
https://docs.appbase.io/docs/reactivesearch/v3/map/reactiveopenstreetmap/
import { ReactiveOpenStreetMap } from
'@appbaseio/reactivemaps';
<ReactiveOpenStreetMap
react={{
and: ['CategorySensor', 'SearchSensor'],
}}
dataField="location"
/>

Add Map Styles の追加
• OpenStreetMap / GoogleMaps を使⽤するには、インデックスにスタイルを
追加
• index.html またはコードベースにインポート可能
<link rel="stylesheet”
href="https://cdnjs.cloudflare.com/ajax/libs/
leaflet/1.3.4/leaflet.css"/>

オンライン決済サービスの監視を⽀える Elastic Stack
ECサイト向けに様々な決済⼿段を提供 / 加盟店に決済画⾯は決済APIを提供するシステム(年間取引額２兆円、２億件以上のトランザクション）
https://www.elastic.co/jp/customers/softbank-payment-service
事例︓ソフトバンク・ペイメント・サービス株式会社
オンライン決済サービスの状況をほぼリアルタイムで可視化
• ダッシュボードで、成功した決済はグリーン、失敗したものはレッド、決済手段ごと
に OK/NG の比率の推移を俯瞰。「1. グリーンが急激に少なくなったら要注意。2. レッ
ドが急激に多くなったら要注意。」
• 誰でも、いつでも、どこでも、簡単に、サービスの状況を把握
• 障害以外でも、爆売れ、不正利用といった、加盟店の変化に気がつく
• エンジニアの決済トランザクションへの関心が高まる
Machine Learning で決済トランザクションの異常を検知
• 決済トランザクションの合計の日次の増減を3周期で学習し、それが予測した範
囲から大きく外れれば、異常として検出
• 可視化だけでは埋蔵してしまう変化を ML にて新たに発見
可視化をビジネスデータにまで広げる
• 2年分の売上推移を部署別・案件別に表現。ヒートマップで営業部門や個人の目
標達成率を表現。年間の加盟店契約の獲得状況を都道府県マップに表示
• サービスサイト閲覧状況を、アクセス元の IP アドレスから企業名を推定し、契約
済み企業からのアクセス、未契約企業からのアクセスランキングを作成
• 非エンジニアでもデータ投入からダッシュボードの作成までできる

事例︓株式会社リコー
すべてのログを Elastic Stack 上に集約。35 ノードで1 ⽇２TB のログを監視
「リコーグループ全システムの IT デバイスで発⽣する1 ⽇2 テラバイトにおよぶログが、すべて Elastic Stack に送り込まれます。これを35ノード、約400テラバ
イトのクラスターで処理します。インデックス数は約10,000 でサイズは約250 テラバイト。ドキュメント数は3,450 億にも及びますが、これは昨年12 ⽉の話で、
現在はさらに増えている状況です」と話す。Elastic Stack の製品については、Elasticsearch、Logstash、Kibana、Filebeat、Packetbeat、
Winlogbeat、Monitoring、Alerting 等が使⽤されており、特に⾒える化でキーとなる Kibana については、セキュリティ統括部のオフィス室内で、⼤型
モニターに常時チャートが表⽰され、担当者がシステムの状況をリアルタイムかつ直感的に把握できるようになっている。
https://www.elastic.co/jp/customers/ricoh

事例︓ブローダービズ株式会社
機械学習を駆使して時系列の映像データを解析。⾷品製造⼯場での作業を"⾒守り"、
異常⾏動発⽣をリアルタイムに検知してトラブルを回避
https://www.elastic.co/jp/customers/broaderbiz
⾷品偽装防⽌と働き⽅改⾰
課題
•⻑時間にわたる⼯場作業を、管理者の⽬のみによって監視し
続けることは容易ではない
•担当者は、制服、帽⼦、マスクを着⽤しているため、⾒た⽬だ
けでは個⼈の特定が困難
•定量化された数値などによって状況を把握・記録することができ
ず、過去と照らし合わせることも困難
•録画されたビデオ映像は、問題が発⽣した後の証跡として利⽤
できるが、瞬時の対応には不向き
Solution
⼈⼿による作業を、AI を駆使したシステムによって“⾒守り”、担
当者の姿勢やある時間内での⾏動を、数値化された統計値と
の⽐較し、通常の⾏動を逸脱した異常事態の発⽣を瞬時に判
断することで、トラブルの拡⼤を未然に防ぐという仕組みの実現。
NEDO（国⽴研究開発法⼈新エネルギー・産業技術総合開
発機構）の共同開発⽀援事業として認められた。

事例︓⽇本経済新聞社
⽇経電⼦版の記事検索およびログ解析の両⽅を1つの仕組みで実現
利⽤範囲の広さで Elasticsearch を採⽤
Elasticsearch を選定したのは、記事検索とログの可視化の両⽅に
使える利⽤範囲の広さが最⼤の理由
15台のクラスタ構成で、1秒あたり9000リクエスト以上という⾼
い性能を発揮
記事検索とログ解析に Elasticsearch を活⽤
⽇経電⼦版の記事は、5年分で約200万件、データサイズは5GB。記事の更新は、1⽇あたり数千回、ピーク時には1分間に300件程度の記事が更
新。検索における利⽤者からのアクセスは、1秒あたり100回程度だが、1秒あたり数千回のアクセスも想定
ログ解析で Elasticsearch を利⽤した最⼤のメリットは、専⾨的な深い知識がなくてもログ解析が可能になること。Elasticsearch と Kibana を利⽤
したログ解析により、たとえば、記事検索のレスポンスにどれくらいの時間がかかっているかを容易に解析でき、アプリケーションのどこにボトルネックがあるのか、
改善するべき機能はどこなのかを迅速に把握できる
https://www.elastic.co/jp/customers/nikkei
“Elasticsearch と Kibana を活⽤することで、エンジニア秘伝の“タレ（ shell 芸）”を使って可視化していたログ解析を URL や、
画像で即座に社内共有できるようになりました。これまではログ解析ができるエンジニアが2⼈しかいなかったのですが、Elasticsearch と
Kibana を利⽤することで、秘伝のタレが不要になり、ログ解析ができるエンジニアを6⼈以上に増やすことができましたようになりました。"
– 日本経済新聞社デジタル編成局編成部梅崎裕利氏

事例︓スイス・ライフ
Elasticsearch が⽣み出す360°の顧客管理
Elasticsearch で1000万⼈の顧客データのインデックス作成から分析、パブリッシュまでリアルタイムに実⾏
スイス・ライフにおける課題
スイス・ライフは保険や資産管理サービスを⼿掛ける⼤⼿企業で、フランスでは個⼈向け保険商品を主⼒に⾼いシェアを持つ
スイス・ライフ・フランスの1000万⼈の顧客情報に対し、さまざまなフォーマットや、さまざまなタイプのユーザアクセスにより、データへの均質なアクセス
を維持することが難しくなり、情報が「サイロ化」していた
Elasticsearchによる解決
スムーズな運⽤と、情報への均質なアクセスを実現させるため、スイス・ライフ・フランスは Elasticsearch で顧客データのインデックスとパブリッシュを⾏った
あらゆる顧客の窓⼝となる Web サイトとモバイルアプリケーションにデータを提供するため、まず Elasticsearch ですべての顧客データを1か所に集約
顧客記録、契約データ、マーケット分類データ、年⾦と保険スコアのすべての情報を横断してリアルタイムにクエリ。
すべての顧客がポータルサイトにアクセスでき、顧客情報と契約情報をすばやく取得できる機能を提供。また、情報が更新された場合、ソースシステムで
10秒以内にインデックスを作成。
https://www.elastic.co/jp/customers/swiss-life
“スピードと信頼性は不可⽋です。Elasticsearch がデータをリアルタイムにインデックスするようになり、すべてが進
化しました。"
– クリスチャン・ファン・チョン, スイス・ライフ・フランス、チーフエンタープライズアーキテクト

事例︓PSCU（⽶国有数の信⽤組合サービス組織）
Elastic は信⽤組合に対する数百万ドル相当の不正⾏為被害を防⽌することでリスク回避を実現
Elastic 製システムをデプロイしてからわずか18か⽉間で、3,500万ドルもの不正⾏為を阻⽌
PSCU における課題
PSCUは、⽶国有数の信⽤組合サービス組織で1,500の信⽤組合にサービスを提供し、年間38億件もの取引を扱う。
会員に対して⽀払い処理、リスク管理、データ分析、オンラインバンキング、モバイルプラットフォームなどさまざまな⾦融サービスを提供
年⽉が経つにつれデータベースが巨⼤化しデータ⼊⼒が困難になり、前⽇のデータを読み込むのに丸1⽇かかる状態で適切なタイミングで不正検
知ができていなかった。
Elasticsearch による解決
会員のオンラインログイン、IP アドレス、住所、サポートセンターへの問い合わせ履歴など、数多くのデータソースを Elasticsearch に集約しログを可視化
当初は内部の不正⾏為検知が⽬的であったが問題なく稼働したため、さらに全⽶1500の信⽤組合の外部からの不正⾏為を阻⽌できるよう、幅広い⾦
融関連データソースからのログを追加
機械学習を使⽤した不正検知を導⼊し導⼊後18ヶ⽉で3,500万ドルもの不正⾏為を阻⽌
単なる不正検知にとどまらず、災害発⽣時の地域で検知された平時と異なる⾏動（⾼価な発電機、⼤量の⽸詰などを突然購⼊するなど）をブロックし
ない機能なども追加
https://www.elastic.co/jp/customers/pscu
"Elastic Stackを構築したことで、不正⾏為を従来よりもはるかに簡単に検知できるようになりました。Elasticプラットフォームに⼊⼒
するデータベースを⼤幅に増やしたことで、従来は決して気付かなかったデータの特徴をとらえられるようになりました。現在では、発⽣中
の不正⾏為を検知できるだけでなく、発⽣前にそれを検知できるようになりました。"
– ジョナソン・ロビンソン氏, PSCU、不正インテリジェンス部門マネージャー

事例︓古野電気株式会社
船舶運航の安全・安⼼・効率化を⽀えるサービスを提供
データ・分析結果を得るまでの平均時間（MTTR）の短縮率 94％
差別化されたカスタマーエクスペリエンス
古野電気は、同社の Elastic オブザーバビリティソリューショ
ンの⼀部として Kibana と Elastic Maps を採⽤したこと
で、船上でのデータ使⽤に関するデータ・分析結果をより多
く得られるようになっています。それらのデータ・分析結果は、
お客様の船舶と陸上の接続コストとパフォーマンスの改善に
役⽴ちます。
コストパフォーマンスに優れたプロアクティブなサービスを
提供
今後発⽣しそうな機器の障害、予兆を検知し、予防保守
を⾏う必要があれば、修理内容を特定し、部品を迅速に
⼿配することで費⽤を抑えながら効果的な対応をご⽀援し
ます。
安全で効率的な航⾏を実現
古野電気は、Elastic Cloud の Elasticsearch
Service を活⽤することで、ライフサイクルソリューションを効
果的に多くのお客様へ展開することができます。また、お客
様のニーズにより最適なサービスプランをパッケージ化し販売
することで、安全で効率的な航⾏へ貢献します。
https://www.elastic.co/jp/customers/furuno

Building modernapplicationwithelasiccloud

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building modernapplicationwithelasiccloud

Similar to Building modernapplicationwithelasiccloud (20)

More from Shotaro Suzuki

More from Shotaro Suzuki (20)

Recently uploaded

Recently uploaded (10)

Building modernapplicationwithelasiccloud