blog
これからはじめる Gulp シリーズこれからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
この記事は書かれてから1年以上経過しており、内容が古い場合があります。
はじめに
この記事はGulp.js（全俺） Advent Calendar 2014です。
前回のこれからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作るでgulp-image-resizeプラグインとgulp-imageminを使ったサムネイル作成と軽量化を試しました。今回はさらに踏み込んでドローイングツールのSketch 3のコマンドラインツールSketchToolを使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchToolの呼び出しについて試してみます。
Sketch 3をコマンドラインから使う
Sketch 3はSketchToolを使うことでコマンドラインから書き出し等の操作を行えます。今回はこのSketchToolの使い方とGulpからコマンドを実行する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
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 [file path]です。このコマンドを使うことで、アートボードの情報を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を使ってアートボードを書き出してみます。 対象のページを限定していないので、すべてのページのアートボードが書き出されます。
$ 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を実行する
続いて先ほどのSketchToolコマンドをGulp.jsから呼び出すためにgulp-execというプラグインを使ってみます。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コマンドを実行できるようになりました。次回はSketchToolコマンドのオプションを色々と指定してみたいと思います。
シリーズ
- これからはじめるGulp（0）：アドベントカレンダースケジュール
- これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
- これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
- これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
- これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
- これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
- これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
- これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
- これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
- これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
- これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
- これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
- これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
- これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
- これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
- これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
- これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
- これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
- これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
- これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
- これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
- これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
- これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
- これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
- これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
- これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
- これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す