Scissor

自動化

Scissor には、繰り返しの作業を代わりに行う 3 つの機能があります。一連のコマンドを記録して再生するアクション、データの表からテキストと表示状態を差し替えて 1 つのデザインから多数のバリエーションを作る変数、そして JavaScript からエディター全体を操作するスクリプトです。どれもアカウントやサーバーは不要で、Scissor の他の機能と同じく、あなた自身のコンピューター上で動作します。

アクション:一度記録して、どこでも再生

アクションパネル(ウィンドウ › アクション)は、操作を記録し、新しい選択範囲に対して再生します。記録を押し、記録したいコマンド(整列、オフセット、シャドウの追加など、どんな手順でもかまいません)を実行してから停止を押し、アクションに名前を付けます。アクションはリストに追加され、含まれるステップ数が表示されます。

アクションをクリックすると、現在選択しているものに対して再生されます。⌥ を押しながらクリックすると削除されます。アクションは単なるコマンドのリストなので、毎回クリックして操作しなくても、多数のオブジェクトに同じ手順を正確に繰り返せます。

変数:1 つのデザインから多数のバージョンを

変数パネル(ウィンドウ › 変数)は、固定されたデザインをデータで動くテンプレートに変えます。オブジェクトの次の 2 つの要素を動的にできます。

テキストを動的に設定
テキストオブジェクトの文字を変数に結び付けます。データセットごとに、同じ場所に異なるテキストを入れられます。
表示を動的に設定
オブジェクトを表示するかどうかを結び付けます。データセットごとに、デザインの一部をオンまたはオフにできます。

バインドを解除すると、結び付けたオブジェクトが再び固定されます。

データセット

データセットは、変数に対する 1 行分の値です。バッジ 1 枚、カード 1 枚、フレーム 1 つに相当します。キャプチャは現在の値を新しいデータセットとして保存します。矢印でデータセットを順に切り替えると、それに合わせてデザインが更新されます。CSV を読み込み…は、変数ごとに 1 列、データセットごとに 1 行の形式で、まとめて一度に読み込みます。CSV を書き出しは、データセットを書き出してスプレッドシートで編集できるようにします。

すべてのデータセットを一度に書き出す

データセットを書き出し…は、アクティブなアートボードをデータセットごとに 1 回ずつレンダリングし、PNG、JPEG、WebP、SVG のいずれかの形式で一度にすべて書き出します。名札のシート、各言語向けのバナー一式、SNS 用カードのシリーズなどが、それぞれのデータが入った整ったファイル一式として出力されます。

スクリプト:JavaScript で Scissor を操作する

メニューで表現できないことも、スクリプトなら実現できます。ファイル › スクリプト › スクリプトコンソール…を選ぶとエディターが開き、JavaScript を書いて開いているドキュメントに対して実行できます。その他のスクリプト…(⌘F12)は、ディスク上の .js ファイルを実行します。スクリプトはページから切り離された Web Worker の中で動作するため、渡された scissor オブジェクトを通さなければ、インターフェイスにもファイルにも触れられません。すべての呼び出しはエンジン上で実行され、その結果が返されます。

scissor オブジェクトは、よく使う操作をひととおり備えています。

シェイプとテキストを作る
scissor.rect、roundedRect、ellipse、polygon、star、path、text でアートワークを描きます。どれも位置とサイズ、そして fill、stroke、strokeWidth を指定するオプションオブジェクトを受け取ります(カラーには任意の CSS カラーを使えます)。
ドキュメントを読む
await scissor.document() は、アプリ、選択範囲、レイヤー、アートボードをパネルと同じ形で返します。scissor.selection() は選択しているものだけを返します。
ドキュメントを操作する
scissor.select、group、undo、そしてあらゆるエンジンコマンドを実行する scissor.run(command) があります。メニューが送るのと同じコマンドです。
結果を伝える
scissor.log はコンソールに出力し、scissor.alert はメッセージを表示します。

短い例として、色の付いた点の輪とキャプションを描くスクリプトを示します。

const doc = await scissor.document();
scissor.log('Boards:', doc.artboards.length);
for (let i = 0; i < 12; i++) {
  const a = (i / 12) * Math.PI * 2;
  await scissor.ellipse(300 + Math.cos(a) * 120, 260 + Math.sin(a) * 120, 36, 36,
    { fill: `hsl(${i * 30} 80% 60%)` });
}
await scissor.text(230, 270, 'Hello, Scissor', { size: 24 });

スクリプトコンソールは最後に実行したコードを保持するので、次に開いたときも動作するスクリプトがそのまま残っています。