Tweet
Tweet

Slide 1

Slide 1 text

Algolia活用のベストプラクティス Eiji Shinohara Senior Manager, Solutions Engineer - Japan eiji@algolia.com @shinodogg #AlgoliaJP

Slide 2

Slide 2 text

What is Algolia? Search and Discovery - 爆速なフルマネージド型の検索ソリューショ ン - 全文検索だけではないフルスタックでカスタ マイズ可能な機能群 - Netflix, Amazon, Google等、業界のリー ダーたちが提供しているようなワールドクラ スのユーザー体験を素早く提供 - もちろん日本語にも対応しています！ Personalized first page Recommendations Voice Geo Interactions

Slide 3

Slide 3 text

C O N F I D E N T I A L …あらゆるプラットフォームに

Slide 4

Slide 4 text

C O N F I D E N T I A L ALGOLIA’S MISSION: 全ての企業が魅力的な Search and Discovery 体験を導入できるように

Slide 5

Slide 5 text

“欲しいものが簡単に見 つかる？” “結果を出すためのより 良いインサイトや管理 が出来る？” “簡単に実装/メンテで きるイノベーティブな もの？” ワールドクラスのユーザー体験 - End-user - 欲しいものに辿り着ける - レスポンスが高速である - Business-owner - メトリクスを管理しやすい - アイデアを簡単に形に - PDCAサイクルを回すことができる - Developer - 開発/運用が容易 - カスタマイズ可能

Slide 6

Slide 6 text

Algolia @ 日本 篠原 @shinodogg : Solutions Engineer 半田 @t2hnd : Support Engineer 前職で一緒にAWSの検索サービスを担当してた2人で Techな感じでやっています〜 #AlgoliaJP

Slide 7

Slide 7 text

Algolia Podcast - algolia.fm - 毎週Algoliaに関連する耳寄りな情報をお届けするPodcast - 新機能や新料金プランのご説明 - Webinarの日本語でのまとめ - 日本語に翻訳したブログの解説 - よくあるお客様からのお問い合わせ内容とその解決策 #AlgoliaJP

Slide 8

Slide 8 text

検索、、Googleみたいな感じ？

Slide 9

Slide 9 text

ホステッド型のサイト内検索 - Google検索はあなたのサイトにユーザーを誘導 - SEO重要 - 必要に応じてリスティング広告など - Algoliaはあなたのサイト内の検索 - 検索およびブラウジング機能 - 検索キーワードごとの振る舞いの変更 - ご自身で戦略を構築可能なパーソナライズ

Slide 10

Slide 10 text

検索エンジンと私

Slide 11

Slide 11 text

その昔… 検索キーワードに連動した広告コンテンツ (PR) を配信するお仕事をしていました。

Slide 12

Slide 12 text

Apache Solrという検索エンジンを当 時よく使っていました

Slide 13

Slide 13 text

なぜ MySQL や PostgreSQL のようなデータベースではなく、 検索エンジンを使おうと思ったのでしょうか？

Slide 14

Slide 14 text

id name lv comment 79854 トミー 7 趣味は筋トレ。100kgのベンチプレスを軽々上げる 79855 ニッキー 8 ピアノが得意な調理師免許保持者 79859 ジョン 6 サッカーが得意なスタジオミュージシャン 例えばこんなデータがあったとして…

Slide 15

Slide 15 text

例えばこんなデータがあったとして… SELECT name FROM people WHERE comment LIKE '%調理師%'; データの件数が少なかったり、アクセス頻度が低ければ大丈夫かもしれませんが…^^; id name lv comment 79854 トミー 7 趣味は筋トレ。100kgのベンチプレスを軽々上げる 79855 ニッキー 8 ピアノが得意な調理師免許保持者 79859 ジョン 6 サッカーが得意なスタジオミュージシャン

Slide 16

Slide 16 text

じゃあ、これAlgoliaに入れてみましょう ■ TSV(タブ区切り)ファイルにしてIndexを作ってUpload id name lv comment 79854 トミー 7 趣味は筋トレ。100kgのベンチプレスを軽々上げる 79855 ニッキー 8 ピアノが得意な調理師免許保持者 79859 ジョン 6 サッカーが得意なスタジオミュージシャン

Slide 17

Slide 17 text

Index LanguagesとQuery Languagesを日本語に

Slide 18

Slide 18 text

『ピアノ 調理師』で検索 → ニッキーがヒット

Slide 19

Slide 19 text

『得意』で検索 → ジョンとニッキーがヒット

Slide 20

Slide 20 text

『得意』で検索 → ジョンとニッキーがヒット 例: レベルの降順にしたい AlgoliaでのSorting and Ranking - Sorting: 事前にソート済みの Replica Indexを 作成 - Custom Ranking: Textual Relevanceの処 理を行った後に並べ替えを行う https://www.algolia.com/doc/guides/managing-results/refine-results/sorting/#sorting-vs-ranking

Slide 21

Slide 21 text

Deliver experiences Search Index Algolia活用のフロー

Slide 22

Slide 22 text

Serverless で Algolia に Indexing https://speakerdeck.com/miup/algolia-with-firebase?slide=19 Algolia with Firebase @ komerco Cloud Functionsを使ってAlgoliaにIndexing https://firebase.google.com/docs/firestore/solutions/search

Slide 23

Slide 23 text

https://resources.algolia.com/home/devvirtualevent-thetimesinternalsearch-publishers Serverless で Algolia に Indexing How The Times improves digital newsroom productivity with Algolia AWS Lambdaを使ってAlgoliaにIndexing ウェブサイトの編集者が沢山の記事の 中から最適なものを見つけてページを 組み立てていく

Slide 24

Slide 24 text

それでは、そろそろ ”爆速”に関するお話をしましょう

Slide 25

Slide 25 text

https://www.youtube.com/watch?v=Fz1zyvcWBTo

Slide 26

Slide 26 text

Milliseconds Matter ミリ(1/1000)秒が重要って話

Slide 27

Slide 27 text

2017年12月 CTO Night and Day in 金沢

Slide 28

Slide 28 text

2017年12月 CTO Night and Day in 金沢

Slide 29

Slide 29 text

Algolia社員がよく使ってる壁紙 “MILLISECONDS MATTER”

Slide 30

Slide 30 text

17 Regions 70+ Data centers Offices Infrastructure Regions Global Availability across 17 regions worldwide

Slide 31

Slide 31 text

17 Regions 70+ Data centers Offices Infrastructure Regions Global Availability across 17 regions worldwide - 世界中のどこからアクセスされても低レイテンシを実現 - 光の速さは超えられない - 日本は東京と大阪にデータセンター - エンドユーザーのブラウザ/アプリに出来るだけ近く

Slide 32

Slide 32 text

Algolia検索に最適化されたサーバークラスタ http://highscalability.com/blog/2015/3/9/the-architecture-of-algolias-distributed-search-network.html https://stories.algolia.com/algolia-s-fury-road-to-a-worldwide-api-c1536c46f3a5

Slide 33

Slide 33 text

いくつかトピックをご紹介 - 1つでもネットワークレイヤーの数を少なく！ - ロードバランサーではなくDNSラウンドロビン (Smart Algolia Client) - QueryおよびIndexing処理のメモリマネージメントは自分たちで - C++で実装。Nginxのプラグインとして稼働 - 基本的にはIndexの全ての情報をメモリに載せる - Premiumプランのadd-onとして物理サーバークラスタを選択可能 - 仮想化のオーバーヘッドがミリsecの遅延をもたらす可能性 - フルに筐体の全リソースを使いきる - オンプレのリソースに載りきらないケースではクラウドのベアメタルも選択可能

Slide 34

Slide 34 text

2012年にモバイルの検索エンジンとし てスタート ⏤ Mobile SDK ⏤ APIやインターネット接続は不要 ⏤ Indexingも検索もモバイルデバイス上で ⏤ Android端末やiPhone 3Gなどで動作

Slide 35

Slide 35 text

2013年前半に, Hosted Search API にピボット ⏤ モバイルと同じコードでサーバーで稼働 ⏤ Authenticated REST API ⏤ High-availability はまだ実装されていなかっ た ⏤ パフォーマンスにフォーカスするために物理 サーバーを選択 RAM: 32GB Proc: 4 cores, 3.4-3.8 GHz SSD: 2x120 GB Raid-0

Slide 36

Slide 36 text

https://www.slideshare.net/saasisbeautiful/s-36291627

Slide 37

Slide 37 text

Algoliaインフラの今までの変遷

Slide 38

Slide 38 text

Algoliaインフラの今までの変遷 ServerlessのMeetupなのであまり多くは語りませんが、 お客様がサーバーとかスケールとか意識しなくても良いように 日々頑張っています！！

Slide 39

Slide 39 text

ブログからどんな風に運用しているのか垣間見ることができます https://shinodogg.com/2020/05/08/salt-incident-may-3rd-2020 -retrospective-and-update/ https://shinodogg.com/2020/06/05/may-30-ssl-incident/

Slide 40

Slide 40 text

Serverless Community と Algolia

Slide 41

Slide 41 text

SERVERLESS CONF - LONDON ‘16 私のHiring Managerでありメンター。 去年お子さんが産まれて、最近パリからボル ドーに引っ越しました :) https://www.youtube.com/watch?v=YfR9oyzoWbc ServerをLessに！

Slide 42

Slide 42 text

Algoliaのベストプラクティス

Slide 43

Slide 43 text

InstantSearch > Open Source の Search UI ライブラリ > Algolia のフロントエンド用に実装されている > ベストプラクティスとGood Designをパッケージ化 > カスタマイズが容易

Slide 44

Slide 44 text

InstantSearch <-> Algolia REST API - ブラウザ/モバイルアプリから直接APIへ検索リクエスト - 検索リクエストに関してCMS等のバックエンドは考慮する必要が ないためHeadlessな構成と非常に相性が良い - データの登録やインデックスの設定は各種クライアントライブラ リ、プラグイン、Dashboardで！ Connectors ・Algolia for Zendesk ・Algolia for Shopify ・Algolia for Magento ・Algolia for SFCC ・Algolia for Netlify Algolia API と InstantSearch Algolia API Clients ・Android ・PHP ・Ruby ・JavaScript ・Python ・Kotlin ・.Net ・Java ・Golang ・Scala ・iOS Helpers API Clients JS / iOS / Android Algolia Crawler Algolia WordPress Plugin Gatsby plugin Algolia RetryやDNSの名前解決 のtimeout制御など New

Slide 45

Slide 45 text

InstantSearchのWidgetの活用

Slide 46

Slide 46 text

InstantSearchのWidgetの活用 例えば、キーワードで検索したけどヒットした結 果が多過ぎる場合などに便利です。

Slide 47

Slide 47 text

InstantSearchのWidgetの活用 他にも、カテゴリで絞り込んだり、価格で絞り込 んだりといったユースケースもよくお見かけしま す。

Slide 48

Slide 48 text

InstantSearch - Widgets Showcase https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/js/

Slide 49

Slide 49 text

InstantSearch - Widgets Showcase https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/js/

Slide 50

Slide 50 text

Ease your contribution process with automation Vincent Voyer InstantSearch

Slide 51

Slide 51 text

Unified InstantSearch for E-commerce 最も簡単にeコマース用の Search & Discovery体験を構築する方法

Slide 52

Slide 52 text

Unified InstantSearch for E-commerce https://ranqueen.ninja/ フロントはAmazon S3 に、 HTML/JavaScript/CSSが 配置されているだけ

Slide 53

Slide 53 text

Unified InstantSearch for E-commerce https://github.com/algolia/unified-instantsearch-ecommerce/wiki https://shinodogg.com/2020/05/15/unified-instantsearch/ 導入は難しくありませんし、 使い方のWikiを日本語に翻訳したものも あります。

Slide 54

Slide 54 text

Federated Search

Slide 55

Slide 55 text

Federated Search

Slide 56

Slide 56 text

Federated Search 人気 高レーティング セール中 人気 高レーティング セール中

Slide 57

Slide 57 text

Algolia Pricing 1000回の検索リクエストで 1ユニット

Slide 58

Slide 58 text

Federated SearchでのSearch Request - 2020年7月以前の旧料金プランでは複数のIndexに対するアクセスに関して、 それぞれのIndex毎にSearch Operationsとしてカウントしていた - 新しくなった料金プランでは、複数のIndexに対するアクセスでも、Federated Searchの場合、1つのSearch Requestとしてカウント - 特にas-you-type search(1文字入力毎の検索)の場合、差が顕著に

Slide 59

Slide 59 text

Query Suggestions ■ Standardプランでも使えます(旧料金プランではEnterprise契約が必要でした) ※ Algoliaが日次で検索クエリを元に Indexを構築

Slide 60

Slide 60 text

Query Suggestions ■ メインのIndexとサジェスチョン用IndexのFederated Search

Slide 61

Slide 61 text

Algoliaにおける 検索結果の表示順の調整

Slide 62

Slide 62 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 63

Slide 63 text

Personalizationを有効にする場合: ─ 自動的にユーザーの行動履歴によって検索結果がカスタマイズされる ─ より適合性/関連性が高まりクリックやコンバージョン数が増える AlgoliaのPersonalization eコマースの例: “harry”で検索 ─ ハリーポッターの本が表示されて嬉しい 人 ─ Prince Harryに関連するグッズが表示 されると嬉しい人

Slide 64

Slide 64 text

Personalizationの設定: ─ イベントによる重み付けのカスタマイズ ─ パーソナライズ前後の検索結果の比較が可能 AlgoliaのPersonalization

Slide 65

Slide 65 text

Algolia Advanced Analytics

Slide 66

Slide 66 text

● Total Searches: 検索実行数 (as-you-typeはアグリゲート) ● Users: 検索を実行したユニークユーザー数 ● No results rate: ‘no results’(検索結果なし)の割合 ● CTR (click-through-rate): 検索を実行した後のクリックの割合 ● Conversion rate: 検索結果が最終的にconversion(購買など)に結びついた割合 ● Click position: 検索結果のどのポジションでクリックがされているかの平均 AnalyticsのDashboardの例

Slide 67

Slide 67 text

AnalyticsのDashboardの例 直近の検索トレンド クリックポジションの 平均値の比較

Slide 68

Slide 68 text

AnalyticsのDashboardの例

Slide 69

Slide 69 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 70

Slide 70 text

素晴らしい体験の提供を 元にリアルな結果を！ Deliver great experiences that deliver real results. 開発者 More time to innovate ビジネスオーナー Optimized for key metrics エンドユーザー Fast, relevant and amazing

Slide 71

Slide 71 text

ありがとうございました！ Eiji Shinohara Senior Manager, Solutions Engineer - Japan eiji@algolia.com @shinodogg #AlgoliaJP