Help us understand the problem. What is going on with this article?

Sketch Pluginの開発(開発編)

More than 3 years have passed since last update.

こちらの記事の続きです。
Sketch Pluginの前提知識が十分でない方はそちらを先に参照ください。

今回は、

  • 環境構築
  • 開発
  • 配布方法

を解説します。

環境構築

お手軽セットアップ

Menu->Plugins->Custom Plugin...を選択すると、
plugin.png
以下の画面が表示され、Javascript編集画面と、その実行結果をその下のconsoleで確認できるようになります。
Screen Shot 2017-01-15 at 07.27.57.png

Editor連携

Sketch Pluginを軽く書いてみたい場合は、上記の方法で良いかと思いますが、ガッツリと書く場合、自分の使い慣れたEditorを使いたくなるかと思います。
その場合、以下のコマンドでEditorを切り替えることができます。
(以下はatomの例)
defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist "Plugin Editor" "/usr/local/bin/atom"

Sketch Pluginではprintlogでログを取ることができますが、
外部Editor連携を行っている場合、その結果はconsole.appから確認することができます。
(※注:以下はJavascriptの例。CocoaScriptの場合、log/printNSLogに変更し、
console.appでもsystem.logからDevicesに表示される自分をPCを選択するように変更)

hello-world.js
function onRun(context) {
  log("onRun method started");
  ...
  print("onRun method finished");
}

Screen Shot 2017-01-22 at 15.43.00.png
(system.logを選択し、Sketchでフィルタリング)

開発

javascript or CocoaScriptで実装することができますが、どちらもそれほど資料がまとめられてはいませんので、
既存のPluginのコードを読む形になると思います。

今回は、Sketch Color Paletteという、
選択されたShapeのbackgroundとnameから.clrファイルを生成するSketch Pluginを作成したのですが、
NSColorやNSColorListにアクセスする都合上、CocoaScriptで記述しました。

開発した感じとしては、Sketch内でおさまるのであればJavaScriptで書いたほうがやりやすいなー、という感想です。
CocoaScriptはAppKitにアクセスできる点はいいのですが、IDEの補完が弱かったり、そこまで書きやすくはないという点でJavaScriptに軍配があがる感じではありました。

配布方法

開発元に確認したところ、
GitHub上にsketchplugins/plugin-directoryというリポジトリがあり、
そのリポジトリ上で以下のいずれかの方法で知らせてくれれば良い、とのことでした。

  • READMEに自分の開発したPluginを含めてPR投げる
  • 自分の開発したPluginのURLを貼付したissueを起票する

plugin-directory.png

まとめ

実際作ってみると、色々とハマりはしましたが、既に多くのPluginが開発・公開されているので、そのコードを読み、既存の実装を組み合わせていけば、実装自体はそこまで難しくないかと思います。
なので、デザイナーとのワークフローを開発したいと思っているのであれば、Sketch Pluginはかなりオススメです。

参考

yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした