MobiscrollはiOSやAndroidでの日付、時刻入力を手軽にしてくれるWeb UIコンポーネント。

MobiscrollはjQuery/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上で扱いが難しいデータが日付や時刻だ。入力するのも、入力チェックもややこしい。Webの貧弱なコンポーネントを補うためのカレンダー形式の選択ライブラリは人気が高い。


日付

そんな中、iOSの日付や時刻入力はとてもスマートに思える。スクロールを回転させて入力するのは分かりやすい。そんな入力フォームをWebベースでも実現するのがMobiscrollだ。

Mobiscrollはテキストボックスで利用するライブラリで、フォーカスが当たると日付や時刻を入力するためのMobiscrollが表示される。アプリ用のコンポーネントと同じようにスクロールして日付や時刻を選択する形だ。入力したらSetボタンを押すと反映される。


時間

日付や時刻だけ、さらに日付と時刻を一緒に入力させることもできる。さらに入力項目をカスタマイズすることもできる。時刻はAM/PMが選択できる仕組みだ。Webブラウザベースとあって、iOSの他、AndroidやデスクトップのWebブラウザでも利用できる。ユーザビリティの入力方式を使うことで、ストレスの感じやすい日付入力をスムーズにしよう。

[s2If current_user_can(access_s2member_level1)]


両方(プレミアム限定)

[/s2If]
[s2If current_user_can(access_s2member_level1)]


カスタム(プレミアム限定)

[/s2If]

MOONGIFTはこう見る

Mobiscrollの面白い所は、iOSのWebブラウザであればJavaScriptが使えない心配がほぼない(ネットワークの問題でもない限り)ので安心して利用できることだろう。指先で滑らせて入力するので、マウスよりもスマートフォンの方が入力しやすいはずだ。

カレンダーでの入力もあるが、スマートフォンではコンポーネントが小さいので入力しがたい。つまりデスクトップとスマートフォンでは最適な入力方式が異なるということだ。デスクトップ向けについては長い歴史によって幾つものライブラリができてきた。スマートフォンはこれから次々に開発されていくことだろう。

mobiscroll - Wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab) - Google Project Hosting