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

Sketch Pluginの開発(前提知識編)

More than 3 years have passed since last update.

最近、徐々に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に含まれる1つないし複数のHandlerが呼び出される

という感じですね。
実際の開発については、こちらで解説します。

参考

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
ユーザーは見つかりませんでした