Algolia 2020 Autumn

Cc8a208e174943d1da814783841abd50?s=47 Eiji Shinohara
September 09, 2020

Algolia 2020 Autumn

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

Cc8a208e174943d1da814783841abd50?s=128

Eiji Shinohara

September 09, 2020
Tweet

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?

  5. None
  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へのデータの登録は?

  45. None
  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