以前勤めていた留学会社にて絞り込み検索ができないかという要望があり、当時数ヶ月かけてコツコツと構築しました。例えば州や都市、学校の規模、学習スタイル（厳しい、楽しいなど）、提供コース、公立・私立、などの条件から絞り込むという機能です。完全に手探りの状態で0から始めたので数ヶ月かかりましたが、最終的に辞める直前にこの機能のみ完成に至りました（ウェブサイト未完）。
この機能は幅広く使えるので忘れないように自分のブログに実装して備忘録のため作り方を公開しようと思いながら半年経ってしまい、重い腰を上げて先週末ようやくこのブログに実装しました。前職では数ヶ月かかって仕組みを作った検索機能ですが今回このブログに実装するにあたっての作業時間はわずか
会社で作っていたものに比べて簡易版ではありますが一度得た技術を応用するのは容易でした。実装したのは以下のような「ブログ内の山の記事」検索フォームです。
自分がこの機能を作る際はかなり色々な人のブログを参考にさせていただいたので、誰かのお役に立てればとこのフォームの全コードを載せつつ作成のポイントなどを3つのページにまとめました。
- 事前準備編
- カスタムタクソノミーの作成
- サイドバーでPHPを動かす
- JSファイルの設置
- 検索フォーム作成
- 絞り込み検索の設計
- PHP、jQueryの全コード
- search-form.php
- selection.js
- セレクトボックスの表示コントロール
- 2つのセレクトボックスの連動
- チェックボックスの作成
- 検索結果表示
- PHP全コード
- 検索条件の表示
- 備忘録
そんな検索機能の構築にあたって、前職で検討のため様々なサイトを見てみたところ絞り込みには主に以下3つの要素があることに気づきました：
- セレクトボックスやラジオボタンなど基本的にひとつしか選択できない要素と、チェックボックスのように複数選択できる要素がある。例）州や都市はプルダウン式のセレクトボックス、公立・私立は二択なのでラジオボタン、提供コースは複数選択可能なのでチェックボックス、等
- 検索する際に要素同士を掛け合わせていくのがいわゆる絞り込み機能の根幹。例）オンタリオ州トロント x 私立 x 楽しい校風 x ビジネス英語とTOEICコースを提供している、等
- セレクトボックスには単純に選択肢の中から選ぶだけのものと、一つを選択したら別のセレクトボックスの条件が切り替わりさらに細かく選べるようになるものがある。例）一つのセレクトボックスで州を選んだら別のセレクトボックスで都市を選べるようになる、等
上記を前提に、前職で作成したコードをベースとして今回は以下の要素を盛り込みました：
- フリーワード＝通常の検索窓
- すべての山の記事から検索するか百名山の記事に絞るか＝ラジオボタン
- 百名山で記事を絞った場合山の選択肢のセレクトボックスが消える仕様
- 都道府県のリスト＝セレクトボックス
- 都道府県を選択すると山の選択肢が選択可能になる仕様
- 温泉、御朱印という山とセットになりがちな要素＝チェックボックスで複数選択可能
検索ボタンを押すと上記すべてを掛け合わせた条件で検索された記事が表示される仕組みになっています。このフォームで特に難しかったのが「山の選択肢は都道府県を選択すると選択可能になる仕様」の実装です。これには2つのセレクトボックスの連動が必要でこの機能を実現するのにかなり多くの時間を費やしました。結果的にはPHPとjQueryを駆使して実現し、フォームが思い描いた動きをしてくれたときにはかなり嬉しかったと記憶しています。
盛り込みきれなかった点として不動産や航空券のサイトによくある「（価格などの）下限と上限を設定して検索結果を絞り込む」という機能があります。これは前職でも作るに至らなかった機能なので今回は見送りましたが、山と掛け合わせた場合例えば日帰り、1泊、2泊、3泊、4泊、5泊…みたいな感じで山行の日数を下限／上限として結果を絞れる機能が考えられます（自分の場合日帰りが圧倒的に多いので1泊以上にした時点でかなり絞られることが予想されますが）。ただ、これを行うには（おそらく）山の記事ごとにその内容が何日間だったのかというパラメータを与える必要があり、この作業が結構煩雑です。いずれやってみたいなとは思う。
今後も引き続きコードの勉強を続けていきたいと思います。この記事が誰かのお役に立てていれば幸いです。