#はじめに

Xcode9の正式版がリリースされてから約3ヶ月経ちますが、皆さんは追加された新機能を使用していますか？
今回は、追加された機能のうちの"ColorSet"について調べてみたので、備忘録として投稿してみようと思います。
なお、Qiita初投稿となります。生温かい目でネットリ見守って頂けると幸いです。

#そもそもColorSetとは
Xcode Release Notesによると、

Asset Catalog

New Features
Asset catalogs now support named colors that can be used in source files and Interface Builder. (28900538)

Xcode9.0から、ソースコード上やIB上から使用できる色定義が作成できるようになった、とのこと。
使用するにはBuild TargetをiOS11以上にする必要があるようです。

#色定義の作り方

AssetCatalogファイルを選択します
画面左下の「＋」ボタンを押し、メニューを表示します。
メニュー内の「New Color Set」を選択します。

これで、「Color」という名前の色定義が新たに作成されます。

画像左側エディタエリアで、ColorSetの名前を変更することができます。
画像右側ユーティリティエリアで、Color SpaceやInput Methodを変更することができます。Colorで直接色を指定することもできます。

#実際に使ってみた

今回は

Redを0.4 Greenを0.7 Blueを1.0で定義したLightBlue
Redを1.0 Greenを0.7 Blueを0.4で定義したLightOrange

を作ってみました。

InterfaceBuilderで使用する場合、色を指定する際に「Named Colors」の欄が追加されており、そこから選択できるようになっています。

ソースコードで使用する場合は以下のイニシャライザを使うようです。

UIColor.swift

extension UIColor {

    @available(iOS 11.0, *)
    public /*not inherited*/ init?(named name: String) // load from main bundle

    @available(iOS 11.0, *)
    public /*not inherited*/ init?(named name: String, in bundle: Bundle?, compatibleWith traitCollection: UITraitCollection?)
}

#データ構造
##AssetCatalogデータ
まずColorSetを作成するとAssets.xcassets内に<色定義名>.colorset/Contents.jsonというファイルが作成されます。先程作成したLightBlueの場合、以下のようになります。

Assets.xcassets/LightBlue.colorset/Contents.json

{
  "info" : {
    "version" : 1,
    "author" : "xcode"
  },
  "colors" : [
    {
      "idiom" : "universal",
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "red" : "0.400",
          "alpha" : "1.000",
          "blue" : "1.000",
          "green" : "0.700"
        }
      }
    }
  ]
}

なお、Input Methodの情報は"color-space"のようには保持しておらず、上記のColorSetの設定をFloatingPoint(0.0-1.0)から８bit(0-255)に変更すると

Assets.xcassets/LightBlue.colorset/Contents.json

{
  "info" : {
    "version" : 1,
    "author" : "xcode"
  },
  "colors" : [
    {
      "idiom" : "universal",
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "red" : "102",
          "alpha" : "1.000",
          "blue" : "255",
          "green" : "178"
        }
      }
    }
  ]
}

となりました。また、8-bit(Hexadecimal)にした場合は"red" : "0x66"のようになります。

##InterfaceBuilderでのデータ
ViewControllerのViewの背景色にWhiteColorをセットした状態から、先程定義したLightBlueに変更してみると、以下のような差分が出ます。

@@ -6,6 +6,7 @@
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13527"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -17,7 +18,7 @@
                     <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" name="LightBlue"/>
                         <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                     </view>
                 </viewController>
@@ -25,4 +26,9 @@
             </objects>
         </scene>
     </scenes>
+    <resources>
+        <namedColor name="LightBlue">
+            <color red="0.40000000000000002" green="0.69803921568627447" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
+    </resources>
 </document>

設定した時点で、色の内容のコピーが作成される様ですね。

#残念なところ
##その１
AssetCatalogとInterfaceBuilderを両方開いた状態でAssetCatalogの色を変更しても、InterfaceBuilderの表示には反映されませんでした。ただし、ビルドすると反映されていました。

一度プロジェクトを閉じ、再度開くと、InterfaceBuilder上に反映されていました。もちろんビルドした画面にも反映されていました。

##その２
「その１」の操作を行った時、Main.storyboardに差分が一切発生しませんでした。つまり、色の内容のコピーは、InterfaceBuilder上で設定したタイミングに作成され、AssetCatalogの定義に追従して変更してくれるわけではない模様です。
そのため、「その１」の後にAssetCatalogの定義を消してみたところ、コピーが作成された時点のオレンジ色が表出してしまいました。

色定義を変更する場合や削除する場合、grepをかけてあげるなど、工夫が必要がそうです。

#おわりに
Xcode9から追加されたsafe areaなど、完全に理解できていない要素がまだまだたくさんあるため、今後はそちらについても勉強していこうと思っています。