SketchToolで画像書き出しを自動化

こちらは[mediba advent calendar 2016](http://qiita.com/advent-calendar/2016/mediba)の20日目の記事です。

## SketchToolとは
SketchTool を使うと、[Sketch](https://www.sketchapp.com/)の書き出しをコマンドラインから行えるようになります。

これにより、エンジニアが「Sketchの使い方分からないから、書き出しはデザイナーよろしく！」と丸投げすることがなくなります。

エンジニアが好きなタイミングで書き出しが出来るようになるので、開発工数が減ることに繋がると思います。

では、使い方の説明です。

## SketchToolのインストール
このSketchToolはSketchアプリ本体の中に同梱されているので、以下コマンドを実行すればインストール完了です。 

```bash
$ cd /Applications/Sketch.app/Contents/Resources/sketchtool/

$ ./install.sh
Installed sketchmigrate Version 1.0 (134) in /usr/local/bin
Installed sketchtool Version 40.3 (33839) in /usr/local/bin
```

これでインストール完了。

一応、インストールを確認。

```bash
$ sketchtool -v
sketchtool Version 40.3 (33839)
```

## SketchToolのコマンド

SketchToolには、主に`export`と`list`の2種類のコマンドが用意されています。

### `export` - 書き出し
Sketchファイルから画像の書き出しをしてくれます。


#### アートボードの書き出し
```bash
$ sketchtool export artboards <file name>
```

#### スライスの書き出し
```bash
$ sketchtool export slices <file name>
```
その他、ページ（`pages`）や、レイヤー（`layers`）の書き出しにも対応しています。

実際の業務では、アートボードまるごと書き出しはあまり使うことがないと思うので、`slices`が一番使うと思います。
（アートボードの書き出しは、保存するだけで書き出してくれる[inVisionのアプリ](http://blog.invisionapp.com/an-all-new-invision-sync/)が超絶便利！）

#### オプション
いくつかオプションが用意されています。

|オプション名|記述方法|
|---|---|
|出力先|--output=file path|
|フォーマット|--formats=png, jpg, pdf, eps, svg|
|出力結果をJSONで吐き出す|--outputJSON=file path|
|SVG圧縮|–compact=YES|

### `list` - 情報取得
以下のようにファイルの情報をJSON形式で取得できます。

```bash
sketchtool list artboards <file name>
```

#### JSONの取得例

```json
{
  "pages" : [
    {
      "id" : "6C085FD4-C3CD-4030-BC4E-847D28D443C1",
      "name" : "Page",
      "bounds" : "0.000000,0.000000,152.000000,152.000000",
      "artboards" : [
        {
          "id" : "A58BE5A2-CAF6-4C59-81C3-D50DF97BCF69",
          "name" : "artbord",
          "rect" : {
            "y" : 0,
            "x" : 0,
            "width" : 152,
            "height" : 152
          },
          "trimmed" : {
            "y" : 0,
            "x" : 0,
            "width" : 152,
            "height" : 152
          }
        }
      ]
    }
  ]
}
```

「おお、これで色情報や線情報など取得してCSSと連携させられるぞ！」と思いきや、取得できるのは、位置とサイズだけです。。 残念。

### npm scriptsでコマンドを管理
毎回コマンドを打つのが面倒なので、こんな感じで`package.json`のnpm scriptsで管理するといいと思います。
オプションの情報は`config`で管理するようにしています。

```js:package.json
  // 略
  "config": {
    "filename": "./src/sketch/sample.sketch",
    "dir": "./dist/img/",
    "format": "png"
  },
  "scripts": {
    "exp": "sketchtool export layers $npm_package_config_filename --output=$npm_package_config_dir --format=$npm_package_config_format",
    "list": "sketchtool list artboards $npm_package_config_filename"
  },
  // 略
```
これで、書き出しは`npm run exp`、情報取得は`npm run list`と打つだけで出来るようになります。

## gulp-sketchを使うともうちょっと便利に
[gulp-sketch](https://github.com/cognitom/gulp-sketch)を使えば、SketchToolをgulp内で実行できます。
ちょっと便利な機能として、Sketchファイル内のレイヤー名に合わせて、フォルダも自動的に生成してくれます。

例えば、レイヤー名を`header/btn`としておくと、書き出し先ににheaderフォルダを作成し、その中にbtn画像を生成してくれるようになります。

レイヤー名をつける手間はありますが、パーツごとにフォルダで生成してくれるので、画像の管理がしやすくなると思います。

次からインストール手順です。

### gulp, gulp-sketchインストール
```
$ npm i -D gulp
$ npm i -D gulp-sketch
```

### gulpfile.jsの作成
```js
var gulp   = require('gulp');
var sketch = require('gulp-sketch');

var sketchOptions = {
    export : 'artboards',
    formats: 'png',
    outputJSON: 'data.json'
};

gulp.task('sketch', function(){
    return gulp.src('./src/sketch/*.sketch')
        .pipe(sketch(sketchOptions))
        .pipe(gulp.dest('./dist/img/'));
});
```

あとは、`gulp sketch `コマンドで自動生成できます。

### JSONファイルと組み合わせ技
せっかくJSONファイルも生成したので、これも使ってみましょう。

先ほどのコードに以下を追記します。

```js
gulp.task('json', ['sketch'], function(){
    var dataJson = require('./dist/img/data.json');
    var data = dataJson['sample.sketch'].Page.artbord['artbord.png'];

    console.log('名前：' + data.name);
    console.log('横幅：' + data.width);
    console.log('縦幅：' + data.height);
});
```

そうすると、`gulp json`コマンドを叩くと、コンソールに

```
名前：artbord
横幅：152
縦幅：152
```

と表示されます。

JSONをうまく利用することで、Sketchファイルだけで、ID名、Class名や、またJavaScriptやCSSに値を管理し渡すということも可能になってきます。

## 最後に
今まで、Sketchはデザイナーが触るものというイメージがありましたが、エンジニアにも入りやすいようにツールを提供しているのがいいですね。

今回は出来ることが少し限られていましたが、将来的にSketchでデザインしたものを、自動的にコーディングしてくれるような未来がちょっと覗けたような気がしています。

今後も機能が充実していくといいですね！