Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@nerd0geek1

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

最近、徐々に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開発

プラグイン関係

9
Help us understand the problem. What is going on with this article?
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
9
Help us understand the problem. What is going on with this article?