くるくる回して入力するUIを作ってみた

とある範囲の値を入力してもらいたいけど, テキストボックスじゃ自由度高すぎるし, 範囲が微妙に広いからコンボボックスじゃ選ぶのめんどいなー*1.

そんなコトを考えているときに「こんなのどうよ?」と思って作ってみた.

とりあえずこんな風になった

このページを開いて, 青いボックスの上でマウスのボタンを押しっぱなしにすると, ちっこい矢印がでてくる. その状態で, その矢印を中心に:

• 時計回りにドラッグするとカウントアップ
• 半時計回りにドラッグするとカウントダウン

します.

欠点

• 入力の仕方がわかりにくい*2
• 入力範囲が広すぎると何回もくるくるしなくちゃいけないのでめんどくさい

とりあえず意外におもしろい動きなんじゃないかと思います. iPodのUI? 知らないお( ^ω^)*3

あ, もし使いたい方はこちらからJavaScriptのソースを取得してもらえればいいかと思います. ちなみにjQueryに依存しているのでご了承を.

あと例に使ったソースはこちらです.

*1:下三角クリックして, スクロールして, 目的の項目をクリックするっていう手順がなんか煩雑だと思うのです

*2:センターとなるマーカーを工夫すればいいと思うけど

*3:作っている途中で「iPodのような操作感だなー」と思いましたけど