LoginSignup
7
5

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-10-25

こんにちは。virapture株式会社でCEOしながらラグナロク株式会社でもCKOとして働いている@mogmetです。
mogmet.jpg
最近ポートフォリオ写真を撮りました。楽しかったです。しばらくは自分の写真不足に困ることがなさそうです。

先日、Firebase Summit2022で新たにMeilisearchでの全文検索をサポートするSearch in your Firestore with MeilisearchというExtensionsがしれっと紹介されていました。

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

Meilisearchについて

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

リージョンはTokyoにしておきます。
image.png

プロジェクトをBlazeにアップグレードしておきます。
image.png

Meilisearchの準備

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

image.png

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

ログインするとわかりやすくステップが出てきます。
「New project」ボタンを押下します。
image.png

まず請求情報をセットしろといわれるので、押下します。
image.png

stripeでの支払いを求められるので支払情報を設定します。設定したら「Meilisearch Cloudに戻る」で戻りましょう。
スクリーンショット 2022-10-26 7.13.24.png

再度「New project」画面に戻ってプロジェクトの名前を設定して「Submit」します。
image.png
現在のロケーションはロンドン、ニューヨーク、サンフランシスコの3つしかないですが一番近そうなサンフランシスコを選択しておきます。

無事作成できました。
スクリーンショット 2022-10-26 7.21.44.png

プロジェクトを選択すると詳細が見れます。
URL、Master key、Default Search API Key、Default Admin API Keyをメモしておきます。
スクリーンショット 2022-10-26 7.24.09.png

Extensionsのインストール

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

「Install in Console」を押下します。
image.png

インストールするプロジェクトを選択します。
image.png

次へ。
image.png

Artifact RegistryとSecret Managerを有効化して次へ。
image.png

アクセス権を確認して次へ。
image.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

インストールが始まります。
image.png

インストールが終わるといよいよ使えるようになります。
image.png

全文検索を試す

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

image.png

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

image.png

では早速実装して試してみます。
今回はTypescriptとmeilisearch-jsを使って実装をしてみます。
予めnpm i meilisearch-jsは実施しておきましょう。

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

もちろんdescriptionへの検索もできます。
image.png

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

また、今回サンプルとしてTypescriptで紹介しましたが、インスタンスのURLを直接打つとそこから気軽に試すこともできます。
image.png

まとめ

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

最後に、ワンナイト人狼オンラインというゲームを作ってます!よかったら遊んでね!

他にもCameconOffcha、問い合わせ対応が簡単にできるCSmart、フリーランスのコミュニティのNextFreelanceといったサービスも作ってるのでよかったら使ってね!

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

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

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5