今回は、実装内容の紹介です。 toranoana@LT #27 × Serverless（サーバーレス）の登壇資料です。

1. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Cloud Firestoreで、
全文検索してみた。
今回は、実装内容の紹介です
1

2. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
自己紹介
出身地は佐賀です。三重県から地方勤務で虎の穴ラボの通販のチームにいます。
（２０２０年１２月に虎の穴ラボに入社、二児の父です。）
フロントエンドは得意です。
推し
・南條愛乃さん（最新シングルのカップリング曲が好きで、よく聞いています！）
・TypeScript／Next.js／Tailwind CSS
2

3. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
アジェンダ
1. Firestoreで全文検索しようと思った経緯について
2. 全文検索の構成について
3. Firestoreのデータ構造について
4. インデックス登録処理について
5. 全文検索について
6. 実際の動き
7. まとめ
3

4. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
なぜ、Firestoreで
全文検索しようと思ったの
か？！
4

5. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Firestoreで全文検索しようと思った経緯
個人的に作成しているブックマーク管理ツール（はてぶっぽいもの）で、キーワード検索
したい
https://kght6123-shiori.web.app/
● Firestoreは全文検索できない😭
● Firestoreは部分一致や後方一致の検索ができない😭
● 別に検索サーバを作るのはコストがかかる😭
追加費用を抑えつつ、なんとか、Cloud Firestore内で
Web ページの全文検索をしたい！と思った感じ。
5

6. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
全文検索の構成について
6

7. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
全文検索の構成について
全文検索に必要な構成を考えました・・・！
● データベース 👉 Cloud Firestore
● Webページ読み込み 👉 Playwright
● Webページの本文収集 👉 node-readability
● 日本語の分かち書き 👉 kuromojin
● バックエンドの言語 👉 TypeScript
7

8. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
なぜ、日本語の分かち書きにkuromojinを選んだか？
8
1. 日本語の詳しい情報が
とれる！！
2. 辞書が登録できる ※
※ 今回は辞書は未使用です
> kuromojiは日本語の分かち書き（形態素解析）を行う辞書を
もつライブラリです。
> 分かち書き（形態素解析）とは、文章を意味のある最小の単
位に分解し、意味や品詞などに判別すること。になります。

9. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Firestore のデータ構造に
ついて
9

10. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Firestore のデータ構造について
検索結果の画面に表示するデータ部分と
全文検索を行うためのインデックス部分で、
別々のコレクションに分かれてます。
画面に表示するデータ
● /shiori-users/${ユーザID}/headers/${ブックマークID}
全文検索を行うためのインデックス
● /shiori-users/${ユーザID}/indexes/${ブックマークID}
10

11. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
画面に表示するデータについて
11
含まれるデータ
● 作成日時
● お気に入り追加のフラグ
● ブックマークID
● ブックマークのタイトル画像のURL
（og:image）
● ピン留めのフラグ
● ブックマークのタイトル
● ブックマークのURL

12. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
全文検索を行うためのインデックスについて
12
● 分かち書き後の単語を属性名にする
● その属性値は 0 固定で入れる
（今後、拡張できそう）

13. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
インデックス登録処理につ
いてっ！
13

14. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
インデックス登録の処理について
1. 検索結果に表示するデータを登録・更新した
2. Cloud Firestore のトリガー発動！
3. Web ページをヘッドレスブラウザでレンダリング
4. ページコンテンツ＆og:image の URL を収集
5. タイトル、本文テキストを分かち書きして収集
6. Cloud Firestore に登録する
14

15. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
Web ページをヘッドレスブラウザでレンダリング
15
1. Playwrightを起動する
2. ページを新規作成する
3. URLオブジェクトを作成する
4. ページに移動する
5. ドキュメントロード完了まで待つ

16. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
ページコンテンツ＆og:image の URL を収集
16
1. ページのog:imageタグの属性（url）を取
得する
2. ページのコンテンツ（html）を取得する

17. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
タイトル、本文テキストを分かち書きして収集
17
1. node-readabilityで本文のHTMLのみ取得
する
2. 本文のHTMLからHTMLタグを取り除く
3. kuromojin で、日本語を分かち書きする
4. 分かち書き結果の表層系と読み仮名だけを
まとめる

18. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
Cloud Firestore に登録する
18
1. タイトル、og:image の URLを更新する
2. 分かち書きしたテキストをインデックスと
して登録する

19. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
全文検索処理についてっ！
19

20. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
インデックス検索の処理について
1. 検索キーワードを分かち書きする
2. Cloud Firestore のインデックスを検索して、ID リストを得
る
3. ID リストから表示するデータを取得する
4. 検索結果に表示するデータ情報を返す
20

21. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
検索キーワードを分かち書きする
21
1. 入力された検索キーワードを、分かち書き
する。
2. 分かち書きした結果の表層系だけで配列に
する。

22. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
インデックスを検索して、ID リストを得る
22
1. 分かち書きした結果から、インデックスを
検索する条件を作成する。
2. Cloud Firestoreに検索を実行して、IDリ
ストを取得する。

23. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
ID リストから表示するデータを取得する
23
1. IDリストから、検索結果に表示するデー
タを検索する。
2. 検索結果を返す。

24. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実際の動き！！
24
今回は動画を撮っておきました！

25. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ここに画像を貼る
じっさいのうごき！！
25
「黒文字」「クロモジ」「Firestore」などで
検索ができます。
（Kuromojiでは検索できません）
（多分、名詞を辞書を登録すればできる）

26. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
まとめ
Cloud Firestoreを使って、
簡単なキーワード検索なら、少し頑張れば実装できます！って話でした。
Cloud Firesotre で、Algolia や ElasticSearch を使わずに
安価に全文検索したい！と考えてる方は、
よろしければ、お試しください！
※ アクセス数が多いと、安くないかもしれませんが、、、
26

27. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ご静聴いただき、
ありがとうございました！
27