Getting Started Algolia with InstantSearch.js
•
1 like•3,021 views
Hands-on workshop material for Algolia 勉強会 in 金沢
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Getting Started Algolia with InstantSearch.js
Similar to Getting Started Algolia with InstantSearch.js (20)
More from Eiji Shinohara
More from Eiji Shinohara (20)
Recently uploaded
Recently uploaded (16)
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 (箱を開けてそ のまま使えるようなイメージ) で且つ、カスタマイズ可能な検索エ ンジンの構築体験をご提供します
- 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を使ったページ
- 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の管理 者から教えてもらう感じ ↓
- 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の設定
- 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を追加 ⑧ 階層メニューを導入
- 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 ⑪ ページネーション
- 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