Algolia 2020 Autumn

Search and DiscoveryプラットフォームであるAlgoliaのベーシックな使い方から、オープンソースのフロントエンドライブラリのInstantSearchを活用した爆速な検索体験の構築方法、日本語の取り扱い、検索結果のチューニングおよびパーソナライズ、検索に関連するデータの高度な分析まで、エンドユーザー/開発者/ビジネスオーナーを支える技術を幅広くご紹介させていただきます。

Transcript

1. Algolia 入門 2020年 秋 Eiji Shinohara Senior Manager, Solutions Engineer - Japan eiji@algolia.com @shinodogg #AlgoliaJP
2. Q. Algoliaとは？
3. A. 爆速なSearch and Discovery プラットフォームです
4. Q. Search and Discovery?
6. Q. Algoliaってどうやって使うの？
7. A. SDKやAPIを使ったり、ノーコードでやり くりすることもできます
8. 簡単なデモ
9. algolia.com に行き Dashboard へ (事前にアカウント登録必要 -> クレジットカード無くてOK)
10. Applicationを作成 (ApplicationはIndexを束ねるような概念)
11. お近くのデータセンターを選択 (1クラスタ=3つのサーバー。日本は東京と大阪にデータセンターがある)
12. Indexを作成 (インデックス -> 概念的には本についてる索引のようなもの)
13. レコードを作成してアップロード (JSON, CSV, またはTSV) ▪ 例えばこんなデータがExcelにあったとする タブ区切りテキストで保存する時の拡張 子は“.tsv”でお願いしますmm
14. レコードを作成してアップロード (JSON, CSV, またはTSV) ▪ demo.tsvをドラッグ・アンド・ドロップでアップロード
15. Dashboard上で検索 ▪ yama と入力すると Yamanashi にヒット
16. いかがだったでしょうか？ • プログラムは書いていません • APIは叩いていません でも… Dashboardの裏側では、、 • アップロードされたファイルを読み込んで、データを抽出し て、それを登録するAPIが叩かれています • 入力された文字列を元に検索クエリを実行するAPIが叩 かれています
17. つまり何が言いたいかというと… • Algolia - Search & Discovery? SaaS? API? - 表現の仕方は色々あるかもしれませんが、実態はとてもシ ンプルな検索エンジンです - ご覧いただいた通り、Dashboardをポチポチ 　 していただくだけで使い始めることができます 　 検索エンジンのインストールや難しいサーバーの 　 設定等は不要です
18. Q. Algoliaって日本法人あるの？
19. Algolia @ 日本 篠原 @shinodogg : Solutions Engineer 半田 @t2hnd : Support Engineer 前職で一緒にAWSの検索サービス担当してた2人で Techな感じでやっています〜 #AlgoliaJP
20. Algolia Podcast - algolia.fm - 毎週Algoliaに関連する耳寄りな情報をお届けするPodcast - 新機能や新料金プランのご説明 - Webinarの日本語でのまとめ - 日本語に翻訳したブログの解説 - よくあるお客様からのお問い合わせ内容とその解決策 #AlgoliaJP
21. Q. Algoliaの特徴は？
22. A. 爆速です!!! https://medium.com/@takeshiamano/algolia%E3%81%A7%E7%88%86%E9%80%9F%E6%A4%9C% E7%B4%A2%E3%81%AE%E4%BA%8B%E4%BE%8B-c438fcaead8e https://speakerdeck.com/kenfdev/algolia-search-is-really-fast https://dev.classmethod.jp/articles/algolia-1st-impression/ https://techracho.bpsinc.jp/hachi8833/2018_06_20/57589 https://qiita.com/tschy/items/eefbb3a0dc60cd11ab9a https://tech.libinc.co.jp/entry/2019/08/09/182701
23. SaaStr Founder & CEO Jason Lemkinさん https://resources.algolia.com/home/virtualevent-saasexpertsaastr 『Algoliaの一番の特徴は”爆速”なところ！』
24. Milli-Sec Matter! https://www.algolia.com/doc/faq/why/how-fast-is-algolia/
25. なぜ、そんなに速いの？？ - コレを語りだすと1セッションくらいの時間が必要…笑 - キーワード - ネットワークレイヤーの数をとにかく少なく！ - ロードバランサーではなくDNSラウンドロビン - 稼働するアプリケーションのメモリマネージメントは自分たちで - C++で実装。Nginxのプラグインとして稼働 - 最上位プラン(Premiumプランのadd-on)では物理サーバー - 仮想化のオーバーヘッドがミリsecの遅延をもたらす可能性 - フルに筐体の全リソースを使いきる - オンプレのリソースに載りきらないケースではクラウドのベアメタルも選択肢
26. コラム: 速さと安定稼働 Algolia's Fury Road to a Worldwide API (Co-Founder CTOのJulienに紹介されて、Algoliaに転職しようと思うキッカケになった話)
27. Q. Jamstack? Headless??
28. InstantSearchを ご紹介させてください
29. Ease your contribution process with automation Vincent Voyer InstantSearch
30. - Algoliaがオープンソースとして開発しているFrontend UIライブラリ - ウィジェットを追加していく形で、searchBox, pagination, infiniteHits, hierarchicalMenu, rangeSlidebar, stats, poweredBy, breadcrump,,, 等々、様々なコンポーネントによる優れた検索体験を簡単に 構築可能 InstantSearchとは
31. InstantSearch - Widget Showcase https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/js/ ▪ 実際に触ってWidgetの動作を確かめることができます
32. ▪ eコマース向けのInstantSearch Unified InstantSearch E-Commerce
33. - ranqueen.ninja 　　私が作ったeコマースのデモサイト 　　Amazon S3上に3つファイルがあるだけ Unified InstantSearch for e-commerce
34. InstantSearch.js <-> Algolia REST API - ブラウザ/モバイルアプリから直接APIへ検索リクエスト - 検索リクエストに関してCMS等のバックエンドは考慮する必要が ないためHeadlessな構成と非常に相性が良い - データの登録やインデックスの設定は各種クライアントライブラ リ、プラグイン、Dashboardで！ Connectors ・Algolia for Zendesk ・Algolia for Shopify ・Algolia for Magento ・Algolia for SFCC Algolia API Clients ・Android ・PHP ・Ruby ・JavaScript ・Python ・Kotlin ・.Net ・Java ・Golang ・Scala ・iOS Algolia API と InstantSearch Helpers API Clients JS / iOS / Android Algolia Crawler Algolia WordPress Plugin Gatsby plugin Algolia RetryやDNSの名前解決 のtimeout制御など
35. Algolia API と InstantSearch - 例えば、カテゴリーやショップ名の ファセット - 自分でJSONを元にUIを構築する より圧倒的に効率的 - OSSならではの活発な開発
36. Federated Search
37. Federated Search
38. Federated Search Reference Architecture Blog: Shifter Static Shop: Shifter Headless blog.xxx.com Blog indexing Shop indexing Algolia Indices - Blog - Shop xxx.com WordPress　　　　　　　 カテゴリ - プログラミング - デザイン - ブログ 著者 - 山田太郎 - 佐藤二郎 価格 500円　　 2800円 「書籍」 1. WordPress入門 980円 　山田太郎 　買い物かごへ追加　♡ 2. WordPressデザイン 1300円 　佐藤二郎 　買い物かごへ追加　♡ 3. WordPressの開発 2250円 　高橋三郎 　買い物かごへ追加　♡ 　　　　1 2 3 … 7 8 9 「ブログ」 ・WordPressやってみた URL: blog.xxx.com/getstarted ・おすすめWPプラグイン URL: blog.xxx.com/plugin ・WordPress開発 その1 URL: blog.xxx.com/dev ・WordPress入門書評 URL: blog.xxx.com/review ・ShifterでWordPress URL: blog.xxx.com/shifter 価格: 980円 評価: ★★★ 在庫: 残り10 送料: 無料 配送: 翌日 ---- 山田太郎による WordPressの 決定版! WordPress入門 ログイン VIEW MORE 書籍 (198) VIEW MORE ブログ (86) ID Service Shopping Cart
39. Federated Search - Easy to build 人気 高レーティング セール中 人気 高レーティング セール中
40. Algolia Pricing 1000回の検索リクエストで 1ユニット
41. Federated SearchでのSearch Request - 2020年7月以前の旧料金プランでは複数のIndexに対するアクセスに関して、 それぞれのIndex毎にSearch Operationsとしてカウントしていた - 新しくなった料金プランでは、複数のIndexに対するアクセスでも、Federated Searchの場合、1つのSearch Requestとしてカウント - 特にas-you-type search(1文字入力毎の検索)の場合、差が顕著に
42. Query Suggestions ▪ Standardプランでも使えます(旧料金プランではEnterprise契約が必要でした) ※ Algoliaが日次で検索クエリを元に Indexを構築
43. Query Suggestions ▪ メインのIndexとサジェスチョン用IndexのFederated Search
44. Q. Algoliaへのデータの登録は？
46. 大規模なWebサイトにおいては、データを一箇所に集め るのも難しいかもしれない 複数のプラットフォーム 複数の組織 複数の言語 CMS DB ...
47. Browse Webサイトのブラウズ Extract 必要な情報の抽出 Send Algoliaへのデータ送信 The Algolia Crawler パワフル & カスタマイズ可能
48. The Algolia Crawler パワフル & カスタマイズ可能 HTML以外もクロール .pdf, .doc, .xls, .ppt 動的コンテンツのクロール JavaScriptのon the flyな レンダリング 外部データの活用 ビジネスメトリクスとしてのGoogle AnalyticsやCSVファイル Authenticates クレデンシャルでの認証 Webサイトの編集は不要 タグの追加や変更をする必要がない
49. Q. Algoliaの検索は日本語も扱えるの？
50. A. はい、日本語オッケーです!!
51. Language -> Index / Query Languages で “Japanese” を設定 Algoliaにおける日本語の設定
52. Algolia Japanese language related capabilities [Done] 形態素解析 - Tokenization / Morphological Analysis - Built with Clang-based Kuromoji technology - Dictionary: UniDic [Doing] Transliteration β - 漢字⇔カタカナ⇔ひらがな [Doing] Typeahead β - Query Suggestionの日本語サポート [Doing] Custom Dictionary - 形態素解析辞書のカスタマイズ Algoliaの日本語関連ロードマップ
53. Q. 検索結果の表示順の調整 ってどうするの？
54. C O N F I D E N T I A L Searchable Attributes ▪ 上位定義の属性が優先 e.g. title, author ▪ Ordered/Unordered 属性の中でマッチしたポジションを ランキングの考慮に入れるかどうか Ranking and sorting ▪ Textural e.g. typo, filter, proximity, attribute,, ▪ Custom Ranking e.g. 人気スコア, 在庫数 ▪ Sort-by 事前にソートする。レプリカインデック スを作成して適応 AlgoliaのベーシックなRelevancy
55. Personalizationを有効にする場合: ─ 自動的にユーザーの行動履歴によって検索結果がカスタマイズされる ─ より適合性/関連性が高まりクリックやコンバージョン数が増える AlgoliaのPersonalization eコマースの例: “harry”で検索 ─ ハリーポッターの本が表示されて嬉しい 人 ─ Prince Harryに関連するグッズが表示 されると嬉しい人
56. Personalizationの設定: ─ イベントによる重み付けのカスタマイズ ─ パーソナライズ前後の検索結果の比較が可能 AlgoliaのPersonalization
57. Q. 分析できるの？
58. • Total Searches: 検索実行数 (as-you-typeはアグリゲート) • Users: 検索を実行したユニークユーザー数 • No results rate: ‘no results’(検索結果なし)の割合 • CTR (click-through-rate): 検索を実行した後のクリックの割合 • Conversion rate: 検索結果が最終的にconversion(購買など)に結びついた割合 • Click position: 検索結果のどのポジションでクリックがされているかの平均 AnalyticsのDashboardの例
59. AnalyticsのDashboardの例 直近の検索トレンド クリックポジションの 平均値の比較
60. AnalyticsのDashboardの例
61. A/B testing 設定の異なる2つのインデックスにトラフィックを分散 (例: 50-50, 70-30)させて、 それぞれのAnalyticsの結果を比較する機能 ※ クリックとコンバージョンのトラッキングが有効になっている必要があります 設定による効果の比較例 : • Query Rules • Personalisation • Synonyms • Optional words • Remove words if no result • Hits per page
62. Search and Discovery 体験への期待値の高まり
63. モダンな検索体験 - 様々なサービスに対応 - 素早く動作し高い完成 度
64. 多種多様な技術要素 - いわゆる全文検索 だけではない - パーソナライズ - 音声 - 位置情報 など Personalized first page Recommendations Voice Geo Interactions
65. 最高のユーザー体験を 構築/運用することは 難しい
66. 検索サービスの構築/運用 - エンドユーザー - ビジネスオーナー - 開発者 どれか1つでも 欠けてはいけない “欲しいものが簡単に見 つかる？” “結果を出すためのより 良いインサイトや管理が 出来る？” “簡単に実装/メンテでき るイノベーティブなも の？”
67. C O N F I D E N T I A L 求められるバー は高い And the bar keeps getting higher
68. C O N F I D E N T I A L ALGOLIA 全ての企業に快適な Search and Discovery 体験を！
69. Search-as-a-Service としての迅速なイノベーション
70. Visual Editor (launched in 2020) - エンジニアに作業依頼をしなくても、カテゴリのブーストや特定 アイテムの表示位置固定化などが簡単に実現可能 - 設定内容の効果の検証はAnalyticsやA/B Testingで
71. 素晴らしい体験の提供を 元にリアルな結果を！ Deliver great experiences that deliver real results. 開発者 More time to innovate ビジネスオーナー Optimized for key metrics エンドユーザー Fast, relevant and amazing
72. ありがとうございました！ Eiji Shinohara Senior Manager, Solutions Engineer - Japan eiji@algolia.com @shinodogg #AlgoliaJP