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

Mobiscrollの使い方

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

日付の選択。

日付＋時間。

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

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

アイコン付き。

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

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

iOS 8風。

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

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

Mobiscroll - Customizable HTML5 UI components for touch devices like smartphones and tablets acidb/mobiscroll