どうもこんにちは、中の人です。

v1 ではあまり使ってなかったので、v2 へリニューアルをしたタイミングで不要かなと思ってはずした検索機能ですが、無いと不便だったので結局再度追加しました。

表示ボタンはPCがウィンドウ左下、モバイルがウィンドウ右上のそれぞれ虫眼鏡アイコンです。

PC・モバイルでの最適化

せっかく再実装するなら、v1のときの「とりあえず付けました」感を脱却して、ウィンドウサイズ・デバイスごとに最適な形にしたいと思いました。

PC用とモバイル用で表示の仕組みからして変えているので、話を分けます。

PC用はページ遷移無しタイプ

せっかくなのでPC用はajaxで少しリッチにしました。呼び出しボタンをクリックすると専用パネルが開き、絞り込み設定後に検索ボタンをクリックするとページ遷移無しで結果を表示するタイプです。

ページ遷移なしにその場で結果が出てくるのは、やっぱり体験としてスムーズですよね。v2でアーカイブのページ遷移をajaxにしたのと同じ発想です。

実装自体はそこまで複雑ではないんですが、挙動にこだわり初めて沼るやつ。6時間くらい。

モバイル用はv1を改修したタイプ

モバイルのほうは従来のページ遷移タイプに絞り込み機能を追加した程度です。モバイル用はスッキリしてる方がいいよねってことで、サクっと終わらせようとしてました。

最初は「まぁ2〜3時間で終わるでしょ」くらいで思っていたのにやれレスポンシブだ、やれウィンドウ幅の切り替わりのズレだ、と沼るやつ。6時間くらい。

── サクッとなんて永遠の幻想です。

そういえばどのゲームの「サクッとPT」だってサクッと行くほうが珍しい

後記

ということで、初回の機能追加は検索機能となりました。v2.1 ですね。

PC版にせよモバイル版にせよ、以後も機能追加時は同じ場所にアイコンを積んで行く予定ですが、めっちゃ増えてきたらどうするんでしょうね（他人事）

それではいずれまた。

ink_pen
この記事を書いた人（中の人 ）

中の人
れじ

Web系全般とオンラインゲームを広く浅く愛する一社会人で、プレイスタイルは『真面目なエンジョイ勢』といったところです。

気がつけばデザインを始めフロント・バックエンドといった技術的なものから、SEO・LLMOといったWebマーケまで広く浅く触る、いわゆるジェネラリスト的な仕上がりになっています。
本人はフロントエンド開発が一番好きです。

Feedback
フィードバック

当ページに記載している情報へのご意見・ご指摘は下記フォームよりご連絡ください。

当フォームについて
  • フィードバックの送信専用のため、現在中の人からの返信は行っていません。
  • 確認画面は用意していません。送信ボタンを押すとそのまま送信されます。
  • 名前は任意入力となります。匿名で送信される場合は空欄のままでも送信可能です。
  • 送信された内容はAIにてチェックを行っており、誹謗中傷や攻撃的な内容、また命令口調等の語彙が強い内容については自動的に削除されます。