Googleカレンダー風に時間を入力「Timepicker for jQuery」
Timepicker for jQueryはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
Web上で入力する事が多いのが日時です。日付についてはカレンダーピッカーがありますが、時間は意外と面倒な入力を行う事が多いです。そこで使ってみたいのがGoogleカレンダー風入力を実現してくれるTimepicker for jQueryです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.25.23.1375322680.png)
基本的な使い方。クリックすると30分ごとの時間が出てきます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.25.43.1375322683.png)
現在時刻を中心にセットしてくれる設定もあります。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.26.03.1375322685.png)
ある時刻からの時間を表示するデモ。1時間のミーティングなども指定しやすそうです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.26.16.1375322689.png)
ある時間を無効にする指定もできます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.26.25.1375322692.png)
時間のフォーマットは自由に設定できます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.26.33.1375322695.png)
ステップはデフォルト30分ごとですが、15分や60分も指定できます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-23 12.27.07.1375322698.png)
カレンダー入力と連携する形です。この二つで入力が随分と楽になりそうです。
WebベースのカレンダーサービスとしてはGoogleカレンダーが最も優秀なUIを提供しているのではないでしょうか。そのUIを真似るのはユーザビリティを考える上でとても良いアイディアだと思います。
MOONGIFTはこう見る
利用者の多いWebサービスは総じてUIについても優れているものです。その操作性やUIを真似る事は、ユーザビリティを考える上で欠かせません。まず模倣からはじめて、エッセンスを得られれば自分たちのサービスに反映させることができるでしょう。
オープンソースであれば特にそういった模倣はクローンライブラリとして人気があります。企業によってはGoogleカレンダーを使えない場合もあるので、そうした時にUI改善の一案として取り入れられるでしょう。