絞り込んだ一覧をそのまま人に送れるようにするには、条件をURLに書く

一覧に、都道府県で絞り込む機能を付けたとする。
選ぶとその県のものだけが残る。動きとしては、ちゃんと動いている。

その画面のアドレスをコピーして人に送る。
すると相手の画面には全件が出る。
JavaScriptだけで絞り込む作りだと、こういうことが起きる。

その一覧は、選んだ人の画面の中にしかない

ボタンを押すと、条件に合わない行を隠して、合う行だけ残す。
見た目はきれいに絞り込まれる。
でもページそのものは、最初に読み込んだ全件の一覧のままだ。

アドレス欄は、絞り込む前と一文字も変わっていない。
送ったのは「一覧のURL」であって、「長野で絞り込んだ一覧のURL」ではない。
相手の画面に全件が出るのは、考えてみれば当たり前の結果だ。

困るのは、人に送るときだけではない

同じ理由でつまずく場面が、ほかにもいくつかある。

ひとつは、詳細を見てから戻るとき。
絞り込んだ状態から一件開いて、ブラウザの戻るを押すと、条件が消えて全件に戻る。
また選び直しだ。

ひとつは、再読み込み。
画面を更新した瞬間に条件が消える。

ひとつは、お気に入りへの登録。
よく見る条件を保存しておきたいのに、保存されるのは条件なしの一覧になる。

どれも別々の不具合に見える。
でも原因はひとつで、いま何を選んでいるかという情報が、ページの中の変数にしか置かれていない。
変数は、画面を離れれば消える。人にも渡せない。

条件をURLに書く

直し方そのものは難しくない。
選んだ条件を、アドレスの末尾に書く。
長野なら ?pref=20 のような形だ。

そして、その条件を受け取ったらサーバー側で絞り込んだ結果を返す。
画面で隠すのをやめて、最初から必要な行だけを持ったページを作る。
絞り込みのボタンも、条件つきのアドレスへのリンクにしておくと素直に動く。

これでアドレスをコピーすれば、相手にも同じ画面が出る。
戻るボタンでも条件が残る。
再読み込みでも消えない。お気に入りにも入る。

ひとつ直すだけで、別々に見えていた困りごとが同時に消える。
こういうときは、たいてい元の作りのほうが間違っている。

このサイトの一覧も、そうしている

このサイトの泊まれる場所の一覧も、種類の絞り込みは ?type=campsite のようにアドレスで持たせて、サーバー側で絞っている。
作る途中のデザインには、全件を出してJavaScriptで隠す仕組みが入っていた。
それは使わずに、アドレスで条件を受け取る作りにした。

あとから効いてくること

検索エンジンが、条件つきの一覧をひとつのページとして扱えるようになる。
隠しているだけの状態だと、外から見ればどのページも同じ中身に見える。
見えているものと、送られているものが違うわけだ。

アクセス解析でも、どの条件がよく見られているかが分かるようになる。
アドレスに書いてあるから、記録に残る。

絞り込みの入力欄については前にも書いた。
あちらは打つたびに重くなる話で、こちらは打った結果をどこに置くかという話だ。
同じ小さな欄なのに、ずいぶん違うところでつまずく。