実際の画面
不動産サイト メインスクリーンショット

不動産サイト

サービス分類
Webアプリ・業務システム
公開状態
公開済み

どんなものか

17種類の条件と156の選択肢を組み合わせ、各条件の該当件数を見ながら物件を絞り込める不動産検索サイトです。

なぜ作ったか

条件を選ぶたびに候補と件数が変わるファセット検索そのものを、Webアプリとして組み立ててみることが制作の発端です。多くの条件を自然に用意できる不動産検索を題材にしつつ、検索の中身は不動産へ固定せず、定義を差し替えてECの商品検索にも使える形にしました。

見どころ

  • 選んだ条件に合う総件数だけでなく、次に選べる各候補の件数までその場で追従します。
  • 不動産の画面とは切り離した設定駆動の検索エンジンで、別のECデモでも同じ仕組みが動くことを確認しています。
  • JavaScriptが使えない場合も、通常の検索フォームとして絞り込みからページ送りまで行えます。

できること

  • 地域、間取り、価格など複数の条件で探せます
  • 条件を選ぶたびに、該当する物件数がすぐ更新されます
  • 気になる物件をお気に入りに保存できます
  • JavaScriptが使えない環境でも検索できます

特に工夫したところ

  • 条件を選ぶたびに総件数だけでなく各選択肢の件数も更新し、選択中の種類に引きずられて他候補が0件にならない数え方を実装しました。
  • JavaScriptがない場合は通常のGETフォームとして検索・並び替え・ページ送りが動き、有効な場合だけfetchとHistory APIで無再読込の操作を上乗せします。
  • 検索項目のテーブル名や列名は設定ファイルの許可リストだけを使い、利用者が入力した条件値はすべてPDOのプレースホルダとして渡します。

実際に触ってみる