Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Search Engine for Frontend Engineer
Search
Sashimimochi
August 04, 2023
Technology
320
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Search Engine for Frontend Engineer
エンジニア達の「完全に理解した」Talk #43 で登壇したときのスライドです。
https://easy2.connpass.com/event/289385/
Sashimimochi
August 04, 2023
More Decks by Sashimimochi
See All by Sashimimochi
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
sashimimochi
1
560
Alert on Call with LLM
sashimimochi
1
380
My AI Copilot for writing
sashimimochi
1
360
GraphRAG: What I Thought I Knew (But Didn’t)
sashimimochi
1
920
Search Engineer diving into Kubernetes
sashimimochi
1
360
Using GPTs from Local by Dify
sashimimochi
1
990
Max out Local LLM in Challenging Environments
sashimimochi
3
700
Start Vector Search with Solr
sashimimochi
1
1.3k
Other Decks in Technology
See All in Technology
200人の配信コメント、 全部Jevが仕分けます 〜 マサカリガードを作ってみた 〜
katayamatg
1
530
kintoneで在庫管理システムを作るときの要件定義・設計ポイント
kai0707
0
230
生き様としてのSRE
hokkai7go
1
170
コードレビューをなくして見えたもの
henteko
0
130
企画からFlutter実装まで、1つの機能を一貫して開発したプロセスと成果物
khiroyuki1003
1
150
Strands Decider 2BでAWSアップデートの目利きをしてみた
sato4mi
1
100
Consistency for mere mortals - A gentle guide to consistency
ufried
0
120
Microsoft Entra Kerberos で実現するクラウド デバイス管理
tamaiyutaro
0
150
続・ソフトウェアアーキテクトのための意思決定術: Decision Readiness, Revisited — When AI Changes the Economics of Software Architecture
snoozer05
PRO
5
1.2k
慶應義塾大学 AI実践05 論文執筆の仕組み化
keio_smilab
PRO
6
3.6k
これだけは抑えておきたい!後悔しない re:Invent の過ごし方 / AWS re:Invent 2026 prestudy
kinunori
2
700
AX時代の自治体支援リソース再配分と役割分担の再構成:戦略とロードマップ(概要)
sishi2026
0
190
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.2k
First, design no harm
axbom
PRO
2
1.4k
GraphQLとの向き合い方2022年版
quramy
50
15k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.2k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
670
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
Crafting Experiences
bethany
1
420
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3.3k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
600
Marketing to machines
jonoalderson
1
6k
What does AI have to do with Human Rights?
axbom
PRO
1
2.5k
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の最新情報を知る にはいいかも