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

こんにちは。[もぐめっと](https://mogmet.com)です。

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

![スクリーンショット 2021-05-23 13.06.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/dc77d7cb-f12c-0612-e042-78f196b6646c.png)
よかったら探してみてください。きっとすぐそっ閉じ案件です。

ところで、今年度もGoogleI/Oで色々firebase周りの強化されたものが発表されましたね！
今回はその中でも一番気になったFirebase Extensionsの[Search with Algolia](https://firebase.google.com/products/extensions/firestore-algolia-search?hl=ja)を試してみたので使い方を共有いたします。

## algolia準備

[algolia](https://www.algolia.com/users/sign_up)のサイトでまずは登録します。

登録が終わったらプロジェクトを作ります。とりあえずNew to algoliaします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ef2be0bd-6dad-9b36-95ac-2ea3f21ea450.png)

我々は日本人なんで日本を選んでおきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/b68b6178-59e9-9e55-cc27-3f82a24c39fd.png)

index名を入力して「Create」ボタンを押下してインデックスを作ります。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f34323233342f34663161383265652d306630612d326662382d396130662d6533393334636532663164642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/659e2d00-a31c-fe1b-8513-7dd1aa421698.png)


次にAPI Keyの設定をします。
左タブの「API Keys」を押下します。
ApplicationIdをコピーしておきましょう。
![スクリーンショット 2021-05-23 10.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/1818f49d-9ba5-334c-5383-e641ccb79cb7.png)



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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/55362fa8-3880-648d-c132-ead41a61c6ab.png)


下記を入力して「Create」ボタンを押下します。
- Description: 分かりやすい説明書いておきます
- Indices: 対象とするインデックスを記載します。先ほど作成したインデックス名を指定します。
- ACL: 「addObject」「deleteIndex」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/d2c627ab-d35c-58b0-74e9-261dd748aacf.png)


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



## Extensionインストール
準備ができたので、Firebase Console側で作業をしていきます。

[Search with Algolia](https://firebase.google.com/products/extensions/firestore-algolia-search?hl=ja)へ行って「Install in console」ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f87b31c2-c720-afd8-f2c7-ff0d78955517.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/3dc79c2d-3623-d677-a80b-d4650e9d33ed.png)

「次へ」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/fac02c06-b16b-436e-8c56-6323b5e12bed.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2e350de9-8f9b-af4d-ff04-1c3ace80ca21.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/734e44c4-aa52-89a9-60cd-8b6258818d54.png)

インストールが終わるのを待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/dd051e03-6ea4-1eb9-3e12-225445a6d3e1.png)

しばらくするとインストールが完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/aed16503-bf39-3e3e-158f-fce0fa085231.png)

## データを同期する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/1d4c951b-b12d-447f-c2ac-f589d9139a47.png)

algoliaにも無事同期されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/e654f9e4-0bc5-bddf-4d91-b2c1d2fcb3ad.png)

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


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

データをまるっと再同期する仕組みも用意されておりそのやり方を解説します。
cf: [元ドキュメント](https://github.com/algolia/firestore-algolia-search/blob/main/POSTINSTALL.md)

初めにCredentialを持ってない方はCredentialを入手します。
Freibase Consoleのプロジェクトの設定から「サービスアカウント」タブを選択します。
そして「新しい秘密鍵の生成」ボタンを押下してcredentialを入手します。
![スクリーンショット 2021-05-23 12.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/d36da2f2-0a03-f600-dcea-8be5dad43e38.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](https://camecon.me)にもそのうちユーザ検索とかつけたいと思います！



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

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

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

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

https://virapture.com/