ブログをGatsbyに移行してからずっとサボっていたサイト内検索機能ですが、ゴールデンウィークで時間があったので実装してみました。
\nなお、当記事はAlgolia自体の知識がある前提で書いてます。
\nAlgolia自体の説明やMiddleman製サイトに検索機能を導入する話に関してはこちらの記事をご参照ください。
\n\n\n\n
当記事はAlgoliaを用いた実現手段の紹介になります。他の手段（JSONファイルに記事データを出力してFuse.js等を用いて全文検索etc）との比較検討などはしていません。
\n当記事で使用してる技術に関して、Gatsbyのドキュメントでも紹介されてるのでそちらも併せてご参照ください。
\n\n\n
Middleman時代はフルスクラッチで作っていたのですが、スクラッチだと記事の内容も実装の手間も無駄にかさんでしまうので、楽に導入できるよう今回はAlgolia公式のライブラリを2つ使用します。
\nこれらを利用することで導入コストをかなり抑えられました。
\ngatsby-plugin-algoliaのリポジトリはこちらです。
\n\n\n— algolia/gatsby-plugin-algolia: A plugin to push to Algolia based on graphQl queries
\n
記事執筆時のREADMEではサイト内のすべてのページを登録するような処理になっていますが、ブログ記事だけを登録したいのでGraphQLのクエリを変えました。
\n当サイトではこんな感じで設定にしてあります。
\ntransformerオプションには「オブジェクトの配列を返す必要がある」「配列の各要素はidという名前のフィールドをもつ必要が有ります」という2点の制約が有ります。
\nidフィールドはすべての記事において一意な任意の文字列を指定できます。個人的に自動生成される値ではなくcontrollableな値が好きなのでslugをidにしました。
\nそれ以外のフィールドや構造に制約はなく、返却したオブジェクのすべてのフィールドがAlgoliaに登録されます。
記事の本文を検索対象に含めたい場合、1objectあたりのサイズ制限を突破するために複数のチャンクにちぎって送信するなどの工夫が必要ですが、そもそも本文を検索対象に含めることはAlgoliaが非推奨だと言ってるので本文を含めないように設定しました。
\n\n\n\n
\n- In most cases, having bigger objects is a sign that you’re not using Algolia at its full capacity:\n
\n\n
\n- Having very big chunks of text is usually bad for relevance, because most objects end-up having a lot of similar words, and they will match with a lot of irrelevant queries
\n- It’s often better to de-duplicate big objects into several smaller ones
\n— Is there a size limit for my index/records? | Basics FAQ | Docs Algolia
\n
設定を済ませてgatsby buildを実行すると、記事の一覧がAlgoliaに登録されます。こんな感じ。
うまく行かない場合、transform関数がオブジェクトの配列を返せているか確認しましょう。
\nAlgoliaに記事を登録して検索できるようになったので、フロントエンドを作ります。
\n検索フォームや検索結果の表示にはReact InstantSearchを利用します。
InstantSearch.jsというAlgoliaが提供している検索用UI用のコンポーネントのReact版です。
\nInstantSearchを利用することで、Algoliaの検索ロジックや状態管理をスクラッチで実装する必要がなくなり、検索UIと検索結果の見た目を作ることだけに注力できます。\n（VueやAngularなどの各種フレームワークやPure JavaScript、webのみならずiOSやAndroid、React Nativeでも使えるように複数バージョンが提供されており、今回はReact版を採用しています）
公式のLive Demo (codesandbox)を見てみると、複雑な検索UIにも対応できるようです。
\nReact版を使って実装してみて、UIの自由度やカスタマイズ製も高くかなり使いやすかったので採用しました。
\n当サイトの右上にある検索窓が触れるデモです。
\n特にチューニングやパラメータの最適化などしていませんが、えげつない速度で検索結果が表示されます。スクショとしてはこんな感じです。
コードはこちら（OnSiteSearchコンポーネント）を読むとInstantSearchコンポーネントとwidgetsの使い方がわかると思います。
\nhttps://www.algolia.com/doc/api-reference/widgets/instantsearch/react/
\nこれを読みつつお好みでウィジェットを足していく感じになると思います。
\n基本的にドキュメント見ながらやるだけなんですが、実装してて思った注意事項を以下に残します。
ローカルと本番環境で検索対象のインデックスを分けるためにAPI KEYなどを環境変数に逃がしたくなると思います。
\nGatsbyにはwebpackのDefinePluginが入っているので、ちょっと設定をしてあげれば各設定値を環境変数に逃がせます。
\n\n\n\n
デフォルトのウィジェットだけで検索UIを組むと、何も入力してない状態でも検索結果が表示されていると思います。
\nサイト内検索では何か入力したときだけ結果を表示するためカスタマイズしました。
connectStateResultsというHoCがexportされているので、それを利用してStateに対する見た目を制御できます。詳しくはドキュメント参照。
\nなお、こちらのドキュメントに検索結果が空の場合、エラーハンドリングについても記載が有ります。
\n\n— Conditional display | Building Search UI | Guide | Algolia Documentation
\n
こちら（OnSiteSearchHitListコンポーネント）のように実装しました。
\nInstantSearchのPanelコンポーネントを利用してヘッダとフッタを作り、フッタにPoweredByコンポーネントを表示してCSSでちょっと見た目を調整しました。
\nCSSに関してはこちらをご参照ください。
Gatsby製サイトに検索機能を追加するときの参考になれば幸いです。
\nスクラッチで作るよりはるかに簡単に導入できた（デバッグ含めて3hくらい）ので、Gatsbyのようにエコシステムが充実しているものに乗っかるのは正義だなと思いました。
","timeToRead":9,"frontmatter":{"title":"Gatsby製サイトにAlgoliaのサイト内検索を実装する","tags":["Algolia","JavaScript","Node.js","Gatsby","React"],"date":"May 06, 2019","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='130'%20viewBox='0%200%20400%20130'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2060v35h13l23-1c12%200%2014-1%2011-5-1-2%200-2%2050-2a1654%201654%200%200096-4c0-4-1-4-56-5l-57-1c-16-4-17-26-3-33%204-2%208-2%2063-2a603%20603%200%200023-2c-27%200-31%200-30-1l1-4c-1-2-2-2-29-2H77l1-3-1-4-39-1H0v35m258-6c-2%204%204%2010%207%208s5-6%204-8c-1-3-10-3-11%200m76%205l-2%208-2%204h9c8%200%208%200%209-3l-1-3c-1-2%200-2%209-2h11v-6l-17-1h-16v3'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.0925925925925926,"src":"/static/805aa3b7b4b5304126127d01dcd71951/8eab8/featured-image.png","srcSet":"/static/805aa3b7b4b5304126127d01dcd71951/1ec58/featured-image.png 334w,\n/static/805aa3b7b4b5304126127d01dcd71951/ccb4a/featured-image.png 668w,\n/static/805aa3b7b4b5304126127d01dcd71951/8eab8/featured-image.png 1336w,\n/static/805aa3b7b4b5304126127d01dcd71951/85e22/featured-image.png 2004w,\n/static/805aa3b7b4b5304126127d01dcd71951/a9ec1/featured-image.png 2672w,\n/static/805aa3b7b4b5304126127d01dcd71951/b3888/featured-image.png 2878w","srcWebp":"/static/805aa3b7b4b5304126127d01dcd71951/f7e47/featured-image.webp","srcSetWebp":"/static/805aa3b7b4b5304126127d01dcd71951/cd98f/featured-image.webp 334w,\n/static/805aa3b7b4b5304126127d01dcd71951/7535d/featured-image.webp 668w,\n/static/805aa3b7b4b5304126127d01dcd71951/f7e47/featured-image.webp 1336w,\n/static/805aa3b7b4b5304126127d01dcd71951/f6b67/featured-image.webp 2004w,\n/static/805aa3b7b4b5304126127d01dcd71951/f71bf/featured-image.webp 2672w,\n/static/805aa3b7b4b5304126127d01dcd71951/650fc/featured-image.webp 2878w","sizes":"(max-width: 1336px) 100vw, 1336px"}}}}}},"pageContext":{"slug":"/on-site-search-in-gatsby-with-algolia/","previous":{"fields":{"slug":"/what-benefit-of-intl-number-format/"},"frontmatter":{"title":"Intl.NumberFormatでゼロ埋めや％表記などの数値表現を楽に実装する","tags":["JavaScript","Node.js"]}},"next":{"fields":{"slug":"/dynamic-import-tips-for-gatsby/"},"frontmatter":{"title":"GatsbyでReactコンポーネントをDynamic importしてCode Splitするwork around","tags":["JavaScript","Gatsby","React"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}