SlideShare a Scribd company logo
Building a search experience with Elastic –
App Search/Elastic Cloud, Docker, Python,
React Search UI を使った最新サンプルアプリのご紹介
鈴⽊ 章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁 省庁業務グループ ソリューションアーキテクト
Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁
省庁業務グループ
ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki
l アプリ概要
l Elastic Cloud セットアップ
l データ取り込み
l データ検索
l リソース他
アジェンダ
アプリ概要
アプリ概要︓Elastiflix
Elastiflix は、インターネットムービーデータベース The Movie Database (TMDB)から
公開されているデータを使⽤した Web ベースのユーザーインターフェイスを提供する架空のビデオ
ストリーミングサービス会社です。
Elastiflix は、Elastic Cloud に格納された TMDB データのインデックス付きコピーからデータを
クエリするメカニズムを提供します。
優れた検索エクスペリエンスを提供するために、当該データに対する、⾼パフォーマンスで柔軟な
管理とクエリを可能にします。
https://www.elastic.co/jp/blog/building-a-search-experience-with-elastic
• 本社 Principal Product Marketing Manager である
Issac Levin が作成し、上記ブログで公開
• Elastic が開発者に豊富な検索ソリューションを構築する⼒を
与える⽅法を紹介するエンドツーエンドのデモ
• Enterprise Search Python ライブラリを使⽤して
Elastic Enterprise Search にデータを取り込む
• 無料のオープンソースツールである Search UI を使⽤して
React で最新の UI を作成する
Elastic Cloud セットアップ
Elastic Cloud デプロイ
●Elastic Cloud のデプロイメントに伴い下記データを取得
ᐨ ELASTICSEARCH_PASSWORD︓
デプロイメントの作成時に表⽰されるパスワード
ᐨ CLOUD_ID︓デプロイメントページにある URL
ᐨ AS_BASE_URL: App Search インスタンスの URL
ᐨ AS_SEARCH_API_KEY︓検索エクスペリエンス⽤の API キー
データの取り込み
GitHub レポジトリからアプリのダウンロード
●Docker コンテナとして実⾏できる2つのモジュールで構成
●Elastic Cloud での取り込み、管理、検索のエンドツーエンドの
エクスペリエンスが可能
●git clone https://github.com/elastic/elastiflix
●Docker Desktop
Elastiflix GitHub リポジトリ
env ファイルへの書き込み
●env
ELASTICSEARCH_PASSWORD=FNRJAZefYqDjnsA82OsgLRx8
AS_BASE_URL=https://search-ui.ent.asia-northeast1.gcp.cloud.es.io
AS_SEARCH_API_KEY=search-xmi5wgxb4gmahbg4eyoin5bp
CLOUD_ID=search_ui:YXNpYS1ub3J0aGVhc3QxLmdjcC5jbG91ZC5lcy5pbyQ2NjQ3NT
E1ZDExNjE0YWJmOWFjMGYxZWY3NjViNWVmYiQ0NWE2ZDdlM2Y4NDM0NDEyOGQ3MGFhNzE
1ODYzOTdjZQ==
ENGINE_NAME=tmdbd
DATA_FOLDER=/opt/tmdb-data
ANALYTICS_FOLDER=/opt/analytics-data/
CONFIG_FOLDER=/opt/tmdb-config
SKIP_PREFLIGHT_CHECK=true
スクリプトの内容と docker コマンド
●/src/data-loader
●コンテナ作成時に実⾏されるスクリプトは2つ
○サンプルデータを⽣成するもの
○Elastic Cloud に対してシミュレーションを実⾏するもの
○- generate-analytics-input.py: TMDB の動画ファイルを読み込み、検索語のリストをランダムに作成する
○- generate-analytics.py: 全てのデータファイルを集計し、様々な検索を⾏う
●docker イメージのビルドと実⾏
//../src/data-loader/ にいることを確認して下記のコマンドを使⽤
bash
docker build . -t data-loader:latest
docker run --env-file env data-loader:latest
データの取り込み結果の確認
●Kibana でデータの取り込み結果の確認
●データ数他 ●Synonym
データの検索
.env ファイルへの書き込み
●.env
AS_BASE_URL=https://search-ui.ent.asia-northeast1.gcp.cloud.es.io
AS_SEARCH_API_KEY=search-xmi5wgxb4gmahbg4eyoin5bp
ENGINE_NAME=tmdb
スクリプトの内容と docker コマンド
●/src/streaming-ui
●Elastic Cloud デプロイメントから映画を検索するためにあらかじめ設定された React App
●React と Typescript で書かれた無料のオープンソースパッケージである Search UI
(https://github.com/elastic/search-ui)を使⽤
○Elastic が開発・保守する検索⽤のビジュアルインターフェイス
●docker イメージのビルドと実⾏
//../src/streaming-ui/ にいることを確認して下記のコマンドを使⽤
bash
docker build . -t elastiflix-ui:latest
docker run -d --env-file scripts/.env -p 5000:80 elastiflix-ui
データの検索アプリの実⾏
●ブラウザで https://localhost:5000 を開く
注︓
Cloud Run (GCP) や、
Azure Container Instance
などに、どちらのコンテナも
デプロイしてしまっても良いかと…
リソース他
リソース
Building a search experience with Elastic
https://www.elastic.co/jp/blog/building-a-search-experience-with-elastic
注︓Intel Mac または Windows 11 マシンで実⾏してください︕
Elastic Maps の機能紹介
https://www.elastic.co/jp/virtual-events/intro-to-elastic-maps
Elasticsearch の Elastic Maps を使えば位置データの地理空間分析を⼤規模、かつリアルタイムに実現できます。レイヤー、
ポイント、シェイプ、ダイナミッククライアントサイドスタイリング等を活⽤してデータを分析する事で、次のアクションにつなげられます。
最新の Elastic Maps の機能をデモを交えてご紹介します。
オブザーバビリティの最新トレンド: 未来への展望 (6/29)
https://www.elastic.co/jp/virtual-events/observability-trends-2022
オブザーバビリティの最新トレンドについて、そしてこの領域に今後期待されることをお話しいたします。
多くの企業がハイブリッドクラウド環境に移⾏するにつれ、クラウドネイティブテクノロジーとその複雑性をオブザーバビリティで管理
することがますます重要になってきています。eBPF から機械学習、CI/CD パイプラインの可視化まで、我々が市場から⾒える
こと、 顧客がそれにどのようにアプローチしているか、そして近い将来の可能性・展望についてお話しします。
ElasticON Solution Seminar (7/21 10:00~12:00)
https://www.elastic.co/elasticon/event/solution-seminar-japan-jp
Elastic 社が主催する ElasticON は、世界の主要都市で開催されているユーザーさま向けのカンファレンス・セミナー形式の
イベントです。今回のセミナーでは、Elastic 8.2 シリーズの最新情報と、ライブデモ、そして我々のお客さまがどのようにデータの
利活⽤をしているかの導⼊/活⽤事例をご紹介いたします。是⾮この無料バーチャルイベントにご参加ください。
Elastic x mabl 共同セミナー (7/29 15:00~16:00)
https://www.elastic.co/jp/virtual-events/elastic-mabl-webinar
デジタルカスタマーエクスペリエンスの向上
〜 Elastic と mabl で実現する、ユーザー視点の アプリケーション Observability 〜
Thank you for your attention!

More Related Content

PDF
Building modernapplicationwithelasiccloud
Shotaro Suzuki
 
PDF
Developers-Summit-2022_Improving-Digital-Customer-Experience-with-Enterprise_...
Shotaro Suzuki
 
PDF
Elastic circle ci-co-webinar-20210127
Shotaro Suzuki
 
PDF
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Shotaro Suzuki
 
PDF
Integrating elasticsearch with asp dot net core
Shotaro Suzuki
 
PDF
Learn, build, and scale with elastic - realizing great programming experience...
Shotaro Suzuki
 
PDF
Elastic Stackの紹介とOpenStackでの活用事例(Searchlightなど) - OpenStack最新情報セミナー 2016年5月
VirtualTech Japan Inc.
 
PDF
Renewed using elasticsearchonaspnet-core5
Shotaro Suzuki
 
Building modernapplicationwithelasiccloud
Shotaro Suzuki
 
Developers-Summit-2022_Improving-Digital-Customer-Experience-with-Enterprise_...
Shotaro Suzuki
 
Elastic circle ci-co-webinar-20210127
Shotaro Suzuki
 
Building asp.net core blazor and elasticsearch elasticsearch using visual stu...
Shotaro Suzuki
 
Integrating elasticsearch with asp dot net core
Shotaro Suzuki
 
Learn, build, and scale with elastic - realizing great programming experience...
Shotaro Suzuki
 
Elastic Stackの紹介とOpenStackでの活用事例(Searchlightなど) - OpenStack最新情報セミナー 2016年5月
VirtualTech Japan Inc.
 
Renewed using elasticsearchonaspnet-core5
Shotaro Suzuki
 

Similar to Building a search experience with Elastic – Introducing Elastic's latest sample apps using App Search, Elastic Cloud, Docker, Python, and React Search UI.pdf (20)

PDF
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
 
PDF
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
株式会社MonotaRO Tech Team
 
PDF
Migrating tocloudnativeapplicationwithusingelasticapm
Shotaro Suzuki
 
PDF
What's New in the Elastic 8.4 Release
Shotaro Suzuki
 
PDF
Firebase, Firestore Extension for Elastic App Search Integration-20220216
Shotaro Suzuki
 
PDF
Utilizing elasticcloudforallusecases
Shotaro Suzuki
 
PDF
実践!Elasticsearch + Sudachi を用いた全文検索エンジン
S. T.
 
PDF
Elastichelps fintechenablesdx usingaibasedautomationand anomalydetection
Shotaro Suzuki
 
PDF
ElasticSearch勉強会 第6回
Naoyuki Yamada
 
PDF
メディアコンテンツ向け記事検索DBとして使うElasticsearch
Yasuhiro Murata
 
PDF
Elastic事例 リクルートテクノロジーズ
Yoshio Fujimatsu
 
PDF
JPN_Elastic Corporate Deck_March2016_Japan_v3
Yoshio Fujimatsu
 
PDF
JJUG CCC リクルートの Java に対する取り組み
Recruit Technologies
 
PDF
Elasticsearchを使ったTwitter監視アプリ
YuichiArisaka
 
PDF
Elasticsearch at CrowdWorks
佑介 九岡
 
PDF
メディアコンテンツを支えるデータストアサービスをAWSで
Yasuhiro Murata
 
PDF
Centralized Observability for the Azure Ecosystem
Shotaro Suzuki
 
PDF
Elasticsearchプラグインの作り方
Shinsuke Sugaya
 
PDF
Elasticsearchの基本動作まとめ
朋哉 池田
 
PDF
elastic-mabl-co-webinar-20220729
Shotaro Suzuki
 
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
 
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
株式会社MonotaRO Tech Team
 
Migrating tocloudnativeapplicationwithusingelasticapm
Shotaro Suzuki
 
What's New in the Elastic 8.4 Release
Shotaro Suzuki
 
Firebase, Firestore Extension for Elastic App Search Integration-20220216
Shotaro Suzuki
 
Utilizing elasticcloudforallusecases
Shotaro Suzuki
 
実践!Elasticsearch + Sudachi を用いた全文検索エンジン
S. T.
 
Elastichelps fintechenablesdx usingaibasedautomationand anomalydetection
Shotaro Suzuki
 
ElasticSearch勉強会 第6回
Naoyuki Yamada
 
メディアコンテンツ向け記事検索DBとして使うElasticsearch
Yasuhiro Murata
 
Elastic事例 リクルートテクノロジーズ
Yoshio Fujimatsu
 
JPN_Elastic Corporate Deck_March2016_Japan_v3
Yoshio Fujimatsu
 
JJUG CCC リクルートの Java に対する取り組み
Recruit Technologies
 
Elasticsearchを使ったTwitter監視アプリ
YuichiArisaka
 
Elasticsearch at CrowdWorks
佑介 九岡
 
メディアコンテンツを支えるデータストアサービスをAWSで
Yasuhiro Murata
 
Centralized Observability for the Azure Ecosystem
Shotaro Suzuki
 
Elasticsearchプラグインの作り方
Shinsuke Sugaya
 
Elasticsearchの基本動作まとめ
朋哉 池田
 
elastic-mabl-co-webinar-20220729
Shotaro Suzuki
 
Ad

More from Shotaro Suzuki (20)

PDF
This is how our first offline technical event in three years was able to succ...
Shotaro Suzuki
 
PDF
Introducing the new features of the Elastic 8.6 release.pdf
Shotaro Suzuki
 
PDF
NET MAUI for .NET 7 for iOS, Android app development
Shotaro Suzuki
 
PDF
What's New in the Elastic 8.5 Release
Shotaro Suzuki
 
PDF
Power Apps x .NET ~ Transforming Business Applications with Fusion Development
Shotaro Suzuki
 
PDF
devreljapan2022evaadvoc-final.pdf
Shotaro Suzuki
 
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
PDF
Discover what's new in the Elastic 8.3 release - Find, monitor, and protect e...
Shotaro Suzuki
 
PDF
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Shotaro Suzuki
 
PDF
Elastic x Microsoft Azure Integration Evolution - Integrated Monitoring for S...
Shotaro Suzuki
 
PDF
Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Da...
Shotaro Suzuki
 
PDF
What's New in the Elastic 8.2 Release - Seamless User Experience with Search -
Shotaro Suzuki
 
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
PDF
Building Software Reliability through Distributed Tracing.pdf
Shotaro Suzuki
 
PDF
Building a Flutter Development Environment with VSCode and Useful Extensions
Shotaro Suzuki
 
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
PDF
Introducing Elastic 8.1 Release - More Integration, Faster Indexing Speed, Lo...
Shotaro Suzuki
 
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
PDF
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Shotaro Suzuki
 
PDF
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
 
This is how our first offline technical event in three years was able to succ...
Shotaro Suzuki
 
Introducing the new features of the Elastic 8.6 release.pdf
Shotaro Suzuki
 
NET MAUI for .NET 7 for iOS, Android app development
Shotaro Suzuki
 
What's New in the Elastic 8.5 Release
Shotaro Suzuki
 
Power Apps x .NET ~ Transforming Business Applications with Fusion Development
Shotaro Suzuki
 
devreljapan2022evaadvoc-final.pdf
Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
Discover what's new in the Elastic 8.3 release - Find, monitor, and protect e...
Shotaro Suzuki
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Shotaro Suzuki
 
Elastic x Microsoft Azure Integration Evolution - Integrated Monitoring for S...
Shotaro Suzuki
 
Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Da...
Shotaro Suzuki
 
What's New in the Elastic 8.2 Release - Seamless User Experience with Search -
Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
Building Software Reliability through Distributed Tracing.pdf
Shotaro Suzuki
 
Building a Flutter Development Environment with VSCode and Useful Extensions
Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
Introducing Elastic 8.1 Release - More Integration, Faster Indexing Speed, Lo...
Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
 
Introducing the elastic 8.0 release a new era of speed, scale, relevance, and...
Shotaro Suzuki
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
 
Ad

Recently uploaded (7)

PDF
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
PDF
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
PDF
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
PDF
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
PDF
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
PDF
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
PPTX
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 
MahiroYoshida_セリフに着目したキャラクタロール推定に関する基礎検討_sigcc12th2025
Matsushita Laboratory
 
【学会聴講報告】CVPR2025からみるVision最先端トレンド / CVPR2025 report
Sony - Neural Network Libraries
 
20250729_Devin-for-Enterprise
Masaki Yamakawa
 
TaketoFujikawa_ComicComputing12th_inKumamoto
Matsushita Laboratory
 
20250726_Devinで変えるエンプラシステム開発の未来
Masaki Yamakawa
 
20250730_QiitaBash_LT登壇資料_PDC_Kurashina.pdf
pdckurashina
 
baserCMS『カスタムコンテンツ』徹底活用術〜あなただけの管理画面を自由自在に〜
Ryuji Egashira
 

Building a search experience with Elastic – Introducing Elastic's latest sample apps using App Search, Elastic Cloud, Docker, Python, and React Search UI.pdf