こちらはmediba advent calendar 2016の20日目の記事です。

SketchToolとは

SketchTool を使うと、Sketchの書き出しをコマンドラインから行えるようになります。

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

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

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

SketchToolのインストール

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

$ 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

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

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

$ sketchtool -v
sketchtool Version 40.3 (33839)

SketchToolのコマンド

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

`export` - 書き出し

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

アートボードの書き出し

$ sketchtool export artboards <file name>

スライスの書き出し

$ sketchtool export slices <file name>

その他、ページ（pages）や、レイヤー（layers）の書き出しにも対応しています。

実際の業務では、アートボードまるごと書き出しはあまり使うことがないと思うので、slicesが一番使うと思います。
（アートボードの書き出しは、保存するだけで書き出してくれるinVisionのアプリが超絶便利！）

オプション

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

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

`list` - 情報取得

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

sketchtool list artboards <file name>

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で管理するようにしています。

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を使えば、SketchToolをgulp内で実行できます。
ちょっと便利な機能として、Sketchファイル内のレイヤー名に合わせて、フォルダも自動的に生成してくれます。

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

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

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

gulp, gulp-sketchインストール

$ npm i -D gulp
$ npm i -D gulp-sketch

gulpfile.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ファイルも生成したので、これも使ってみましょう。

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

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でデザインしたものを、自動的にコーディングしてくれるような未来がちょっと覗けたような気がしています。

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