友人の皆さん、ご挨拶！ 私の名前はアントンです。Sketchグラフィックエディター専用のux.pubサイトを開発しています。 Sketchのプラグイン開発の複雑さに関する質問が頻繁に私のメールに届きます。 私は開発者でもプラグイン作成の専門家でもないので、Mike Marianoの最も詳細なプラグイン設計ガイドを翻訳することにしました。
パート1-どこから始めますか？
Sketchプラグインの作成を開始しますが、どこから始めればよいのかわかりませんか？ この投稿はあなただけのためですので、読んでください！
ベースの習得はそれほど簡単ではありません。 既存のプラグインの例は数多くありますが、どこから始めればよいかを理解するのは非常に困難です。 あなたを助けるために、私は一か所でしか見つけることができないすべての必要な情報を集めました。
もちろん、私自身は開発者ではないので、これは高度なプラグインを作成するためのマニュアルではありません。 私はUI / UXデザイナーであり、かなり良いレベルでコーディングしなければならないことがあります（少なくともそう思う）。 Tru-programmerは私のコードを見たときに公然と泣きますが、このコードは初心者にはよく理解されていると思います。
より複雑な例を探しているエンジニアの方は、 この投稿 と Sketch開発者の公式サイトが役立ちます。
プラグインを作成する理由
プラグインは、繰り返し作業を自動化するのに理想的であり、作業と生産を大幅に簡素化します。 ニーズに合ったプラグインがすでに存在する可能性があるため、独自のソリューションを作成する前に、まず既製のソリューションを探してください。 誰かがすでにあなたよりもうまくタスクを完了している可能性が非常に高いです。 しかし、UIを作成するための独自のワークフローがある場合（Unityでのゲームインターフェイスの設計と同様）、おそらくカスタムソリューションが必要になります。
開始する
コードを開始する前に、必要なプログラムとブックマークをすべてインストールします。
- テキストエディタをまだインストールしていない場合はインストールします。 （私はAtomを使用していますが、 SublimeやTextmateのような他の素晴らしいエディターがたくさんあります。）
- コンソールをデバッグ用に開き、Dockに追加します。よく使用します。>
- お使いのマシンはTOTALデバッグにコンソールを使用しているため、新しいSketchクエリログフィルターを作成します。File> New System Query Log
これらの設定をコピーして、[OK]をクリックします。
左側の列にスケッチフィルターが表示されます。
4. Finderウィンドウでお気に入りに追加することで、簡単にアクセスできるようにSketch Pluginsフォルダーをブックマークします。
また、このフォルダに頻繁にアクセスするため、手元に置いておくことをお勧めします。
/ライブラリ/アプリケーションサポート/ com.bohemiancoding.sketch3 /プラグイン
以上で、最初のプラグインを作成する準備が整いました！
10の簡単な手順でプラグインを作成する
スケッチプラグインは、他のユーザーと簡単に共有できる.sketchplugin拡張子を持つフォルダーです。
この例では、ページ名を取得する基本的なスクリプトを作成します。 このタスクを実現するためにプログラミングを知る必要はありませんが、基本的な原則を理解するのに役立ちます。 以降の投稿では、Sketchから異なるデータを取得して変更するためのさまざまなスクリプトを文書化します。 この例は最も簡単です。
Sketchプラグインは、Objective-C / CocoaとJavaScriptの混合であるCocoaScriptで記述されています。 私はJavascriptに精通しているので、問題はありませんでした。 CocoaScriptを使って水中の魚のようだとは言いませんが、JavaScriptの知識で十分理解できました。
それでは始めましょう！
1. Sketch Pluginsディレクトリに新しいフォルダーを作成し、MyPlugin.sketchpluginという名前を付けます
（.sketchplugin拡張子を追加するとすぐに、ダブルクリックすると、フォルダーを開く代わりにプラグインのインストールが開始されます。フォルダー自体を開くには、プラグインを右クリックして[パッケージの内容を表示]オプションを選択します）。
2.フォルダー内に別のフォルダーを作成し、Contentsという名前を付けます
3.コンテンツ内で、Sketchフォルダーを作成します
最終的なプラグインフォルダ構造は次のようになります。
Sketchフォルダー内に、少なくとも2つのファイル（マニフェストとスクリプト）で構成されるプラグイン自体を作成します。
マニフェストはプラグインを記述し、さまざまなホットキーと追加のスクリプトを含む場合があり、常にmanifest.jsonと呼ばれます。
スクリプト自体にはプラグインコードが含まれており、マニフェストはそれを参照しています。 この名前は自由に変更できますが、両方のファイルで一致する必要があります。
4.テキストエディタで、manifest.jsonという新しいファイルを作成し、MyPlugin.sketchplugin> Contents> Sketchに保存します
5.このコードをmanifest.jsonにコピーして貼り付け、保存します。
{ "name" : "My Plugin", "identifier" : "my.plugin", "version" : "1.0", "description" : "My First Sketch Plugin", "authorEmail" : "your@email.com", "author" : "Your Name", "commands" : [ { "script" : "MyScript.js", "handler" : "onRun", "shortcut" : "command shift y", "name" : "Get Page Names", "identifier" : "my.plugin.pagenames" } ] }
MyPluginがSketchプラグインメニューに表示されます。 プラグインの名前または呼び出すためのホットキーを変更できます。これは、Sketchの[プラグイン]メニューに反映されます。 インストールされている他のアプリケーションまたはプラグインに割り当てられていないホットキーを選択することが重要です。そうしないと機能しません。
次に、MyScript.js参照マニフェストを作成します。 ファイル名がマニフェストファイルの名前と一致していることを確認してください！
6.テキストエディターに戻り、MyScript.jsという新しいファイルを作成し、MyPlugin.sketchplugin> Contents> Sketchフォルダーに保存します
7.このコードをコピーしてMyScript.jsに貼り付けます
var onRun = function(context) { //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } }
このコードについては、次のパートで詳しく説明します。 それまでは、行のコメントに依存してください。
8.スケッチに移動して、新しいファイルを開きます
9. [プラグイン]メニューから、[マイプラグイン]> [ページ名の取得]を選択します
10.コンソールに移動すると、ログの下部にページの名前が表示されます。
10:54:42 PM Get Page Names (Sketch Plugin): Page 1
Sketchファイルのページ名を変更して、プラグインを再起動してください。 ログには新しい名前が表示されるはずです。 別のページを追加して名前を変更し、プラグインを実行すると、コンソールに両方のページの名前が表示されます。
以上です！
私は数週間だけSketchで働いていて、そのパワーとカスタマイズ機能にすでに感銘を受けています。 プラグインの現在のバージョンはこちらからダウンロードできます。
パート2-ユーザー通知
切り替えた優れたAtomテキストエディターを発見しました。 まだ使用していない理由がわかりませんが、今では古き良きTextMateに別れを告げました。
前の章では、ドキュメントのすべてのページの名前をコンソールに表示するプラグインを作成しました。 次に、情報を表示する他の方法を検討します。 プラグインが機能したことや、ユーザーがデータを入力する必要があるなど、さまざまなことをユーザー（および自分）に通知する場合に必要です。 また、スクリプトをテストするために常にコンソールに切り替える必要はありません。
Sketch内でユーザーに通知するには、さらに2つの方法があります。
- メッセージ （メッセージ）-アプリケーションの下部に表示される目立たない短いメッセージで、しばらくすると非表示になります
- 警告ボックス-データ入力をユーザーに要求するか、続行するには何らかのアクションが必要な標準ポップアップウィンドウ。
各メソッドには独自のアプリケーションがあり、通常、多くのメッセージでプラグイン（およびユーザー）をオーバーロードする必要はありません。 両方を試して、自分のプラグインに最適な方法を見つけてください。
最初の例のプラグインスクリプトに戻ってやり直しましょう。
var onRun = function(context) { //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } }
このコードを見ると、pageNameはドキュメントのページ配列内の各ページの名前を指します。 これは、ページに関するすべての情報を含むデータコンテナーです。 通常、forループを使用してこれらの配列にアクセスし、各オブジェクトを反復処理して特定の値を抽出または割り当てます。
この行では、pageName変数がコンソールに送信されます。
log(pageName);
次に、スクリプトの実行時にSketch内にメッセージを表示するメッセージをスクリプトに追加します。
これを行うには、forループブラケットの後にコード行を追加します。
doc.showMessage(“MyPlugin Finished!”);
Docは、ドキュメントを参照するスクリプトの上部にある変数です。showMessageは、メッセージを表示するために変数または文字列（String）を渡すことができる組み込み関数です。
スクリプト全体のコンテキストでforループの後に追加する方法を次に示します。
var onRun = function(context) { //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } //show a message at the bottom of Sketch doc.showMessage("MyPlugin Finished!"); }
結果を確認するには、プラグインメニューからMyPluginを起動します。 スケッチウィンドウの下部に表示されます。
このタイプのメッセージは、常にコンソールに切り替えたくない場合、またはユーザーに表示したいがユーザーの参加を必要としないものがある場合に役立ちます。
ユーザーのアクションが必要な、より人目を引くメッセージが必要な場合は、アラートボックスを使用することをお勧めします。 追加するには、スクリプトの先頭にコード行を追加し、前のメッセージを表示した後に別のコード行を追加します。
最初の行はdoc変数宣言の上に追加され、アプリケーション自体を参照します。
var app = [NSApplication sharedApplication];
2行目は、アプリケーションにメッセージを送信するための新しい変数へのアクセスを提供します。
[app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"];
そして、新しい行を含む最終的なコードは次のとおりです。
var onRun = function(context) { //reference the Application var app = [NSApplication sharedApplication]; //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } //show a message at the bottom of Sketch doc.showMessage("MyPlugin Finished!"); //send an alert message to the application [app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"]; }
[プラグイン]メニューからMyPluginを起動すると、次のように表示されます。
メッセージ（引用符で囲まれたもの）を任意のものに変更し、プラグインを再起動します。 完全なカスタマイズ！
これは、Sketch内でのデータのデバッグと表示のまさに始まりです。 メッセージ/通知スクリプトの変更、別のデータ（変数または配列カウンター）を表示するためのスクリプトの追加を試みることができます。
ドキュメント内のページ数を表示するには、pages.count（）を表示するメッセージを作成できます。
[app displayDialog:”This document has “ + pages.count() + “ pages.” withTitle:”Alert Box Title”];
結果は次のとおりです。
カスタム通知を整理しました！ 最初に開発環境を準備し、次にSketch内でメッセージをデバッグおよび表示する方法を見つけました。 次に、特定のデータとその処理方法を検索して、コード自体にさらに焦点を当てます。
プラグインの現在のバージョンはここからダウンロードできます 。
パート3-再利用可能なコードの記述
プログラムを開始しているので、モニターを垂直に配置するときが来ました！
このパートでは、コードの記述、繰り返し呼び出しのための関数の作成、2つのスクリプトのリンクの基本概念を明らかにします。 スクリプトの作成を既に習得している場合は、この部分の最後までスクロールダウンし、ソースコードをダウンロードして、独自の方法でリメイクできます。 このビジネスを初めて使用する場合、または知識を更新する必要がある場合は、読んでください！
基本的なコード作成の概念
すでに記述したコードがあり、変数、配列、関数、およびforループが含まれています。 これらの要素とif / elseステートメントは、私が行うすべての基本的な構成要素です。 これらの要素（特にループ）を習得すると、スクリプトを理解しやすくなりました。 私はスクリプトをJavascriptとObjective-Cで記述しますが、これらの概念はどのプログラミング言語でも非常に普遍的です。 必要なのは、コードを記述する特定の方法を考え出すことだけです。
これらの概念について簡単に説明します。
変数は、ある種の情報への参照です。 文字列（テキスト）、数値、またはブール値（trueまたはfalse）のいずれかです。 これは値にアクセスするためのホットキーであり、何度も何度も手で入力する代わりに使用するのが非常に便利です。
var myName = “Mike”; var thisYear = 2016; var givesHighFives = true;
myNameを「Mike」に設定すると、myNameスクリプトのどこにでも簡単に記述でき、この変数は「Mike」を参照します。 しかし、「Shawn」をmyNameにしたい場合は、変数宣言で1回変更するだけで済み、コード内の各エンティティも変更されます。
配列も変数ですが、通常、同じタイプの複数の値が含まれます。 曜日の配列があるように、そのような配列内のすべての日の文字列値が表示されます。
var daysOfTheWeek = {“Sunday”, “Monday”, “Tuesday”, Wednesday”, “Thursday”, “Friday”, “Saturday”};
次のように書くこともできます。0で始まる配列要素の数が見やすくなります。
var daysOfTheWeek[]; daysOfTheWeek[0] = “Sunday”; daysOfTheWeek[1] = “Monday”; daysOfTheWeek[2] = “Tuesday”; daysOfTheWeek[3] = “Wednesday”; daysOfTheWeek[4] = “Thursday”; daysOfTheWeek[5] = “Friday”; daysOfTheWeek[6] = “Saturday”;
関数は、特定のタスクを実行する再利用可能なコードです。 あなたは通常、何かを繰り返し行う必要があるかどうかを尋ねます。 変数を変数に渡したり、値を強制的に返したり、空のままにしたりできます。
var eyesOpen = true; function closeEyes(){ eyesOpen = false; } function openEyes(){ eyesOpen = true; }
上記の例では、目を閉じたいときはいつでも、closeEyes（）関数を呼び出し、次にopenEyes（）を呼び出してそれらを開くことができます。
if / elseステートメントは、まさにそれが言っていることを行います。 何らかの条件をチェックし、条件が満たされた場合は特定のアクションを実行し、そうでない場合は他の何かを実行します。
if(daysOfTheWeek == “Sunday”){ watchGameOfThrones(); }else if(daysOfTheWeek == “Wednesday”){ watchMrRobot(); }else{ watchTheNews(); }
forループは 、特定のコードブロックを既知の回数繰り返すために使用されます。 たとえば、daysOfTheWeek配列で、配列の値を一覧表示する場合は、forループを使用してこれを行います。
ループがなければ、次のように記述します。
log(daysOfTheWeek[0]); log(daysOfTheWeek[1]); log(daysOfTheWeek[2]); log(daysOfTheWeek[3]); log(daysOfTheWeek[4]); log(daysOfTheWeek[5]); log(daysOfTheWeek[6]);
そして、ループを使用すると、次のように記述するだけで済みます。
for(var i = 0; i < daysOfTheWeek.count(); i++){ log(daysOfTheWeek[i]; }
ずっと簡単ですよね？ ループの場合、iの初期値を0に設定し、iがdaysOfTheWeek配列の値の数に達するまでカウントします。 7.つまり、i = 0から始まり、ループはdaysOfTheWeekの値をログに記録し、i 1に追加して、すべてが繰り返されます。 合計で、配列内の値の完全なセットに達するまで、これが7回行われます。
アラートボックス関数の作成（アラートボックス）
MyPluginコードに戻ります。 前のパートでは、スクリプトの処理後に表示される通知ウィンドウを作成しました。
[app displayDialog:”This is an alert box!” withTitle:”Alert Box Title”];
ユーザーにメッセージを表示する必要があるたびに使用されるもののように見えます。そのようなメッセージのコード行全体を毎回書き留めるのは本当に嫌です。 表示されるメッセージが変数と文字列の組み合わせである場合、これは特に当てはまります。コードは非常に長くなる可能性があります。
再利用可能な関数を作成する大きな理由は、このために登録する必要があります：
function alert(title, message){ var app = [NSApplication sharedApplication]; [app displayDialog:message withTitle:title]; }
alert（）を呼び出してヘッダーとメッセージを渡すたびに、警告ウィンドウが表示されます。
onRun関数ブラケットの後に、スクリプトの最後にこの関数を追加します。
var onRun = function(context) { //reference the Application var app = [NSApplication sharedApplication]; //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; [app displayDialog:"This document has " + pages.count() + " pages." withTitle:"Alert Box Title"]; //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } //show a message in app doc.showMessage("MyPlugin Finished!"); //send an alert message to the application [app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"]; } function alert(title, message){ var app = [NSApplication sharedApplication]; [app displayDialog:message withTitle:title]; }
そして、変数への元の参照を置き換えることで、以前に記述されたコードを変更できるようになりました。関数に登録されているからです。 スクリプトは次のようになります。
var onRun = function(context) { //reference the Application var app = [NSApplication sharedApplication]; //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; alert("Number of Pages", "This document has " + pages.count() + " pages."); //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } //show a message in app doc.showMessage("MyPlugin Finished!"); //send an alert message to the application alert("Plugin Finished!", "This is a message saying the Plugin is finished.") } function alert(title, message){ var app = [NSApplication sharedApplication]; [app displayDialog:message withTitle:title]; }
プラグインを実行すると、以前と同じ結果が表示されますが、コードは関数を参照しています。 スクリプト内のどこからでも呼び出すことができ、コードを何度も書き換える必要はありません。 しかし、この関数を使用する別のスクリプトがある場合はどうでしょうか？
他のスクリプトからスクリプトへのリンク
そして、ここではライブラリを作成するのが適切です。 場合によっては、1つのスクリプトに結び付けてはならない共通の機能があります。 alert（）関数の場合や、数値を最も近い整数に丸める関数の場合と同様です。 これらは、さまざまなスクリプトで使用される可能性が高い一般的な機能です。 したがって、各ファイルにコピーアンドペースト機能を使用する代わりに、共通ファイルを作成して必要に応じて挿入できます。
1. MyScript.jsが保存されているフォルダーと同じフォルダーに新しいJavaScriptファイルを保存し、common.jsという名前を付けます。 これで、フォルダーに3つのファイルが作成されます。
2. MyScript.jsからアラート関数を切り取ってcommon.jsに貼り付け、変更を保存します。
common.jsには、次のコードのみがあります。
function alert(title, message){ var app = [NSApplication sharedApplication]; [app displayDialog:message withTitle:title]; }
3.このスクリプトをMyScript.jsから実行するには、次のコード行をスクリプトの先頭に追加して保存します。
@import 'common.js'
上部に新しい行があり、alert（）関数が削除されたスクリプト全体は次のようになります。
@import 'common.js' var onRun = function(context) { //reference the Application var app = [NSApplication sharedApplication]; //reference the Sketch Document var doc = context.document; //reference all the pages in the document in an array var pages = [doc pages]; alert("Number of Pages", "This document has " + pages.count() + " pages."); //loop through the pages of the document for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //get the name of the page var pageName = [page name]; //show the page name in the console log(pageName); } //show a message in app doc.showMessage("MyPlugin Finished!"); //send an alert message to the application alert("Plugin Finished!", "This is a message saying the Plugin is finished.") }
プラグインを再度実行すると、前と同じように機能しますが、今では共通のスクリプトから関数を実行します！ 最適化が完了しました！
これで、より複雑なプラグインを作成して理解するための基本ができました。 次に、変数と配列を使用したSketchドキュメントのデータへのアクセス、これらの配列を使用して必要な値を抽出して割り当てる方法を学習します。
プラグインの現在のバージョンはこちらからダウンロードできます。
パート4-実世界の例
コードを記述およびデバッグするための環境を編成する方法、さまざまな種類のユーザー通知を表示する方法を既に学習し、コードを記述する基本的な概念を習得しました。 独自のプラグインの作成を開始するためのすべてが揃っているようです。
幸いなことに、ボヘミアンコーディングにはクラスのドキュメントがあります。
http://developer.sketchapp.com/reference/class/
残念ながら、このページの冒頭に書かれているように、それはまだ「開発中」です。 そのため、すべてが説明されているわけではなく、これらすべてをどうするかという例はあまりありません。
個人的には、例から最もよく学びます。 コードを理解することは非常に難しい場合がありますが、知識と目標に関連してコードがどのように使用されるかを見ると、はるかに簡単になります。 Sketchでの作業中に見つけた3つの例を紹介します。それらが役立つことを願っています。
例1：アートボードの高さと幅を切り替えます。
奇妙なことですが、Sketchの標準機能では、アートボードの向きがポートレートからランドスケープ、またはその逆に変わりません。 この問題を解決するプラグインは1つも検索できなかったので、独自のプラグインを作成します。
明確にするために、何をするかを決めましょう。 これは、目標、それを達成する方法の決定、および直面しなければならない極端なケースの特定に役立ちます。 UXスクリプトを作成するようなものですね。
このプラグインに対して、次のことを行うスクリプトを作成します。
- まず、何かが強調表示されていることを確認してください
- 次に、選択したオブジェクトがアートボードであることを確認します
- 次に、選択したアートボードの元の高さと幅を取得し、変数に保存します
- 次に、古い幅に基づいて新しい高さを設定し、古い高さに基づいて新しい幅を設定します
- 最終的に、スクリプトが機能したことをユーザーに通知します
MyPluginに別のスクリプトを追加する
新しいコードバッチをMyScript.jsに追加する代わりに、RotateArtboard.jsという新しいスクリプトを作成して、MyPlugin.sketchpluginフォルダーに保存します。
このコードをRotateArtboard.jsに追加します。 各メインスクリプトはonRun関数内にある必要があるため、このスクリプトは常に開始するのに適しています。
@import 'common.js' var onRun = function(context) { //reference the Sketch Document var doc = context.document; }
すでに作成したものと同じアラート機能を使用するために、common.jsファイルをインポートすることがわかります。
現時点では、次のファイルがプラグインフォルダーにあるはずです。
マニフェストに別のスクリプトを追加するには、manifest.jsonを開きます。
次のように、すべてのMyScript.jsコマンドを含むコードスニペットをコピーし、MyScriptブロックの後にカンマを追加して、閉じ括弧の前にコマンドを貼り付けます。
{ "name" : "My Plugin", "identifier" : "my.plugin", "version" : "1.0", "description" : "My First Sketch Plugin", "authorEmail" : "your@email.com", "author" : "Your Name", "commands" : [ { "script" : "MyScript.js", "handler" : "onRun", "shortcut" : "command shift y", "name" : "Get Page Names", "identifier" : "my.plugin.pagenames" }, { "script" : "RotateArtboard.js", "handler" : "onRun", "shortcut" : "command shift u", "name" : "Rotate Artboard", "identifier" : "my.plugin.rotateartboard" } ], }
これで、MyPluginメニューに新しいスクリプトが表示されます（ホットキーは変更できます）。
コードに戻りましょう！ 強調表示されているものを見つけるには、次を使用します。
var selection = context.selection;
このコードは、選択したすべてのレイヤーで配列変数を作成します。 これで、この配列をチェックして、その中に何かがあるかどうかを確認できます。 0の場合、何も割り当てられません。ユーザーに何かを割り当てる必要があることを伝えます。
if(selection.count() == 0){ doc.showMessage(“Please select something.”); }
ただし、カウンターが0でない場合、配列内に何かがあり、少なくとも1つのレイヤーを選択する必要があります。 選択したレイヤーを循環させて、それらの間にアートボード（ MSArtboardGroup ）があるかどうかを判断できます。
if(selection.count() == 0){ doc.showMessage(“Please select something.”); } else { for(var i = 0; i < selection.count(); i++){ if(selection[i].class() == "MSArtboardGroup"){ //do something } } }
同じ手法を使用して、選択がテキストレイヤー（MSTextLayer）、グループ（MSGroupLayer）、形状（MSShapeGroup /文書化されていない）、インポートされたイメージ（MSBitmapLayer）、またはシンボル（MSSymbolInstance /文書化されていない）であるかどうかを確認できます。
アートボードの高さと幅を取得するには、まずそのフレームを取得する必要があります。そして、すでにフレームから値を抽出し、新しい値を割り当てることができます。
forループの配列要素に基づいてartboardという変数を作成すると、現在の寸法を取得できます。forループを使用すると、選択した複数のアートボードを同時に操作できます。
var artboard = selection[i]; var artboardFrame = artboard.frame(); var artboardWidth = artboardFrame.width(); var artboardHeight = artboardFrame.height();
次に、必要な値を持つ2つの新しい変数を作成します。幅と高さを入れ替える：
var newArtboardWidth = artboardHeight; var newArtboardHeight = artboardWidth;
次に、artboardFrameを使用して、新しい変数で高さと幅を設定します。
artboardFrame.setWidth(newArtboardWidth); artboardFrame.setHeight(newArtboardHeight);
最後に、通知ウィンドウを使用して、スクリプトの開発についてユーザーに通知し、新しい値を表示します。
var alertMessage = “New Height: “+newArtboardHeight+ “ | New Width: “+newArtboardWidth; alert(“Artboard Rotated!”, alertMessage)
コメント付きのスクリプト全体を次に示します。
@import 'common.js' var onRun = function(context) { //reference the sketch document var doc = context.document; //reference what is selected var selection = context.selection; //make sure something is selected if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ //loop through the selected layers for(var i = 0; i < selection.count(); i++){ //checks to see if the layer is an artboard if(selection[i].class() == "MSArtboardGroup"){ //reference the selection var artboard = selection[i]; //get the artboard frame for dimensions var artboardFrame = artboard.frame(); //get the width var artboardWidth = artboardFrame.width(); //get the height var artboardHeight = artboardFrame.height(); //set a new width variable to the old height var newArtboardWidth = artboardHeight; //set a new height variable to the old width var newArtboardHeight = artboardWidth; //set the artboard frame with the new dimensions artboardFrame.setWidth(newArtboardWidth); artboardFrame.setHeight(newArtboardHeight); //send an alert message with the new values var alertMessage = "New Height: "+newArtboardHeight+ " | New Width: "+newArtboardWidth; alert("Artboard Rotated!", alertMessage); }else{ doc.showMessage("Please select an artboard."); } } } }
例1を要約するには：
- 何かが強調表示されているかどうかを確認します。
- 選択したレイヤーのタイプを決定し、これが必要なタイプである場合は何かを行います
- 選択したアートボードの元のフレーム、高さと幅を抽出し、変数に保存します
- 必要な値で新しい変数を作成します
- 選択したアートボードのフレームにこれらの値を設定します
例2：レイヤーを選択し、シンボル名に名前を変更します
シンボルの操作中に発見した別の現実の問題を以下に示します。ライブラリから新しいキャラクターを追加すると、レイヤーの名前がキャラクターの名前に変わります。別のシンボルに切り替えても、レイヤーの名前は変更されません。レイヤー名を設定したい場合もあれば、新しいシンボルの名前に変更したい場合もあります。プラグインを作成するもう1つの完璧な理由を次に示します。
この例では、参照用にSketchファイルをダウンロードします。
最初のアートボードのSketchファイルには、正方形と呼ばれるシンボルがあります。これは中央にあります。ライブラリには、サークルと呼ばれる別のシンボルもあります。
スクエアを選択し、右側のオプションを使用して、スクエアをサークルに変更します
左側のレイヤーを見てください-レイヤーはまだスクエアと呼ばれています！名前を手動で変更できると思いますが、特に多くのエンティティを変更する必要がある場合は、クールではありません。
このプラグインのスクリプトは次のとおりです。
- まず、何かが強調表示されていることを確認します
- 次に、シンボルが強調表示されていることを確認します。
- キャラクター名を取得する
- シンボル名がレイヤー名と一致するかどうかを確認します
- そうでない場合は、レイヤー名をシンボル名に変更します
- 最後に、スクリプトの実行時にユーザーに通知します
新しいスクリプトと以前のスクリプトには多くの共通点があることに気付くでしょう。同じ選択チェックと、選択したオブジェクトのタイプの決定です。したがって、既製の開発を使用できますが、これはかなり特殊なケースなので、別のスクリプトを作成します。
前の例の最初の手順に従って、MyPlugin.sketchpluginに別のスクリプトを追加し、SetLayerNameToSymbolName.jsという新しいファイルを作成して、manifest.jsonに追加しましょう。時間を節約するには、RotateArtboard.jsと「名前を付けて保存」を使用します。このスクリプトは非常に頻繁に使用するため、ここから始めていくつかの変更を加えましょう。
フォルダには次のファイルが含まれています。
このスクリプトでは、選択がMSArtboardGroup（アートボード）であるかどうかを確認する代わりに、MSSymbolInstance（シンボル）であるかどうかを確認します。そうである場合、symbolMasterの名前を見つけ、それをレイヤーの名前と比較します。
そして、ここにいくつかの修正された行を持つ新しいスクリプトがあります：
@import 'common.js' var onRun = function(context) { //reference the sketch document var doc = context.document; //reference what is selected var selection = context.selection; //make sure something is selected if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ //loop through the selected layers for(var i = 0; i < selection.count(); i++){ //checks to see if the layer is a Symbol if(selection[i].class() == "MSSymbolInstance"){ //reference the selection var layer = selection[i]; //get the original layer name var layerName = layer.name(); //get the name of the symbol on the layer var symbolName = layer.symbolMaster().name(); //check if layer name is not already symbol name if(layerName != symbolName){ //set the layer name to the symbol name layer.setName(symbolName); var alertMessage = "Layer Name Changed from: "+layerName+ " to: "+symbolName; alert("Layer Name Changed!", alertMessage); }else{ doc.showMessage("Layer name is already Symbol Name."); } }else{ doc.showMessage("Please select a Symbol Layer."); } } } }
例2の要約
この例では、次のことを学びました。
- 選択がアートボードであるかシンボルであるかを同じように実行します。
- symbolMaster名とレイヤー名を取得する方法
- 2つの名前を比較し、異なる場合はレイヤーの名前を調整する方法。
例3：シンボル名をレイヤー名として指定する
前のスクリプトは完全に機能しますが、各レイヤーを手動で選択したくない場合があります。ときどき、ドキュメント内に多数のキャラクターを散らした後、レイヤーをハイライトせずに、レイヤーのすべての名前をキャラクターの名前に合わせたいだけです。これを行うには、次を変更する必要があります。
- 最初にドキュメントのすべてのページを取得します
- 次に、すべてのページですべてのアートボードを取得します
- 次に、各アートボードのすべてのレイヤーを取得します。
- 次に、これらのレイヤーのいずれかがシンボルレイヤーであるかどうかを確認します
- 次に、レイヤーの名前がシンボルの名前と一致するかどうかを確認します
- 一致しない場合は、レイヤー名を置き換えてユーザーに通知します
現在は強調表示されているものを考慮していないため、スクリプトを変更して、ドキュメントのページのデータを処理する必要があります。次に、一連のネストされたforループを使用します。これは、アートボードの配列、次にレイヤーの配列を反復処理し、最終的に各レイヤーに到達します。forループは、forループの内側にあるforループの内側にあります。
おそらくこのタスクのために、別の新しいスクリプトを作成します。SetAllLayerNamesToSymbolNames.jsという名前の新しいファイルで開始し、前と同様にmanifest.jsonに追加します。
これで、MyPlugin.sketchpluginフォルダーに非常に多くのファイルが作成さ
れます。メニューリストのプラグインは、前の例とともに、新しいファイルをマニフェストに追加するとすぐに新しいオプションを表示するはずです。
ドキュメントからページデータを抽出するには、次のコードを使用します。
var pages = [doc pages];
ページアートボードを取得するには、forループを使用します。
var pages = [doc pages]; for (var i = 0; i < pages.count(); i++){ var page = pages[i]; var artboards = [page artboards]; }
アートボードレイヤーを取得するには、forループ内でforループを使用します。
var pages = [doc pages]; for (var i = 0; i < pages.count(); i++){ var page = pages[i]; var artboards = [page artboards]; for (var z = 0; z < artboards.count(); z++){ var artboard = artboards[z]; var layers = [artboard layers]; } }
次に、個々のレイヤーをそれぞれ抽出するには、forループ内のレイヤーを調べて、レイヤーが何であるかを確認する必要があります。
var pages = [doc pages]; for (var i = 0; i < pages.count(); i++){ var page = pages[i]; var artboards = [page artboards]; for (var z = 0; z < artboards.count(); z++){ var artboard = artboards[z]; var layers = [artboard layers]; for(var k = 0; k < layers.count(); k++){ var layer = layers[k]; if(layer.class() == "MSSymbolInstance"){ //do something } } } }
これがシンボルレイヤーであることを確認したら、その名前を確認し、レイヤーの名前と比較できます。異なる場合は、レイヤーの名前をシンボルの名前に変更します。これで完了です！
スクリプト全体は次のようになります。理解しやすいように、ほぼすべての行がコメント化されています。
@import 'common.js' var onRun = function(context) { //reference the sketch document var doc = context.document; //reference the pages array in the document var pages = [doc pages]; //create a variable to hold how many symbol layers we changed var symbolCount = 0; //loop through the pages array for (var i = 0; i < pages.count(); i++){ //reference each page var page = pages[i]; //reference the artboards array of each page var artboards = [page artboards]; //loop through the artboards of each page for (var z = 0; z < artboards.count(); z++){ //reference each artboard of each page var artboard = artboards[z]; //reference the layers array of each artboard var layers = [artboard layers]; //loop through the layers array for(var k = 0; k < layers.count(); k++){ //reference each layer of each artboard var layer = layers[k]; //check to see if the layer is a Symbol if(layer.class() == "MSSymbolInstance"){ //get the original layer name var layerName = layer.name(); //get the name of the symbol on the layer var symbolName = layer.symbolMaster().name(); //only change the name of layers that don't match the symbol name if(layerName != symbolName){ //set the layer name to the symbol name layer.setName(symbolName); symbolCount = symbolCount + 1; } } } } } var alertMessage = symbolCount + " symbol layer name changed."; alert("Symbol Layer Names Reset!", alertMessage); }
例3を要約すると、ここで次のことを学びました。
- ドキュメントのすべてのページを調べて、アートボードのリストを取得します
- ページ上のすべてのアートボードを調べて、レイヤーを取得します
- アートボードのすべてのレイヤーを調べて、タイプを確認します
- レイヤー名とシンボル名を比較する
- 最後に、名前が異なる場合は、レイヤーの名前をシンボルの名前に変更します
おわりに
これらは、先ほど学習した利用可能なSketchクラスの基本概念をどのように使い始めるかを示す3つの例にすぎません。まだやるべきことがたくさんありますが、まだ始まったばかりです！さらに、Sketch内の追加のクラスにアクセスするためのより多くの方法、実際の世界からのより多くの例を検討します。
プラグインの現在のバージョンはこちらからダウンロードできます。
パート5-MSLayerクラス
Sketchでクラスができることの実際の実用的な例を既に見てきたので、さらに学習を進めることができます。このパートでは、MSLayerクラスに焦点を当て、このクラスを継承するクラスを調べます。
MSLayerクラスはSketchのすべてのレイヤーの基本クラスであり、他のすべてのタイプのレイヤーはそれを継承するサブクラスです。ドキュメントに追加するものはすべて、最初はページ、アートボード、グループ、シェイプ、テキスト、画像などのレイヤーです。これらはすべてMSLayerクラスのサブクラスであり、MSLayerクラスでできることは何でもできます。
用語をよりよく理解するために、クラスで使用できるデータには2つのタイプがあります。
- 属性 -オブジェクトの名前付きプロパティ（高さ、幅、名前など）
- メソッド -クラスに関連付けられた関数。通常、属性の変更（高さ、幅、名前の変更など）に使用されます
開発者向けサイトのドキュメントには、クラスの属性とメソッドの基本がすでに含まれています。したがって、ここですべてを再現する意味はありません。代わりに、レイヤーの属性を表示し、現実世界でそのメソッドを使用する最も簡単な方法を紹介します。
レイヤー属性の取得
前のパートでは、レイヤーに関するデータを取得する2つの方法を検討しました。選択配列のループを使用する方法と、ドキュメント内のページの配列にforループをネストする方法です。
選択配列を使用して、layerという変数を取得するとします。
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; } } };
すべてのレイヤーがMSLayer基本クラスのサブクラスであることがわかっているため、特定のタイプに関係なく、あらゆるタイプのレイヤーからいくつかの属性を取得し、将来のアクセスのために変数として保存できます。
一部の属性は実際には他のクラスの本質であり、これらのクラスに基づいた独自の属性とメソッドを持っています。彼らのために、データを掘り下げる方法の例をいくつか示します。ただし、問題のより徹底的な調査については、ドキュメントへのリンクを使用してください。
MSLayerクラスで使用できる属性を次に示します。
クラス（レイヤータイプ）：
var layerClass = layer.class();
フレーム（アートボードと相対的なサイズと位置、MSRectエンティティ）：
var layerFrame = layer.frame(); var layerWidth = layerFrame.width(); var layerHeight = layerFrame.height(); var layerXpos = layerFrame.x(); var layerYpos = layerFrame.y();
スタイル（境界線、塗りつぶし、影、内側の影、MSStyleエンティティ）：
var layerStyle = layer.style(); // var layerFills = layer.style().fills(); // for(var z = 0; z < layerFills.count(); z++){ var fillColor = layerFills[z].colorGeneric(); }
レイヤー名：
var layerName = layer.name();
可視性：
var layerIsVisible = layer.isVisible();
ブロック状態：
var layerIsLocked = layer.isLocked();
反射（水平または垂直）：
// var layerIsFlippedHorizontal = layer.isFlippedHorizontal(); // var layerIsFlippedVertical = layer.isFlippedVertical();
回す：
var layerRotation = layer.rotation();
親グループ（ページ、アートボード、またはグループ）：
var layerParent = layer.parentGroup();
割り当てステータス：
var layerIsSelected = layer.isSelected();
Absolute Rect（ドキュメント全体のグローバルサイズと位置、MSAbsoluteRectエンティティ）：
var layerAbsoluteRect = layer.absoluteRect(); var layerAbsoluteWidth = layerAbsoluteRect.width(); var layerAbsoluteHeight = layerAbsoluteRect.height(); var layerAbsoluteXpos = layerAbsoluteRect.x(); var layerAbsoluteYpos = layerAbsoluteRect.y();
CSSAttributeString：
var layerCSSAttributeString = layer.CSSAttributeString();
CSSAttributes：
var layerCSSAttributes = layer.CSSAttributes();
ドキュメントにはさらにいくつかありますが、これらは私が通常使用するものです。スクリプトのニーズに基づいて選択しました。しかし、これらのすべての属性を一度に変数に保存したい場合は、次のようなことができます。
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; var layerClass = layer.class(); var layerFrame = layer.frame(); var layerStyle = layer.style(); var layerName = layer.name(); var layerIsVisible = layer.isVisible(); var layerIsLocked = layer.isLocked(); var layerIsFlippedHorizontal = layer.isFlippedHorizontal(); var layerIsVertical = layer.isFlippedVertical(); var layerRotation = layer.rotation(); var layerParent = layer.parentGroup(); var layerIsSelected = layer.isSelected(); var layerAbsoluteRect = layer.absoluteRect(); var layerUserInfo = layer.userInfo(); var layerCSSAttributeString = layer.CSSAttributeString(); var layerCSSAttributes = layer.CSSAttributes(); } } };
次に、コンソールを使用して、表示する変数をログに記録できます。
log(“Layer Rotation: “ + layerRotation);
メソッドを使用する
レイヤー属性を取得する方法を学習したので、メソッドを使用してそれらを構成できます。MSLayerクラスには、レイヤの特定の属性を変更できるいくつかのメソッドがあります。それらの名前はアクションを示します：
setName
var newLayerName = "New Layer Name"; layer.setName(newLayerName);
setIsVisible
// layer.setIsVisible(true); // layer.setIsVisible(false); // layer.setIsVisible(!layer.isVisible())
setIsLocked
// layer.setIsLocked(true); // layer.setIsLocked(false); // layer.setIsLocked(!layer.isLocked());
setRotation
var newLayerRotation = 180; layer.setRotation(newLayerRotation);
setIsFlippedHorizontal
// layer.setIsFlippedHorizontal(true); // layer.setIsFlippedHorizontal(false); // layer.setIsFlippedHorizontal(!layer.isFlippedHorizontal());
setIsFlippedVertical
// layer.setIsFlippedVertical(true); // layer.setIsFlippedVertical(false); // layer.setIsFlippedVertical(!layer.isFlippedVertical());
setIsSelected
// layer.setIsSelected(true); // layer.setIsSelected(false); // layer.setIsSelected(!layer.isSelected());
複製
layer.duplicate();
レイヤーの属性を抽出して再構成するだけで、さまざまなタイプのプラグインを作成できるようになりました。
たとえば、すべてのレイヤーのロックを解除する場合、最初にレイヤーがロックされているかどうかを確認してから、ロックを解除できます。
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; var layerIsLocked = layer.isLocked(); if(layerIsLocked == true){ layer.setIsLocked(false); } } } };
または、レイヤーの名前にプレフィックスを追加する場合：
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; var layerName = layer.name(); var layerPrefix = "prefix_"; layer.setName(layerPrefix + layerName); } } }
さらに、オプションは本当に無限です！
属性メソッド
フレームやスタイルなど、他のクラスのエンティティである属性にも独自のメソッドがあります。
たとえば、レイヤーの幅を100に変更するには、フレーム変数でsetWidthを使用する必要があります。
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; var layerFrame = layer.frame(); var newLayerWidth = 100; layerFrame.setWidth(newLayerWidth); } } }
レイヤーに塗りを追加する場合は、スタイル変数でaddStylePartOfType（0）を使用できます。
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; var layerStyle = layer.style(); layerStyle.addStylePartOfType(0); } } }
Finding the Layer Subclass Type
すべてのMSLayerでこれを行うことができます。しかし、たとえば、テキストフィールドから1行のテキストを読みたい場合はどうでしょうか。このオブジェクトがテキストフィールドであるかどうかを最初に知る必要があります。そうでない場合、コードはStringが存在しないというエラーをスローします。
すべてのサブクラスがドキュメントに記載されているわけではありませんが、クラス属性からレイヤークラスを把握できるため、これを簡単に処理できます。そして、タスクをさらに簡素化するために、このためのプラグインを作成しました！ここ
からShow Layer Type Pluginプラグインをダウンロードしてインストールします。次に、テスト用にこのSketchファイルをダウンロードして開きます。
スケッチファイルには、2つのライン、シンボル、2つのテキストボックス、長方形のレイヤーのいくつかの異なるタイプのアートボードが表示されます。
すべてのレイヤーを選択して、プラグインを実行します。レイヤータイプを表示します。コンソールに次の出力が表示されます。
8/28/16 9:07:18.993 AM Show Layer Type (Sketch Plugin)[46515]: Background is a: MSShapeGroup 8/28/16 9:07:18.997 AM Show Layer Type (Sketch Plugin)[46515]: Line is a: MSShapeGroup 8/28/16 9:07:18.999 AM Show Layer Type (Sketch Plugin)[46515]: Author is a: MSTextLayer 8/28/16 9:07:18.999 AM Show Layer Type (Sketch Plugin)[46515]: Icon is a: MSBitmapLayer 8/28/16 9:07:19.000 AM Show Layer Type (Sketch Plugin)[46515]: Oval is a: MSSymbolInstance 8/28/16 9:07:19.001 AM Show Layer Type (Sketch Plugin)[46515]: Title is a: MSTextLayer 8/28/16 9:07:19.002 AM Show Layer Type (Sketch Plugin)[46515]: Line is a: MSShapeGroup
[シンボル]ページに移動してシンボルを選択し、プラグインを再度実行すると、次のように表示されます。
8/28/16 9:10:08.600 AM Show Layer Type (Sketch Plugin)[46515]: Oval is a: MSSymbolMaster
アートボードを選択してプラグインを実行すると、出力は次のようになります。
8/28/16 9:10:48.226 AM Show Layer Type (Sketch Plugin)[46515]: Artboard 1 is a: MSArtboardGroup
アートボード上のすべてのレイヤーをグループ化してからプラグインを実行すると、次のように表示されます。
8/28/16 9:11:24.234 AM Show Layer Type (Sketch Plugin)[46515]: Group is a: MSLayerGroup
これがレイヤーのサブクラスのすべてのタイプです！おそらく他にもあるかもしれませんが、私が見つけたのはそれだけです（文書化されたものにリンクを添付しました）。
MSShapeGroup
MSBitmapLayer
MSTextLayer
MSSymbolInstance
MSSymbolMaster
MSArtboardGroup
MSLayerGroup
これで、if / elseステートメントを使用しているクラスに応じてコードを区別できます。
var onRun = function(context) { var doc = context.document; var selection = context.selection; if(selection.count() == 0){ doc.showMessage("Please select something."); }else{ for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; var layerClass = layer.class(); if(layerClass == "MSShapeGroup"){ //do something } else if (layerClass == "MSBitmapLayer"){ //do something } else if (layerClass == "MSTextLayer"){ //do something } else if (layerClass == "MSSymbolInstance"){ //do something } else if (layerClass == "MSSymbolMaster"){ //do something } else if (layerClass == "MSArtboardGroup"){ //do something } else if (layerClass == "MSLayerGroup"){ //do something } } } };
これらの各サブクラスには、非常に多くの属性とアクセス方法があります。これらについては他の投稿で説明します。レイヤーのサブクラスのドキュメントをチェックして、開始する準備をしてください！
結論
このパートでは、次の方法を学びました。
- レイヤー属性を表示する
- メソッドを使用してレイヤー属性を変更する
- アクセス属性の属性とメソッド
- レイヤークラスタイプを確認し、コードで区別する
パート6-データのエクスポート
スケッチを使用すると、レイヤーを右クリックしてsvgおよびcss出力コードに簡単にアクセスできます。これはWebデザイナーにとって非常に便利なオプションですが、アプリケーションやゲームの開発に携わる人にとっては、ほとんど使い道がありません。また、あるアプリケーションから別のアプリケーションに値をコピーして貼り付ける必要がありますが、これはエラーの大きなフィールドになります。
設計と開発の間には多くのサードパーティブリッジツール（Zeplin、Avocode、Sketch Measure、Sympliなど）がありますが、これらのツールは開発者向けのリファレンスガイドのみを提供します。設計アプリケーションと開発アプリケーションが直接連携して動作していると、はるかに便利です。想像してみてください。Sketchで何かをデザインし、「エクスポート」をクリックし、開発プロジェクトを読み、レイアウトを再作成します。これにより、ピクセルごとの仕様が不要になり、エンジニアがコードでデザインを再作成する時間さえ節約できます。
現在、設計者が利用できるツールのセットは、一般的なニーズに対するソリューションとして作成されており、特定のタスクに合わせて調整されていません。しかし、これはプラグインの開発の美しさです。ニーズに合わせてツールを作成することができ、その方法を知っていれば十分です。
私たちはすでに基盤を通過し、プログラミングを成功させるための基盤を手に入れました。これで、プラグイン開発の核心をより深く掘り下げ、実際のタスクに対する実際のソリューションを作成できます。
スケッチプラグインは、設計と開発を結び付けるツールです
設計と開発を組み合わせるには、これら2つの領域の間に共通の基盤を見つける必要があります。それらを接続するネイティブな方法はないので、私たちは両方に理解できる方法で何を使用できますか？答えはXMLまたはJSONです。プラグインの助けを借りて、Sketchは両方の形式でデータをエクスポートできます。ほとんどの場合、作業中の開発環境でそれらを読み取ることができます。では、XMLおよびJSONファイルで値を送信して自動的にインポートできる場合、手動で値をコピーする必要がある開発者ピクセル仕様を送信するのはなぜですか？
これは、Sketchで可能な最高のソリューションの1つです。このパートでは、レイヤー属性をXMLまたはJSONでエクスポートする方法の基本的な例を示します。前のパートと同様に、計画の概要を見てみましょう。プラグインは次の順序で機能します。
- レイヤーを選択
- ユーザーがフォルダーを選択し、この場所を変数に保存するためのモーダルウィンドウを作成します。
- 選択したフィールドから変数が作成され、基本情報（名前、X座標、Y座標、高さ、幅）が保存されます。
- これらの変数はすべて、XMLまたはJSONオブジェクトで保存します。
- 最後に、このオブジェクトを事前に選択したフォルダー内のXMLまたはJSONファイルに保存します。
XMLエクスポート
開始するには、プラグインを作成することから始めます。ExportLayerToXML.jsというメインスクリプトでExport Layer to XMLというプラグインを作成します。また、common.jsファイルを追加して、前のパートで作成されたカスタム通知ウィンドウを使用する必要があります。
レイヤーが選択されているかどうかを判断する方法はすでにわかっています。
@import 'common.js' var onRun = function(context) { var doc = context.document; var selection = context.selection; //make sure something is selected if(selection.count() == 0){ doc.showMessage("Please select a layer."); }else{ //do something } };
elseステートメントでは、ファイルを保存するフォルダーをユーザーが選択するパネルを作成します。
//allow xml to be written to the folder var fileTypes = [NSArray arrayWithObjects:@"xml", nil]; //create select folder window var panel = [NSOpenPanel openPanel]; [panel setCanChooseDirectories:true]; [panel setCanCreateDirectories:true]; [panel setAllowedFileTypes:fileTypes];
次に、ボタンが押されているかどうかを確認する変数を作成し、[OK]ボタンに接続して、選択したカテゴリをフォーマットし、将来使用するために変数に保存します。
//create variable to check if clicked var clicked = [panel runModal]; //check if clicked if (clicked == NSFileHandlingPanelOKButton) { var isDirectory = true; //get the folder path var firstURL = [[panel URLs] objectAtIndex:0]; //format it to a string var file_path = [NSString stringWithFormat:@"%@", firstURL]; //remove the file:// path from string if (0 === file_path.indexOf("file://")) { file_path = file_path.substring(7); } }
すべてが完了したら、選択したレイヤーを循環して、データをXMLファイルに書き込む関数を呼び出します。結果のコードは次のようになります。
@import 'common.js' var onRun = function(context) { var doc = context.document; var selection = context.selection; //make sure something is selected if(selection.count() == 0){ doc.showMessage("Please select a layer."); }else{ //allow xml to be written to the folder var fileTypes = [NSArray arrayWithObjects:@"xml", nil]; //create select folder window var panel = [NSOpenPanel openPanel]; [panel setCanChooseDirectories:true]; [panel setCanCreateDirectories:true]; [panel setAllowedFileTypes:fileTypes]; //create variable to check if clicked var clicked = [panel runModal]; //check if clicked if (clicked == NSFileHandlingPanelOKButton) { var isDirectory = true; //get the folder path var firstURL = [[panel URLs] objectAtIndex:0]; //format it to a string var file_path = [NSString stringWithFormat:@"%@", firstURL]; //remove the file:// path from string if (0 === file_path.indexOf("file://")) { file_path = file_path.substring(7); } } //loop through the selected layers and export the XML for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; exportXML(layer, file_path); } } };
次にexportXML関数に対して、選択したレイヤーとfile_pathの2つの値を渡します。
まず、XMLを構成します。
//initialize the root xml element var root = [NSXMLElement elementWithName:@"document"]; //initialize the xml object with the root element var xmlObj = [[NSXMLDocument document] initWithRootElement:root];
次に、転送されたレイヤーから必要な変数を抽出します。
//create the variables var layerName = layer.name(); var layerFrame = layer.absoluteRect(); var layerXpos = String(layerFrame.x()); var layerYpos = String(layerFrame.y()); var layerHeight = String(layerFrame.height()); var layerWidth = String(layerFrame.width());
これらの変数をXMLオブジェクトに保存します。
//create the first child element and add it to the root var layerElement = [NSXMLElement elementWithName:@"layer"]; [root addChild:layerElement]; //add elements based on variables to the first child var layerNameElement = [NSXMLElement elementWithName:@"name" stringValue:layerName]; [layerElement addChild:layerNameElement]; var layerXPosElement = [NSXMLElement elementWithName:@"xPos" stringValue:layerXpos]; [layerElement addChild:layerXPosElement]; var layerYPosElement = [NSXMLElement elementWithName:@"yPox" stringValue:layerYpos]; [layerElement addChild:layerYPosElement]; var layerHeightElement = [NSXMLElement elementWithName:@"height" stringValue:layerHeight]; [layerElement addChild:layerHeightElement]; var layerWidthElement = [NSXMLElement elementWithName:@"width" stringValue:layerWidth]; [layerElement addChild:layerWidthElement];
最後に、ファイルパスに沿ってXMLファイルを記述し、すべてが完了したらユーザーに通知します。
//create the xml file var xmlData = [xmlObj XMLDataWithOptions:NSXMLNodePrettyPrint]; //name the xml file the name of the layer and save it to the folder [xmlData writeToFile:file_path+layerName+".xml"]; var alertMessage = layerName+".xml saved to: " + file_path; alert("Layer XML Exported!", alertMessage);
スクリプト全体は次のようになります。
@import 'common.js' var onRun = function(context) { var doc = context.document; var selection = context.selection; //make sure something is selected if(selection.count() == 0){ doc.showMessage("Please select a layer."); }else{ //allow xml to be written to the folder var fileTypes = [NSArray arrayWithObjects:@"xml", nil]; //create select folder window var panel = [NSOpenPanel openPanel]; [panel setCanChooseDirectories:true]; [panel setCanCreateDirectories:true]; [panel setAllowedFileTypes:fileTypes]; //create variable to check if clicked var clicked = [panel runModal]; //check if clicked if (clicked == NSFileHandlingPanelOKButton) { var isDirectory = true; //get the folder path var firstURL = [[panel URLs] objectAtIndex:0]; //format it to a string var file_path = [NSString stringWithFormat:@"%@", firstURL]; //remove the file:// path from string if (0 === file_path.indexOf("file://")) { file_path = file_path.substring(7); } } //loop through the selected layers and export the XML for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; exportXML(layer, file_path); } } }; function exportXML(layer, file_path){ //initialize the root xml element var root = [NSXMLElement elementWithName:@"document"]; //initialize the xml object with the root element var xmlObj = [[NSXMLDocument document] initWithRootElement:root]; //create the variables var layerName = layer.name(); var layerFrame = layer.absoluteRect(); var layerXpos = String(layerFrame.x()); var layerYpos = String(layerFrame.y()); var layerHeight = String(layerFrame.height()); var layerWidth = String(layerFrame.width()); //create the first child element and add it to the root var layerElement = [NSXMLElement elementWithName:@"layer"]; [root addChild:layerElement]; //add elements based on variables to the first child var layerNameElement = [NSXMLElement elementWithName:@"name" stringValue:layerName]; [layerElement addChild:layerNameElement]; var layerXPosElement = [NSXMLElement elementWithName:@"xPos" stringValue:layerXpos]; [layerElement addChild:layerXPosElement]; var layerYPosElement = [NSXMLElement elementWithName:@"yPos" stringValue:layerYpos]; [layerElement addChild:layerYPosElement]; var layerHeightElement = [NSXMLElement elementWithName:@"height" stringValue:layerHeight]; [layerElement addChild:layerHeightElement]; var layerWidthElement = [NSXMLElement elementWithName:@"width" stringValue:layerWidth]; [layerElement addChild:layerWidthElement]; //create the xml file var xmlData = [xmlObj XMLDataWithOptions:NSXMLNodePrettyPrint]; //name the xml file the name of the layer and save it to the folder [xmlData writeToFile:file_path+layerName+".xml"]; var alertMessage = layerName+".xml saved to: " + file_path; alert("Layer XML Exported!", alertMessage); }
プラグインをダウンロードするか、GitHubで表示してテストします。アートボードに長方形を作成してXMLにエクスポートすると、次のようになります。
<document> <layer> <name>Rectangle</name> <xPos>550</xPos> <yPos>258</yPos> <height>234</height> <width>235</width> </layer> </document>
JSONエクスポート
JSONファイルの保存も、いくつかの点を除いてほぼ同様に実装されています。スクリプトの最初の部分を使用して、次のようなexportJSON関数を作成できます。
function exportJSON(layer, file_path){ //initialize the layer array var layerArray = []; //create the variables var layerName = String(layer.name()); var layerFrame = layer.absoluteRect(); var layerXpos = String(layerFrame.x()); var layerYpos = String(layerFrame.y()); var layerHeight = String(layerFrame.height()); var layerWidth = String(layerFrame.width()); // add the strings to the array layerArray.push({ name: layerName, xPos: layerXpos, yPos: layerYpos, height: layerHeight, width: layerWidth, }); // Create the JSON object from the layer array var jsonObj = { "layer": layerArray }; // Convert the object to a json string var file = NSString.stringWithString(JSON.stringify(jsonObj, null, "\t")); // Save the file [file writeToFile:file_path+layerName+".json" atomically:true encoding:NSUTF8StringEncoding error:null]; var alertMessage = layerName+".json saved to: " + file_path; alert("Layer JSON Exported!", alertMessage); }
スクリプト全体は次のようになります。
@import 'common.js' var onRun = function(context) { var doc = context.document; var selection = context.selection; //make sure something is selected if(selection.count() == 0){ doc.showMessage("Please select a layer."); }else{ //allow xml to be written to the folder var fileTypes = [NSArray arrayWithObjects:@"json", nil]; //create select folder window var panel = [NSOpenPanel openPanel]; [panel setCanChooseDirectories:true]; [panel setCanCreateDirectories:true]; [panel setAllowedFileTypes:fileTypes]; var clicked = [panel runModal]; //check if Ok has been clicked if (clicked == NSFileHandlingPanelOKButton) { var isDirectory = true; //get the folder path var firstURL = [[panel URLs] objectAtIndex:0]; //format it to a string var file_path = [NSString stringWithFormat:@"%@", firstURL]; //remove the file:// path from string if (0 === file_path.indexOf("file://")) { file_path = file_path.substring(7); } } //loop through the selected layers and export the XML for(var i = 0; i < selection.count(); i++){ var layer = selection[i]; exportJSON(layer, file_path); } } }; function exportJSON(layer, file_path){ //initialize the layer array var layerArray = []; //create the variables var layerName = String(layer.name()); var layerFrame = layer.absoluteRect(); var layerXpos = String(layerFrame.x()); var layerYpos = String(layerFrame.y()); var layerHeight = String(layerFrame.height()); var layerWidth = String(layerFrame.width()); // add the strings to the array layerArray.push({ name: layerName, xPos: layerXpos, yPos: layerYpos, height: layerHeight, width: layerWidth, }); // Create the JSON object from the layer array var jsonObj = { "layer": layerArray }; // Convert the object to a json string var file = NSString.stringWithString(JSON.stringify(jsonObj, null, "\t")); // Save the file [file writeToFile:file_path+layerName+".json" atomically:true encoding:NSUTF8StringEncoding error:null]; var alertMessage = layerName+".json saved to: " + file_path; alert("Layer JSON Exported!", alertMessage); }
ここからプラグインをダウンロードするか、GitHubで見ることができます。スクリプトをテストする場合、次の内容のJSONファイルを取得します。
{“layer”:[{“name”:”Rectangle”,”xPos”:”550",”yPos”:”258",”height”:”234",”width”:”235"}]}
おわりに
このパートの結果、次のことを学びました。
- ファイルを保存するためのモーダルウィンドウを作成する
- 変数を保存するXMLおよびJSONオブジェクトを作成する
- XMLファイルとJSONファイルを特定のフォルダーに保存します。
これは、Sketchからデータをエクスポートする方法のヒントにすぎません。最初にいくつかの属性を追加しましたが、目的に必要なものを選択できる膨大な量のデータがあります。
レッスンを読んでくれてありがとう、コメントであなたの成果を共有してください。独自のプラグインを作成して頑張ってください！
独自のプラグインを作成してください。この投稿の下で成果を共有してください。
見つかったすべてのエラー、翻訳の不正確さ、およびその他の類似のものについては、PMでお知らせください。