これからはじめるGulp #17:SketchTool(Sketch 3 command line tool)を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し

gulp.js

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回のこれからはじめるGulp(16):gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作るでgulp-image-resizeプラグインとgulp-imageminを使ったサムネイル作成と軽量化について試しました。今回はさらに踏み込んでSketch3のコマンドラインツール「SketchTool」を使ったアートボード・スライスの書き出しに加え、gulp-execプラグインを使ったSketchToolの呼び出しについて試してみます。

Sketch 3をコマンドラインから使う

Sketch3はSketchToolを使うことでコマンドラインから書き出し等の操作を行えます。今回はこのSketchToolの使い方とGulp.jsからSketchToolコマンドを実行できgulp-execプラグインを試してみます。

SketchToolのインストール

まずSketchToolのサイトからファイルをダウンロードしてきます。ダウンロードしたら解凍したフォルダのあるところまでコマンドラインで移動します。

$ cd /Users/nukos/Downloads/sketchtool

install.shを実行します。

$ bash install.sh
Installed sketchmigrate Version 1.0 (134) in /usr/local/bin
Installed sketchtool Version 1.3 (252) in /usr/local/bin

これでSketchToolのインストールは完了です。

コマンドとオプション

SketchToolのコマンドとオプションは$ sketchtool -hで確認できます。ただ書き出すだけではなく、けっこう細かな指定ができるようです。

$ sketchtool -h
Usage: sketchtool <command> [<args>]
                  [--trimmed{=YES|NO} | --no-trimmed | -t {<YES|NO>}]
                  [--overwriting{=YES|NO} | --no-overwriting | -V {<YES|NO>}]
                  [--compression=<float> | -c <float>]
                  [--version | -v] [--scales=<path> | -s <path>]
                  [--output=<path> | -o <path>]
                  [--formats=<string> | -f <string>]
                  [--outputJSON=<path> | -J <path>]
                  [--item=<string> | -i <string>]
                  [--progressive{=YES|NO} | --no-progressive | -p {<YES|NO>}]
                  [--compact{=YES|NO} | --no-compact | -k {<YES|NO>}]
                  [--background=<string> | -g <string>]
                  [--group-contents-only{=YES|NO} | --no-group-contents-only | -G {<YES|NO>}]
                  [--items=<string> | -a <string>]
                  [--save-for-web{=YES|NO} | --no-save-for-web | -w {<YES|NO>}]
                  [--help | -h]
                  [--bounds=<rectangle> | -b <rectangle>]
                  [--reveal{=YES|NO} | --no-reveal | -r {<YES|NO>}]

Commands:
    dump                 Dump out the structure of a document as JSON.

    export artboards     Export one or more artboards
    export layers        Export one or more layers
    export pages         Export an area from one or more pages
    export slices        Export one or more slices

    help                 Show this help message.

    list artboards       List information on the document's artboards.
    list formats         List the supported export formats.
    list pages           List information on the document's pages.
    list slices          List information on the document's slices.

    metadata             List the metadata for a document.
    notes                Output the release notes.
    show                 Show the location of the various sketch folders.


See ‘sketchtool help <command>’ for more information on a specific command.

SketchToolを使ってみる

とりあえずSketchToolコマンドをたたいてみましょう。アートボードのリストを取得するコマンドsketchtool list artboardsを実行してみます。このコマンドを使うと、アートボードの情報をjson形式で返してくれます。

$ sketchtool list artboards fa_web_template.sketch
{
  "pages" : [
    {
      "id" : "C04329BF-F24E-4ADC-923B-B7983FAFBABA",
      "name" : "detail",
      "bounds" : "-715.000000,-1120.000000,3718.000000,2000.000000",
      "artboards" : [
        {
          "id" : "C3ABEE1C-89BE-46A0-8ABC-B9124387D474",
          "name" : "Desktop HD",
          "rect" : {
            "y" : -1120,
            "x" : -715,
            "width" : 2000,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -1120,
            "x" : -715,
            "width" : 2000,
            "height" : 2000
          }
        },
        {
          "id" : "824E868C-8379-456F-A017-2E5DFCB82788",
          "name" : "Desktop",
          "rect" : {
            "y" : -1120,
            "x" : 1385,
            "width" : 1200,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -1120,
            "x" : 1385,
            "width" : 1200,
            "height" : 2000
          }
        },
        {
          "id" : "969273D8-9949-4531-BBF8-EB5067BFE517",
          "name" : "Mobile Portrait",
          "rect" : {
            "y" : -1120,
            "x" : 2683,
            "width" : 320,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -1120,
            "x" : 2683,
            "width" : 320,
            "height" : 2000
          }
        }
      ]
    },
    {
      "id" : "13E8B811-2D2D-4318-B9C3-9EFF2FB9648B",
      "name" : "search",
      "bounds" : "-700.000000,-701.000000,3728.000000,2000.000000",
      "artboards" : [
        {
          "id" : "746D3566-B6DD-4B03-9763-2B4A0FD79B46",
          "name" : "Search Desktop HD",
          "rect" : {
            "y" : -701,
            "x" : -700,
            "width" : 2000,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : -700,
            "width" : 2000,
            "height" : 2000
          }
        },
        {
          "id" : "C3F45543-3C5E-4F8A-B5B1-CA31B56838A7",
          "name" : "Search Desktop",
          "rect" : {
            "y" : -701,
            "x" : 1400,
            "width" : 1200,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : 1400,
            "width" : 1200,
            "height" : 2000
          }
        },
        {
          "id" : "BB7001C5-340A-4C18-83D2-DE32CAC09645",
          "name" : "Search Mobile Portrait",
          "rect" : {
            "y" : -701,
            "x" : 2708,
            "width" : 320,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : 2708,
            "width" : 320,
            "height" : 2000
          }
        }
      ]
    },
    {
      "id" : "858DAE73-D534-40B8-B026-2536FCD2BA95",
      "name" : "player",
      "bounds" : "-700.000000,-701.000000,4588.000000,2000.000000",
      "artboards" : [
        {
          "id" : "5573EA06-FB03-4CF4-B98D-1E989461D36E",
          "name" : "Desktop HD",
          "rect" : {
            "y" : -701,
            "x" : -700,
            "width" : 2000,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : -700,
            "width" : 2000,
            "height" : 2000
          }
        },
        {
          "id" : "7B5C0956-A84F-49B3-AEC1-31DB24A81F88",
          "name" : "Desktop",
          "rect" : {
            "y" : -701,
            "x" : 1400,
            "width" : 1200,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : 1400,
            "width" : 1200,
            "height" : 2000
          }
        },
        {
          "id" : "63C6C9DB-58DB-4FE0-A5DD-E17EE9F1BE89",
          "name" : "Tablet Portrait",
          "rect" : {
            "y" : -701,
            "x" : 2700,
            "width" : 768,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : 2700,
            "width" : 768,
            "height" : 2000
          }
        },
        {
          "id" : "76BC285F-1D1D-4AB7-A238-AA88959E0DA2",
          "name" : "Mobile Portrait",
          "rect" : {
            "y" : -701,
            "x" : 3568,
            "width" : 320,
            "height" : 2000
          },
          "trimmed" : {
            "y" : -701,
            "x" : 3568,
            "width" : 320,
            "height" : 2000
          }
        }
      ]
    }
  ]
}

SketchToolを使ったアートボードの書き出し

続いてSketchToolを使って実際にアートボード全体の画像を書き出してみます。 対象のページを限定していないので、Sketchのファイル内に存在するすべてのアートボードが書き出されます。書き出されたファイル名はアートボードの名前になります。

$ sketchtool export artboards fa_web_template.sketch
Exported Detail Desktop HD.png
Exported Detail Desktop.png
Exported Detail Mobile Portrait.png
Exported Search Desktop HD.png
Exported Search Desktop.png
Exported Search Mobile Portrait.png
Exported Desktop HD.png
Exported Desktop.png
Exported Tablet Portrait.png
Exported Mobile Portrait.png

単純ではありますが、コマンドラインから書き出しを試すことができました。

Gulp.jsからSketchToolを実行する

gulp-execというプラグインを使ってSketchToolコマンドをGulp.jsから呼び出してみます。ご存じの方であればgulp-execプラグインを使わなくともgulp-sketchプラグインを利用されると思いますがこれは後日試すことにします。

gulp-execプラグインのインストール

$ sudo npm install gulp-exec --save-dev
Password:
gulp-exec@2.1.1 node_modules/gulp-exec
└── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)

SketchToolタスク

gulp-exec経由でSketchToolを実行するタスクを作ります。gulp-execはexec( [command], [options] )のように記述します。コマンドに--output=[path]オプションを指定することで書き出し先のディレクトリを指定します。

var gulp     = require('gulp');
var exec     = require('gulp-exec');

var paths = {
  srcDir : '_design/',
  dstDir : 'assets/images/_src/orig/'
}

gulp.task( 'sketchtool', function(){
  var srcGlob = paths.srcDir + '/**/*.sketch';

  var sketchToolOptions = {
    dstDir : paths.dstDir
  };

  gulp.src( srcGlob )
    .pipe(exec( 'sketchtool export artboards <%= file.path %> --output=<%= options.dstDir %>', sketchToolOptions ))
    .pipe(exec.reporter());
});

タスクの実行

作成したsketchtoolタスクを実行してみます。

$ gulp sketchtool
[15:48:52] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[15:48:52] Starting 'sketch'...
[15:48:52] Finished 'sketch' after 6.16 ms
[15:48:53] Exported UI Kit.png
[15:48:57] Exported Detail Desktop HD.png
Exported Detail Desktop.png
Exported Detail Mobile Portrait.png
Exported Search Desktop HD.png
Exported Search Desktop.png
Exported Search Mobile Portrait.png
Exported Desktop HD.png
Exported Desktop.png
Exported Tablet Portrait.png
Exported Mobile Portrait.png

これでGulp.jsからSketchToolコマンドを実行できるようになり、Gulp.jsを使ってデザインファイルからの書き出しができそうです。次回はSketchToolコマンドのオプションを色々と試してみたいと思います。

この記事はこれからはじめるGulp(17):SketchTool(Sketch 3 command line tool)を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出しの転載です。