Algolia Best Practices Fall 2020

Serverless Meetup Japan Virtual #9 (爆速検索Algolia特集)の発表スライドです

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 検索エンジンと私
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Index LanguagesとQuery Languagesを日本語に
    

    View Slide

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

    View Slide

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

    View Slide

20. 『得意』で検索 → ジョンとニッキーがヒット
    例: レベルの降順にしたい
    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
    

    View Slide

21. Deliver experiences
    Search
    Index
    Algolia活用のフロー
    

    View Slide

22. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. 2017年12月
    CTO Night and Day in 金沢
    

    View Slide

28. 2017年12月
    CTO Night and Day in 金沢
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. Serverless Community
    と
    Algolia
    

    View Slide

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

    View Slide

42. Algoliaのベストプラクティス
    

    View Slide

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

    View Slide

44. 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
    

    View Slide

45. InstantSearchのWidgetの活用
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. Ease your
    contribution process
    with automation
    Vincent Voyer
    InstantSearch
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. Federated Search
    

    View Slide

55. Federated Search
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

62. 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
    

    View Slide

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

    View Slide

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

    View Slide

65. Algolia Advanced Analytics
    

    View Slide

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

    View Slide

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

    View Slide

68. AnalyticsのDashboardの例
    

    View Slide

69. A/B testing
    設定の異なる2つのインデックスにトラフィックを分散
    (例: 50-50, 70-30)させて、
    それぞれのAnalyticsの結果を比較する機能
    ※ クリックとコンバージョンのトラッキングが有効になっている必要があります
    設定による効果の比較例 :
    ● Query Rules
    ● Personalisation
    ● Synonyms
    ● Optional words
    ● Remove words if no result
    ● Hits per page
    

    View Slide

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

    View Slide

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

    View Slide