GoogleMapがiPhoneでリリースされて、それにはNimbusKitが使われてるらしい！ NimbusKitではCSSでViewの外見が設定できるらしい！ って噂を聞いたので、噂のNimbusのサンプルをいじってみました
NimbusKitでできること
サンプルには三種類のプロジェクトが入ってて、その中はサンプルがいっぱい入ってて・・・という普通の構成でした。 機能としては大きく分けると２つ、「みんなが使ってたもののコードが簡単にかけるようになったよ」というものと「Nimbusだからこそこれができるよ！」というものに勝手に分けました。 まず、「みんなが使ってたもののコードが簡単にかけるようになったよ」は、見ててもあんまし面白く無いので省略。 ちょっとだけ書くと、UILabelの拡張やらNavigationBarの色変更、ネットワーク経由の画像表示などです。 それぞれ個人で工夫してクラス化とかしてたと思いますが、それをまとめた感じです。 メインはもう片方の「Nimbusだからこそこれができるよ！」の方。 こちらは
- CSSがViewに適用できる
- デバッグコンソールが付けれる
の２つ。 これについてちょっと書いて行きたいと思います。 今日のところはCSSの方だけです。 明日デバッグの方書きます
CSSがViewに適用できる
まず使い方から。 サンプルによると、まずcssをロードします。 このときキャッシュが効くようにしてますね。すべてのViewControllerで共通のcssを使うことを想定しているのかもしれません。 そしてNIDOMというのを作成しておきます。スタイルシートの管理者的な扱いでしょうか。
NIStylesheetCache* stylesheetCache = [(AppDelegate *)[UIApplication sharedApplication].delegate stylesheetCache]; NIStylesheet* stylesheet = [stylesheetCache stylesheetWithPath:@"root/root.css"]; _dom = [[NIDOM alloc] initWithStylesheet:stylesheet];
そして、普通にViewをつくっていくのですが、
_backgroundView = [[UIView alloc] init]; CGSize boundsSize = self.view.bounds.size; _backgroundView.frame = CGRectMake(floorf((boundsSize.width - squareSize) / 2), floorf((boundsSize.height - squareSize) / 2), squareSize, squareSize); _activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhiteLarge]; [_activityIndicator sizeToFit]; [_activityIndicator startAnimating]; _activityIndicator.frame = CGRectMake(floorf((_backgroundView.bounds.size.width - _activityIndicator.bounds.size.width) / 2.f), 10, _activityIndicator.bounds.size.width, _activityIndicator.bounds.size.height);
途中で、NIDOMにViewを登録してあげます。
[_dom registerView:_activityIndicator]; [_dom registerView:_backgroundView withCSSClass:@"noticeBox"];
classはView側に書くところがないので、DOMに登録するときに一緒に指定してあげるみたいです。 これ以外は普通です。ちゃんとaddSubviewもしてあげます。 CSS側は
.noticeBox { background-color: rgba(32, 32, 32, 0.5); border-radius: 10px; border: none; } UIActivityIndicatorView { -ios-activity-indicator-style: white-large; -ios-autoresizing: left right bottom; }
とこんなかんじです。 noticeBoxクラスに指定できるのはもちろん、普通のクラスの方のUIActivityIndicatorViewを対象にすることもできるようです。 適用可能なルールは
static NSString* const kTextColorKey = @"color"; static NSString* const kHighlightedTextColorKey = @"-ios-highlighted-color"; static NSString* const kTextAlignmentKey = @"text-align"; static NSString* const kFontKey = @"font"; static NSString* const kFontSizeKey = @"font-size"; static NSString* const kFontStyleKey = @"font-style"; static NSString* const kFontWeightKey = @"font-weight"; static NSString* const kFontFamilyKey = @"font-family"; static NSString* const kTextShadowKey = @"text-shadow"; static NSString* const kLineBreakModeKey = @"-ios-line-break-mode"; static NSString* const kNumberOfLinesKey = @"-ios-number-of-lines"; static NSString* const kMinimumFontSizeKey = @"-ios-minimum-font-size"; static NSString* const kAdjustsFontSizeKey = @"-ios-adjusts-font-size"; static NSString* const kBaselineAdjustmentKey = @"-ios-baseline-adjustment"; static NSString* const kOpacityKey = @"opacity"; static NSString* const kBackgroundColorKey = @"background-color"; static NSString* const kBorderRadiusKey = @"border-radius"; static NSString* const kBorderKey = @"border"; static NSString* const kBorderColorKey = @"border-color"; static NSString* const kBorderWidthKey = @"border-width"; static NSString* const kTintColorKey = @"-ios-tint-color"; static NSString* const kActivityIndicatorStyleKey = @"-ios-activity-indicator-style"; static NSString* const kAutoresizingKey = @"-ios-autoresizing"; static NSString* const kTableViewCellSeparatorStyleKey = @"-ios-table-view-cell-separator-style"; static NSString* const kScrollViewIndicatorStyleKey = @"-ios-scroll-view-indicator-style";
の全部で２５個みたいです。 ちょっと少ない気もしますが、今後に期待します。 これらのコードから、次の画面ができちゃうわけです。 （このページのコードだけだと省略部分が多すぎてわかりづらいかもしれません・・・） 
サンプルいじってて思ったのは、HTMLのCSSが使える！という形ではなく、iOSのデザイン部分をコードから分離できるという本来のCSSの意味合いでコードが作られた感じがしました。 HTMLが必要最低限書いてデザイン的な面はCSSで外部ファイルにしてサイト統一なんだから共通化しようよ！という流れできたように、 iOSのViewControllerだって最低限だけ書いて、デザイン的な面は外部ファイルにしていろんなViewControllerで共通に使おうよ！といった感じでしょうか。 Twitterとか見てると、HTMLで使えるものが使える！と勘違いしている人が多そう（自分も含め）ですが、ちょっとそれとは違うかなぁと思いました。 ただ、デザインの外部ファイル化に関してはすごいいいな！って思います。 もしかしたらCSSができることによって、デザイナーさんと分業できる！とかなるとさらにいいなと思いました。