ITエンジニア/デザイナ向けにオープンソースを毎日紹介

jQuery Knobはノブを使って値の設定を行うコンポーネントです。スクロールで値をスムーズに変化させられます。

Webで標準で使えるコンポーネントはパターンがとても少なく、表現力が乏しいのが欠点です。今回紹介するjQuery Knobはノブ型のコンポーネントでスクロールを使って値を設定するタイプの新しいコンポーネントになっています。


デモです。サークルの中でスクロールすると値がスムーズに変化します。


大きさや数字を非表示にしたりできます。


表示のみに設定もできます。


アクションで表示を行うこともできます。


iPodのホイール風表示です。マックスを設けずに表示もできます。


デモ動画です。

jQuery KnobのデザインはCanvasを使って描かれており、画像を用意する必要はありません。また、タッチやマウスホイール、キーボードによる入力に対応したイベントが取れるようになっています。テキストフィールドを置き換えるので、そのまま数値入力の代替えとして利用できます。

jQuery KnobはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

この手のUIとしてはiPodのデザイナーが作った世界で最も美しいサーモスタットとして知られるNestのデザインを彷彿とさせます。もちろんiPodもそうです。回転式入力というのも使いどころがありそうです。スクロールの代わりに使ってみたりしても面白そうです。

キーボードの入力よりもマウス、そしてマウスよりも直感的な入力ができるのではないでしょうか。直感的な入力はiPhoneやiPadに代表されるタッチスクリーンが代表的です。マウスやキーボードを介するデスクトップでの入力はやはり直感的とはいえません。今後、インターネットの利用者が増えるに従ってさらにそうしたUIの改善は求められるでしょう。

jQuery Knob demo

aterrien/jQuery-Knob

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch