Tips2020.06.22

サイト内検索できるAlogoliaとGatsbyの相性が良すぎる

サイト内検索を実装するのに近年はalgoliaが流行しています。

ドキュメントを読んでいて知りたいことを探す時に検索するとかなりの確率でalgoliaのロゴが出ている印象をうけます。
有名なサイトで使われていることから利用する人も増えているのではないでしょうか。

algoliaでデータを登録してしまえばAPIを用いてサイト内検索を作ることができます。

個人的にもサイト内検索を作るのにalgoliaを使っていますが、React製の静的サイトジェネレーターのGatsbyとの相性がとてもよかったので紹介します。

目次

algoliaのデータ登録は簡単
検索に使うデータの追加・変更を考えて運用する
gatsby-plugin-alogoliaは自動でAlogoliaのデータを更新可能
まとめ

algoliaのデータ登録は簡単

algoliaではデータを登録することでAPIを提供してくれます。

そのため使うときは検索に利用したいデータをまず登録することになります。
登録の方法として3パターン用意されています。

algoliaの管理画面でJSONを書く
ファイル（JSON・CSV・TSVのいずれか）をアップロード
API

使い始める時はどの方法で登録しても良いかと思います。

それほどハードルが高くなくデータ登録できるのですが、**alogoliaを使う上で考えなくてはいけないのは検索で使いたいデータの追加や変更が発生した場合**です。

検索に使うデータの追加・変更を考えて運用する

コンテンツを一度作って必要なデータをalgoliaに登録して終わりでよければ良いのですが、多くのサイトはコンテンツを追加・変更が発生します。

そんな時、algoliaに登録されているデータも変更する必要がありますよね。

通常であれば追加したコンテンツ情報は手動で登録するか、コンテンツの追加をフックしてAPI経由で登録するというようなフローが考えられます。

また既存で登録しているデータに新しい項目を追加したくなったときも全部手動で登録するか、APIを使ってalgoliaのデータを一括で更新するような処理を行う必要があります。

実際運用する場合に手動は辛すぎると思うので、APIで更新できるような仕組みを作ることになりそうですがめんどくさいですよね・・。

そんな問題を解決するのにGatsbyのプラグインであるgatsby-plugin-alogoiaがとても便利です。

gatsby-plugin-alogoliaは自動でAlogoliaのデータを更新可能

Gatsbyでalgoliaを便利に使うことができるプラグインにgatsby-plugin-algoliaがあります。

https://github.com/algolia/gatsby-plugin-algolia

このプラグインはGatsbyでビルドする時に設定しているコンテンツを自動的に追加・変更してくれます。

つまり先に書いたようなコンテンツのデータの追加や変更時にalgoliaのほうも対応しなくてはいけない、ということを考えることなくalgoliaのデータを更新できます。

個人的にはかなり感動するレベルの便利さです。

設定の一部を抜粋すると下記のような設定をgatsby-config.jsに記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  resolve: `gatsby-plugin-algolia`,
  options: {
    queries: [
      {
        query: `{
          allContentfulPost {
            edges {
              node {
                id
                title
                slug
                publishedAt
              }
            }
          }
        }`,
      }
    ],
    transformer: ({ data }) =>
    data.allContentfulPost.edges.map(edge => {
      return {
        id: edge.node.id,
        title: edge.node.title,
        slug: edge.node.slug,
        publishedAt: edge.node.publishedAt
      }
    }),
    indexName: 'Post',
    enablePartialUpdates: true,
    matchFields: ['title', 'slug', 'modified', 'publishedAt']
  }
}

queryはGatsbyで使っているクエリを記述してデータを取得します。
上記コードはContentfulを使った場合の例です。

取得したデータをtransformerで加工してAlogoliaへ登録するデータ形式にします。

これでGatsbyをビルドした時、algoliaに自動でデータ連携してくれます。

まとめ

algoliaを使ってみた記事は国内限らずよく目にするのですが、肝心な更新部分があまり触れられていません。

そのため使う個人が仕組みを考える必要があり、algoliaを運用するためのハードルが結構高いと思っています

ですがGatsbyを使っているサイトであればプラグインを使うことで難しい運用フローも考える必要がなくなり、運用コストがグンとさがります。

もしGatsbyでalgoliaの導入を考えているのであればプラグインは使ったほうが楽だと思います。
そしてalgoliaを使う予定でサイトを作る方法を問われないのであればGatsbyは選択肢の1つとしてとても有力です。

algolia使うならgatsby-plugin-alogoliaは本当におすすめです。