LoginSignup
69
54

More than 1 year has passed since last update.

超お手軽にFirestoreに全文検索を導入できるSearch with Algoliaを試してみた

Last updated at Posted at 2021-05-23

こんにちは。もぐめっとです。

最近待ち時間に暇すぎてTikTokデビューしました。

スクリーンショット 2021-05-23 13.06.52.png
よかったら探してみてください。きっとすぐそっ閉じ案件です。

ところで、今年度もGoogleI/Oで色々firebase周りの強化されたものが発表されましたね!
今回はその中でも一番気になったFirebase ExtensionsのSearch with Algoliaを試してみたので使い方を共有いたします。

algolia準備

algoliaのサイトでまずは登録します。

登録が終わったらプロジェクトを作ります。とりあえずNew to algoliaします
image.png

我々は日本人なんで日本を選んでおきます。
image.png

index名を入力して「Create」ボタンを押下してインデックスを作ります。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f34323233342f34663161383265652d306630612d326662382d396130662d6533393334636532663164642e706e67.png

次にAPI Keyの設定をします。
左タブの「API Keys」を押下します。
ApplicationIdをコピーしておきましょう。
スクリーンショット 2021-05-23 10.57.11.png

その後、「All API Keys」タブを選択します。
右上にある「New API Key」ボタンを押下します。

image.png

下記を入力して「Create」ボタンを押下します。
- Description: 分かりやすい説明書いておきます
- Indices: 対象とするインデックスを記載します。先ほど作成したインデックス名を指定します。
- ACL: 「addObject」「deleteIndex」を追加します。
image.png

出来上がったAPI Keyをメモしておきましょう。

Extensionインストール

準備ができたので、Firebase Console側で作業をしていきます。

Search with Algoliaへ行って「Install in console」ボタンを押下します。

image.png

プロジェクトを選択します。

image.png

「次へ」ボタンを押下
image.png

利用状況を確認して「次へ」ボタンを押下。(使わなくても0.01$月にかかるようなので注意)

image.png

下記を入力して「次へ」ボタンを押下。

  • Collection Path: algoliaに同期するコレクションを指定
  • Indexable Fields (Optional): インデックス対象にするフィールドを指定。空白なら全フィールドが対象になるがパフォーマンス的観点で指定した方が良い。
  • Algolia Index Name: 準備編で作ったindexの名前を指定します。
  • Algolia Application Id: 準備編で表示したApplication Idを入力します。
  • Algolia API Key: 準備編で作ったAPI Keyを入力します。Admin API Keyを入力しないように注意
  • Cloud Functions location: 都会人らしくTokyoを選んどきましょう。 image.png

インストールが終わるのを待ちます。
image.png

しばらくするとインストールが完了します。
image.png

データを同期する

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

image.png

algoliaにも無事同期されました!
image.png

ドキュメントを削除するとalgoliaの方も削除してくれるのでとてもいい感じです!

元からあったデータをインポート / indexを再構築する

データをまるっと再同期する仕組みも用意されておりそのやり方を解説します。
cf: 元ドキュメント

初めにCredentialを持ってない方はCredentialを入手します。
Freibase Consoleのプロジェクトの設定から「サービスアカウント」タブを選択します。
そして「新しい秘密鍵の生成」ボタンを押下してcredentialを入手します。
スクリーンショット 2021-05-23 12.43.00.png

次に自分のPCにnpxをインストールしてない方はnpxをインストールしましょう

$ npm install --global npx

Firebase ExtensionsのSearch with Algoliaの拡張機能ページへ遷移し、左ペインから「この拡張機能の動作」ページを開きます。

すると、下部にコマンドが書いてあるのでそれをまるっとコピーします。

 $ LOCATION=${param:LOCATION}\
  ALGOLIA_APP_ID=${param:ALGOLIA_APP_ID}\
  ALGOLIA_API_KEY=${param:ALGOLIA_API_KEY}\
  ALGOLIA_INDEX_NAME=${param:ALGOLIA_INDEX_NAME}\
  COLLECTION_PATH=${param:COLLECTION_PATH}\
  FIELDS=${param:FIELDS}\
  GOOGLE_APPLICATION_CREDENTIALS=</path/to/service/account/key>\
  npx firestore-algolia-search

GOOGLE_APPLICATION_CREDENTIALSに関しては先ほど入手したcredentialが置いてあるパスに修正しておきましょう。
その後まるっと再度コピーしてターミナルにはっつけて同期コマンドを実施します。

警告としてSearch Operation Quotaに影響与えるけどでーじょーぶか?聞かれるのでyを入力することで再同期が実施されます

WARNING: The back fill process will index your entire collection which will impact your Search Operation Quota.  Please visit https://www.algolia.com/doc/faq/accounts-billing/how-algolia-count-records-and-operation/ for more details.  Do you want to continue? (y/N): y
{"severity":"INFO","message":"[ 'Sending rest of the Records to Algolia' ]"}
{"severity":"INFO","message":"[ 'Preparing to send 1 record(s) to Algolia.' ]"}
{"severity":"INFO","message":"[ 'Document(s) imported into Algolia' ]"}

まとめ

Search with AlgoliaのFirebase Extensionsを使うことで超お手軽にalgoliaと同期を取ることができるようになりました!
これで全文検索はこの子にお任せして気軽に実装することができるようになってよりいいプロダクトを作ることができます!

今運営しているカメラのフォトコンテストサイトであるCameconにもそのうちユーザ検索とかつけたいと思います!

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

他にもCameconOffchaといったサービスも作ってるのでよかったら使ってね!

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

69
54
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
69
54