自動化
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 });
スクリプトコンソールは最後に実行したコードを保持するので、次に開いたときも動作するスクリプトがそのまま残っています。