はじめに

とある目的でSketchをいじっていたら、macOSのシステムフォントを扱えない状況をなんとかできないかと試行錯誤することになり、結果としてSketchプラグインを作るに至りました。
その時のプラグイン開発の知見を簡単に残しておくことにします。

その時に作ったプラグインは以下で公開しているので、どうぞご利用ください。おそらくは、日本のアプリ系UIデザイナーが皆悩んでいた問題を解決し得るものだと思います。

I want Apple System Font
https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin
Sketchで選択したテキストレイヤーに、Appleの「システムフォント」を適用します。

プラグイン開発の第一歩

Run Script

プラグインを作らなくとも、スクリプトを即実行できる。
Pluginsメニューからシートを開ける。

プラグイン新規作成

Run Scriptで記述した内容を「Save…」ボタンで保存すると自動でプラグインパッケージに変換してくれる。
とりあえず初回表示した時点で諸々テンプレ化されているので、何もせずに一旦保存しておくと良い。

以降は .cocoascript ファイルを好みのテキストエディタで編集する具合になる。

あるいは、このページに書かれているやり方でもプラグインパッケージを新規作成することができる。
http://developer.sketchapp.com/guides/first-plugin/

プラグインの仕組み

.sketchpluginは、スクリプトファイルとmanifest.jsonファイル、リソースファイルで構成されているパッケージ。Finderで「パッケージの内容を表示」すれば中身を展開できる。

myplugin.sketchplugin
  Contents/
    Sketch/
      manifest.json
      shared.js
      script.cocoascript
    Resources/
      icon.png

プラグインの名称、署名、メニューアクションの定義はmanifest.jsonで行う。

manifest.jsonの解説：
http://developer.sketchapp.com/guides/plugin-bundles/#manifest

スクリプト

いずれかのスクリプトで記述できる。

• CocoaScript
• JavaScript

触ってみるとわかるが、CocoaScriptはJSとObjective-Cを混在させることができる変態言語らしい。Cocoaの知識があれば何をやれば良いのかは大体わかってくる。

CocoaScriptの記述例

この記事によくまとまっている。

Interacting with Objective-C Classes in CocoaScript

開発環境

小さなプログラムであればRun Scriptのシートダイアログでやってしまった方が良いかもしれない。コンソールもあるのですぐに結果を見ることができる。

Sketch DevTools プラグインを導入しておくと、プラグインの実行結果をコンソールウインドウに出力することができる。

https://github.com/skpm/sketch-dev-tools

プラグインのリロード設定を変更する

cocoascriptファイルやmanifestファイルを変更したらすぐにプラグインに反映してほしい。
Terminalで次の設定を有効にしておくとプラグインのリロードが行われるようになる。

$ defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES

メニューアクションからメソッドを呼び出す

Pluginsメニューのメニュアクションから特定のメソッドを呼び出すには、次のように書くと良い。

{
  "author" : "usagimaru",
  "commands" : [
    {
      "script" : "script.cocoascript",
      "name" : "Menu Title",
      "handlers" : {
        "run" : "onRun"
      },
      "identifier" : "com.hoge.fuga.onrun"
    }
  ],
  "menu" : {
    "isRoot" : false,
    "title" : "My Actions",
    "items" : [
      "com.hoge.fuga.onrun"
    ]
  },
  "identifier" : "com.hoge.fuga.myplugin",
  "version" : "1.0",
  "description" : "初めてのSketchプラグインです。",
  "authorEmail" : "[email protected]",
  "name" : "My plugin's name"
}

handlers の中に "run" というキー名でメソッド名を記述。これで「Menu Title」という名前のメニューを選択すると onRun メソッドが呼び出されるようになる。

var onRun = function(context) {
    // ここに処理を記述
};

contextという引数をひとつ持ち、ここからドキュメントの情報や現在の状態（選択中のレイヤー一覧など）が得られる。

次のステップへの手がかり

SketchのObjective-Cヘッダーを探る

プラグインで凝ったことをやろうとするとSketch.app自体のハックが必要になってくる。
Sketchをclass-dumpにかけるか、このリポジトリーに上がっているObjective-Cヘッダーを眺めると各クラスが持つメソッド一覧を得られる。

公式のAPIリファレンスを探る（JavaScriptの場合）

CocoaScriptだとそんなメソッドはundefinedやでと怒られるので注意。

http://developer.sketchapp.com/reference/api/
https://github.com/BohemianCoding/SketchAPI

他のプラグインやコードを探る

ここのGistには参考になりそうなコードがまとまっている。
https://gist.github.com/bomberstudios

Cocoaバンドルを組み込んでより本格的な機能を実現するには？

XcodeでCocoaバンドル（.bundleパッケージに含まれる実行ファイル）をビルドして、それをSketchプラグインに組み込むことができるようです。
おそらくは独自のUIなりを実装するのに必要なのだと思いますが、その仕組みまではまだ探れていません。