Xcode9 iOS11からAssetCatalogで色も管理できるようになりました。大分前に導入された仕組みなので既に活用されているチームも多いかと思います。
単色の管理はもちろんですが、1つのColorNameに対してAny, Light, Darkの色を紐付けることができ、StoryBoard上ではColorNameを指定するだけでLight mode, Dark modeを自動で判別し色を切り替えてくれるのでダークモードに対応する際に効果を発揮してくれます。

しかし、同一のUIに対して複数の色が入り込んでくると「ColorNameがLight時は、このカラーコードで、Dark時はこのカラーコード...」などと混乱する場面がありました。
また、デザイナーさんはXcode側のAsset Catalogを直接見れるわけではないので現在リリースされているアプリ内で利用できるカラーコードリストを別で管理する手間などもあり課題を感じることが多かったです。

そんなことがあり、最新のプロジェクトに含まれるAssetCatalogを閲覧できるような仕組みがあれば、エンジニアもデザイナーも楽出来るんじゃないと思ったので...
とりあえず作ってみた。

AssetCatalogの中身

例えばこんなColorSetがあったとします。

実際は、下記のようなjsonで管理されておりXcode側がGUIで上手いこと表示しているに過ぎません。

contents.json

{
  "colors" : [
    {
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "0.000",
          "green" : "0.149",
          "red" : "1.000"
        }
      },
      "idiom" : "universal"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "1.000",
          "green" : "0.198",
          "red" : "0.017"
        }
      },
      "idiom" : "universal"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "color" : {
        "color-space" : "srgb",
        "components" : {
          "alpha" : "1.000",
          "blue" : "0.000",
          "green" : "0.977",
          "red" : "0.000"
        }
      },
      "idiom" : "universal"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

上手いことContents.jsonをディレクトリから探し出して、Any・Light・Darkそれぞれのカラーコードを取得することが出来れば必要なデータは抽出することが出来ます。

AssetCatalogViewer

MasamiYamate/AssetCatalogViewer
Githubに上がっているリポジトリからAssetCatalogを探し、各ColorSetのContents.jsonからAny・Light・Darkのそれぞれのカラーコードを取得してViewer向けのデータに整形する簡単なお仕事をしてくれるツールを作りました。
jenkinsやBitriseなどCIと組み合わせて利用することを考えていたので、Githubに上がっているプロジェクトを対象にしています。

動作確認環境

nodejs v14.10.1

利用方法

1.npm installを行って依存モジュールをInstallします。

$ npm install

2.AssetCatalogを閲覧したいリポジトリのURLを設定します


$ npm run setup

> colorsetjsonparser@1.0.0 setup /Users/hogehoge/Documents/Workspace/AssetCatalogViewer
> bash ./deploy-script/setup.sh

Enter the clone url or ssh: 【github url or ssh】
audited 1312 packages in 4.365s

56 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Repository setting completed!!

3.masterブランチに適応されているColorSetを取得しViewを下記コマンドで生成します。

$ npm run build

Success!!

以上で完了です。
生成されたViewerページは、distディレクトリ配下にあります。
./dist/index.htmlを開くとこんな感じで表示されます。

現段階では、ColorSetの名称とAny・Dark・Lightそれぞれのカラーコードを横並びで表示するだけです。
クリックしたらUIColorのコードが取得出来たりするともっといいのかなと思いますが、
とりあえずAssetCatalogをXcode上で開かずに簡単に見れるということは実現出来たかなと思っています。

文字色が黒固定なので、背景色によっては見辛いものがあったりしますが、今後対応してく予定です。

最後に

結構強引な手段ではありますが、目的を達成できそうなものは作れたかなと思います。
チームへの導入はまだ出来ていないので、エンジニア・デザイナーそれぞれからフィードバックをもらいつつさらにブラッシュアップをかけていきたいと考えています。
(とりあえず実現からだったので、実装は荒いです。改修に併せて、リファクタも進めます。)

このようなアプローチでエンジニア・デザイナー間のやりとりを楽にしようと思っているという1つの考えとして参考になれば幸いです。

【iOS】AssetCatalogのColorSetを閲覧できるツールを作ったお話

AssetCatalogの中身

AssetCatalogViewer

動作確認環境

利用方法

最後に