Sketch3をコマンドライン上から操作できるSketchToolの導入方法と使い方

SketchToolは便利

SketchToolを使うと

• 大量の画像を書き出せたり
• 大量のレイヤー構造をテキストで見れたり
• 面倒なSketchの起動を待たずに画像を書き出せたり
• 低スペックマシンでも動かせたり

などなど案外便利です。
コマンドラインベースで動くのでgulpから呼び出して自動化とかもやれます。
そんなわけでちょこっと使えれば楽ができますよ！

Sketchの公式からSketchToolのダウンロード

http://bohemiancoding.com/sketch/tool/
こちらのDownload SketchToolからファイルがダウンロードできます。

SketchToolのインストール

sketchtool-latest.zipがダウンロードされるので、ZIPファイルを解凍します。

解凍するとこんな感じのディレクトリ構成

sketchtool
├── README.txt
├── RELEASE NOTES.txt
├── bin
│   ├── sketchmigrate
│   └── sketchtool
├── install.sh
└── share
    └── sketchtool
        └── resources.bundle

開けてビックリ！Shellです！
Sketchなのでもっとリッチなものを想像していました。（Shellはbinの中身をコピーしてるだけです。）

でも特に不都合もないのでインストールします。

$ sh install.sh
Installed sketchmigrate Version 1.0 (134) in /usr/local/bin
Installed sketchtool Version 1.4 (305) in /usr/local/bin

インストール終わったら確認

$ sketchtool -v
sketchtool Version 1.4 (305)

SketchToolを使ってみる

基本的にSketchToolで行えることは、
画像を書き出す**exportと、
json形式で中のデータを出力するlist**の２種類です。

$ sketchtool help
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 layers          List information on all of the document's layers.
	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.

SketchToolで画像の書き出し

意外とSketch3単体だとできないPagesの書き出しがSketchToolからだとできます。
書き出しのためにArtboardをArtboardで囲うよくわからない状態もこれで回避！

コマンドはこんな感じ

$ sketchtool export pages file.sketch
Exported Page 1.png
Exported Page 2.png
Exported Page 3.png

もちろんArtboard単体でも

$ sketchtool export artboards file.sketch
Exported Artboard 1.png
Exported Artboard 2.png
Exported Artboard 3.png

レイヤーを個別で書きだすときは**--item=**でレイヤー名を渡します

$ sketchtool export layers --item="Layer" file.sketch
Exported Layer.png

SketchToolでデータ取得

Pages情報取得

$ sketchtool list pages file.sketch
{
  "pages" : [
    {
      "name" : "Page 1",
      "id" : "7A77A822-DF35-4700-9249-0598BDE82C77",
      "bounds" : "0.000000,0.000000,500.000000,500.000000"
    },
    {
      "name" : "Page 2",
      "id" : "DD0EF9AA-F9BA-47AE-B1E5-32D9E2B3F95F",
      "bounds" : "0.000000,0.000000,300.000000,300.000000"
    },
    {
      "name" : "Page 3",
      "id" : "04A5BD1B-6624-4DF6-BAE8-B1C920939380",
      "bounds" : "0.000000,0.000000,300.000000,300.000000"
    }
  ]
}

Artboards・Layers情報取得

$ sketchtool list artboards file.sketch
$ sketchtool list layers file.sketch

list系のコマンドは色々とデータ取れますが、取れすぎるので加工しましょう。jsonなのでgulpでやると便利です。
あとレイヤーに名前ちゃんと付けとかないとなんのことだかさっぱりわからないので注意です。