sketch pluginの作り方の概要
Sketch Developer — Your First Plugin を見て、sketchのプラグインの作り方の概要を把握する。
前提条件
node.js(v6.x以上) + npm が使える状態であること
skpm
pluginのscaffoldを生成するときなどにskpmが便利。
scaffoldを作るだけじゃなく、プラグインのビルド、公開なども含めてプラグイン開発全般で使える。
❯ npm i -g skpm ❯ skpm create my-plugin ✔ Done! To get started, cd into the new directory: cd my-plugin To start a development live-reload build: npm run start To build the plugin: npm run build To publish the plugin: skpm publish
npm i -g
でシステムにskpmをインストールして、skpm create
でプラグインのscaffoldを生成する。
scaffoldができあがったらメッセージが出力されて、やりたいことに合わせて何をすべきか分かるようになってる。
pluginを早速sketchで試してみたければ、npm run build
を実行すればビルドされる。
❯ cd my-plugin ❯ npm run build > my-plugin@0.1.0 build /path/to/my-plugin > skpm-build [1/2] 🖨 Copied src/manifest.json in 10ms [2/2] ⚒ Built ./my-command.js in 541ms success Plugin built
これでsketchを起動すると、メニューのプラグインの中にmy-plugin
が追加されて、my-command
を実行できる状態になっている。
プラグインのファイル構成
❯ tree -L 2 . ├── README.md ├── node_modules │ ├── @skpm │ ├── ... │ ├── yargs-parser │ └── yesno ├── package-lock.json ├── package.json ├── plugin.sketchplugin │ └── Contents └── src ├── manifest.json └── my-command.js 410 directories, 5 files
src
ソースファイルはsrc
内にあり、開発するときにはこの中でコードの追加・修正を行う。
plugin.sketchplugin
plugin.sketchplugin
が実際のプラグイン。build
して生成されるのがこれ。
src/manifest.json
src/manifest.json
は全てのプラグインに必須なファイルで、そのプラグイン自体について説明をするもの。sketchは起動時にこのファイルを見にくる。
package.json
通常のnpmモジュールと同じようにpackage.json
に依存関係などが記述されてる。
❯ cat package.json { "name": "my-plugin", "version": "0.1.0", "engines": { "sketch": ">=3.0" }, "skpm": { "name": "my-plugin", "manifest": "src/manifest.json", "main": "plugin.sketchplugin" }, "scripts": { "build": "skpm-build", "watch": "skpm-build --watch", "start": "skpm-build --watch --run", "postinstall": "npm run build && skpm-link" }, "devDependencies": { "@skpm/builder": "^0.2.0" } }
src/my-command.js
プラグインのコマンドが記述されるファイル。
manifest.json
から参照されるファイルで、関数をexportしないといけない。
npm run watch
開発中はnpm run watch
で変更を検知して自動的にビルドされるようにしておくと楽。
publish
プラグインは以下の公式github repoでリストになっている。 github.com
skpm
を利用している場合は最初のskpm publish
でPRが作られる。
update
新しいバージョンをリリースする場合、manifest.json
にappcast
フィールドを追加する。
appcast
はXMLファイルappcast.xml
のURLを指す。appcastはsparkleというもので使われてる、アップデート情報を記載するフォーマットの1つらしい。