リストやテーブル主体のスマートフォン最適化サイトに「ChocolateChip-UI」 // MOONGIFT Archived

ChocolateChip-UIはHTML5製のスマートフォン最適化サイト用フレームワーク。

ChocolateChip-UIはHTML5製スマートフォン用のオープンソース・ソフトウェア。スマートフォンはこれまでのデスクトップ型に比べると圧倒的に画面サイズが小さい。そのためWebサイトのデザインを行う上で注意すべきことが色々ある。またiOS風にデザインするのも難しい。

リスト

そのためデザインテンプレートを使うのが一般的になっている。Webデザインだけを提供するもの、jQuery Mobileのように統合的に提供するものなど色々あるが、ChocolateChip-UIは後者に属するスマートフォンWebサイト向けフレームワークだ。

ボタン

ChocolateChip-UIで提供されるのはテーブルビュー、アコーディオンビュー、ナビゲーションバー、リスト、各種ボタン、ポップアップ、スライダーなどのデザインだ。さらにローカルストレージやAjaxによるデータ取得も考慮されている。

数多くのアイコンやデザインパターンが考慮されている。縦にスクロールするページネーション機能は他では見られないユニークな機能だ。リストやテーブルをメインに使うスマートフォン向け最適化サイトであればChocolateChip-UIを使うと手早く組み立てられそうだ。

[s2If current_user_can(access_s2member_level1)]

ツールバー（プレミアム限定）

[/s2If]
[s2If current_user_can(access_s2member_level1)]

画像付きリスト（プレミアム限定）

[/s2If]
[s2If current_user_can(access_s2member_level1)]

テーブル（プレミアム限定）

[/s2If]
[s2If current_user_can(access_s2member_level1)]

ページネーション（プレミアム限定）

[/s2If]
[s2If current_user_can(access_s2member_level1)]

タブ（プレミアム限定）

[/s2If]

MOONGIFTはこう見る

ChocolateChip-UIは多様なパターンを提供しているが、足りない部分も多い。リストやテーブル以外は現状ではあまり機能が多くない。そのため地図や細かな表示を行いたいと思った時には別なテンプレートも組み合わせる必要がありそうだ。

だがそれらは向き不向きだ。全てに対応したテンプレートを作るのは難しい。ChocolateChip-UIを知っておけば、最適化サイトを構築する際にどのようなパターンがあるかを見極めて選定することができるはずだ。どういったサイトに向いているか、デモを見て確認してほしい。