【iOS】AssetCatalogのColorSetを閲覧できるツールを作ったお話
こちらの記事の続きです。
背景
業務中のデザイナーさんとのやり取りで、「今、リリースされているアプリに含まれている素材一覧をください」と言われるシーンが何回か発生したことがありました。
もちろん、元データの管理はなされているもののマスターデータの整理をされる際にリリース済みのアプリに含まれている素材を知れると便利ということでした。
最初からしっかり素材の命名規則であったり管理方法を決めた上で運用することができていれば良いのでしょうが、実際には担当者の移動や退職による引継ぎがうまくなされなかったり、ルールがあってないような状態に陥ってしまうとどの状態が最新の素材なのか管理しきれなくなってしまいます。
そういった時にリリース済みの最新の素材の利用状況を把握するためにAssetCatalog内のデータを全て欲しいということは割とあるのかなと感じました。
デザイナーさんにXcodeを入れてもらってXcode上からAssetCatalogをGUI上で見てもらうことも負担になりますし、最新のソースコードをクローンするためにGitHubのアカウントをデザイナーさん向けに発行することも管理上のコストにもなります。
かといって、AssetCatalogをzipで圧縮して受け渡しても1つ１つのデータを確認するのに各素材名のディレクトリを深掘り確認する必要がありそれも手間です。
なので理想は、
- 1つの画面で全ての素材名とスケール、ライトモード、ダークモードに割り当てられた素材・カラーコードを確認できる
- Xcodeなどのアプリを追加でインストールしなくても簡単に閲覧できる
- 受け渡しが簡単
の3つを満たしていることが必要かと思いました。
AssetCatalogの中身を見てみる
AssetCatalogは、拡張子が.xcassetsのディレクトリです。
ディレクトリ配下に、素材名のディレクトリがあり更にその中に実際の素材と設定情報が記載されているContents.jsonというjsonファイルが配置されています。
なので極端な話、jsonをうまく扱うことができれば加工して何らかの形で表示することができます。
Assets.xcassets/
│ └hoge.imageset
│ ├hoge@x1.png
│ ├hoge@x2.png
│ ├hoge@x3.png
│ └Contents.json
└Contents.json
続・作ってみた
前回は、ローカルでサーバーを立ててWebページとして表示していました。
ただこれだと砂場みたいな環境が必要になるので気軽に利用することが出来ませんでした。
(ニーズは満たせていただけど運用面で難ありだったということです)
今回はローカルにあるiOSプロジェクトで利用できて、Markdownファイルで結果を出力するように変更しています。
使ってみる
まず下記リポジトリをクローンします。
AssetCatalogViewer
クローン後、AssetCatalogViewerのディレクトリまで移動します。
$ cd ./AssetCatalogViewer
AssetCatalogを一覧化したいプロジェクトのディレクトリパスを用意しておきましょう。
下記コマンドを実行します。
$ npm run build -- -p 【iOSプロジェクトのディスプレイパス】
実行後distディレクトリ配下に出力結果のasset.mdと、Markdownで利用する元画像が配置されるimagesディレクトリが生成されています。
VSCodeのプレビューなどでみると下記のようにColorSetの一覧とImageSetの一覧がそれぞれリストで表示されます。
Markdown形式なので、アプリのリポジトリに含めることでGitHub上でも気軽に見れるようにすることができます。
Markdown上に表示される画像は、同時に生成されたimagesディレクトリ配下に置いた画像に対してパスを指定しているので、リポジトリに追加する場合は、imagesディレクトリも合わせて含めるようにしてください。
まだバグもあります
ColorSetをsrgbで色指定してしていると、RGBAがうまく表示されない不具合があります。
今後改修予定です。
終わりに
やってることは非常にシンプルですが、かゆいところに手が届きそうなツールになったかなと思います。
実装等は急ぎ試しで書いたものなので雑な部分ありますが今後ちまちまと改修していきたいと思います。