Slide 1
Slide 1 text
Algolia 入門
2020年 秋
Eiji Shinohara
Senior Manager, Solutions Engineer - Japan
[email protected]
@shinodogg
#AlgoliaJP
Slide 2
Slide 2 text
Q. Algoliaとは？
Slide 3
Slide 3 text
A. 爆速なSearch and Discovery
プラットフォームです
Slide 4
Slide 4 text
Q. Search and Discovery?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Q. Algoliaってどうやって使うの？
Slide 7
Slide 7 text
A. SDKやAPIを使ったり、ノーコードでやり
くりすることもできます
Slide 8
Slide 8 text
簡単なデモ
Slide 9
Slide 9 text
algolia.com に行き Dashboard へ
(事前にアカウント登録必要 -> クレジットカード無くてOK)
Slide 10
Slide 10 text
Applicationを作成
(ApplicationはIndexを束ねるような概念)
Slide 11
Slide 11 text
お近くのデータセンターを選択
(1クラスタ=3つのサーバー。日本は東京と大阪にデータセンターがある)
Slide 12
Slide 12 text
Indexを作成
(インデックス -> 概念的には本についてる索引のようなもの)
Slide 13
Slide 13 text
レコードを作成してアップロード
(JSON, CSV, またはTSV)
■ 例えばこんなデータがExcelにあったとする
タブ区切りテキストで保存する時の拡張
子は“.tsv”でお願いしますmm
Slide 14
Slide 14 text
レコードを作成してアップロード
(JSON, CSV, またはTSV)
■ demo.tsvをドラッグ・アンド・ドロップでアップロード
Slide 15
Slide 15 text
Dashboard上で検索
■ yama と入力すると Yamanashi にヒット
Slide 16
Slide 16 text
いかがだったでしょうか？
● プログラムは書いていません
● APIは叩いていません
でも… Dashboardの裏側では、、
● アップロードされたファイルを読み込んで、データを抽出し
て、それを登録するAPIが叩かれています
● 入力された文字列を元に検索クエリを実行するAPIが叩
かれています
Slide 17
Slide 17 text
つまり何が言いたいかというと…
● Algolia - Search & Discovery? SaaS? API?
- 表現の仕方は色々あるかもしれませんが、実態はとてもシ
ンプルな検索エンジンです
- ご覧いただいた通り、Dashboardをポチポチ
していただくだけで使い始めることができます
検索エンジンのインストールや難しいサーバーの
設定等は不要です
Slide 18
Slide 18 text
Q. Algoliaって日本法人あるの？
Slide 19
Slide 19 text
Algolia @ 日本
篠原 @shinodogg : Solutions Engineer
半田 @t2hnd : Support Engineer
前職で一緒にAWSの検索サービス担当してた2人で
Techな感じでやっています〜
#AlgoliaJP
Slide 20
Slide 20 text
Algolia Podcast
- algolia.fm
- 毎週Algoliaに関連する耳寄りな情報をお届けするPodcast
- 新機能や新料金プランのご説明
- Webinarの日本語でのまとめ
- 日本語に翻訳したブログの解説
- よくあるお客様からのお問い合わせ内容とその解決策
#AlgoliaJP
Slide 21
Slide 21 text
Q. Algoliaの特徴は？
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
SaaStr Founder & CEO
Jason Lemkinさん
https://resources.algolia.com/home/virtualevent-saasexpertsaastr
『Algoliaの一番の特徴は”爆速”なところ！』
Slide 24
Slide 24 text
Milli-Sec Matter!
https://www.algolia.com/doc/faq/why/how-fast-is-algolia/
Slide 25
Slide 25 text
なぜ、そんなに速いの？？
- コレを語りだすと1セッションくらいの時間が必要…笑
- キーワード
- ネットワークレイヤーの数をとにかく少なく！
- ロードバランサーではなくDNSラウンドロビン
- 稼働するアプリケーションのメモリマネージメントは自分たちで
- C++で実装。Nginxのプラグインとして稼働
- 最上位プラン(Premiumプランのadd-on)では物理サーバー
- 仮想化のオーバーヘッドがミリsecの遅延をもたらす可能性
- フルに筐体の全リソースを使いきる
- オンプレのリソースに載りきらないケースではクラウドのベアメタルも選択肢
Slide 26
Slide 26 text
コラム: 速さと安定稼働
Algolia's Fury Road to a Worldwide API
(Co-Founder CTOのJulienに紹介されて、Algoliaに転職しようと思うキッカケになった話)
Slide 27
Slide 27 text
Q. Jamstack? Headless??
Slide 28
Slide 28 text
InstantSearchを
ご紹介させてください
Slide 29
Slide 29 text
Ease your
contribution process
with automation
Vincent Voyer
InstantSearch
Slide 30
Slide 30 text
- Algoliaがオープンソースとして開発しているFrontend UIライブラリ
- ウィジェットを追加していく形で、searchBox, pagination, infiniteHits,
hierarchicalMenu, rangeSlidebar, stats, poweredBy,
breadcrump,,, 等々、様々なコンポーネントによる優れた検索体験を簡単に
構築可能
InstantSearchとは
Slide 31
Slide 31 text
InstantSearch - Widget Showcase
https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/js/
■ 実際に触ってWidgetの動作を確かめることができます
Slide 32
Slide 32 text
■ eコマース向けのInstantSearch
Unified InstantSearch E-Commerce
Slide 33
Slide 33 text
- ranqueen.ninja
私が作ったeコマースのデモサイト
Amazon S3上に3つファイルがあるだけ
Unified InstantSearch
for e-commerce
Slide 34
Slide 34 text
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制御など
Slide 35
Slide 35 text
Algolia API と InstantSearch
- 例えば、カテゴリーやショップ名の
ファセット
- 自分でJSONを元にUIを構築する
より圧倒的に効率的
- OSSならではの活発な開発
Slide 36
Slide 36 text
Federated Search
Slide 37
Slide 37 text
Federated Search
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
Federated Search - Easy to build
人気
高レーティング
セール中
人気
高レーティング
セール中
Slide 40
Slide 40 text
Algolia Pricing
1000回の検索リクエストで
1ユニット
Slide 41
Slide 41 text
Federated SearchでのSearch Request
- 2020年7月以前の旧料金プランでは複数のIndexに対するアクセスに関して、
それぞれのIndex毎にSearch Operationsとしてカウントしていた
- 新しくなった料金プランでは、複数のIndexに対するアクセスでも、Federated
Searchの場合、1つのSearch Requestとしてカウント
- 特にas-you-type search(1文字入力毎の検索)の場合、差が顕著に
Slide 42
Slide 42 text
Query Suggestions
■ Standardプランでも使えます(旧料金プランではEnterprise契約が必要でした)
※ Algoliaが日次で検索クエリを元に Indexを構築
Slide 43
Slide 43 text
Query Suggestions
■ メインのIndexとサジェスチョン用IndexのFederated Search
Slide 44
Slide 44 text
Q. Algoliaへのデータの登録は？
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
大規模なWebサイトにおいては、データを一箇所に集め
るのも難しいかもしれない
複数のプラットフォーム 複数の組織 複数の言語
CMS
DB
...
Slide 47
Slide 47 text
Browse
Webサイトのブラウズ
Extract
必要な情報の抽出
Send
Algoliaへのデータ送信
The Algolia Crawler
パワフル & カスタマイズ可能
Slide 48
Slide 48 text
The Algolia Crawler
パワフル & カスタマイズ可能
HTML以外もクロール
.pdf, .doc, .xls, .ppt
動的コンテンツのクロール
JavaScriptのon the flyな
レンダリング
外部データの活用
ビジネスメトリクスとしてのGoogle
AnalyticsやCSVファイル
Authenticates
クレデンシャルでの認証
Webサイトの編集は不要
タグの追加や変更をする必要がない
Slide 49
Slide 49 text
Q. Algoliaの検索は日本語も扱えるの？
Slide 50
Slide 50 text
A. はい、日本語オッケーです!!
Slide 51
Slide 51 text
Language -> Index / Query Languages で “Japanese” を設定
Algoliaにおける日本語の設定
Slide 52
Slide 52 text
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の日本語関連ロードマップ
Slide 53
Slide 53 text
Q. 検索結果の表示順の調整
ってどうするの？
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
Personalizationを有効にする場合:
─ 自動的にユーザーの行動履歴によって検索結果がカスタマイズされる
─ より適合性/関連性が高まりクリックやコンバージョン数が増える
AlgoliaのPersonalization
eコマースの例: “harry”で検索
─ ハリーポッターの本が表示されて嬉しい
人
─ Prince Harryに関連するグッズが表示
されると嬉しい人
Slide 56
Slide 56 text
Personalizationの設定:
─ イベントによる重み付けのカスタマイズ
─ パーソナライズ前後の検索結果の比較が可能
AlgoliaのPersonalization
Slide 57
Slide 57 text
Q. 分析できるの？
Slide 58
Slide 58 text
● Total Searches: 検索実行数 (as-you-typeはアグリゲート)
● Users: 検索を実行したユニークユーザー数
● No results rate: ‘no results’(検索結果なし)の割合
● CTR (click-through-rate): 検索を実行した後のクリックの割合
● Conversion rate: 検索結果が最終的にconversion(購買など)に結びついた割合
● Click position: 検索結果のどのポジションでクリックがされているかの平均
AnalyticsのDashboardの例
Slide 59
Slide 59 text
AnalyticsのDashboardの例
直近の検索トレンド
クリックポジションの
平均値の比較
Slide 60
Slide 60 text
AnalyticsのDashboardの例
Slide 61
Slide 61 text
A/B testing
設定の異なる2つのインデックスにトラフィックを分散
(例: 50-50, 70-30)させて、
それぞれのAnalyticsの結果を比較する機能
※ クリックとコンバージョンのトラッキングが有効になっている必要があります
設定による効果の比較例 :
● Query Rules
● Personalisation
● Synonyms
● Optional words
● Remove words if no result
● Hits per page
Slide 62
Slide 62 text
Search and Discovery
体験への期待値の高まり
Slide 63
Slide 63 text
モダンな検索体験
- 様々なサービスに対応
- 素早く動作し高い完成
度
Slide 64
Slide 64 text
多種多様な技術要素
- いわゆる全文検索
だけではない
- パーソナライズ
- 音声
- 位置情報 など
Personalized
first page
Recommendations
Voice
Geo
Interactions
Slide 65
Slide 65 text
最高のユーザー体験を
構築/運用することは
難しい
Slide 66
Slide 66 text
検索サービスの構築/運用
- エンドユーザー
- ビジネスオーナー
- 開発者
どれか1つでも
欠けてはいけない
“欲しいものが簡単に見
つかる？”
“結果を出すためのより
良いインサイトや管理が
出来る？”
“簡単に実装/メンテでき
るイノベーティブなも
の？”
Slide 67
Slide 67 text
C O N F I D E N T I A L
求められるバー
は高い
And the bar
keeps getting
higher
Slide 68
Slide 68 text
C O N F I D E N T I A L
ALGOLIA
全ての企業に快適な
Search and Discovery
体験を！
Slide 69
Slide 69 text
Search-as-a-Service としての迅速なイノベーション
Slide 70
Slide 70 text
Visual Editor (launched in 2020)
- エンジニアに作業依頼をしなくても、カテゴリのブーストや特定
アイテムの表示位置固定化などが簡単に実現可能
- 設定内容の効果の検証はAnalyticsやA/B Testingで
Slide 71
Slide 71 text
素晴らしい体験の提供を
元にリアルな結果を！
Deliver
great experiences
that deliver
real results.
開発者
More time to
innovate
ビジネスオーナー
Optimized for
key metrics
エンドユーザー
Fast, relevant and
amazing
Slide 72
Slide 72 text
ありがとうございました！
Eiji Shinohara
Senior Manager, Solutions Engineer - Japan
[email protected]
@shinodogg
#AlgoliaJP