FirestoreとMeilisearchで超お手軽に日本語の全文検索するFirebase Extensionsの実装紹介

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。
![mogmet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/86107f0e-ab7d-8a11-e4b6-e2c5e5a247e1.jpeg)
最近ポートフォリオ写真を撮りました。楽しかったです。しばらくは自分の写真不足に困ることがなさそうです。

先日、[Firebase Summit2022](https://qiita.com/mogmet/items/1579d796b5c3d24ae3d2)で新たにMeilisearchでの全文検索をサポートする**Search in your Firestore with Meilisearch**というExtensionsがしれっと紹介されていました。

https://extensions.dev/extensions/meilisearch/firestore-meilisearch

本日はこちらの機能を実際に試してみたのでインストールから実際に全文検索するところまで紹介します。

## [Meilisearch](https://www.meilisearch.com/)について

TypesenseやElasticsearchなどと同じくOSSで開発されている全文検索システムです。
Meilisearch CloudといったCloudで手軽に使えるSaaSも用意されています。

TypsenseやElasticsearchとの大きな違いとしては、なんと標準で**日本語に対応してます！**
https://docs.meilisearch.com/learn/what_is_meilisearch/language.html

TypesenseやElasticsearchは一工夫いれないと日本語検索ができなかったのでこれは結構大きな違いかと思います。

## インストール

Firebaseの準備→Meilisearchの準備→Extensionsのインストール の順で紹介します。

### Firebase側の準備

Firestoreを作成しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/1a0d8fcb-38b1-9414-8f24-521015d9222d.png)

リージョンはTokyoにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2911a2eb-80e6-23f0-c728-569daaea064e.png)

プロジェクトをBlazeにアップグレードしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f42c20f5-d595-b536-2cce-195e260432ae.png)

### Meilisearchの準備

インスタンスを立ち上げるのが面倒なので今回はMeilisearch Cloudを使おうと思います。
下記にアクセスしてアカウントを登録します。

https://cloud.meilisearch.com/register

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/d7718a19-8fb6-c2de-4da3-70ed3849a7de.png)

メールが届くので認証しておきましょう。

ログインするとわかりやすくステップが出てきます。
「New project」ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ca90b192-7f02-34e4-021b-3d42c1ec1cc6.png)

まず請求情報をセットしろといわれるので、押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/eee4e786-1ca6-e38b-dff7-d6f0e04451e8.png)

stripeでの支払いを求められるので支払情報を設定します。設定したら「Meilisearch Cloudに戻る」で戻りましょう。
![スクリーンショット 2022-10-26 7.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/d11dc6b0-0364-9fb3-a56e-b1aee81e1427.png)

再度「New project」画面に戻ってプロジェクトの名前を設定して「Submit」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/249eeb0c-5ddd-6065-bb20-7a49ae6f584c.png)
現在のロケーションはロンドン、ニューヨーク、サンフランシスコの3つしかないですが一番近そうなサンフランシスコを選択しておきます。

無事作成できました。
![スクリーンショット 2022-10-26 7.21.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/8d2ab423-9ab1-8fe0-a19e-c57c87b20b59.png)

プロジェクトを選択すると詳細が見れます。
URL、Master key、Default Search API Key、Default Admin API Keyをメモしておきます。
![スクリーンショット 2022-10-26 7.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/a9efc69f-5a38-5ad2-7342-75ba22dc2338.png)

### Extensionsのインストール

いよいよExtensionsをインストールします。
下記にアクセスします。

https://extensions.dev/extensions/meilisearch/firestore-meilisearch

「Install in Console」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/0b1d45c9-c1c6-60df-5398-e6e94874a983.png)

インストールするプロジェクトを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ce2f164b-c234-64ee-b9eb-16e0f9e9ae05.png)

次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f04478a2-438d-b071-1cde-10cc33c5e8bc.png)

Artifact RegistryとSecret Managerを有効化して次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/8f7f6665-72bb-107e-df9b-a4adf4a5de8a.png)

アクセス権を確認して次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/de07b418-f35f-c45c-62b3-773fbb3f702c.png)

次はMeilisearchで使う細かな設定を行います。
Cloud Functions location: Meilisearchのインスタンスががサンフランシスコで起動してるので一番近いLos Angeleseに設定しています。Meilisearchのインスタンスを自前で起動している場合は起動しているインスタンスの近くに設定するといいです。
Collection path: Meilisearchにexportするコレクションのパスを入力します。
Fields to index in Meilisearch: インデックスするドキュメントのフィールドを,区切りで入力します。何も入力しなければ全フィールドが対象になります。
Meilisearch Index Name: インデックス名を指定します
Meilisearch host: 先程メモしたMeilisearchのURLを入力します。
Meilisearch API key: 先程メモしたMeilisearchのDefault Admin API Keyを入力して「シークレットキーを生成」を押下します。

上記を入力したら「拡張機能をインストール」します。
![スクリーンショット 2022-10-26 7.35.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/013ddf8b-89bc-c474-576b-9c79342a8c6e.png)

インストールが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/e7902905-3ece-64f6-c76b-c564ba087289.png)

インストールが終わるといよいよ使えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/8b321661-b096-f505-ca45-42c6a1d69680.png)


## 全文検索を試す

まずはusersコレクションにデータを追加してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/649a8467-514e-2e92-85cd-8f5469b1cf77.png)

MeilisearchのprojectのINDEX INFOをみてみるとデータが入っていることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/5b31f966-4277-95c9-a7ec-d3140e7d5c6a.png)

では早速実装して試してみます。
今回はTypescriptと[meilisearch-js](https://github.com/meilisearch/meilisearch-js)を使って実装をしてみます。
予め`npm i meilisearch-js`は実施しておきましょう。

```ts
import { MeiliSearch } from 'meilisearch'

const client = new MeiliSearch({
  host: 'https://ms-xxx.sfo.meilisearch.io',
  apiKey: 'メモしておいたDefault Search API Key', // サンプルではMaster Keyを入れると書いてあるがセキュリティ的に危ういのでSearch API Keyを使う
})

async function search() {
  const index = client.index('idx_users')
  const search = await index.search('もぐめっと')
  console.log(search)  
}

search()
```

するとこんな感じでデータが取得できました！すごい！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/cc432be6-bb6a-baee-7e37-78bfbb481a74.png)

もちろんdescriptionへの検索もできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/598e0770-4df2-333b-994d-6822916b140f.png)


注目すべき点としてはFirestoreのIDをデフォルトでいれてくれるので詳細情報を取得するといったことも簡単にできます。

また、今回サンプルとしてTypescriptで紹介しましたが、インスタンスのURLを直接打つとそこから気軽に試すこともできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f20993ca-5fda-9e90-5789-e6eaf47eaad4.png)

## まとめ

**Search in your Firestore with Meilisearch**を使うことで簡単にFirestoreとMilisearchを連携して全文検索をすることができました！
Milisearch Cloudはalgoriaと違って定額料金（月29$〜）で使うことができるので気軽に全文検索をすることができます。
とてもコスパに優れるプロダクトと感じます。
また今後もっと高くなったとしても自前でインスタンスを立ち上げることもできるので今後も安泰ですね。
もぐめっと的には積極的に使っていきたいと感じております。

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)、問い合わせ対応が簡単にできる[CSmart](https://csmart.jp/lp)、フリーランスのコミュニティの[NextFreelance](https://next-freelance.net/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

https://csmart.jp/lp

https://next-freelance.net/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/

ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！

https://ragna-rock.com