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