Sketchのプラグインを作る①

この辺のドキュメントを斜め読みしながらSketchのプラグインを作っていく。飽きるまでやる。

プラグインを構成する要素。あんま覚えなくてよい。

- プラグイン : プログラムやらなんやかんやファイルの集まり
- プラグインバンドル : プラグインに関するなんやらかんやらが入ったフォルダ
- コマンド : プラグインを構成する処理の単位、通常複数のコマンドが組み合わさってひとつのプラグインを構成する
- アクション : コマンドを実行するきっかけとなるユーザの行動(メニューを選択する、ファイルを変更する、とか)
- ハンドラ : アクションを検出してコマンドを実行するための橋渡しをするプログラム
- スクリプト : プログラムが書かれたファイル

Sketchプラグインのスクリプト(プログラム)はJavaScriptで書きます。ES6というお洒落なバージョンのJSが使えるが、面倒くさければ使わなくてよい。

Node.jsが必要なので、各自インストールする。npmも入れる。入れたらskpmをnpmでインストールしとく。

npm install -g skpm

そしたら適当なフォルダで以下を実行、プラグインのテンプレートが作られる。

skpm create my-plugin

フォルダに移動してビルドする。

cd my-plugin
npm run build

フォルダの「plugin.sketchplugin」を開く。

おお。

さっそく、Sketch.appの「Plugins > my-plugin > my-command」から実行してみる。

なんか出た。

ここでテンプレートの中身について。

- manifest.json : プラグインの概要。メインとなるプログラムの場所とか、プラグインの名前とか、バージョンとか書いたりする。プラグインを公開するときとかにここがきちんとしているとかっこいい
package.json : 機械に対するメッセージ。難しいことをするときに変えたりする。触らぬ神に祟り無し
src/my-command.js : プラグインのメインプログラム。名前がかっこ悪いなら変えてもいいが、manifest.jsonの中身も一緒に変えること

my-command.jsをちょっと変えて、選択中のレイヤー数を表示するようにする。

// contextに現在のSketchの状態が入っている
export default function(context) {
 // 選択しているレイヤーを配列で取得する
 const selectedLayers = context.selection
 const selectedCount = selectedLayers.length

 if (selectedCount === 0) {
  // 何も選択されていない
   context.document.showMessage('No layers are selected.')
 } else {
  // 選択されている場合は数を出す
   context.document.showMessage(`${selectedCount} layers selected.`)
 }
}

もう一度ビルドして、Sketchからmy-pluginをアンインストールしてから最新版をインストールしなおすと更新される(面倒くさい)。

うん、そうだね。

他にも色々なものを取得できるので遊ぶと楽しい。

ちなみに以下を実行するとファイルの変更を監視して自動でビルドしてくれます(インストールまでやってほしい)。

npm run watch

今日はここまで。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

🍺 + 🍺 = 🤝

パー🖐
23

Yukiya Okuda

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。