これからはじめるGulp #17：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
はじめに
前回のこれからはじめる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コマンドのオプションを色々と試してみたいと思います。
![[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-cd051e80347b7e8a807fef242f24e718/ccaa2ddf9bcf8223013f2ee1cc04ed9a/amazon-transcribe)
![[Bun] JavaScriptでC言語のファイルを簡単に実行する](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-8c6d505db5519c426a9f992bfb37e1a0/753887f068b49792ca4f521aa8f565dd/eyecatch_bun_1200x630.png)
