Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Algolia 2020 Autumn

Eiji Shinohara
September 09, 2020

Algolia 2020 Autumn

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

Eiji Shinohara

September 09, 2020
Tweet

More Decks by Eiji Shinohara

Other Decks in Technology

Transcript

  1. Algolia 入門
    2020年 秋
    Eiji Shinohara
    Senior Manager, Solutions Engineer - Japan
    [email protected]
    @shinodogg
    #AlgoliaJP

    View full-size slide

  2. Q. Algoliaとは?

    View full-size slide

  3. A. 爆速なSearch and Discovery
    プラットフォームです

    View full-size slide

  4. Q. Search and Discovery?

    View full-size slide

  5. Q. Algoliaってどうやって使うの?

    View full-size slide

  6. A. SDKやAPIを使ったり、ノーコードでやり
    くりすることもできます

    View full-size slide

  7. 簡単なデモ

    View full-size slide

  8. algolia.com に行き Dashboard へ
    (事前にアカウント登録必要 -> クレジットカード無くてOK)

    View full-size slide

  9. Applicationを作成
    (ApplicationはIndexを束ねるような概念)

    View full-size slide

  10. お近くのデータセンターを選択
    (1クラスタ=3つのサーバー。日本は東京と大阪にデータセンターがある)

    View full-size slide

  11. Indexを作成
    (インデックス -> 概念的には本についてる索引のようなもの)

    View full-size slide

  12. レコードを作成してアップロード
    (JSON, CSV, またはTSV)
    ■ 例えばこんなデータがExcelにあったとする
    タブ区切りテキストで保存する時の拡張
    子は“.tsv”でお願いしますmm

    View full-size slide

  13. レコードを作成してアップロード
    (JSON, CSV, またはTSV)
    ■ demo.tsvをドラッグ・アンド・ドロップでアップロード

    View full-size slide

  14. Dashboard上で検索
    ■ yama と入力すると Yamanashi にヒット

    View full-size slide

  15. いかがだったでしょうか?
    ● プログラムは書いていません
    ● APIは叩いていません
    でも… Dashboardの裏側では、、
    ● アップロードされたファイルを読み込んで、データを抽出し
    て、それを登録するAPIが叩かれています
    ● 入力された文字列を元に検索クエリを実行するAPIが叩
    かれています

    View full-size slide

  16. つまり何が言いたいかというと…
    ● Algolia - Search & Discovery? SaaS? API?
    - 表現の仕方は色々あるかもしれませんが、実態はとてもシ
    ンプルな検索エンジンです
    - ご覧いただいた通り、Dashboardをポチポチ
      していただくだけで使い始めることができます
      検索エンジンのインストールや難しいサーバーの
      設定等は不要です

    View full-size slide

  17. Q. Algoliaって日本法人あるの?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Q. Algoliaの特徴は?

    View full-size slide

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

    View full-size slide

  22. SaaStr Founder & CEO
    Jason Lemkinさん
    https://resources.algolia.com/home/virtualevent-saasexpertsaastr
    『Algoliaの一番の特徴は”爆速”なところ!』

    View full-size slide

  23. Milli-Sec Matter!
    https://www.algolia.com/doc/faq/why/how-fast-is-algolia/

    View full-size slide

  24. なぜ、そんなに速いの??
    - コレを語りだすと1セッションくらいの時間が必要…笑
    - キーワード
    - ネットワークレイヤーの数をとにかく少なく!
    - ロードバランサーではなくDNSラウンドロビン
    - 稼働するアプリケーションのメモリマネージメントは自分たちで
    - C++で実装。Nginxのプラグインとして稼働
    - 最上位プラン(Premiumプランのadd-on)では物理サーバー
    - 仮想化のオーバーヘッドがミリsecの遅延をもたらす可能性
    - フルに筐体の全リソースを使いきる
    - オンプレのリソースに載りきらないケースではクラウドのベアメタルも選択肢

    View full-size slide

  25. コラム: 速さと安定稼働
    Algolia's Fury Road to a Worldwide API
    (Co-Founder CTOのJulienに紹介されて、Algoliaに転職しようと思うキッカケになった話)

    View full-size slide

  26. Q. Jamstack? Headless??

    View full-size slide

  27. InstantSearchを
    ご紹介させてください

    View full-size slide

  28. Ease your
    contribution process
    with automation
    Vincent Voyer
    InstantSearch

    View full-size slide

  29. - Algoliaがオープンソースとして開発しているFrontend UIライブラリ
    - ウィジェットを追加していく形で、searchBox, pagination, infiniteHits,
    hierarchicalMenu, rangeSlidebar, stats, poweredBy,
    breadcrump,,, 等々、様々なコンポーネントによる優れた検索体験を簡単に
    構築可能
    InstantSearchとは

    View full-size slide

  30. InstantSearch - Widget Showcase
    https://www.algolia.com/doc/guides/building-search-ui/widgets/showcase/js/
    ■ 実際に触ってWidgetの動作を確かめることができます

    View full-size slide

  31. ■ eコマース向けのInstantSearch
    Unified InstantSearch E-Commerce

    View full-size slide

  32. - ranqueen.ninja
      私が作ったeコマースのデモサイト
      Amazon S3上に3つファイルがあるだけ
    Unified InstantSearch
    for e-commerce

    View full-size slide

  33. 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制御など

    View full-size slide

  34. Algolia API と InstantSearch
    - 例えば、カテゴリーやショップ名の
    ファセット
    - 自分でJSONを元にUIを構築する
    より圧倒的に効率的
    - OSSならではの活発な開発

    View full-size slide

  35. Federated Search

    View full-size slide

  36. Federated Search

    View full-size slide

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

    View full-size slide

  38. Federated Search - Easy to build
    人気
    高レーティング
    セール中
    人気
    高レーティング
    セール中

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Q. Algoliaへのデータの登録は?

    View full-size slide

  44. 大規模なWebサイトにおいては、データを一箇所に集め
    るのも難しいかもしれない
    複数のプラットフォーム 複数の組織 複数の言語
    CMS
    DB
    ...

    View full-size slide

  45. Browse
    Webサイトのブラウズ
    Extract
    必要な情報の抽出
    Send
    Algoliaへのデータ送信
    The Algolia Crawler
    パワフル & カスタマイズ可能

    View full-size slide

  46. The Algolia Crawler
    パワフル & カスタマイズ可能
    HTML以外もクロール
    .pdf, .doc, .xls, .ppt
    動的コンテンツのクロール
    JavaScriptのon the flyな
    レンダリング
    外部データの活用
    ビジネスメトリクスとしてのGoogle
    AnalyticsやCSVファイル
    Authenticates
    クレデンシャルでの認証
    Webサイトの編集は不要
    タグの追加や変更をする必要がない

    View full-size slide

  47. Q. Algoliaの検索は日本語も扱えるの?

    View full-size slide

  48. A. はい、日本語オッケーです!!

    View full-size slide

  49. Language -> Index / Query Languages で “Japanese” を設定
    Algoliaにおける日本語の設定

    View full-size slide

  50. 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の日本語関連ロードマップ

    View full-size slide

  51. Q. 検索結果の表示順の調整
    ってどうするの?

    View full-size slide

  52. 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 full-size slide

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

    ─ Prince Harryに関連するグッズが表示
    されると嬉しい人

    View full-size slide

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

    View full-size slide

  55. Q. 分析できるの?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. AnalyticsのDashboardの例

    View full-size slide

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

    View full-size slide

  60. Search and Discovery
    体験への期待値の高まり

    View full-size slide

  61. モダンな検索体験
    - 様々なサービスに対応
    - 素早く動作し高い完成

    View full-size slide

  62. 多種多様な技術要素
    - いわゆる全文検索
    だけではない
    - パーソナライズ
    - 音声
    - 位置情報 など
    Personalized
    first page
    Recommendations
    Voice
    Geo
    Interactions

    View full-size slide

  63. 最高のユーザー体験を
    構築/運用することは
    難しい

    View full-size slide

  64. 検索サービスの構築/運用
    - エンドユーザー
    - ビジネスオーナー
    - 開発者
    どれか1つでも
    欠けてはいけない
    “欲しいものが簡単に見
    つかる?”
    “結果を出すためのより
    良いインサイトや管理が
    出来る?”
    “簡単に実装/メンテでき
    るイノベーティブなも
    の?”

    View full-size slide

  65. C O N F I D E N T I A L
    求められるバー
    は高い
    And the bar
    keeps getting
    higher

    View full-size slide

  66. C O N F I D E N T I A L
    ALGOLIA
    全ての企業に快適な
    Search and Discovery
    体験を!

    View full-size slide

  67. Search-as-a-Service としての迅速なイノベーション

    View full-size slide

  68. Visual Editor (launched in 2020)
    - エンジニアに作業依頼をしなくても、カテゴリのブーストや特定
    アイテムの表示位置固定化などが簡単に実現可能
    - 設定内容の効果の検証はAnalyticsやA/B Testingで

    View full-size slide

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

    View full-size slide

  70. ありがとうございました!
    Eiji Shinohara
    Senior Manager, Solutions Engineer - Japan
    [email protected]
    @shinodogg
    #AlgoliaJP

    View full-size slide