Introduction to extensions and other useful features for developing apps using elastic ui, cloud integration, low-code tool integration-

Elastic を使ったアプリ開発に役⽴つ 拡張機能等のご紹介 – UI、クラウド連携、ローコードツール連携 – 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト

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

l l l l アジェンダ l l l l l l l Elastic を使ったアプリ開発 Elasticsearch for VSCode Reference UI/Search UI/ReactiveSearch Firestore ⽤ App Search 連携 Microsoft Power BI Desktop OutSystems Forge Elastic Cloud ⽤ Terraform 検証済みプロバイダー Elastic Cloud & Vault 統合 Azure Container Apps/Dapr Azure Synapse ML まとめ

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

• https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/index.html
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html

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

• https://marketplace.visualstudio.com/items?itemName=ria.elastic
• http://user:pass@host:9200
• https://elastic:oRHGj80iJUO6CF7WBUMiwyu1x@8009bf958b6w5923b3c56983d4048df824.japaneast.azure.elastic-cloud.com:9243

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

Elastic App Search 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

• https://github.com/elastic/search-ui
• https://www.elastic.co/cloud/app-search-service?ultron=searchui-repo&blade=readme&hulk=product
• https://www.elastic.co/cloud/site-search-service?ultron=searchui-repo&blade=readme&hulk=product
• https://elastic.co/
• https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly

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

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

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

• https://google-cloud-day-digital-2021.es.asia-northeast1.gcp.cloud.es.io:9243/
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html
• https://github.com/elastic/search-ui

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

• https://firebase.google.com/docs/firestore/solutions/search?provider=elastic
• https://www.elastic.co/app-search/
• https://www.algolia.com/
• https://typesense.org/

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

• https://www.elastic.co/jp/blog/accelerate-search-experiences-with-elastic-app-search-and-google-firebase
• https://firebase.google.com/products/extensions/firestore-elastic-app-search/

Microsoft Power BI Desktop https://www.elastic.co/guide/en/elasticsearch/reference/current/sql-client-apps-powerbi.html Elasticsearch ODBC ドライバを使⽤すると、Microsoft Power BI Desktop から Elasticsearch データにアクセスすることができます。 Get Data / More… Pick table to load ODBC / Connect Visualize the data #CNDT2020 Choose DSN

• https://www.elastic.co/guide/en/elasticsearch/reference/current/sql-client-apps-powerbi.html

OutSystems Forge – Elastic で検索 https://www.outsystems.com/forge/list?q=Elastic&t=&o=most-popular&tr=False&oss=False&c=%20&a=&v=&hd=False&tn=&scat=forge エンタープライズ向けローコード開発ツールのユーザーコミュニティが開発したプラグイン ダウンロードして Service Studio にインストールして使う

• https://www.outsystems.com/forge/list?q=Elastic&t=&o=most-popular&tr=False&oss=False&c= &a=&v=&hd=False&tn=&scat=forge

Elastic and HashiCorp partner to bring infrastructure-as-code to Elastic Cloud https://www.elastic.co/jp/blog/elastic-hashicorp-partner-to-bring-infrastructure-as-code-to-elastic-cloud

• https://www.elastic.co/jp/blog/elastic-hashicorp-partner-to-bring-infrastructure-as-code-to-elastic-cloud

Elastic 社と HashiCorp 社が提携し Elastic Cloud で Infrastructure-as-code を可能に • Elastic Cloud ⽤ Terraform 検証済みプロバイダー • Elastic Cloud • Elastic Cloud Enterprise • Elastic Cloud on Kubernetes • Elastic Cloud Terraform プロバイダの使⽤ • • • • • 同じ⾃動化コードを使⽤してデプロイメントを実施可能 オンプレミス or 全パブリッククラウド（AWS/Azure/GCP）で実⾏できる このプロバイダはベータ版 beta version がベース オートスケーリング autoscaling やデプロイメントエイリアスなどの Elastic Cloud の機能を活⽤できる 新しいデプロイメント拡張機能を利⽤して ARM64 デバイス上でプロバイダを実⾏できる

• https://www.elastic.co/blog/elastic-cloud-terraform-provider-now-available-in-beta
• https://www.elastic.co/blog/autoscale-your-elastic-cloud-data-and-machine-learning-nodes

デプロイメントエイリアス – AWS の例 resource "ec_deployment" "example_minimal" { region = "us-east-1" name = "my-example-deployment" // The deployment can be reached on:// myalias.es.us-east-1.aws.cloud.es.io:9423 alias = "my-alias" version = "7.14" deployment_template_id = "aws-io-optimized-v2" elasticsearch { autoscale = "true" topology { id = "cold" size = "8g" } topology { id = "hot_content" size = "8g" autoscaling { // Optionally change the policy max size. max_size = "59g" } --- --} topology { id = "warm" size = "8g" } } kibana {} apm {} enterprise_search {} }

Elastic Cloud & Vault 統合 https://www.hashicorp.com/blog/confluent-jfrog-servicenow-integrations-highlight-additions-vault-ecosystem Elastic Agent は Vault から監査、ログ、メトリクスを収集し、Elastic Observability で監視することが可能

• https://www.hashicorp.com/blog/confluent-jfrog-servicenow-integrations-highlight-additions-vault-ecosystem

Azure Container Apps PREVIEW 最新のアプリの構築とデプロイを⼤規模に⾏うためのフル マネージド サーバーレス コンテナー サービス 複雑なインフラストラクチャを管理することなく、コンテナー化されたアプリをデプロイできます。任意のプログラミング⾔語またはフレームワークを使⽤して コードを書き、Distributed Application Runtime (Dapr) の全⾯的なサポートを利⽤してマイクロサービスを構築できます。HTTP トラフィック や、Kubernetes Event-Driven Autoscaling (KEDA) を 利⽤するイベントに基づいて動的にスケーリングできます。 https://azure.microsoft.com/ja-jp/services/container-apps/ #CNDT2020

• https://dapr.io/
• https://keda.sh/
• https://azure.microsoft.com/ja-jp/services/container-apps/

Dapr Observability とは • Dapr API をすべてのサービス間コールと pub/sub メッセージングに使⽤することで、アプリケーションを意識した ⾃動観測が実現できる • Daprの Sidecar が設定ファイルに基づいてトレースを⾏うため、観測のための追加のコードは必要ない • Dapr は W3C trace context や OpenTelemetry のような標準に準拠 • Zipkin プロトコルを使⽤してトレースを出⼒。 これをサポートするあらゆるツールと統合可能 • OpenTelemetry Collector を使⽤して、他 のモニタリングツールと統合することもできる • W3C trace context との互換性により、 Dapr は trace context 管理に柔軟性を付 与。これにより、アプリケーションの外部で⽣成さ れた trace context を受け⼊れたり、送信処 理を追加することで trace context を外部に 伝播したりできる https://github.com/dapr #CNDT2020

• https://github.com/dapr
• https://docs.dapr.io/developing-applications/building-blocks/observability/w3c-tracing/w3c-tracing-overview/
• https://blog.newrelic.com/product-news/what-is-opentelemetry/

Dapr の Observability Dapr Sidecar からサービスのメトリクス、ログ、トレースを収集 コントロールプレーンのサービス（Dapr Placement, etc.）は現状メトリクスとログのみを提供 代表的な構成例 Dashboard は テンプレートが 提供されている Metrics Tracing Application Dapr Sidecar Logging https://docs.microsoft.com/ja-jp/dotnet/architecture/dapr-for-net-developers/observability #CNDT2020

• https://docs.microsoft.com/ja-jp/dotnet/architecture/dapr-for-net-developers/observability

Dapr の Observability Dapr Sidecar からサービスのメトリクス、ログ、トレースを収集 コントロールプレーンのサービス（Dapr Placement, etc.）は現状メトリクスとログのみを提供 完全に Elastic Observability で置換する Dashboard は テンプレートが提供 されている Metrics Tracing application Dapr Sidecar Logging https://docs.microsoft.com/ja-jp/dotnet/architecture/dapr-for-net-developers/observability #CNDT2020 33 33 https://bit.ly/32uqZKc

• https://bit.ly/32uqZKc
• https://docs.microsoft.com/ja-jp/dotnet/architecture/dapr-for-net-developers/observability

SynapseML A simple, multilingual, and massively parallel machine learning library https://www.microsoft.com/en-us/research/blog/synapseml-a-simple-multilingual-and-massively-parallel-machine-learning-library/ Data Source Agnostic なので Elastic も含まれる 本⽇、⼤規模スケーラブルな機械学習（ML）パ イプラインの作成を簡素化するオープンソース ライブラリ、SynapseML（旧MMLSpark）のリ リースを発表しました。分散型MLパイプライン の構築は、熟練した開発者であっても困難な場 合があります。異なるエコシステムのツールを 組み合わせるには、かなりの「糊付け」コード が必要になることが多く、また、多くのフレー ムワークは数千台規模のエラスティッククラス ターを念頭に置いて設計されていません。 SynapseMLは、既存のMLフレームワークや新し いMicrosoftアルゴリズムを、Python、R、Scala、 Javaで使⽤可能な単⼀のスケーラブルなAPIに統 合することで、この課題を解決します。 SynapseMLを使⽤することで、開発者は以下の ようなドメインの課題を解決するためのスケー ラブルでインテリジェントなシステムを構築す ることができます。 - 異常検知 - コンピュータビジョン - 深層学習 - 形状・顔認識 - グラディエント・ブースト - マイクロサービス・オーケストレーション - モデルの解釈可能性 - 強化学習とパーソナライゼーション - 探索・検索 - ⾳声処理 - テキストアナリティクス - 翻訳

• https://www.microsoft.com/en-us/research/blog/synapseml-a-simple-multilingual-and-massively-parallel-machine-learning-library/

まとめ l l l l l l l l l Elasticsearch for VSCode Reference UI/Search UI/ReactiveSearch Firestore ⽤ App Search 連携 Microsoft Power BI Desktop OutSystems Forge Elastic Cloud ⽤ Terraform 検証済みプロバイダー Elastic Cloud & Vault 統合 Azure Container Apps/Dapr Azure Synapse ML

VIRTUAL DEVDAY Elastic Observability で AWS 環境の健全性とパフォーマンスを 監視する - Search. Observe. Protect. https://events.elastic.co/elasticawsdevdayjapan 12/15 Webinar

• https://events.elastic.co/elasticawsdevdayjapan

Elastic Community Conference on Feb. 11-12, 2022 https://sessionize.com/elastic-community-conference/

• https://sessionize.com/elastic-community-conference/

Thank you for your attention!