Mac OSXのFinder風に動くドリルダウン式選択コンポーネント「jcvl」
ドロップダウンリストでカテゴリとサブカテゴリが連動したりする表示はよくあります。しかしあまり使いやすいとは言えません。そこでjcvlを使ってみましょう。ドリルダウン式、さらに複数選択もできる使いやすそうなコンポーネントです。
デモです。カラムは左からドリルダウンしていきます。選択すると、その結果が下にタグ上になって表示されます。
中央のカラムの選択を変更すれば、その右側のリストが変化します。
一段階のドリルダウンをした場合の表示です。この場合は三段目のカラムは表示されていません。子要素がない場合は「●」が表示されません。
コードです。リストを組み合わせたシンプルな作りになっています。
jcvlはリストを使うだけでドリルダウン式の（Mac OSXのFinder風の）UIを実現できる点にあります。Ajaxでコンテンツを取得しないので表示も高速です。カテゴリやタグなどの記入補助に使えそうです。
jcvlはjQuery/JavaScript製のオープンソース・ソフトウェア（New BSD License）です。
MOONGIFTはこう見る
GoogleによってWebで検索するという作りは一般化されてきたように言われていますが、個人的な印象としてはまだまだというのが実感です。あらかじめ選択肢が用意されている中から選ぶ方が好まれる傾向にあります。逆に何もないと不安に感じ、離脱したり何も入力しなかったりします。
その意味では選択式のUIというのはユーザコントロールもできる分、運営側にとっても都合の良い作りと言えます。ただし選択式というのは項目が多くなって見づらくなるのが欠点です。jcvlの手法はドリルダウン式で階層化しやすく、ユーザビリティも高いのではないでしょうか。