最近エンジニアでもデザイン頑張ろう系のエントリをよく目にします。

これには同感で、特にアプリエンジニアはデザインも理解していくべきだと思ってます。
iOS アプリ開発で色を簡単に扱える準備をしたので、その内容をまとめます。

1.Xcodeにプラグインを入れる

Hex Color Picker

f:id:himaratsu:20140802193508p:plain

XcodeのカラーピッカーにHexタブを追加できるXcode Pluginです。
色の指定をCSSのように16進数で行えて便利ですね。

導入方法

1.公式サイトからダウンロード
- http://wafflesoftware.net/hexpicker/
2.Finder -> 移動メニューで optionキーを押して「ライブラリ」へ移動
3.ColorPickers ディレクトリにHexColorPicker.colorPickerを追加
4.Xcodeを再起動

OMColorSense

f:id:himaratsu:20140803010234p:plain

エディタ上のUIColorをビジュアライズしてくれるXcode Pluginです。
フォーカスがあたるとカラーが出て良い感じです。

導入手順

Xcode向けパッケージ管理ツール「Alcatraz」を用いると簡単です。

1.Alcatraz をインストールする（まだの場合）
- http://alcatraz.io/ からダウンロード
- Xcodeを再起動する
2.Window > Package Manager を開く
3.OMColorSense をインストールする
4.Xcodeを再起動する

2.コードで色を指定しやすくする

UIColorのカテゴリを作る

こんな感じで定義して使ってます。

UIColor+Hex.h

+ (UIColor*)colorWithHexString:(NSString *)hex;
+ (UIColor*)colorWithHexString:(NSString *)hex alpha:(CGFloat)a;

UIColor+Hex.m

+ (UIColor*)colorWithHexString:(NSString *)hex {
    return [self colorWithHexString:hex alpha:1.0];
}

+ (UIColor*)colorWithHexString:(NSString *)hex alpha:(CGFloat)a {
    NSScanner *colorScanner = [NSScanner scannerWithString:hex];
    unsigned int color;
    if (![colorScanner scanHexInt:&color]) return nil;
    CGFloat r = ((color & 0xFF0000) >> 16)/255.0f;
    CGFloat g = ((color & 0x00FF00) >> 8) /255.0f;
    CGFloat b =  (color & 0x0000FF) /255.0f;
    return [UIColor colorWithRed:r green:g blue:b alpha:a];
}

使い方

// UIColor を使いたい場所で
myLabel.textColor = [UIColor colorWithHex:@"ebebeb"];

頻繁に使う色は定義しておく

アプリのテーマカラーなど、頻出の色は #define で定義しておきます。

#define kDefaultTextColor [UIColor colorWithRed:70/255.0 green:171/255.0 blue:235/255.0 alpha:1.0]

使い方

myLabel.textColor = kDefaultTextColor;

3.おまけ：その他のツール

ディスプレイに表示されてる色を取得する（Macで）

f:id:himaratsu:20140803004634p:plain

Mac には DigitalColor Meter というツールが標準で入っており、これを使うとRGB値が簡単に取得できます。「あ、この色良さそう」と思ったときに起動してRGBをメモしておくと良いです。

DigitalColor Meter はユーティリティの中にあります。

Webページで使われている色を取得する（Chrome拡張で）

Pendule というChrome拡張でそのページで使用されているカラーが取得できます。
例えばFacebookのTOPページを解析した場合、以下のようなリストにしてくれます。

f:id:himaratsu:20140803010728p:plain

使い方は簡単で、対象のページを開いて Pendule > Show used colors するだけです。

f:id:himaratsu:20140803004906p:plain

「このサイトのようなカラーテーマにしたい」という時に重宝するツールです。
Pendule のダウンロードはここからできます：

Pendule | Chrome Web Store

以上です。
ツールの導入は最初は時間がかかってしまいますが、今回紹介したものはヘビーに使えて本当に便利なものばかりなのでぜひ試してみてください。

Think Big Act Local

iPhone開発を軸にブレブレの記事を書いていきます。

iOSアプリ開発で上手に色を操るための設定まとめ