最近、徐々にAdobe製品よりSketchを使う機会が増えてきたと思います。
Sketchプラグインまとめ（2016年版）のように既存のプラグインを紹介する記事が出回っていたりしますが、そういった既存のプラグインで満足できなくなってきた人のために、
Sketch Pluginの前提知識として
- 概要
- インストール先
- ディレクトリ構成
- 構成要素
あたりをシェアしたいと思います。
実際の開発に必要な内容はこちらに記載してあります。
概要
こんなタイトルの記事を開いているくらいなので、解説はあまり必要ないかと思いますが、Sketch Pluginは
のような、サードパーティ製の拡張機能のことです。
これらのようなPluginは、JavaScript、もしくはCocoaScriptというJavascriptとCocoa frameworksを足して2で割ったような言語で書くことができます。
公式な資料を見つけることはできませんでしたが、次バージョンのSketch4からは、Swiftでも書くことができるようになるみたいです。
インストール先
Sketch PluginはPlugin Locationsに記載があるように、以下のディレクトリ内にhoge.sketchpluginというパッケージ形式でインストールされます。
~/Library/Application Support/com.bohemiancoding.sketch3/Plugins
ディレクトリ構成
Sketch Pluginは、以下のようなディレクトリ構成になっています。
(以下の例では最小限の構成要素のみを記載しています)
hoge.sketchplugin
Contents/
Sketch/
manifest.json
hoge.js
.sketchpluginという拡張子のパッケージの中にContents/Sketch/ディレクトリがあり、
その中に、npmにおけるpackage.jsonのように、プラグインの仕様を記載したmanifest.jsonと、実際の処理を行うコードを記述したhoge.jsが配置されます。
より詳しい情報については、Plugin Bundlesに記載があります。
構成要素
プラグインの構成要素は以下の通り。
Plugin BasicsのTerminology(専門用語)の内容そのままです。
- Plugin：
プラグインそのもの。 - Plugin Bundle
プラグインを構成するパッケージ。.sketchpluginがそれに当たる。 - Action
トリガーとなるユーザー行動。具体的にはメニューの選択やショートカットキーなど。 - Command
Actionによって実行される、ひとまとまりの処理。 - Handler
コマンドを構成する、1つないし複数のCocoaScriptの関数を指す。 - Script
Commandを実行するためのHandlerを含むjs(or CocoaScript)ファイルを指す。
なので、これらの用語を利用してPluginの動作を説明すると、
Pluginをインストールすると、Plugin Bundleが所定の位置に配置され、
ユーザーが何らかのActionを行うことで、Commandが実行され、
実際にScriptに含まれる１つないし複数のHandlerが呼び出される
という感じですね。
実際の開発については、こちらで解説します。