Elastic on Azure Integration & Building React UI Based Search App Using Azure Static Web Apps

Azure x Elastic 統合、 Azure Static Web Apps、Search UI (React) を使った検索アプリの構築 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト 内閣官房 IT 総合戦略室 政府 CIO 補佐官

Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist 内閣官房 IT 総合戦略室 政府 CIO 補佐官 元 Microsoft Technical Evangelist

1. アジェンダ 2. 3. 4. 5. Elastic 概要 Microsoft Azure と Elastic 7.13 統合 (Preview) Search UI による React フロントエンドアプリ構築 Azure Static Web Apps へのデプロイ まとめ

Elastic 概要

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

• https://db-engines.com/en/ranking/search engine

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

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

• https://www.elastic.co/jp/customers/smd-am

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

• https://www.infoq.com/presentations/uber-elasticsearch-clusters/

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

Elasticsearch の概念 - インデックス・ドキュメント・フィールド Elasticsearch 具体例 の概念 • • • • • • Elasticsearch は分散ドキュメント ストア 保存されるデータの最⼩単位が ドキュメント ドキュメントは、フィールドと呼ばれる 複数の属性を持つ インデックスはドキュメントの集合 SQL Server, MySQL, postgreSQL 等 インデックス 書籍データが格納 される場所 テーブル ドキュメント 書籍データ レコード フィールド 書籍タイトル、著者、 カラム ISBN、出版⽇、等 RESTful Web サービスの設計原則に従って設計 HTTP メソッドを使って CRUD による⼀通りのドキュメント操作が可能 https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html

• https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html

CQRS（コマンドクエリー責任分離）との関係 • • 「コマンド クエリ責務分離 （CQRS）パターンは、データ ストアの読み取り操作と更新操作を分離します。 アプリケーション内に CQRS を実装すると、そのパフォーマンス、スケーラビリティ、セキュリティが最⼤化される場合があります。 CQRS への移⾏によって⽣ まれる柔軟性により、システムは時間の経過と共にさらに進化し、更新コマンドでドメインレベルのマージ競合が発⽣することを防ぐこと ができます。」 Elasticsearch はこのアーキテクチャに極めて整合性⾼い Cloud Function https://docs.microsoft.com/ja-jp/azure/architecture/patterns/cqrs

• https://docs.microsoft.com/ja-jp/azure/architecture/patterns/cqrs

⽇本語のサジェスト機能を実装する際の課題と Elasticsearch を使⽤してこれらの課題を克服する⽅法 https://www.elastic.co/jp/blog/implementing-japanese-autocomplete-suggestions-in-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

• https://www.elastic.co/jp/apm
• https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/react-integration.html

データを収集、投⼊する

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

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

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

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

• https://www.elastic.co/jp/blog/how-to-keep-elasticsearch-synchronized-with-a-relational-database-using-logstash
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/index.html
• https://booksindex.azurewebsites.net/
• https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
• https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html
• https://brave-ocean-06f61b600.azurestaticapps.net/

Data.world – National Parks Visitation https://data.world/inform8n/us-national-parks-visitation-1904-2016-withboundaries/workspace/

• https://data.world/inform8n/us-national-parks-visitation-1904-2016-with-

Microsoft Azure と Elastic 7.13 統合 (Preview)

Elastic による検索、展開、管理が簡単 • Azure ポータル内での Elasticsearch の デプロイの表⽰と管理が可能 • ログの取り込みプロセスを⾃動化し、数回 のクリックで環境を迅速に監視可能 • 既に使⽤されている Microsoft Azure サービスに検索機能と可視化機能を簡単 に追加 • Azure コンソールと Elastic コンソール間 のシングルサインオン (SSO) による認証の 合理化 • 展開を管理するのではなくインサイトに集中

Azure にネイティブに統合 された Elastic Elastic Cloud 仕組み ● マイクロソフトはミドルウェアを使⽤して、マーケットプレースの オファーとクラウド API と統合された Azure の API を提供 ● Azure のお客様は、Elastic Cloud (アカウント、デプロイ) で必要なオブジェクトを作成するネイティブの Elasticsearch リソースを作成 ● Azure ユーザーは、⾃分の Azure アカウントを使⽤して、 Kibana とクラウド コンソールに SSO を使⽤できる ● 請求は、「従来の」マーケットプレイスと同様で、マーケットプ レイスサブスクリプションを介して発⽣ ● Choice & Simplicity

Azure にネイティブに統合 された Elastic Elastic Cloud 統合 ● サブスクリプションおよびリソース イベントの Azure プラット フォームログを簡単に収集するネイティブ統合 ● Elastic VM 拡張機能を使⽤して仮想マシンのログとメト リックを簡単に収集できるように統合 ○ お客様は VM 拡張機能を有効にする ○ Elastic は Agent と Beats を設定し、システムログ とメトリックのストリーミングを開始する ○ 顧客は Fleet 経由で Agent を管理できる ● Azure Private Link をサポート (クローズド ベータ) ● 更に追加予定︕︕ Choice & Simplicity

Search UI による React フロントエンドアプリ構築

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

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

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

• 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/

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

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

Azure Static Web Apps へのデプロイ

Azure Static Web Apps

Azure Static Web Apps • 静的サイトに最適化されたホスティング環境 • CI/CD を GitHub Actions と統合 • Azure Functions によるサーバーレス API の統合 Microsoft Azure www

Azure Static Web Apps の機能 Web API ＋ リッチな Web UI を実現する機能を提供 • • • • • • GitHub 統合 統合 API サポート Web アプリケーションの構築 静的サイトの発⾏ Web アプリケーションのデプロイ 認証プロバイダーの統合 • Azure Active Directory、Facebook、 Google、GitHub、 Twitter

JavaScript / C# による静的 Web サイトの開発・ホスト https://... ＋ JS https://... ＋ Blazor

実際の流れ

リポジトリを作成する • GitHub テンプレートリポジトリを使⽤して、新しいリポジトリを簡単に作成 • ⼀連のテンプレートを使⽤できる • 異なるフロントエンド フレームワークでビルドされたスターターアプリが含まれている • テンプレート リポジトリの [テンプレートから作成] ページに移動 • “404 ページが⾒つかりません” というエラーが表⽰された場合は、GitHub にサインインして、 もう⼀度やり直し • 所有者 の⼊⼒を求められた場合は、GitHub アカウントのいずれかを選択 • リポジトリに 例︓my-static-web-app という名前をつける • [Create repository from template](テンプレートからリポジトリを作成する) を選択 • GitHub アカウントに my-static-web-app という名前の GitHub リポジトリが作成された ことを確認

• https://github.com/MicrosoftDocs/mslearn-staticwebapp/generate

リポジトリを作成する • GitHub テンプレートリポジトリを使⽤して、新しいリポジトリを簡単に作成 • ⼀連のテンプレートを使⽤できる • 異なるフロントエンド フレームワークでビルドされたスターターアプリが含まれている • テンプレート リポジトリの [テンプレートから作成] ページに移動 • “404 ページが⾒つかりません” というエラーが表⽰された場合は、GitHub にサインインして、 もう⼀度やり直し • 所有者 の⼊⼒を求められた場合は、GitHub アカウントのいずれかを選択 • リポジトリに 例︓my-static-web-app という名前をつける • [Create repository from template](テンプレートからリポジトリを作成する) を選択 • GitHub アカウントに my-static-web-app という名前の GitHub リポジトリが作成された ことを確認

• https://github.com/MicrosoftDocs/mslearn-staticwebapp/generate

アプリを実⾏する • リポジトリをクローンし、ローカルにコードを実⾏ git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app • ソース コードのフォルダーに移動 cd my-static-web-app • 任意のフロントエンド フレームワークのフォルダーに移動（ここでは React） cd react-app • アプリケーションの依存関係をインストール npm install • 最後に、フロントエンドクライアントアプリケーションを実⾏ npm start

• https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app

アプリに移動する • アプリケーションがローカルで実⾏されていることを 確認 • フロントエンドアプリケーションはそれぞれ別の ポートで実⾏される • リンクを選択してアプリケーションに移動 • http://localhost:3000 を参照 ※ ここでは API なしでアプリをデプロイ • Ctrl + C キーを押して、実⾏中のアプリを停⽌

• http://localhost:3000/

Azure Static Web App と GitHub Actions ワークフロー • Azure Static Web Apps では、必要なすべての Azure リソースのプロビジョニングが ⾃動的に実施 • アプリをホストする前、変更を⾏う際、アプリをビルドするためのリポジトリへのコミットま たは pull request によって⾏う必要あり • Azure Static Web Apps の主な機能としてアプリケーションをビルドして発⾏するため の GitHub Actions ワークフローを設定できる • Azure Static Web Apps リソースを作成すると、GitHub Actions ワークフローが 作成される • ワークフローはすぐにトリガーされ、アプリのビルドと発⾏が⾏われる • リポジトリ内の監視対象ブランチに変更を加えるたびに、ワークフローがトリガーされる

Azure Static Web Apps 2つの⾃動化された側⾯ 1.アプリを構成する基になる Azure リソースのプロビジョニング 2.アプリケーションをビルドして発⾏する GitHub Actions ワークフロー • Azure Static Web Apps で Web にアプリを発⾏すると、 Web アプリとスケーラブルな API のホストが⾼速になる • GitHub Actions によって提供される統合ビルドおよびデプロイ ワークフローが得られる

Static Web Apps インスタンスを GitHub に接続 • Static Web Apps インスタンスを作成する には、GitHub にサインインし、アプリのコード が含まれているリポジトリを指定 • アプリを⾃動的にビルドしてデプロイできるよう に、リポジトリ内に3つのフォルダーパスを指定 • アプリのビルド出⼒はアプリケーションのビルド 出⼒ディレクトリへの相対パス • 例︓ビルドされた資産を my-app/dist フォル ダーに出⼒するアプリが my-app にある場合、 この場所には dist を指定 • ビルドの詳細画⾯でビルドのプリセットを選択 • React を選択すると⾃動的に • アプリの場所 • アプリのビルド出⼒の場所 • API の場所 の3つに値が⼊⼒される

GitHub Actions を使⽤してソースコードから静的資産へ • GitHub リポジトリにはソース コードが格納され、発⾏する 前にビルドする必要あり • Static Web Apps インスタンスを作成すると、⾃動的にリ ポジトリに GitHub Actions ワークフローが作成される • このワークフローによって、追跡するように選択したブランチに 対して変更内容をプッシュしたり、pull request を作成し たりするたびに、アプリがビルドされる。これにより、ソースコー ドが静的資産に変換され、Azure によって提供される • ビルドが完了すると、アクションによって資産がデプロイされる • その GitHub アクションはリポジトリ の .github/workflows フォルダーに追加される • 必要に応じて、このファイルを確認または変更できる • リソースの作成時に⼊⼒した設定は、GitHub アクションの ファイルに保存される

Azure Functions と統合された API • API が必要な場合 • Azure Functions プロジェクトとしてリポジトリ 内に実装できる • API は⾃動的にデプロイされ、Static Web Apps インスタンスによってホストされる • GitHub Actions ワークフローによって、指定 したフォルダーの名前でリポジトリ内の API が 検索される • 通常、API アプリは api または functions と いう名前のフォルダーに配置されるところ、好きな 名前を付けることができる • 指定したフォルダー内に API が検出され ない場合 • API は発⾏されず、アプリのみ発⾏される 例︓ https://docs.microsoft.com/ja-jp/learn/modules/publish-static-web-app-api-preview-url/3-build-api

• https://docs.microsoft.com/ja-jp/learn/modules/publish-static-web-app-api-preview-url/3-build-api

GitHub Actions を使⽤してソースコードから静的資産へ • GitHub リポジトリの [Actions](アクション) ページに移動し、ビルドおよびデプロイアクションの 状態を確認できる • • • • Visual Studio Code エディターで 例︓my-first-static-web-app を右クリックし[ポータルで開く] [Azure Static Web Apps CI/CD] を選択 ci: add Azure Static Web Apps workflow file のようなタイトルのついた最上位のコミットを選択 左にある [Build and Deploy Job]リンクを選択。ここから、ビルド時にアプリの進⾏状況を確認できる

Web サイトを表⽰する • GitHub アクションによって Web アプリのビルドと発⾏が完了すると実⾏中のアプリを参照して 確認できる • Azure portal の [URL] リンクを選択して、ブラウザーでアプリにアクセス

Elastic Cloud に CORS を設定 • elasticsearch.yml # Note that the syntax for user settings can change between major versions. # You might need to update these user settings before performing a major version upgrade. # # Slack integration for versions 7.0 and later must use the secure key store method. # For more information, see: # https://www.elastic.co/guide/en/elasticsearch/reference/current/actionsslack.html#configuring-slack (中略) # from: Watcher http.cors.enabled: true http.cors.allow-credentials: true http.cors.allow-origin: "*" http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept # # HipChat and PagerDuty integration are also supported. To learn more, see the documentation.

まとめ

まとめ • • • Microsoft Azure と Elastic 7.13 統合試してみてください Reference UI/Search UI による React アプリ構築は簡単 Azure Static Web Apps へのデプロイをやってみましょう︕

リソース 公式ドキュメント https://www.elastic.co/guide/index.html Elastic APM Agent https://www.elastic.co/guide/en/apm/agent/index.html Reactivesearch https://opensource.appbase.io/reactivesearch/ 優れた React 検索エクスペリエンスを迅速に構築する⽅法 https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly Search UI Elastic GitHub レポジトリ https://github.com/elastic/search-ui A Walk in the Park with Elastic App Search Sample Engines https://www.elastic.co/jp/blog/a-walk-in-the-park-with-elastic-app-search-sample-engines サンプルソリューション GitHub レポジトリ https://github.com/michaelhyatt/k8s-o11y-workshop 関連ブログ https://www.elastic.co/jp/blog/kubernetes-observability-tutorial-k8s-cluster-setup-demo-app-deployment https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-log-monitoring-and-analysis-elastic-stack https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-metrics-collection-and-analysis https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-monitoring-application-performance-with-elastic-apm

• https://www.elastic.co/guide/index.html
• https://www.elastic.co/guide/en/apm/agent/index.html
• https://opensource.appbase.io/reactivesearch/
• https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly
• https://github.com/elastic/search-ui
• https://www.elastic.co/jp/blog/a-walk-in-the-park-with-elastic-app-search-sample-engines
• https://github.com/michaelhyatt/k8s-o11y-workshop
• https://www.elastic.co/jp/blog/kubernetes-observability-tutorial-k8s-cluster-setup-demo-app-deployment
• https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-log-monitoring-and-analysis-elastic-stack
• https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-metrics-collection-and-analysis
• https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-monitoring-application-performance-with-elastic-apm

リソース︓Microsoft Lean • Azure Static Web Apps を使⽤してBlazor WebAssembly アプリと.NET API を 公開する • Azure Static Web Apps を使⽤してAngular、React、Svelte、または Vue の JavaScript アプリを発⾏する • Azure Static Web Apps にAPI を発⾏する • Gatsby とAzure Static Web Apps で静的 Web アプリを作成して発⾏する

Elastic on Microsoft Azure: インテグレーション強化による価値の創出 https://www.elastic.co/jp/webinars/elastic-on-microsoft-azure-accelerate-time-to-value-with-enhanced-integration

• https://www.elastic.co/jp/webinars/elastic-on-microsoft-azure-accelerate-time-to-value-with-enhanced-integration

ElasticON Solution Series Japan (7⽉毎週) https://www.elastic.co/elasticon/solution-series/asia-pacific-jp

• https://www.elastic.co/elasticon/solution-series/asia-paci

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

• https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx

Thank you for your attention!