Appearance Makerを使ってMac標準UIをカスタマイズする

# はじめに

iOSと違ってmacOSの標準コントロールはXcode上（Interface Builder）で自由に色等の外観のカスタマイズができませんが、NSAppearanceをいじることで外観を変えることができます。

# NSAppearanceをいじって標準のDark/Lightテーマをかけてみた

## 作ったもの
![スクリーンショット 2017-05-17 19.51.02.png](https://qiita-image-store.s3.amazonaws.com/0/61792/f28d9cf1-3e77-a6c7-89d2-6aa477faa9c3.png)

左がdark、右がLightです。

## コード

```swift:Sample.swift
darkView.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)
lightView.appearance = NSAppearance(named: NSAppearanceNameVibrantLight)
```

ViewにAppearanceを設定するだけです。それぞれのViewに所属するControlたちの外観が変わります。

## じゃあ、なんかカスタマイズしてみたい

NSAppearanceのイニシャライザを見てみます

```swift:NSAppearance
init?(named name: String)
init?(appearanceNamed name: String, bundle: Bundle?)
```
上は、上記サンプルで使ったイニシャライザですが、darkかlightしか選べません。
下は、なんかファイル読み込んでAppearanceを作る感じに見えますが、具体的にどうすれば良いかはリファレンスに記載されていませんでした。

# Appearance Maker

Appearance Maker を使うと、Appearanceのカスタマイズに必要なファイルを生成することができます。

以下が今回作ったサンプルです。ボタンが無駄にオレンジです。

![スクリーンショット 2017-05-17 19.35.39.png](https://qiita-image-store.s3.amazonaws.com/0/61792/956cff98-141c-eeed-617f-46268c411e1e.png)

ボタンの他にも各種ControlやWindowなど色々いじれる他、Disabledや非アクティブ時の外観もカスタマイズすることができます。

![3cd4c685d553117a891384ad5e2df16e.gif](https://qiita-image-store.s3.amazonaws.com/0/61792/2db1e270-d461-0e2c-4400-87163b8a1fee.gif)

Indicatorのアニメーションもこの通り無駄にカスタマイズできます。

# Mac標準UIをカスタマイズしてみた
## 準備
以下からプロジェクトを落として、Appearance Makerをビルドします。

https://github.com/insidegui/AppearanceMaker

アプリが起動したらプロジェクトの保存先を選択します。

## カスタマイズするコントロールを選択

画面上の方にあるCategory / ElementからいじりたいControlを選択します。
選択したらCustomizeをクリックします。

![スクリーンショット 2017-05-17 19.13.27.png](https://qiita-image-store.s3.amazonaws.com/0/61792/efcb0913-b0a5-600f-6222-6813d8484f75.png)

すると、作業フォルダ（xx-Artworkフォルダ）にpsdファイルが作成されます。
このPSDファイルをいじります。

## PSDファイルいじり
PSDファイルを開くとこんな感じ。

![スクリーンショット 2017-05-17 19.15.17.png](https://qiita-image-store.s3.amazonaws.com/0/61792/74ade96d-af4c-2a20-78d6-c77d668208aa.png)

各レイヤーにControlの状態が描かれていますので、カスタマイズしたいレイヤーを好きにいじります。
今回はボタンをオレンジに変更します。

変更したらPSDファイルを保存してAppearance Makerに戻ります。

## プレビュー

編集が終わったら、プレビューが更新されているかと思います。

![スクリーンショット 2017-05-17 20.29.09.png](https://qiita-image-store.s3.amazonaws.com/0/61792/a33ce03b-1b74-2ce1-d710-090b8ec4d323.png)

さらにpreviewタブをクリックすると作ったボタンをプレビューすることができます。
![スクリーンショット 2017-05-17 19.35.03.png](https://qiita-image-store.s3.amazonaws.com/0/61792/c45950f3-46ee-4e47-4ec9-a8a31bfc898f.png)

なんかうまくできてそう。

## ファイル書き出し
Appearanceを作るために必要なファイルを書き出します。
Menu → File → ExportAppearanceでファイルを書き出します。

`xx.car`というファイルができているかと思います。

## Xcodeでプロジェクトを作成
適当にmacOSプロジェクトを作成し、先ほど作った.carファイルをプロジェクトに追加します。

## Viewを作る

Viewにボタンを追加します。

<img width="1278" alt="スクリーンショット 2017-05-17 19.35.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/61792/6dd01ada-aa83-8f08-b21d-7eaafe7270d6.png">

## Appearanceの設定
ViewにAppearanceの設定をします。

```swift:ViewController.swift

import Cocoa

class ViewController: NSViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.appearance = NSAppearance(appearanceNamed: "sample", bundle: nil) // .carファイル名
    }
}

```

これでビルドするとAppearanceが当たるようになるかと思います。

## 補足（AppStoreでの配布について）
* .carファイルをつくためにPrivate APIを使用しているそうです
* しかし、NSAppearance自体はPublicなのでまあAppStoreに出しても大丈夫じゃね？とのこと([Readme](https://github.com/emiscience/AppearanceMaker)より)


## 参考
* https://developer.apple.com/reference/appkit/nsappearance
* https://github.com/insidegui/AppearanceMaker
* https://github.com/emiscience/AppearanceMaker