Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Search Engine for Frontend Engineer
Search
Sashimimochi
August 04, 2023
Technology
0
190
Search Engine for Frontend Engineer
エンジニア達の「完全に理解した」Talk #43 で登壇したときのスライドです。
https://easy2.connpass.com/event/289385/
Sashimimochi
August 04, 2023
Tweet
Share
More Decks by Sashimimochi
See All by Sashimimochi
GraphRAG: What I Thought I Knew (But Didn’t)
sashimimochi
1
340
Search Engineer diving into Kubernetes
sashimimochi
1
120
Using GPTs from Local by Dify
sashimimochi
1
580
Max out Local LLM in Challenging Environments
sashimimochi
3
470
Start Vector Search with Solr
sashimimochi
1
1k
Other Decks in Technology
See All in Technology
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
220
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
490
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.1k
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
180
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
170
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.1k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
170
Share my, our lessons from the road to re:Invent
naospon
0
150
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
GitHub's CSS Performance
jonrohan
1030
460k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Language of Interfaces
destraynor
156
24k
KATA
mclloyd
29
14k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Making Projects Easy
brettharned
116
6k
Being A Developer After 40
akosma
89
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How GitHub (no longer) Works
holman
314
140k
Designing for Performance
lara
605
68k
Transcript
フロントエンドエンジニア のための検索エンジン入門 ~Algoliaを使ってみよう~ さしみもち 2023/7/27 【オンライン】エンジニア達の「完全に理解した」Talk #43
自己紹介 2 さしみもち @Sashimimochi343 普段は、年間数十億件のトラフィッ クがある検索システムの開発・運用 や社内のデータ分析基盤の運用を やっている人です 最近は、TRPGをやったり、ようやく 旅行を解禁してご当地料理を食べ歩
いています
自己紹介 さしみもち @Sashimimochi343 前回は「Solrで始めるベクトル検索」というタイ トルで発表しました
また検索エンジンの話をします 4 今回はタイトル通りフロントエンドエンジニア 向けのお話をしようと思います
全文検索/検索エンジンってなに? • 文字通り、検索対象のドキュメントを全てスキャン して該当するドキュメントを探し出す • 入力文字(クエリ)とのキーワードマッチで検索する 5 最 初 か
ら 最 後 ま で ス キ ャ ン 全文検索に特化した検索アルゴリズムを持ち、 高速に検索を行えるシステムが 全文検索エンジン
詳しくは 6 6 6 現在も絶賛頒布中! 先日、技術書典14で頒布した本で解説しているので、 興味あればご覧ください。 全文検索に限らず、最近のトレンド情報も盛り込んであ ります。 https://techbookfest.org/product/wSCmsmFye1bL6xDWRT6vVK?productVariantID=k23bJJdV1bg5bWWvdKwbFq
一昨年末のアドベントカレンダー 7 • 冗長化しにくい • インデックスの更新がしにくい • ステートフルな情報が多すぎる 高SLAが求められる中長期的なサービスとしての提供は難しいかもしれない 以前、フロントエンドで完結の検索エン
ジンのお話は書いたことがありますが... https://qiita.com/Sashimimochi/items/4972b3dc333c6e5fb866
新しい検索エンジンの構築依頼をいただくのですが... 8 となると、やっぱりサーバサイドに専用の 検索エンジンが欲しくなるが、 ノウハウはあっても、新規に検索エンジン を用意するのは骨が折れる すでに結構な台数を抱えており、手いっぱ いでお断りすることもしばしば
新しい検索エンジンの構築依頼をいただくのですが... 9 それでも新しい検索エンジンがいますぐ欲しいです であれば、自分たちで検索エンジンを持たれてはどうでしょう? 検索エンジンなんもわかりません 自分たちで保守運用とか無理です
そんなものあるわけ... 10 1. 検索エンジンの知識がほとんどなくても使える 2. サーバの構築や運用保守が不要 3. できればAPIとして呼び出せるようにしてほしい 求められる検索エンジンの要件
ありました 11
それが今日紹介するAlgoliaです 12
それが今日紹介するAlgoliaです 13 こっからは調べる時間取れてないので誤った情 報が散見されると思いますorz
Algoliaのここがすごい! 14 • サーバレス ◦ 初期構築も日々のサーバメンテナンスも不要 • 検索エンジンの知識不要で使える ◦ インデックスファイルを用意するだけですぐに使えるようになる
◦ インデックスの更新を始めとした各種設定はすべてWebUI上から可能 • API呼び出しで検索ができる ◦ 各言語で専用のライブラリも充実 ◦ 検索だけでなく検索エンジンの設定もAPIから可能(WebUIからもできる) • デモページ作成だけならノーコードでできてしまう • 特定の条件下なら無料で使える • 日本語化対応も可能
Algoliaとは 15 • SaaSとして提供されている商用の検索エンジン • 開発元はAlgolia社(2012年設立) • 「簡便にサイトやアプリケーションに潤沢な検索機能を組み込めるように する」を謳い文句にユーザーがその他の機能開発に専念できるよう様々な 検索機能や周辺ツールを提供している
• 外部サービスとの連携も可能で、有名なのはFirebaseとの連携 https://www.algolia.com/ https://www.algolia.com/developers/firebase-search-extension/
Algoliaでできること(1/2) 16 基本機能 • インデックスデータのメンテナンス ◦ 新規登録、更新、削除 • キーワード検索 •
ソート • フィルタリング • 類義語辞書(Synonyms) • ストップワード除去 • ファセット etc.
インデックスデータの登録 17
インデックスデータの登録 18
インデックスデータの登録 19
インデックスデータの登録 20
日本語化対応 21
Quick Start 22 各種言語用のBootstrap tutorialが用意されている https://www.algolia.com/doc/guides/getting-started/quick-start/
Quick Start 23 このようなデモページが秒 でできてしまう!
Quick Start 24 create-react-appのように 専用のテンプレートが用意されている
Quick Start 25 テンプレートで使用しているライブラリ以外にも各種言語でライブラリがある 生のAPIとして呼び出すことももちろんできる https://www.algolia.com/doc/rest-api/search/ https://github.com/algolia/instantsearch/blob/master/examples/react/getting-started/src/App.js ソースコードが自動生成される
Algoliaでできること(2/2) 26 Algolia特有の機能 • スペルチェッカー(Typo tolerance) • 読み仮名展開(Transliteration) • パーソナライズ
• レコメンド • 外部サービスとの連携 • ニューラルベクトル検索
ちょっと話がおいしすぎない? 27
従量課金制のサービスです 28 当然ですが、無料枠の使用には制限があります https://www.algolia.com/pricing/
無料枠の制限 29 全ユーザーで1日333リクエストまで • 結構いい値がする • PixivやCygamesのような人気サービスだと、1万QPSなので、検索機能を使う だけでエンジニアを100~200人雇えるレベルの金額になる
無料枠の制限 30 全文検索用の文章を突っ込もうとするとかなりきつい • 商用で使うなら最低限Growプランは欲しい • それでも、5万件程度の基本的にインデックス更新されないアーカイブデータ の検索で使うのが妥当だという試算も
それ以外にも 31 • 上位プランでないと使えない機能がある ◦ ニューラルベクトル検索は一番上でのプランでのみ • ビジネスロジックに合わせたカスタマイズ性、柔軟性はOSSを使ったほうがある ◦ ファンクションクエリを使ったりトークナイザーや辞書の変更はできない
• 正直自社で検索エンジンを構築できるだけの素地があるなら同等以上のクオリティを出せる ◦ スタートアップ時期で人が確保できないときに使うくらいがちょうど良さそう ◦ 検索エンジンを入れ替えると検索性やヒット結果が容易に劇的に変わるので最初に始めたものを貫 けるのが運用者の心労は軽くなる ◦ とはいえ、OSSで同等以上のクオリティを出すのが大変な機能もある • UIやドキュメントは基本英語 ◦ 日本法人はあるっぽい https://speakerdeck.com/shinodogg/algolia-announces-global-expansion-into-japan
まとめ 32 • AlgoliaはSaaSとして使える検索エンジン • 検索エンジンの知識不要でデータを用意するだけですぐ使える • サーバの運用はいらない • できることは決まっている
• ハマるかどうかは利用状況とお値段次第 フィットする方はぜひお試しあれ!
Appendix 33
使用したデータ • livedoorニュースコーパス https://www.rondhuit.com/download.html#news%20corpus • 京都大学テキストコーパス https://nlp.ist.i.kyoto-u.ac.jp/index.php?%E4%BA%AC%E9%83%BD%E5 %A4%A7%E5%AD%A6%E3%83%86%E3%82%AD%E3%82%B9%E3%83%8 8%E3%82%B3%E3%83%BC%E3%83%91%E3%82%B9 •
京都大学ウェブ文書リードコーパス https://nlp.ist.i.kyoto-u.ac.jp/index.php?KWDLC • 無料のかわいいイラスト素材 | イラストエイト https://illust8.com/ 34
その他の参考文献 • Algoliaの日本語検索に関するパラメータ | blog.tatsuroh.com https://blog.tatsuroh.com/2020-12-21/algolia-searching-ja • 「最高のコンテンツ」を支える、Cygamesのデータベース技術の今までとこれから - 分散デー
タベースTiDB - PingCAP株式会社 https://pingcap.co.jp/project/customer-story-cygames/ • 毎秒1万リクエストの負荷試験をした話 - pixiv inside https://inside.pixiv.blog/east/5407 • 全文検索のためにAlgoliaを採用すべきかコスト面から検討する - Qiita https://qiita.com/qrusadorz/items/74a2e0e5edd7061d8b21 • Algolia Announces Global Expansion Into Japan | Algolia https://www.algolia.com/about/news/algolia-announces-global-expansion-into-japan/ 35
日本語化対応について 36 デフォルト • ユニグラム分割 • 連続した文字列が一致した場合にヒット LanguageにJapaneseをセット • 形態素解析器:Kuromoji+辞書:UniDic
https://speakerdeck.com/shinodogg/algolia-2020-autumn?slide=52
Podcastがあるらしい 37 https://algolia.fm/ • 公式が配信している模様 • 日本語で配信されている • Algoliaの最新情報を知る にはいいかも