Webサイトのモバイルシフトが進んでいます。Googleはクローリングにおいてスマートフォン対応しているか否かを指標に加えると発表し、さらに単なる表示を整えるだけでなくCSS3やCanvasを使ったアニメーションを使ってまるでモバイルアプリ化のようにも動作するWebサイトも増えています。
そんな中だからこそ知っておきたいライブラリがMobiscrollです。MobiscrollはスマートフォンネイティブレベルのUIコンポーネントを提供するライブラリです。
Mobiscrollは様々なコンポーネント、テーマが提供されています。基本は何かを選択するコンポーネントになるようです。例えばモーダルでの選択です。
日付の選択。
日付+時間。
モーダルではなくインラインで表示する場合。
ツールチップ方式で下に表示。
アイコン付き。
各選択項目が連動しているパターン。
ちょっとクラシックなテーマ。
iOS 8風。
Mobiscrollは全ての入力コンポーネントがあると言う訳ではありませんが、日付や選択式の項目をユーザビリティ高く表現するのに良さそうです。スマートフォン向けのWebアプリで使えるところがありそうです。
MobiscrollはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
Mobiscroll - Customizable HTML5 UI components for touch devices like smartphones and tablets