Blocks のアレゲなシンタックスのための Xcode の Snippet

Blocks のアレゲなシンタックスは有名で非常に覚えにくいです。なので有名な OSX / iOS アプリ開発者のココロの叫びを表したサイトがあるのはもはや有名ですね。ココに書かれているシンタックスを Xcode の Snippet にして置いてます。

griffin-stewie/XcodeBlockSyntaxSnippets

デフォでもいくつかは入ってますし、他にもすでにいっぱいあると思いますが自分自身が環境変更があったときに便利なように GitHub に置いておこうと思ったしだいです。

UILabel の文字色をハイライト時に暗めの色にする

UI のインタラクションとしてテキストカラーを少し暗めにしたいことがあったのでその時に使った方法です。

HSB(HSV) で元の色の Brightness を変更する

先に書いたとおり暗くしたいだけなので RGB でどうこうしようとするのはめんどくささこのうえないです。ですので前回紹介した HSB(HSV) を素直に使いたいと思います。HSB(HSV) で元の色の Brightness を変更するアプローチです。

やりかた

まず暗くしたい元の UIColor から HSB の要素を抜き出します。これには - (BOOL)getRed:(CGFloat *)red green:(CGFloat *)green blue:(CGFloat *)blue alpha:(CGFloat *)alpha を使います。各要素の値が抜き取れたところで Brightness の値だけ変更します。今後使いやすいように変更率で調整出来るようにします。すると以下のような感じです。

+ (UIColor *)csn_colorWithBaseColor:(UIColor *)baseColor brightnessRatio:(CGFloat)ratio
{
    CGFloat hue = 0;
    CGFloat saturation = 0;
    CGFloat brightness = 0;
    CGFloat alpha = 0;
    
    BOOL converted = [baseColor getHue:&hue saturation:&saturation brightness:&brightness alpha:&alpha];
    if (converted) {
        return [UIColor colorWithHue:hue saturation:saturation brightness:(brightness * ratio) alpha:alpha];
    }
 
    return nil;
}

使い方

self.label.textColor = [UIColor redColor];
self.label.highlightedTextColor = [UIColor csn_colorWithBaseColor:self.label.textColor brightnessRatio:0.65];

0.6 ~ 0.7 くらいの値を brightnessRatio に渡してやるとほどほどに暗くなっていいと思います。

まとめ

RGB でやるよりも HSB でやった方が遙かに直感的に明度の調整ができると思います。今回のメソッドを UIColor のカテゴリメソッドとしてヘッダファイルも含めて Gist に置いておきます。良かったら使って見てください。

UIColor+CSNAdditions

HSB(HSV) のすすめ

みなさんは普段アプリの開発の際にどのような形で色を指定していますか?個人的な経験と予想では

[UIColor colorWithRed:0.251 green:0.514 blue:0.663 alpha:1.000]

のような RGB での指定だったり、カテゴリやマクロで拡張して #4083A9 のような Hex 指定だったりするのではないでしょうか?このような指定になっている理由としてはデザイナーさんから指定される形式が RGB だからというのが多い気がします。デザイナー不在で開発者だけで作っている場合も RGB の方が何となくわかりやすい気がするという理由だったりします。

色の調整

デザイナーさんがいる環境であれば本職であるデザイナーさんの指示を仰ぐ形がプロダクトとしてはベストだと思うので開発者だけで色調整する場合の話です。特に色に関する知識がほぼない人です。僕自身も全く色に関する知識はありません。

RGB は Red, Green, Blue, Alpha の要素の組み合わせで色を表しています。UIColor であれば R:1, G:0, B:0, A:1 であれば赤。単純です。それではこのような真っ赤ではなく少し暗い赤が欲しい場合にはどうしますか?RGB の各値をいじくり回しますか?気がつけばとんでもない色になったりしませんか?

そこで HSB

HSB は

  • Hue: 色相
  • Saturation: 再度
  • Brightness: 明度

で色を表現します。先ほどの例の少し暗い赤が欲しい場合は HSB 表現の赤の B の値を少し下げるだけで暗い赤になります。単純です。

こちらで配布されている日本語版 PDF の P18 でも進められているように個人的にも HSB は非常に色の調整がやりやすいです。

ちなみにこの PDF はおすすめなので1度見ることをおすすめします。

デモアプリ等で適当な色が欲しい時

ランダムな色が欲しい場合は HSB のうち H の値を変えるだけでそれなりに色が変わります。特に連続した色が欲しい場合は H の値を順番にループさせてやれば非常にカラフルで小綺麗な色になります。

補助ツール

任意の色が欲しいとかはさすがに

[UIColor colorWithHue:0.560 saturation:0.621 brightness:0.663 alpha:1.000]

とかいきなり書いたりはできないですよね。色を見ながら作りたいのでアプリで補助します。個人的におすすめは

上記2つの合わせ技です。

HexColor は OS の Color Picker を単独のアプリとして動かせるアプリです。このアプリ自体にも色を Hex や NSColor に変換してPasteboardにはき出すことができますが、Developer Color Picker プラグインを入れることで UIColor にも吐き出せるようになります。これらのアプリとプラグインiOS 開発以外でも便利なのでおすすめです。他にも sip なんかもあります。対応するフォーマットが多いのが特徴です。

まとめ

HSB は同系色の調整が割と直感的にできるのでおすすめです。HSB だけでいろんな色を作るのは難しいかもしれませんが RGB でざっくり色を作ってから HSB で微調整するとか、スポイトツール的な機能で欲しい色を抜いてきて HSB で調整とかすると色の幅が広がっていいのではないでしょうか。