Enviar pesquisa
Carregar
Getting Started Algolia with InstantSearch.js
•
1 gostou
•
2,988 visualizações
Eiji Shinohara
Seguir
Hands-on workshop material for Algolia 勉強会 in 金沢
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 64
Baixar agora
Baixar para ler offline
Recomendados
Algolia introduction in Kanazawa - July 2019
Algolia introduction in Kanazawa - July 2019
Eiji Shinohara
Indexing with Algolia Ruby API Client
Indexing with Algolia Ruby API Client
Eiji Shinohara
Api as a product
Api as a product
CData Software Japan
Garoon_PMAPI#1
Garoon_PMAPI#1
Kyouhei Kitagawa
IVS CTO Night and Day Recap - #CTONight 2016 Winter
IVS CTO Night and Day Recap - #CTONight 2016 Winter
Eiji Shinohara
IVS CTO Night and Day Recap - #CTONight 2016 Spring
IVS CTO Night and Day Recap - #CTONight 2016 Spring
Eiji Shinohara
46でγ-GTP 生まれて初の基準値に
46でγ-GTP 生まれて初の基準値に
Mitsuhiro Yamashita
10分でわかるサイバーエージェント広告部門のハイブリッドクラウド環境 公開用
10分でわかるサイバーエージェント広告部門のハイブリッドクラウド環境 公開用
Ken Takao
Recomendados
Algolia introduction in Kanazawa - July 2019
Algolia introduction in Kanazawa - July 2019
Eiji Shinohara
Indexing with Algolia Ruby API Client
Indexing with Algolia Ruby API Client
Eiji Shinohara
Api as a product
Api as a product
CData Software Japan
Garoon_PMAPI#1
Garoon_PMAPI#1
Kyouhei Kitagawa
IVS CTO Night and Day Recap - #CTONight 2016 Winter
IVS CTO Night and Day Recap - #CTONight 2016 Winter
Eiji Shinohara
IVS CTO Night and Day Recap - #CTONight 2016 Spring
IVS CTO Night and Day Recap - #CTONight 2016 Spring
Eiji Shinohara
46でγ-GTP 生まれて初の基準値に
46でγ-GTP 生まれて初の基準値に
Mitsuhiro Yamashita
10分でわかるサイバーエージェント広告部門のハイブリッドクラウド環境 公開用
10分でわかるサイバーエージェント広告部門のハイブリッドクラウド環境 公開用
Ken Takao
20140717 awssummit2014-cloud-operation
20140717 awssummit2014-cloud-operation
Yasuhiro Araki, Ph.D
kintoneとAmazon Connectで日直の自動化など
kintoneとAmazon Connectで日直の自動化など
Mitsuhiro Yamashita
Fun tech14-alibaba cloud api gateway-swagger
Fun tech14-alibaba cloud api gateway-swagger
AnzaiKumiko
株式会社サイバーエージェント アドテクスタジオの技術と開発
株式会社サイバーエージェント アドテクスタジオの技術と開発
Naoyuki Yamada
Tableau Server Client(Python)でできる3000人規模のサーバーレス運用管理
Tableau Server Client(Python)でできる3000人規模のサーバーレス運用管理
Ken Takao
Netflix Meetup in Kyoto 参加報告
Netflix Meetup in Kyoto 参加報告
tnoda
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
オレ流クラウドデザイン
オレ流クラウドデザイン
Atsushi Kojima
多対多のクラウド利用を支えるデータ標準化技術
多対多のクラウド利用を支えるデータ標準化技術
CData Software Japan
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
Git hubenterpriseを導入してみて
Git hubenterpriseを導入してみて
recotech
ナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるために
Recruit Lifestyle Co., Ltd.
20190201 multicloud opening_share
20190201 multicloud opening_share
Mai Nagahisa
2016/08/25 JAWS-UG 千葉支部 Vol.6 LT
2016/08/25 JAWS-UG 千葉支部 Vol.6 LT
晋也 古渡
SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!
Tomoe Sawai
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
CircleCIのArtifactを活用してレポートを作成する
CircleCIのArtifactを活用してレポートを作成する
Takeo Saga
Devsumi2019 jaws festa_at_fun_location
Devsumi2019 jaws festa_at_fun_location
ひろき こにし
オンプレミスから AWS への劇的ビフォーアフター
オンプレミスから AWS への劇的ビフォーアフター
manabusakai
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
Mais conteúdo relacionado
Mais procurados
20140717 awssummit2014-cloud-operation
20140717 awssummit2014-cloud-operation
Yasuhiro Araki, Ph.D
kintoneとAmazon Connectで日直の自動化など
kintoneとAmazon Connectで日直の自動化など
Mitsuhiro Yamashita
Fun tech14-alibaba cloud api gateway-swagger
Fun tech14-alibaba cloud api gateway-swagger
AnzaiKumiko
株式会社サイバーエージェント アドテクスタジオの技術と開発
株式会社サイバーエージェント アドテクスタジオの技術と開発
Naoyuki Yamada
Tableau Server Client(Python)でできる3000人規模のサーバーレス運用管理
Tableau Server Client(Python)でできる3000人規模のサーバーレス運用管理
Ken Takao
Netflix Meetup in Kyoto 参加報告
Netflix Meetup in Kyoto 参加報告
tnoda
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
オレ流クラウドデザイン
オレ流クラウドデザイン
Atsushi Kojima
多対多のクラウド利用を支えるデータ標準化技術
多対多のクラウド利用を支えるデータ標準化技術
CData Software Japan
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
Git hubenterpriseを導入してみて
Git hubenterpriseを導入してみて
recotech
ナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるために
Recruit Lifestyle Co., Ltd.
20190201 multicloud opening_share
20190201 multicloud opening_share
Mai Nagahisa
2016/08/25 JAWS-UG 千葉支部 Vol.6 LT
2016/08/25 JAWS-UG 千葉支部 Vol.6 LT
晋也 古渡
SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!
Tomoe Sawai
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
CircleCIのArtifactを活用してレポートを作成する
CircleCIのArtifactを活用してレポートを作成する
Takeo Saga
Devsumi2019 jaws festa_at_fun_location
Devsumi2019 jaws festa_at_fun_location
ひろき こにし
オンプレミスから AWS への劇的ビフォーアフター
オンプレミスから AWS への劇的ビフォーアフター
manabusakai
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
Mais procurados
(20)
20140717 awssummit2014-cloud-operation
20140717 awssummit2014-cloud-operation
kintoneとAmazon Connectで日直の自動化など
kintoneとAmazon Connectで日直の自動化など
Fun tech14-alibaba cloud api gateway-swagger
Fun tech14-alibaba cloud api gateway-swagger
株式会社サイバーエージェント アドテクスタジオの技術と開発
株式会社サイバーエージェント アドテクスタジオの技術と開発
Tableau Server Client(Python)でできる3000人規模のサーバーレス運用管理
Tableau Server Client(Python)でできる3000人規模のサーバーレス運用管理
Netflix Meetup in Kyoto 参加報告
Netflix Meetup in Kyoto 参加報告
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
オレ流クラウドデザイン
オレ流クラウドデザイン
多対多のクラウド利用を支えるデータ標準化技術
多対多のクラウド利用を支えるデータ標準化技術
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Git hubenterpriseを導入してみて
Git hubenterpriseを導入してみて
ナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるために
20190201 multicloud opening_share
20190201 multicloud opening_share
2016/08/25 JAWS-UG 千葉支部 Vol.6 LT
2016/08/25 JAWS-UG 千葉支部 Vol.6 LT
SkyWay で ビデオチャットサービス を構築してみた!
SkyWay で ビデオチャットサービス を構築してみた!
React meetup 3_eight
React meetup 3_eight
CircleCIのArtifactを活用してレポートを作成する
CircleCIのArtifactを活用してレポートを作成する
Devsumi2019 jaws festa_at_fun_location
Devsumi2019 jaws festa_at_fun_location
オンプレミスから AWS への劇的ビフォーアフター
オンプレミスから AWS への劇的ビフォーアフター
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
Semelhante a Getting Started Algolia with InstantSearch.js
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
Logic Apps と Api Apps の話
Logic Apps と Api Apps の話
Sunao Tomita
elasticsearchプラグイン入門
elasticsearchプラグイン入門
Shinsuke Sugaya
Elasticsearch 変わり種プラグインの作り方
Elasticsearch 変わり種プラグインの作り方
Ryoji Kurosawa
Integrating elasticsearch with asp dot net core
Integrating elasticsearch with asp dot net core
Shotaro Suzuki
What's New in the Elastic 8.4 Release
What's New in the Elastic 8.4 Release
Shotaro Suzuki
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
Takami Kazuya
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Shotaro Suzuki
Pivotal Tracker概略
Pivotal Tracker概略
You&I
Web技術勉強会第1回目
Web技術勉強会第1回目
龍一 田中
Oisix勉強会 google analiticsapiを使用したサイト開発例
Oisix勉強会 google analiticsapiを使用したサイト開発例
oistudy
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
Ryo Sasaki
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Building modernapplicationwithelasiccloud
Building modernapplicationwithelasiccloud
Shotaro Suzuki
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open Social
ngi group.
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
cmutoh
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
ElasticSearch勉強会 第6回
ElasticSearch勉強会 第6回
Naoyuki Yamada
Semelhante a Getting Started Algolia with InstantSearch.js
(20)
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
Logic Apps と Api Apps の話
Logic Apps と Api Apps の話
elasticsearchプラグイン入門
elasticsearchプラグイン入門
Elasticsearch 変わり種プラグインの作り方
Elasticsearch 変わり種プラグインの作り方
Integrating elasticsearch with asp dot net core
Integrating elasticsearch with asp dot net core
What's New in the Elastic 8.4 Release
What's New in the Elastic 8.4 Release
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Elastic on Azure Integration & Building React UI Based Search App Using Azure...
Pivotal Tracker概略
Pivotal Tracker概略
Web技術勉強会第1回目
Web技術勉強会第1回目
Oisix勉強会 google analiticsapiを使用したサイト開発例
Oisix勉強会 google analiticsapiを使用したサイト開発例
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
[Okta x Jamf合同新年会] Okta Workflowsによるノーコード業務改善 〜Jamf APIを使ってMac端末情報を自動収集してみよう〜
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Building modernapplicationwithelasiccloud
Building modernapplicationwithelasiccloud
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open Social
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
ElasticSearch勉強会 第6回
ElasticSearch勉強会 第6回
Mais de Eiji Shinohara
Scalable and Cost Effective Systems Architecture on AWS
Scalable and Cost Effective Systems Architecture on AWS
Eiji Shinohara
#AWSAdTechJP
#AWSAdTechJP
Eiji Shinohara
Accelerating AdTech on AWS in Japan
Accelerating AdTech on AWS in Japan
Eiji Shinohara
AWS Summit New York 2017 Keynote Recap
AWS Summit New York 2017 Keynote Recap
Eiji Shinohara
#CTONight powered by AWS
#CTONight powered by AWS
Eiji Shinohara
SolrCloud on Amazon ECS
SolrCloud on Amazon ECS
Eiji Shinohara
AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
Eiji Shinohara
Search Solutions on AWS
Search Solutions on AWS
Eiji Shinohara
Global AWS AdTech use-cases
Global AWS AdTech use-cases
Eiji Shinohara
Tips for getting the most out of AWS re:Invent IN ENGLISH
Tips for getting the most out of AWS re:Invent IN ENGLISH
Eiji Shinohara
検索技術の活用による広告配信Relevance向上
検索技術の活用による広告配信Relevance向上
Eiji Shinohara
エンジニアの為のAWS実践講座
エンジニアの為のAWS実践講座
Eiji Shinohara
AWS Summit New York 2016 Recap : AWS Application Load Balancer and Amazon ECS
AWS Summit New York 2016 Recap : AWS Application Load Balancer and Amazon ECS
Eiji Shinohara
個人的にAmazon EMR5.0.0でSpark 2.0を使ってZeppelinでSQL集計してみる
個人的にAmazon EMR5.0.0でSpark 2.0を使ってZeppelinでSQL集計してみる
Eiji Shinohara
Accelerating AdTech on AWS #AWSAdTechJP
Accelerating AdTech on AWS #AWSAdTechJP
Eiji Shinohara
Ad Tech on AWS - IVS CTO Night and Day Spring 2016
Ad Tech on AWS - IVS CTO Night and Day Spring 2016
Eiji Shinohara
Search on AWS - IVS CTO Night and Day 2016 Spring
Search on AWS - IVS CTO Night and Day 2016 Spring
Eiji Shinohara
Getting Started Japanese Search and Calculate Similarity with Apache Lucene
Getting Started Japanese Search and Calculate Similarity with Apache Lucene
Eiji Shinohara
[要約] Building a Real-Time Bidding Platform on AWS #AWSAdTechJP
[要約] Building a Real-Time Bidding Platform on AWS #AWSAdTechJP
Eiji Shinohara
Scaling on AWS - Feb 2016
Scaling on AWS - Feb 2016
Eiji Shinohara
Mais de Eiji Shinohara
(20)
Scalable and Cost Effective Systems Architecture on AWS
Scalable and Cost Effective Systems Architecture on AWS
#AWSAdTechJP
#AWSAdTechJP
Accelerating AdTech on AWS in Japan
Accelerating AdTech on AWS in Japan
AWS Summit New York 2017 Keynote Recap
AWS Summit New York 2017 Keynote Recap
#CTONight powered by AWS
#CTONight powered by AWS
SolrCloud on Amazon ECS
SolrCloud on Amazon ECS
AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
AWS Summit San Francisco 2017 Werner Vogelsによる基調講演を徹底紹介
Search Solutions on AWS
Search Solutions on AWS
Global AWS AdTech use-cases
Global AWS AdTech use-cases
Tips for getting the most out of AWS re:Invent IN ENGLISH
Tips for getting the most out of AWS re:Invent IN ENGLISH
検索技術の活用による広告配信Relevance向上
検索技術の活用による広告配信Relevance向上
エンジニアの為のAWS実践講座
エンジニアの為のAWS実践講座
AWS Summit New York 2016 Recap : AWS Application Load Balancer and Amazon ECS
AWS Summit New York 2016 Recap : AWS Application Load Balancer and Amazon ECS
個人的にAmazon EMR5.0.0でSpark 2.0を使ってZeppelinでSQL集計してみる
個人的にAmazon EMR5.0.0でSpark 2.0を使ってZeppelinでSQL集計してみる
Accelerating AdTech on AWS #AWSAdTechJP
Accelerating AdTech on AWS #AWSAdTechJP
Ad Tech on AWS - IVS CTO Night and Day Spring 2016
Ad Tech on AWS - IVS CTO Night and Day Spring 2016
Search on AWS - IVS CTO Night and Day 2016 Spring
Search on AWS - IVS CTO Night and Day 2016 Spring
Getting Started Japanese Search and Calculate Similarity with Apache Lucene
Getting Started Japanese Search and Calculate Similarity with Apache Lucene
[要約] Building a Real-Time Bidding Platform on AWS #AWSAdTechJP
[要約] Building a Real-Time Bidding Platform on AWS #AWSAdTechJP
Scaling on AWS - Feb 2016
Scaling on AWS - Feb 2016
Último
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Último
(9)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Getting Started Algolia with InstantSearch.js
1.
InstantSearch.js で Algolia を使ってみよう! Eiji
Shinohara Senior Manager, Solutions Engineer eiji@algolia.com @shinodogg
2.
- 世の中のユーザーの検索体験の期待が増していくばかりの昨 今、皆さまいかがお過ごしでしょうか? - 幾つか例を挙げるとすると、、 -
スピード、適合性、そして、ユーザビリティ、、 - Algolia は開発者の皆さまに out-of-the-box (箱を開けてそ のまま使えるようなイメージ) で且つ、カスタマイズ可能な検索エ ンジンの構築体験をご提供します
3.
- このハンズオンワークショップの資料は、サーバーに関する知識 がなくても、基本的なJavaScriptをご理解いただいていれば、 簡単にAlgoliaを試すことが出来るものとなっています - 英語のデータセットで恐縮ではございますが、使用するデータは 予め、Algoliaで用意されているe-commerceに関連するもの になります
4.
- もし、ご自身のIndexをAlgolia上に構築して試してみたい場合 は、algolia.com の
FREE TRIAL から是非!
5.
- 00-完成版 フォルダの
index.html をクリック ■ 完成イメージ
6.
- ハンズオンの中でたまに Chrome
の Developer Toolsを使い ます - (たぶん使わなくてもハンズオン自体は大丈夫です) ■ シンプルなInstantSearch.jsを使ったページ
7.
- 以下のように見えるといい感じです。 - Network
および XHR を選択 - Viewのところで見た目を調整しながら”Preview” ■ シンプルなInstantSearch.jsを使ったページ
8.
- 以下のように見えるといい感じです。 - Network
および XHR を選択 - Viewのところで見た目を調整しながら”Preview” ■ シンプルなInstantSearch.jsを使ったページ
9.
- メインは hits:
というところ(デフォルトは1ページ20件) ■ シンプルなInstantSearch.jsを使ったページ
10.
- ヒットした1件目(0:)をみてみましょう ■ シンプルなInstantSearch.jsを使ったページ
11.
- Facet等もハンズオンを行いながらみていきます ■ シンプルなInstantSearch.jsを使ったページ
12.
- getting-started-with-algolia-instantsearch-js 的なフォ ルダーをご自身のローカルに作っていただいて -
各 _finished フォルダのindex.htmlおよびapp.jsの内容を、 index.htmlに書き写すような流れで進めていただくとよろしいかと 思います - 途中でついていけなくなったら、私や周りの人に聞いてみたりしつ つ、それでもよくわからなかったら _finished の中身をコピペして もってきて、そこから続けてもよろしいかもしれません ■ それではさっそくハンズオンを行っていきましょう!
13.
- 01-APIのレスポンスをそのまま表示 - _finished
フォルダのindex.htmlの内容を、index.htmlに書 き写すような流れで進めていきます ■ それではさっそくハンズオンを行っていきましょう!
14.
- シンプルなHTMLにalgoliaのJSをロードします - Scriptのsrc属性はコピペで。bodyタグはご理解のために手打ち推奨
:) ① APIのレスポンスをそのまま表示 (Raw Hits) index.html 01_finished/index.html
15.
- 予めAlgoliaで用意してあるIndexにアクセスする設定 - headでロードしたJavaScriptライブラリを使ってAlgoliaのインデックスである initIndexを指定。algoliasearchの第一引数はアプリ名、第二引数はクエリ用 のKey ①
APIのレスポンスをそのまま表示 (Raw Hits) 通常業務ではAlgoliaの管理 者から教えてもらう感じ ↓
16.
- 完全にコピペする前に(?)、空のクエリをAlgoliaに投げてログ出力してみます ① APIのレスポンスをそのまま表示
(Raw Hits)
17.
- ChromeのDeveloper Toolsでログを確認します ①
APIのレスポンスをそのまま表示 (Raw Hits)
18.
- ChromeのDeveloper Toolsでログを確認します -
consoleで出てくるhits の部分をクリックして展開 ① APIのレスポンスをそのまま表示 (Raw Hits)
19.
- プロダクトの名前を画面に表示させてみましょう ① APIのレスポンスをそのまま表示
(Raw Hits) 結果の配列をHTMLの段落<p>にプロダクトの名前を入れる形で変換 appのHTMLの中身を、段落の配列に置き換え (“”は区切り文字無しを示す )
20.
- プロダクトの名前を画面に表示させることができました! ① APIのレスポンスをそのまま表示
(Raw Hits)
21.
- 実は今までが一番ハードル高いかもしれません - もし、分からなかったところや、つまずいたところがあったら、是 非共有してください(私の後学の為にも…) ■
いかがでしょうか? 管理者の人が使うダッシュボードは ↑のようなイメージ
22.
- では、実際にInstantSearch.jsを使っていきましょう! - スタイルシート(style.css)とJavaScript(app.js)は別ファイルで ②
InstantSearch.jsの設定
23.
- 少し話は逸れますが、Vanilla JSって?? ②
InstantSearch.jsの設定
24.
- スタイルシートは本題ではないのでコピー&ペーストで ② InstantSearch.jsの設定
25.
$ npm install
instantsearch.js > preact@8.4.2 postinstall /xxxx/node_modules/preact <<略>> + instantsearch.js@3.5.3 added 29 packages from 26 contributors and audited 59 packages in 2.63s found 0 vulnerabilities ② InstantSearch.jsの設定 npm や yarn を使っても良いかもしれませんが、今回は一旦 CDN上にあるJavaScriptファイルをロードする形にした いと思います。例えば npm を使う場合の設定は以下。
26.
- Visual Studio
Code: Terminal->New Terminal ② InstantSearch.jsの設定 もし、ターミナルでパッケージマネージャーを使う場合、 Visual Studio Codeがオススメ?
27.
- 2つのJavaScriptライブラリをHTMLでロードしてapp.jsの中で使っていきます - 1.
algoliasearch: JavaScriptのAPIクライアント - 2. instantsearch: フロントエンドライブラリ - InstantSearchのwidget用のCSSもロードします ② InstantSearch.jsの設定
28.
- いよいよJavaScript(app.js)のコーディング - InstantSearchのインスタンスを生成して、start()
すると動 作が開始し、HTMLを開くとログを確認できます ② InstantSearch.jsの設定
29.
- Index.html に
test-widget というdivタグを追加 - app.js に InstantSearchのmenuというwidgetを追加 - HTMLで定義した test-widget に type 属性を表示 - testWidgetを InstantSearch に addWidget で追加 ③ InstantSearch.jsのWidgetを追加 index.html app.js
30.
- const testWidgetに代入していたところを直接 search.addWidgetの中にしてコードを見通し良く
:) ③ InstantSearch.jsののWidgetを追加
31.
- HTMLファイルを開くと追加したWidgetが表示されています - divタグで定義した
test-widget に、InstantSearchの menu widget が表示されている状態 ③ InstantSearch.jsののWidgetを追加
32.
1. InstantSearch.jsをロードして 2. 諸々設定 3.
インスタンスを生成 4. Widgetを追加 5. search.start(); で検索 ■ いかがでしょうか? ココまで出来たら、後はInstantSearch.jsの様々なウィジェットを 使って楽しむだけ感あるので、もし、今までのところで、よく分からな い部分等あれば教えてください!
33.
- HTMLのbodyタグの中にheaderタグとmainタグを追加 - headerタグに
searchbox - main タグに hits ④ 検索バーを設置し結果を表示
34.
- app.js に
searchBox widgetを追加 - Containerは #searchbox - HTMLを表示すると検索バーが確認できます ④ 検索バーを設置し結果を表示
35.
- 検索バーにplaceholderを追加 - app.jsのsearchBox
widgetの設定の中に↓を追加 placeholder: “Search for products, brands for categories” ④ 検索バーを設置し結果を表示
36.
- app.js に
hits widgetを追加 - containerで”#hits”を指定 - HTMLにヒットした結果が表示される ④ 検索バーを設置し結果を表示
37.
- hits widgetにテンプレート(mustache)の設定を追加 -
name属性だけを表示。検索もできる ⑤ テンプレートを活用して結果を表示
38.
- もう少しイイ感じにしていきましょう - dataをテンプレートリテラルで -
Image, name, price, description を改行して表示 ⑤ テンプレートを活用して結果を表示
39.
- 更にイイ感じにしていきます! - ImageはURLなのでimageタグのsrc属性に -
nameはhit-titleというclass指定のdivの中で<h4> - priceはpriceというclass指定のdivタグの中 - descriptionは普通にpタグ ⑤ テンプレートを活用して結果を表示
40.
- 何もヒットしなかった時はどうでしょうか? - 少し味気ないので、テンプレートにemptyを追加しましょう -
文言は何でもよろしいかと思いますが、目立つように<h1>で ⑤ テンプレートを活用して結果を表示
41.
- 入力した検索キーワードがどこでヒット? - 例えば
“AirPrint” - どこでヒットしたのか分からない! ⑥ 検索キーワードをハイライト
42.
- 入力した検索キーワードがどこでヒット? - Algoliaはデフォルトでハイライトに関する情報をレスポンスに含めています -
Developer Toolsで見てみましょう ⑥ 検索キーワードをハイライト
43.
- 入力した検索キーワードがどこでヒット? - CSSは既に用意されています
(mark) - InstantSearchのhightlightを活用します。まずはname ⑥ 検索キーワードをハイライト
44.
- descriptionもnameと同様に - ${data.description}
を 以下のように ⑥ 検索キーワードをハイライト
45.
- ファセット表示用にレイアウト(index.html)を変更します - <main>
タグを 以下のように - left-columnを作って”brand”を追加 - right-columnはそのまま”hits”を移動させる ⑦ ファセットを導入してフィルタリング
46.
- app.jsにファセット用のWidgetを追加します - refinmentList←ファセット用のWidget -
left-columnに設置した”brand”に表示 - ファセットも検索できるように。プレースホルダは”Search for brands” ⑦ ファセットを導入してフィルタリング
47.
- ファセットが画面に表示されました - デフォルトではファセットは件数が多いものから上に表示されます -
選択されているものがある場合は選択されているものが一番上 - 振る舞いを変更したい場合はsortByオプションで ⑦ ファセットを導入してフィルタリング
48.
- 恐らく日本語化されないと思うので慣れていただけるとmm - デフォルトは
sortBy: [“isRefined”, ”count:desc”, “name:asc”] - 選択されているものが一番上 - 次に件数が多いものが上 - 最後に名前の昇順 ⑦ ファセットを導入してフィルタリング https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-sortby
49.
- まずはDeveloper Toolsで階層構造をみてみましょう -
Network で XHR を選択 - Results -> 0 -> hits -> hierarchicalCategories ⑧ 階層メニューを導入
50.
- 階層メニューを表示するWidgetを追加しましょう - まずはHTMLで表示用のコンテナを用意するところから -
Left-columnに categoriesを追加 ⑧ 階層メニューを導入
51.
- 階層メニューを表示するWidgetを追加しましょう - app.jsは帰ってきたJSONにあわせて以下のようにaddWidget ⑧
階層メニューを導入
52.
- レンジで絞り込むWidgetを追加しましょう - まずはHTMLから。left-columnにpriceを追加 ⑨
金額のレンジで絞り込み
53.
- レンジで絞り込むWidgetを追加しましょう - 続いてapp.jsにもWidgetを追加して画面表示 ⑨
金額のレンジで絞り込み
54.
- 例えば Apple
で絞り込んでいた場合のレンジ表示 - 何も数字を入力していない状態であれば、存在するデータに連 動します。この場合は9ドルから4000ドル。 ⑨ 金額のレンジで絞り込み
55.
- 色々選択し続けているとモワっとしてきますよね… - ということで条件をクリアするWidgetを追加しましょう -
まずはHTMLのleft-columnにclear-allを設置 ⑩ 設定したフィルタリング条件をクリア
56.
- 色々選択し続けているとモワっとしてきますよね… - ということで条件をクリアするWidgetを追加しましょう -
続いてapp.jsに以下のように ⑩ 設定したフィルタリング条件をクリア
57.
- 何も選択されていない場合は表示されませんが、何かを選択する とReset everythingボタンが出てきます! ⑩
設定したフィルタリング条件をクリア
58.
- デフォルトですとHitしたもののBest 20を返すようになっています ⑪
ページネーション
59.
- ページネーションが必要なケース多いですよね。 InstantSearch.jsにはWidgetがあるので特別な実装は不要 - HTMLにコンテナを追加します。今回はright-column ⑪
ページネーション
60.
- 続いてapp.jsにWidgetを追加してHTMLを開いていきます ⑪ ページネーション
61.
- ユーザーに検索結果に関する情報を提供しましょう - ひょっとしたら必ずしも必要ではないかもしれませんが… -
HTMLにコンテナを追加します。今回は検索バーの下に表示するので、<header>の 中に追加していきます ⑫ statsを表示
62.
- ユーザーに検索結果に関する情報を提供しましょう - app.jsにもWidgetを追加してHTMLを開きます -
何件ヒットして、取得に何ミリ秒かかったか表示してくれます :) ⑫ statsを表示
63.
- ハンズオンワークショップは以上で終了です! - いかがだったでしょうか? -
是非ご感想やスクリーンショットをSNSに投稿してください! - #Algolia や #AlgoliaJP といったハッシュタグを付けていた だけますとAlgoliaに関連する人たちが喜びます! - ご参加いただき、ありがとうございました!! ■ お疲れさまでした!!
64.
ANY QUESTIONS? Thank you. Eiji
Shinohara Senior Manager, Solutions Engineer eiji@algolia.com @shinodogg
Baixar agora