狠狠撸

InstantSearch.js で
Algolia を使ってみよう！
Eiji Shinohara
Senior Manager, Solutions Engineer
eiji@algolia.com
@shinodogg

- 世の中のユーザーの検索体験の期待が増していくばかりの昨
今、皆さまいかがお過ごしでしょうか？
- 幾つか例を挙げるとすると、、
- スピード、適合性、そして、ユーザビリティ、、
- Algolia は開発者の皆さまに out-of-the-box (箱を開けてそ
のまま使えるようなイメージ) で且つ、カスタマイズ可能な検索エ
ンジンの構築体験をご提供します

- このハンズオンワークショップの資料は、サーバーに関する知識
がなくても、基本的なJavaScriptをご理解いただいていれば、
簡単にAlgoliaを試すことが出来るものとなっています
- 英語のデータセットで恐縮ではございますが、使用するデータは
予め、Algoliaで用意されているe-commerceに関連するもの
になります

- もし、ご自身のIndexをAlgolia上に構築して試してみたい場合
は、algolia.com の FREE TRIAL から是非！

- 00-完成版フォルダの index.html をクリック
■ 完成イメージ

- ハンズオンの中でたまに Chrome の Developer Toolsを使い
ます
- (たぶん使わなくてもハンズオン自体は大丈夫です)
■ シンプルなInstantSearch.jsを使ったページ

- 以下のように見えるといい感じです。
- Network および XHR を選択
- Viewのところで見た目を調整しながら”Preview”

- メインは hits: というところ(デフォルトは1ページ20件)

- ヒットした1件目(0:)をみてみましょう

- Facet等もハンズオンを行いながらみていきます

- getting-started-with-algolia-instantsearch-js 的なフォ
ルダーをご自身のローカルに作っていただいて
- 各 _finished フォルダのindex.htmlおよびapp.jsの内容を、
index.htmlに書き写すような流れで進めていただくとよろしいかと
思います
- 途中でついていけなくなったら、私や周りの人に聞いてみたりしつ
つ、それでもよくわからなかったら _finished の中身をコピペして
もってきて、そこから続けてもよろしいかもしれません
■ それではさっそくハンズオンを行っていきましょう！

- 01-APIのレスポンスをそのまま表示
- _finished フォルダのindex.htmlの内容を、index.htmlに書
き写すような流れで進めていきます
■ それではさっそくハンズオンを行っていきましょう！

- シンプルなHTMLにalgoliaのJSをロードします
- Scriptのsrc属性はコピペで。bodyタグはご理解のために手打ち推奨 :)
① APIのレスポンスをそのまま表示 (Raw Hits)
index.html 01_finished/index.html

- 予めAlgoliaで用意してあるIndexにアクセスする設定
- headでロードしたJavaScriptライブラリを使ってAlgoliaのインデックスである
initIndexを指定。algoliasearchの第一引数はアプリ名、第二引数はクエリ用
のKey
通常業務ではAlgoliaの管理
者から教えてもらう感じ ↓

- 完全にコピペする前に(?)、空のクエリをAlgoliaに投げてログ出力してみます

- ChromeのDeveloper Toolsでログを確認します

- ChromeのDeveloper Toolsでログを確認します
- consoleで出てくるhits の部分をクリックして展開

- プロダクトの名前を画面に表示させてみましょう
結果の配列をHTMLの段落<p>にプロダクトの名前を入れる形で変換
appのHTMLの中身を、段落の配列に置き換え (“”は区切り文字無しを示す )

- プロダクトの名前を画面に表示させることができました！

- 実は今までが一番ハードル高いかもしれません
- もし、分からなかったところや、つまずいたところがあったら、是
非共有してください(私の後学の為にも…)
■ いかがでしょうか？
管理者の人が使うダッシュボードは
↑のようなイメージ

- では、実際にInstantSearch.jsを使っていきましょう！
- スタイルシート(style.css)とJavaScript(app.js)は別ファイルで
② 滨苍蝉迟补苍迟厂别补谤肠丑.箩蝉の设定

- 少し話は逸れますが、Vanilla JSって？？

- スタイルシートは本題ではないのでコピー＆ペーストで

$ 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
npm や yarn を使っても良いかもしれませんが、今回は一旦 CDN上にあるJavaScriptファイルをロードする形にした
いと思います。例えば npm を使う場合の設定は以下。

- Visual Studio Code: Terminal->New Terminal
もし、ターミナルでパッケージマネージャーを使う場合、 Visual Studio Codeがオススメ？

- 2つのJavaScriptライブラリをHTMLでロードしてapp.jsの中で使っていきます
- 1. algoliasearch: JavaScriptのAPIクライアント
- 2. instantsearch: フロントエンドライブラリ
- InstantSearchのwidget用のCSSもロードします

- いよいよJavaScript(app.js)のコーディング
- InstantSearchのインスタンスを生成して、start() すると動
作が開始し、HTMLを開くとログを確認できます

- Index.html に test-widget というdivタグを追加
- app.js に InstantSearchのmenuというwidgetを追加
- HTMLで定義した test-widget に type 属性を表示
- testWidgetを InstantSearch に addWidget で追加
③ InstantSearch.jsのWidgetを追加
index.html
app.js

- const testWidgetに代入していたところを直接
search.addWidgetの中にしてコードを見通し良く :)
③ InstantSearch.jsののWidgetを追加

- HTMLファイルを開くと追加したWidgetが表示されています
- divタグで定義した test-widget に、InstantSearchの
menu widget が表示されている状態
③ InstantSearch.jsののWidgetを追加

1. InstantSearch.jsをロードして
2. 諸々設定
3. インスタンスを生成
4. Widgetを追加
5. search.start(); で検索
■ いかがでしょうか？
ココまで出来たら、後はInstantSearch.jsの様々なウィジェットを
使って楽しむだけ感あるので、もし、今までのところで、よく分からな
い部分等あれば教えてください！

- HTMLのbodyタグの中にheaderタグとmainタグを追加
- headerタグに searchbox
- main タグに hits
④ 検索バーを設置し結果を表示

- app.js に searchBox widgetを追加
- Containerは #searchbox
- HTMLを表示すると検索バーが確認できます

- 検索バーにplaceholderを追加
- app.jsのsearchBox widgetの設定の中に↓を追加
placeholder: “Search for products, brands for categories”

- app.js に hits widgetを追加
- containerで”#hits”を指定
- HTMLにヒットした結果が表示される

- hits widgetにテンプレート(mustache)の設定を追加
- name属性だけを表示。検索もできる
⑤ テンプレートを活用して結果を表示

- もう少しイイ感じにしていきましょう
- dataをテンプレートリテラルで
- Image, name, price, description を改行して表示

- 更にイイ感じにしていきます！
- ImageはURLなのでimageタグのsrc属性に
- nameはhit-titleというclass指定のdivの中で<h4>
- priceはpriceというclass指定のdivタグの中
- descriptionは普通にpタグ

- 何もヒットしなかった時はどうでしょうか？
- 少し味気ないので、テンプレートにemptyを追加しましょう
- 文言は何でもよろしいかと思いますが、目立つように<h1>で

- 入力した検索キーワードがどこでヒット？
- 例えば “AirPrint”
- どこでヒットしたのか分からない！
⑥ 検索キーワードをハイライト

- Algoliaはデフォルトでハイライトに関する情報をレスポンスに含めています
- Developer Toolsで見てみましょう

- CSSは既に用意されています (mark)
- InstantSearchのhightlightを活用します。まずはname

- descriptionもnameと同様に
- ${data.description} を以下のように

- ファセット表示用にレイアウト(index.html)を変更します
- <main> タグを以下のように
- left-columnを作って”brand”を追加
- right-columnはそのまま”hits”を移動させる
⑦ ファセットを導入してフィルタリング

- app.jsにファセット用のWidgetを追加します
- refinmentList←ファセット用のWidget
- left-columnに設置した”brand”に表示
- ファセットも検索できるように。プレースホルダは”Search for brands”

- ファセットが画面に表示されました
- デフォルトではファセットは件数が多いものから上に表示されます
- 選択されているものがある場合は選択されているものが一番上
- 振る舞いを変更したい場合はsortByオプションで

- 恐らく日本語化されないと思うので慣れていただけるとmm
- デフォルトは sortBy: [“isRefined”, ”count:desc”, “name:asc”]
- 選択されているものが一番上
- 次に件数が多いものが上
- 最後に名前の昇順
https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-sortby

- まずはDeveloper Toolsで階層構造をみてみましょう
- Network で XHR を選択
- Results -> 0 -> hits -> hierarchicalCategories
⑧ 阶层メニューを导入

- 階層メニューを表示するWidgetを追加しましょう
- まずはHTMLで表示用のコンテナを用意するところから
- Left-columnに categoriesを追加

- 階層メニューを表示するWidgetを追加しましょう
- app.jsは帰ってきたJSONにあわせて以下のようにaddWidget

- レンジで絞り込むWidgetを追加しましょう
- まずはHTMLから。left-columnにpriceを追加
⑨ 金额のレンジで绞り込み

- レンジで絞り込むWidgetを追加しましょう
- 続いてapp.jsにもWidgetを追加して画面表示

- 例えば Apple で絞り込んでいた場合のレンジ表示
- 何も数字を入力していない状態であれば、存在するデータに連
動します。この場合は9ドルから4000ドル。

- 色々選択し続けているとモワっとしてきますよね…
- ということで条件をクリアするWidgetを追加しましょう
- まずはHTMLのleft-columnにclear-allを設置
⑩ 设定したフィルタリング条件をクリア

- 色々選択し続けているとモワっとしてきますよね…
- ということで条件をクリアするWidgetを追加しましょう
- 続いてapp.jsに以下のように

- 何も選択されていない場合は表示されませんが、何かを選択する
とReset everythingボタンが出てきます！

- デフォルトですとHitしたもののBest 20を返すようになっています
? ページネーション

- ページネーションが必要なケース多いですよね。
InstantSearch.jsにはWidgetがあるので特別な実装は不要
- HTMLにコンテナを追加します。今回はright-column

- 続いてapp.jsにWidgetを追加してHTMLを開いていきます

- ユーザーに検索結果に関する情報を提供しましょう
- ひょっとしたら必ずしも必要ではないかもしれませんが…
- HTMLにコンテナを追加します。今回は検索バーの下に表示するので、<header>の
中に追加していきます
? statsを表示

- ユーザーに検索結果に関する情報を提供しましょう
- app.jsにもWidgetを追加してHTMLを開きます
- 何件ヒットして、取得に何ミリ秒かかったか表示してくれます :)
? statsを表示

- ハンズオンワークショップは以上で終了です！
- いかがだったでしょうか？
- 是非ご感想やスクリーンショットをSNSに投稿してください！
- #Algolia や #AlgoliaJP といったハッシュタグを付けていた
だけますとAlgoliaに関連する人たちが喜びます！
- ご参加いただき、ありがとうございました！！
■ お疲れさまでした！！

ANY QUESTIONS?
Thank you.
Eiji Shinohara
Senior Manager, Solutions Engineer
eiji@algolia.com
@shinodogg

狠狠撸

Getting Started Algolia with InstantSearch.js

More Related Content

Getting Started Algolia with InstantSearch.js