iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」
ChocolateChipはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア（BSD License）です。
モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版とも言えるChocolateChipを紹介します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.37.36.1379847965.png)
例えばこちらはiPhone風。iOS 7に似ています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.37.40.1379847969.png)
同じ内容でAndroid風。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.37.43.1379847973.png)
こちらはWindows Phone向け。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.37.52.1379847977.png)
Todoなどで使えるリスト。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.37.55.1379847984.png)
同じ表示もAndroid風にすると印象が随分変わりますね。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.37.59.1379847989.png)
AndroidでスイッチUI。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.03.1379847994.png)
iPhoneでレンジ。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.06.1379847999.png)
削除できるリスト。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.10.1379848004.png)
ポップアップ。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.18.1379848011.png)
ポップオーバー。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.23.1379848016.png)
タブバー。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.29.1379848021.png)
ページネーション。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.35.1379848027.png)
シート。半透明なのがiOS 7に似ていていい感じです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.42.1379848031.png)
リスト。サムネイル付きです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 21.38.47.1379848037.png)
アイコン付きリスト。
ChocolateChipはiOS 7風UIに対応し、さらにAndroidとWindows Phoneにも似せたテーマが提供されています。これだけのコンポーネントがあればネイティブ風Webアプリケーションも手軽に作れるようになりそうですね。
MOONGIFTはこう見る
従来、この手のライブラリとしてはiPhone風に寄せるものが多かったように思います。実際、Webサイトを訪問するモバイルデバイスの半分以上はiOSであり、実際のモバイルデバイスシェアに比べてiOSからのアクセスは多いのが実情です。
しかしAndroidの台頭やWindows PhoneやFirefox OSなど第三のデバイスが出てくるのに合わせてテンプレートライブラリも進化しつつあります。特にテーマで分けられるChocolateChipを使うのは各デバイスへの最適化も容易に実現できそうです。