GatsbyJSで生成したサイトにAlgoliaでサイト内検索を実装する方法

2020年1月25日2021年11月27日

Algoliaを使ってGatsbyJSで生成したサイト内の検索を実装する方法です。

GatsbyJSで生成されたサイトは静的なHTMLサイトとなるので、動的なサイト内検索などを行うことができません。

ただ、Algoliaという外部サービスを使うことによって、GatsbyJSでも簡単にサイトない検索を実装できるようになるので、その方法を紹介していきます！

はにわまん

Algoliaすごい...

GatsbyJSで生成したサイトにAlgoliaでサイト内検索を実装する方法

GraphQLのデータが出来上がるなら何でもいいのですが、当サイトでこれまでやってきたWordPressをデータソースとして生成したサイトを例にして進めていきます。

ということで、何かしらのデータソースを元にサイトが出来上がっている状態を前提としてします。
https://haniwaman.com/gatsby/

Algoliaにデータを入れる

Algoliaを使ったサイト内検索の仕組みはシンプルで、あらかじめAlgoliaにデータを入れておき、サイトの中のサイト内検索用のボタンが押されたらキーワードを元にAlgoliaから探してくる、といったものです。

なので、まずはAlgoliaに検索元となるデータを入れてあげる必要があります。

Algoliaに登録

Algolia登録していない人は以下から登録してください。
→ Create delightful Search and Discovery experiences | Algolia

「Indices」の作成

新しい「Indices」を作成します。ここはデータを格納するためのエリアのようなイメージです。

「Test」という名前で作ってみました。

データの登録

「Add records」から3つの方法でデータを登録することができます。

Add manually：JSONのテキストを直接貼り付け
Upload file：JSONファイルをアップロード
Use the API：APIでの連携

今回は超アナログに「JSONのテキストを直接貼り付け（Add manually）」で行ってみます。

元となるJSONデータの取得

GatsbyJSではgatsby developすると、取得できるGraphQLのデータを以下のURLから参照とカスタムできるようになるはずです。

http://localhost:8000/___graphql

WordPressがデータソースの場合は「すべての投稿をサイト内検索の対象とする」という前提で「allWordpressPost」からデータを取得します。

タイトル
コンテンツ
リンク

のデータを選択し、JSONを作ってもらいましょう。上部の再生ボタンみたいなアイコンを押せばデータが生成されます。

ただ、このままだと不要なデータが混ざっているので、ちょっとだけ書き換えます。

{
  "data": {
    "allWordpressPost": {
      "nodes": [
        {
          "link": "https://example.com/wp/post1/",
          "title": "記事タイトルが入っています。",
          "content": "<p>記事コンテンツが入っています。</p>"
        },
        {
          "link": "https://example.com/wp/post2/",
          "title": "記事タイトルが入っています。",
          "content": "<p>記事コンテンツが入っています。</p>"
        },
        {
          "link": "https://example.com/wp/post3/",
          "title": "記事タイトルが入っています。",
          "content": "<p>記事コンテンツが入っています。</p>"
        },
			]
    }
  }
}

上下の3行ほどを切り取ってJSON形式にしてあげてください。

[
	{
		"link": "https://example.com/wp/post1/",
		"title": "記事タイトルが入っています。",
		"content": "<p>記事コンテンツが入っています。</p>"
	},
	{
		"link": "https://example.com/wp/post2/",
		"title": "記事タイトルが入っています。",
		"content": "<p>記事コンテンツが入っています。</p>"
	},
	{
		"link": "https://example.com/wp/post3/",
		"title": "記事タイトルが入っています。",
		"content": "<p>記事コンテンツが入っています。</p>"
	}
]

これを「Add records」の「Add manually」に入れてあげればOKです！

上手く取り込めると、Algoliaの管理画面上にも反映されるようになります。

これで、ひとまずAlgolia側での最低限の準備はOKです。

Algolia用のパッケージを入れる

GatsbyJSでAlgoliaを使うために「gatsby-plugin-algolia」というパッケージを入れていきます。

npm install -save gatsby-plugin-algolia

（公式） → algolia/gatsby-plugin-algolia: A plugin to push to Algolia based on graphQl queries

サイト内検索ページを作る

それではGatsbyJS側で、サイト内検索用のページを作っていきます。GatsbyJSではsrc/pagesに作成したページが出来上がる仕組みなので、ここにsearch.jsを作っていきましょう！

まずは通常のページを表示させるためのコードをindex.js等を参考にしつつ作ってあげてください。

import React from "react"
import Layout from "../components/layout"

const SearchPage = () => (
  <Layout>
    <h1>サイト内検索</h1>
    <p>サイト内検索用のページです。</p>
  </Layout>
)

export default SearchPage

今はこんな感じです。

検索ボックスを作る

検索ボックスを作るために新しくいくつかのパッケージを導入します。

npm install --save algoliasearch

npm install -save react-instantsearch-dom

そして書き換えたものがこちらです（3分クッキング的な…）

import React from "react"
import { Link } from 'gatsby'
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, connectHits, Configure } from 'react-instantsearch-dom';
import Layout from "../components/layout"

const Hits = ({ hits }) => (
  <div className="search-items">
    {hits.map(hit => (
			<div className="search-item" key={hit.objectID}>
				<div className="search-item-title">{hit.title}</div>
			</div>
    ))}
  </div>
);
const CustomHits = connectHits(Hits);

const searchClient = algoliasearch(process.env.ALGOLIA_APP_ID, process.env.ALGOLIA_SEARCH_ONLY_API_KEY);
const SearchPage = () => (

  <Layout>
    <h1>サイト内検索</h1>
    <p>サイト内検索用のページです。</p>
		<InstantSearch searchClient={searchClient} indexName="Test">
			<Configure hitsPerPage={12} />
			<SearchBox defaultRefinement="記事" />
			<CustomHits />
		</InstantSearch>
  </Layout>
)

export default SearchPage

すると、ちゃんとサイト内検索の結果が表示されるようになります！（サンプルが少なすぎましたが…）