とあるWebサイトで、条件を最大5件まで指定して絞り込みができる仕組みがありました。
絞り込み条件を5件まで指定すると、それ以上は指定できないように作られていて、現在指定している条件を一発で解除できるリセットボタンも用意しています。
動作テストも問題がなかったので本番環境に実装しましたが、ログを見ていると、なぜかときどき5件以上の条件を指定している人がいます。
5件までしか条件を指定できないように作っているのに、なんで5件以上指定できるのか、気持ち悪いので調査してほしい！…そんな今日のヘルプ。
一度情報を整理します
とあるWebサイトには、以下のようなページがありました。
- データベースに登録された商品情報を読み込み、一覧を表示するページ
- 商品が多いので、商品の種類ごと、商品につけられたタグごとに条件を指定し、絞り込む機能がある
- 絞り込むための条件は最大5件まで指定できる
- 絞り込みは、種類同士はOR、タグ同士もOR、でも商品とタグが同時に指定されたら商品とタグ同士はAND…つまり「（商品OR商品...）AND（タグORタグ...）」という感じ
そして、今回の問題点は、3番目の「絞り込むための条件は最大5件まで」の制限が効かず、5件以上指定できてしまう状況が発生している、というもの。
ただし、5件以上指定できてしまっても動作的にエラーになっている訳ではないので、そういった意味では問題なし。ただ「最大5件まで」と注意書きをしているのに「指定が効いていない」のが気持ち悪いということで、直せるなら直したい、と。
問題点は2つありました
まず、5件以上指定できてしまう状況を確認します。
普通にページを表示して条件を選択しても、5件以上は選択できません。これは処理上、「選択された項目が5件かそれ以上になった時点でチェックボックスを無効化」しているから。
しかし、実はここにひとつ問題点がありました。後述します。
次に、絞り込みをして表示したあとのリセットボタンの挙動。このリセットボタンは、フォームのリセット処理をするのではなく、単純に商品一覧ページへのリンクになっていました。
ここに、もうひとつの問題点がありました。後述します。
この2つの問題により、すぐに5件以上を選択できる状況を再現できました。
- 何でもいいので5件選択し、絞り込み表示する
- リセットボタンをクリック
- ブラウザの「戻る」をクリック
- 絞り込み条件を表示すると5件選択された状態になっていますので、さらにもう1件選択できる
なぜこうなるのか。
問題点その1
リセットボタンがフォームのリセットではなく、商品一覧ページへのリンクになっているだけなので、チェックボックスがチェックされている状態をリセットしていません。ですので、ブラウザの「戻る」で戻った場合、チェックされていた状況に戻ってしまいます。
問題点その2
チェックボックスを無効化する処理は、「選択された項目が5件かそれ以上になった時点」で処理されています。つまり、チェックボックスにチェックがついている個数が5個かそれ以上になった「後」に無効化している、という状況。
つまり、一旦チェックが付いていない状況のページが表示された後、ブラウザバックで「5つチェックされた状況」に戻ったのに、「チェックの数を数えて無効化する処理」はチェックを付けた後に動くため、6件目にチェックできてしまったのです。
これを繰り返せば、全ての条件を選択することもできてしまいます。
改善方法
では、どう改善したらいいか。考えられる方法はいくつかあると思いますが、今回のような状況で一番簡単な解決法は、inputタグ（チェックを付けるタグ）に「autocomplete="off"」を付ける方法。
本来は、ブラウザのオートコンプリートを制御する属性ですが、ブラウザバックしたときに値が保持されているのはブラウザがチェック状態を記憶しているからなので、オートコンプリートの機能をOFF（＝ブラウザに状態を記憶しない）にしてあげれば、ページ遷移が行われることで「選択された項目が全て解除される」という状況になるわけですね。
今回はこの属性ひとつ追加することで、解決できました。
さいごに
ということで、5件までしか条件を指定できないはずなのに、5件以上選択できてしまうことがある、という状況の原因を探ってみました。
ちなみに、リセット処理を入れていたところで、ブラウザバックしてしまえば想定外の動きをしてしまう可能性はありますが、選択された項目数が5件以上かどうかのチェックを「チェックボックスをクリックしたとき」に行っていれば、恐らく問題にはならなかったことでしょう。
そして、今後を考えると、チェック項目数の確認タイミング見直しとリセット処理の追加、そして「autocomplete="off"」も併用しておくと、なお良いのかもしれません。
今日の作業は以上です。お疲れ様でした！
コメント