どうも、令和のサグラダ・ファミリアこと本ブログです。
予てより夢見ていたサイト内検索機能を、ようやっと実装できました。ページ右上のやつです。
参考にさせて頂いたのはこの記事で、Githubのソースもかなり使わせて頂きました。本当にありがとうございました。”/“キー押したら検索窓にフォーカス当たるのええなぁと思いました。
実際やってみて、何というか、本当に各種node_modulesのバージョンアップや追加廃止のサイクルが早すぎて2年前の記事であっても単純なコピペでうまくいくほど世間は甘くないんですね…また、「Gatsbyで◯◯してみた」系のブログエントリ読んでても、Gatsbyのテンプレートによってフォルダ構成等が微妙に異なるのか、例えるならRedhat系とDebian系みたいな微妙な差異を補完する必要性が出てきたりして地味にめちゃくそ時間かかりました(3日ぐらい)。
主な引っかかりポイントは以下です(他にもいっぱいあります)。
- 開発環境でnpm updateしてたのにnetlify側でnodeのバージョン上げてなくてbuild error祭りに
⇒netlifyに.nvmrc読ませて解決 - サイトに配置するAlgoliaの検索窓のレイアウト調整
⇒htmlもcssも分からないので騙し騙しで…初めてメディアクエリなんていうレスポンシブ対応の記法知りました(無知) - ようやく検索窓配置できたと思ったらAlgoliaが「Unreachable hosts - your application id may be incorrect」とか言ってくる(下図)
⇒netlifyの環境変数に指定したAlgoliaのAPIキーが正しく読まれていない？ということで色んなサイト調べた結果、環境変数名の頭に”GATSBY_“とつければいいとのことでめでたく解決。ただ、何やら”GATSBY_“は基本的には使わないのがベターとする記事もあったので、公開してもいい環境変数のみ対象に。
紆余曲折経てようやく完成したサイト内検索ですが、Algolia本当に速い！爆速で大満足です。頑張った甲斐もあるというものです。無料プランだと10000リクエスト/月の利用制限ありますが、無名ブログなので全く問題ないでしょう。
自身の技術力の低さに焦りが募る毎日ですが、焦ってもいいことないので開き直って筋トレでセロトニンどばどばしていきたいところです。なお今日のABC195もまさかのB問題がめっちゃむずくて焦り倒した模様。無我の境地はまだまだ遠いですね…
2021/06/02追記：React Instant Searchのデフォルト設定だと、検索キーワードにヒットした箇所が検索結果欄でイタリック体になるだけでいまいち視認性が良くなかったのですが、たまたまこちらのQiita記事を見ていたらtagName=“mark”というオプションを使用すれば黄色ハイライトで強調できると書いており、試したら確かにできました。ありがとうございました。
参考：ソースの変更箇所
export function OnSiteSearchHit({ hit }) {
const { id: slug, publishedAt, timeToRead, tags } = hit
const dateFormatter = new Intl.DateTimeFormat()
return (
<div className="OnSiteSearchHit__root">
<Link to={`${slug}`} style={{ color: 'black' }}>
<div className="OnSiteSearchHit__headline">
<strong>
<Highlight tagName="mark" hit={hit} attribute="title" /> </strong>
</div>
<span className="OnSiteSearchHit__description">
<Highlight tagName="mark" hit={hit} attribute="excerpt" /> </span>以上です！