読者です 読者をやめる 読者になる 読者になる

kick the base

好きな映画、音楽、マンガ、プログラム、デザイン、3DCG、ゲームのこと。

Illustrator/JSX: 線幅を太く・細くするスクリプトをショートカットで呼び出す

今回はIllustratorで選択したオブジェクトの線幅を2倍または半分にするスクリプトを作成します。

また以前ご紹介したSPAiを用いてそれらをショートカットキーにアサインし、キーボードで操作できるようにしましょう。

執筆時の環境

  • Adobe Illustrator CC 20.1.0 (現時点の最新バージョン)
  • OSX 10.9.5

コード解説

まずは線幅を2倍にするstrokeWidthTwice.jsxについて解説します。

最終的なコード

たった10行のコードです。例のごとく書いた順番で全行解説行ってみましょう!

ドキュメントが開かれているかの判定

if (app.documents.length > 0) { ... }

app.documents.length開いているドキュメントの数を表します。

つまり上記コードのifブロックドキュメントが最低ひとつ以上開かれているときに実行されるということになります。

ドキュメントが開いていなかった場合の安全装置ですね。

変数をまとめて宣言 (単一varパターン)

var selected = app.activeDocument.selection,
    i,
    magnification = 2;

JSXを書くときには僕はあまりやらないのですが、今回は一般的なJS開発で多用されるパターンを使用しています。

コードブロックの先頭でまとめて宣言をすることを俗に単一varパターンと呼びますが、それによってどんないいことがあるのかというお話をすると少々長くなるので今回は割愛します。*1

本コードで重要なのは下記ふたつの変数宣言です。

  • selected : 選択したオブジェクトを配列として保持します
  • magnification : 倍率です。現在ここが2になっていますが、これを0.5とするだけで線幅を半分にするstrokeWidthHerf.jsxを作ることができます

選択したオブジェクトすべてに対して線幅を変更する

forループで選択したオブジェクトのメンバをすべて取り出し、magnification倍しています。

上述したとおり、magnification0.5なら線幅は半分になりますし、10ならば10倍になります。

for (i = 0; i < selected.length; i++) {
    selected[i].strokeWidth *= magnification;
}

即時関数で包んでおしまい

(function() { ... })();で処理をくるむことでグローバルスコープへの名前空間汚染がなくせます。

線幅を半分にするstrokeWidthHerf.jsxをつくる

magnification = 0.5;の部分だけ変更しています。

(function () {
    if (app.documents.length > 0) {
        var selected = app.activeDocument.selection,
            i,
            magnification = 0.5;
        for (i = 0; i < selected.length; i++) {
            selected[i].strokeWidth *= magnification;
        }
    }
})();

SPAiを利用してショートカットでスクリプトを起動できるようにする

もちろんショートカットを設定しなくても、SPAiをクリックすることでランチャーとしても使用できます。そのような使用法でも大いに便利です。

作成したスクリプトをIllustratorのスクリプトフォルダに保管

Illustrator > Presets > ja_JP > スクリプトに保存しておくとよいでしょう。

ショートカットへの登録

IllustratorとSPAiを起動し、SPAiのオプションから環境設定をクリックします。

f:id:kickbase:20161121214839j:plain

各スクリプトフォルダの中を表示するにチェックが入っていれば、先程スクリプトフォルダに保存したふたつのファイルが確認できるでしょう。

f:id:kickbase:20161121214838j:plain

あとはショートカットを設定していきます。これは動画を用意したのでご覧いただくと分かりやすいでしょう。

f:id:kickbase:20161121214840g:plain

実際に使ってみる

先程設定したcmd+.`cmd+,を使用して線幅を変更するデモを用意しました。*2

f:id:kickbase:20161121214841g:plain

まとめ

いかがでしょうか。思いついたらすぐ書いてテストできるのがスクリプト言語の良いところです。

SPAiはJSXの開発中にも大いに威力を発揮するので、ぜひ導入しみてください。

*1:あとで記事にするかもしれません

*2:キー表示がうまく録画できませんでしたがキーボードで操作しています