Mobiscroll - スマホWebサイトに使えるUIコンポーネント

Webサイトのモバイルシフトが進んでいます。Googleはクローリングにおいてスマートフォン対応しているか否かを指標に加えると発表し、さらに単なる表示を整えるだけでなくCSS3やCanvasを使ったアニメーションを使ってまるでモバイルアプリ化のようにも動作するWebサイトも増えています。

そんな中だからこそ知っておきたいライブラリがMobiscrollです。MobiscrollはスマートフォンネイティブレベルのUIコンポーネントを提供するライブラリです。

Mobiscrollは様々なコンポーネント、テーマが提供されています。基本は何かを選択するコンポーネントになるようです。例えばモーダルでの選択です。

日付の選択。

日付＋時間。

モーダルではなくインラインで表示する場合。

ツールチップ方式で下に表示。

アイコン付き。

各選択項目が連動しているパターン。

ちょっとクラシックなテーマ。

iOS 8風。

Mobiscrollは全ての入力コンポーネントがあると言う訳ではありませんが、日付や選択式の項目をユーザビリティ高く表現するのに良さそうです。スマートフォン向けのWebアプリで使えるところがありそうです。

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