microCMSで全文検索機能を導入して、ヘッダーも変えてみたよ！
2024/09/15 09:41:29
こんにちは、UmiSiozakiです。 当サイトに検索機能を追加し、それに伴ヘッダーも編集してみたので使い方とか変更点、導入にあたっての備忘録等書いていきます！
検索機能
画面上部にスマホ、PC・タブレットにて検索機能を追加しました～。以下の様な感じです。
スマホ版
画面上部の虫眼鏡をクリックすると、検索窓が出てくる。
PC・タブレット版は画面右上に最初から表示されてます。
こちらで検索したいブログもしくは制作物に関する検索キーワードを入力するとそれに関する記事が以下のように出力されます。試しに「ゲーム」で検索してみましょう。
このように該当記事が出力されます！色々試してみてね！
ヘッダーの編集
検索機能実装に伴い、サイト上部に表示されてるヘッダーを編集する必要が出てきました！
ヘッダーとは？
ヘッダーとはWebサイトの上部に色々表示されてる情報のことです。当サイトだと写真の赤い部分で囲まれてる部分です。
上部の写真はPC・タブレット版のものになるのですが、スマホ版もこのままだと大変窮屈になるので、今までは右上の３本線のボタン(ハンバーガーメニュー)をクリックするとヘッダーから下にスライドする形でヘッダー情報が出ていましたが、それだと検索窓の挙動と被って、使いづらいなと感じたため変更することにしました。
ヘッダー情報をスライドして出す
スマホ版のヘッダー情報を左からスライドする形で出力するようにしました！また、現在いるページを青色でわかりやすくしています。ポチポチ押してみてね！
実装に当たっての備忘録
ここからは、実装に当たって調べたことや気づいたこと等の備忘録を書いてきます！僕自身のために書くメモのような内容になります！
画面遷移はrouter.push
next.jsにおいて、input要素が入力完了した等のイベント処理の際は、Linkタグによる画面遷移ができないので、代わりにrouter.pushを使います。また、router.pushを用いることによって遷移先にクエリパラメータを簡単に渡すことができます。
こちらの記事を参考にしました！
検索機能はmicroCMSさんのqパラメータとServerless Functions
microCMSさんのこちらの記事をベースに全文検索機能を実装しました。
ユーザー側からの呼び出し時にはSWR×LocalStorageを使用
SWRについては、こちらの記事から引用します。
SWR とは Next.js でおなじみの Vercel 社が提供しているデータ取得のためのライブラリです。
(出典元：Qiita @hakshu SWRを使いたいんじゃ!!)
Api呼び出し時等のキャッシュ管理やレンダリングを高速化する処理を簡単に記述できるみたい？まだまだ理解できてない部分がありますが、使いながら色々勉強していこうと思います。
ハンバーガーメニュー実装にはreact-burger-menuを使用
ハンバーガーメニューを簡単に実装する方法が無いか調べたところ、react-burger-menuというライブラリを使用するといいとあり使用してみたところうまくいきましたので、こちらを使用して実装いたしました。(参考記事：react-burger-menu is 何)
デフォルトのアイコンだと使い勝手が悪かったので、以下のようにしてデフォルトのアイコンを無効化しました。
<Menu customBurgerIcon={ false } />
そして、外部からメニューの開閉をできるようにしたのち、headerタグの直前にメニューを配置して、自分で置いたハンバーガーメニューの開閉状態とuseStateを用いて同期して実装しました。
Tailwind CSSのレスポンシブデザイン
Tailwind CSSにてレスポンシブデザインを組むに当たって重要な概念が以下の３つでした。
- 画面サイズが~pxi以上のメディアクエリを簡単に適用するためのブレイクポイント(Tailwind CSS公式)
- ~px以下のときのデザインを適用する。(Tailwind CSSでレスポンシブデザインを組むには)
- グリッドレイアウト(Tailwind CSS 公式)
最後のグリッドレイアウトに関しては、こちらとブレイクポイントをうまく利用すると、画面幅によってコンテンツを表示する個数を簡単に制御できます。例えばスマホならブログ記事を横並びに２つ、PCなら横並びに４つなど。
今後の展望
次に実装してみたい機能として、画面を上にスライドしたらすっとヘッダーが出てくるようにしてみたいなと考えています。それより前にトップに戻るボタンのが先かなぁ・・・
最後に
ここまで読んでくれてありがとうございます！それではまたね～～！
