質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.96%

【Vue × Firestore × Algolia】を使用して全文検索を実装したいです

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 128

score 38

Vue × Firestore × Algoliaを使用して全文検索を実装したいです

現在Vue.jsとFirebaseを使用してポートフォリオを作成しております。
そこで検索機能を実装したく調べてみると公式でも推奨しているAlgoliaにたどり着きました。

しかし、導入方法を色んな記事、サイトを調べて確認致しましたが分からず行き詰っている状況です。

Algolia

Algoliaにつきましては、下記は実行済になります。

  • Algoliaへサインアップ

  • Indexの作成

  • 検索対象となるデータは入れておりません。
    ※API経由でレコードを追加したいと考えているため。

  • APIキーの確認

フロントエンド(?)の実装はまだしておらず、上記のみになります。

Firebase

  • firebase側の設定を行い、Vueアプリと連携済み

  • npm install save algoliasearch インストール済

functionsの設定は、分からずまだ触れていない状況です。

下記記事にもあるようにfirestoreの特定のcollectionにデータが追加された時に実行されるfunctionを実装、
またはfunction内で、先ほどインストールしたパッケージ(algoliasearch)を利用して、Algolia側にもデータを保存の仕方。
恥ずかしながら下記コードをどこに記述したらいいのかも分からない状況です。。

【Firebase】AlgoliaでFirestoreの全文検索機能を実装してみた

const functions = require("firebase-functions");
const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
const algoliasearch = require("algoliasearch")
const ALGOLIA_ID = functions.config().algolia.app_id
const ALGOLIA_ADMIN_KEY = functions.config().algolia.api_key
const ALGOLIA_SEARCH_KEY = functions.config().algolia.search_key
const ALGOLIA_INDEX_NAME = "Practice"
const client = algoliasearch(ALGOLIA_ID, ALGOLIA_ADMIN_KEY)  


exports.onProductCreated = functions.firestore.document("posts/{id}").onCreate((snap, context) => {
  const data = snap.data()  
  data.objectID = context.params.id  
  const index = client.initIndex(ALGOLIA_INDEX_NAME)
  return index.saveObject(data)
})

至らない点が多々ございますが、分かる方いらっしゃいましたらお力添えをいただけませんでしょうか。

宜しくお願い致します。


◆参考
全文検索
【Firebase】AlgoliaでFirestoreの全文検索機能を実装してみた
Firestore から Algolia へコレクションデータを一括インポート
Nuxt.js+Algoliaで全文検索可能なタスク管理アプリを実装するハンズオン!
algolia と firebase と Vue を使ってハッシュタグ検索を実装する
lgoliaを使って検索を実装してみた話

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

vue instantsearchを使う事としました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る