23
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スマートデバイス・テクノロジーAdvent Calendar 2015

Day 11

【iOS】色を気にしたい初心者のためのUIColor大攻略法

Last updated at Posted at 2015-12-17

#ターゲット

  1. UIColorで定義済みの色ってダサい使いづらいと思っている初心者
  2. UIColorのRGB値を指定するのが面倒orどうしていいかわからない初心者
  3. 「カラーコードでUIColorのRGB値を指定できたらいいのに」と思っていた初心者

……というわけで、初心者の初心者による初心者のためのUIColor攻略を始めます。

#1. UIColorをマウスでラクラク指定しよう!
手っ取り早く指定したいならこれです。
面倒くさがりな人にはコレだ!

##用意するもの

  • Xcode
  • Xcode用プラグイン「ColorSense
    ※こちらはObjective-Cでしかプラグインが動きません。

##使ってみる
(1) プラグインはインストールしてください。

「ColorSense」は、UIColorのRGB値をMacでよく見る↓で指定できるようにする素晴らしいプラグインです。
cap01new.png

(2) とりあえず適当にUIColorのredColorとでも書きましょう。
cap02new.png

(3) もしかすると、書いている最中に見えたかもしれませんが、「ColorSense」がインストールされると、
cap03new.png

タブでUIColorで指定した色をプレビューしてくれます。

(4) さらにタブをクリックすると、

cap04new.png

(5)あとはマウスで好きな色を指定しましょう。
cap05new.png

#2. UIColorをカラーコードでラクラク指定しよう!
「カラーコードで色を指定するなんて造作もない」という人はこちら。
カラーコードというのは、#ff0000みたいなRGB値をそれぞれ16進数で表したものです。

##用意するもの

  • Xcode
  • Xcode用プラグイン「IntelliPaste
    ※このプラグインはObjective-CでもSwiftでも動きます。

##使ってみる
(1) プラグインをインストールします。

「IntelliPaste」は、ペースト機能をいい感じにしてくれるプラグインです。
その中に、コピーしたカラーコードをUIColorメソッドに変換してペーストしてくれる機能があります。
GitHubの「IntelliPaste」のページにデモのgifアニメがあるので、そちらを見ていただければ、どんな感じなのかわかると思います。

(2) カラーコードと変数宣言を書きましょう。今回は#00ada9とでもしましょう。
cap06new.png

(3) カラーコードをコピーします。
cap07new.png

(4) ペーストしたい場所へCommand + Shift + Vでペーストすると、
cap08new.png

Objective-Cで、かつ前項で紹介した「ColorSense」がインストール済みなら、ペーストした途端に「ColorSense」のプレビュー機能が働きますので、思った通りの色だったかどうか、すぐに確認できます。
cap09new.png

HTMLやCSSが書けて、カラーコードに見慣れている人は、「オレンジなら#ff9900かな★」と瞬時に思いつくことができると思うので、これもまぁまぁ便利かと思います。
自分はお気に入りの色のカラーコードを覚えているため、このプラグイン凄く重宝します。

#あとがき
定義済みの色だけでは物足りなかった自分の備忘録を兼ねた記事で恐縮ですが、誰かの役に立つでしょうか。
「大攻略法」とか大きく打って出ましたが、たいしたこと書けなくてすみません。
ご指摘など大募集中です。

#参考
Xcode の便利プラグインまとめ
原色大辞典

23
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?