ウェブサイトのCSSによるデザインの実装は、デザイナーの方が行うことが増えてきていますが、
iPhoneのネイティブアプリはエンジニアが行うことが多いのではないでしょうか。
「デザインの実装」というフェーズはデザイナーの方がしたほうが良いと僕は思っているので、ネイティブアプリをCSSでデザインするというのは自分にとっては期待の方法です。
ということで「Pixate」「NimbusKit」「NUI」という、３つの「CSS フレームワーク」を比較してみました。
ドキュメントやサンプルを軽くなめただけで、実際の使用感やバグなどはわかりませんので、ご了承下さい。
Pixate
Pixate は、Appceleratorなどに支援されている、有料のCSSフレームワークです。最安で\18,479と、強気な値段・・・。
対応しているCSSはPixate Engine for iOS Styling Referenceに記されています。
対応しているプロパティーや変更できるコントロールも多いですし、widthやheightを使ったサイズ設定だけでなく、gradientやtransformなどにまで対応しています。
Media Queryによって、デバイスの傾きごとにスタイルを適応することも出来るようです。
商用元商用なだけあって、Pixate Visualizerと銘打ったサポートツールなども出る予定です。
かなり本来のCSS志向なフレームワークに感じました。値段が気にならないようであれば、使ってみると良いかと思います無料になりました。
NimbusKit
NimbusKit は、デバッグツール等を含んだ、総合的なフレームワークです。CSSのためのフレームワークではないですが、CSSでのデザインがサポートされています。
対応しているCSSはNimbus: CSS Stylesheetsに記されていますが、ほとんど対応されていないと言っていいです。
gradientも対応していませんし、UINavigationBarの画像差し替えなどもできません。
CSSのためにNimbusKitを使うのはおすすめしません。(デバッガーツールなど、他に便利なものはあるので、そういった用途ではありでしょう)
NUI
NUIは、CSSのためのフレームワークで、オープンソースです。AFNetworkingなどで有名なmatttも言及していました。
サポートしているものは、tombenner/nui · GitHubに示されている通り、NimbusKitに比べて多いです。
gradientを使うことはできませんが、２値のグラデーションボタンを作ったり、UINavigationBarの画像差し替えなどもできます。色設定に関しては結構出来る、といった印象です。
反面、基本的にはサイズや位置は、CGRectMakeを使って自分で設定しなければならないようです。
コードからデザインに関する記述をなるべく除く、という用途に比較的使えるのではないかと思います。
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
みたいなコードがViewControllerに入ってるのは気持ちわりいですからね。
もしデザイナーと共同でやるのであれば、サイズや配置などをプログラマーが決定して、デザイナーが色や画像などの設定をする、といった連携などが可能かと思います。
追記
Pixateが無料(Completely free)になったとのことです。従って、この中ではPixateが一番良いのではないかなあ、という結論です。
もっとも、これからはiOS7の時代ですし、Flat Designになっていくに従って、NUIの機能だけで十分だ、という意見もありそうです。むしろ、iOS7をちゃんとサポートして、Appleの求めるFlat Designが作りやすくなっているか、というのが大事になる気がします。
