GoogleMapがiPhoneでリリースされて、それにはNimbusKitが使われてるらしい!
NimbusKitではCSSでViewの外見が設定できるらしい!
って噂を聞いたので、噂のNimbusのサンプルをいじってみました

NimbusKitでできること

サンプルには三種類のプロジェクトが入ってて、その中はサンプルがいっぱい入ってて・・・という普通の構成でした。
機能としては大きく分けると2つ、「みんなが使ってたもののコードが簡単にかけるようになったよ」というものと「Nimbusだからこそこれができるよ!」というものに勝手に分けました。

まず、「みんなが使ってたもののコードが簡単にかけるようになったよ」は、見ててもあんまし面白く無いので省略。
ちょっとだけ書くと、UILabelの拡張やらNavigationBarの色変更、ネットワーク経由の画像表示などです。
それぞれ個人で工夫してクラス化とかしてたと思いますが、それをまとめた感じです。

メインはもう片方の「Nimbusだからこそこれができるよ!」の方。
こちらは

  • CSSがViewに適用できる
  • デバッグコンソールが付けれる

の2つ。 これについてちょっと書いて行きたいと思います。
今日のところは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";

の全部で25個みたいです。 ちょっと少ない気もしますが、今後に期待します。

これらのコードから、次の画面ができちゃうわけです。
(このページのコードだけだと省略部分が多すぎてわかりづらいかもしれません・・・)

サンプルいじってて思ったのは、HTMLのCSSが使える!という形ではなく、iOSのデザイン部分をコードから分離できるという本来のCSSの意味合いでコードが作られた感じがしました。
HTMLが必要最低限書いてデザイン的な面はCSSで外部ファイルにしてサイト統一なんだから共通化しようよ!という流れできたように、
iOSのViewControllerだって最低限だけ書いて、デザイン的な面は外部ファイルにしていろんなViewControllerで共通に使おうよ!といった感じでしょうか。
Twitterとか見てると、HTMLで使えるものが使える!と勘違いしている人が多そう(自分も含め)ですが、ちょっとそれとは違うかなぁと思いました。

ただ、デザインの外部ファイル化に関してはすごいいいな!って思います。
もしかしたらCSSができることによって、デザイナーさんと分業できる!とかなるとさらにいいなと思いました。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>