読者です 読者をやめる 読者になる 読者になる

病みつきエンジニアブログ

機械学習、iPhoneアプリ、Javascript,Ruby on Railsなどなど。

【追記あり】iPhoneのネイティブアプリのデザインにCSSを使う方法の比較

ウェブサイトのCSSによるデザインの実装は、デザイナーの方が行うことが増えてきていますが、
iPhoneのネイティブアプリはエンジニアが行うことが多いのではないでしょうか。

「デザインの実装」というフェーズはデザイナーの方がしたほうが良いと僕は思っているので、ネイティブアプリをCSSでデザインするというのは自分にとっては期待の方法です。
ということで「Pixate」「NimbusKit」「NUI」という、3つの「CSS フレームワーク」を比較してみました。
ドキュメントやサンプルを軽くなめただけで、実際の使用感やバグなどはわかりませんので、ご了承下さい。

Pixate

Pixate は、Appceleratorなどに支援されている、有料のCSSフレームワークです。最安で\18,479と、強気な値段・・・。
対応しているCSSPixate Engine for iOS Styling Referenceに記されています。
対応しているプロパティーや変更できるコントロールも多いですし、widthやheightを使ったサイズ設定だけでなく、gradientやtransformなどにまで対応しています。
Media Queryによって、デバイスの傾きごとにスタイルを適応することも出来るようです。
商用元商用なだけあって、Pixate Visualizerと銘打ったサポートツールなども出る予定です。
かなり本来のCSS志向なフレームワークに感じました。値段が気にならないようであれば、使ってみると良いかと思います無料になりました。

NimbusKit

NimbusKit は、デバッグツール等を含んだ、総合的なフレームワークです。CSSのためのフレームワークではないですが、CSSでのデザインがサポートされています。
対応しているCSSNimbus: CSS Stylesheetsに記されていますが、ほとんど対応されていないと言っていいです。
gradientも対応していませんし、UINavigationBarの画像差し替えなどもできません。
CSSのためにNimbusKitを使うのはおすすめしません。(デバッガーツールなど、他に便利なものはあるので、そういった用途ではありでしょう)

NUI

NUIは、CSSのためのフレームワークで、オープンソースです。AFNetworkingなどで有名なmatttも言及していました
サポートしているものは、tombenner/nui · GitHubに示されている通り、NimbusKitに比べて多いです。
gradientを使うことはできませんが、2値のグラデーションボタンを作ったり、UINavigationBarの画像差し替えなどもできます。色設定に関しては結構出来る、といった印象です。
反面、基本的にはサイズや位置は、CGRectMakeを使って自分で設定しなければならないようです。
コードからデザインに関する記述をなるべく除く、という用途に比較的使えるのではないかと思います

[button setBackgroundImage:buttonImage forState:UIControlStateNormal];

みたいなコードがViewControllerに入ってるのは気持ちわりいですからね。

もしデザイナーと共同でやるのであれば、サイズや配置などをプログラマーが決定して、デザイナーが色や画像などの設定をする、といった連携などが可能かと思います。

追記

Pixateが無料(Completely free)になったとのことです。従って、この中ではPixateが一番良いのではないかなあ、という結論です。

もっとも、これからはiOS7の時代ですし、Flat Designになっていくに従って、NUIの機能だけで十分だ、という意見もありそうです。むしろ、iOS7をちゃんとサポートして、Appleの求めるFlat Designが作りやすくなっているか、というのが大事になる気がします。

広告を非表示にする