追記160630)まぐまぐに申請済みです。8月スタート!初月無料です。ご登録はこちらからどうぞ。

■動く部品を組み合わせて自分だけのスクリプト作りましょうっ!   

おつかれさまです。@gorolibです。

さまざまなイラストレーター用スクリプトを公開していますが、

自分でスクリプト作ってみたい!

という声を少なからず聞きます。

そこで少しでもお役に立てればと「ちょい足しスクリプトマガジン(Illustrator)」なるものをはじめます!


■サクッと習熟、自由自在に!


念のため、スクリプトというのはJavaScriptです。プログラムです。ただ私たちの本業はデザイン、DTPですから、システム屋さんを目指すわけではありません。

ありませんが、もしカンタンに習得できるならばしておきたいスキルではあるのです。

なぜなら、イラストレーターというアプリケーションでは「あと一歩の操作性」が多く、また繰り返し作業も人それぞれなため、自分用のスクリプトを作ることができれば、制作において「ものすごく」役立つからです。


■2回目以降は有料の予定です^ ^


ちょい足しスクリプトマガジンは、週2回の発行予定です。本業の合間に無理なく習熟できるペースとボリュームを考えております。

まぐまぐさんの有料メルマガにする予定ですが、予定は未定なので(笑)。登録や庶務を含め、2回目の発行まではしばしお待ちくださいませ。

まぐまぐさんですから、おそらく初月無料となります。月額は500円、バックナンバー購入可にしたいと思っています。



■コンセプトはレゴブロック


プログラミングの知識がなくてもサクッと習熟し、自由自在にスクリプトが組めることを目指します。

本業の合間に無理なく習熟できることを目指しているため「システムやプログラミングにおける枝葉のこと」にこだわるつもりはまったくありません。

きちんと動く部品を組み合わせて、それがきちんと動き、自分だけのスクリプトができればいいのです。

きちんと動く部品を毎号提供していこうというのがこのプロジェクトのコンセプトです。

「レゴブロック」のようなものだと考えていただければ幸いです。


■第1回「選択したオブジェクトを自分の幅だけ移動する」


さて早速の第1回ですが「選択したオブジェクトを自分の幅だけ移動する」です。

ダウンロードにてお願いいたします。
(クリックで動きます)
タイトルなし


■今回のお題スクリプト
━━━━━
DOC = activeDocument
SEL = DOC.selection

for (s=0; s<SEL.length; s++){
SEL[s].translate(SEL[s].width,0)
}
━━━━━

カンタン!たった5行ですが、初回なので説明は長いです(笑)
早速動かしてみてください。こうなります。
(クリックで動きます)
タイトルなし


■スクリプトの説明

まずイコール(=)は代入です。「等しい」という概念からは離れてくださいね。
右辺を左辺に代入します(おお、中2の数学だ!)

まず1行目。何をやっているかというと、
activeDocumentというのは、現在使用している(アクティブになっている)ドキュメントを指しています。
その後のスクリプトで“activeDocument”といちいち書くのは面倒だし間違いの元なので、DOCに代入して省略系で扱うことにしました。そういう場合にこう書きます。

以降は“DOC”と書くだけで“activeDocument”を指すことができます。

次に2行目。“selection”は「選択されているオブジェクト」のことです。
これもDOCと同じで、selectionをSELに代入しています。

“DOC.selection”で、現在使用しているドキュメントで選択されているオブジェクトを指します。
だから正式に書けばactiveDocument.selectionなのですが、長い!そのための代入です。

SELとかDOCは変数の名前です。まぁ数学でいえばXやYですね。
 
ちなみにSELとかDOCという変数名は私が勝手につけたものです。人によってつけ方が違うでしょう。

私みたいに大文字3文字でつける人は少数派のようですが、すでにシステムで決められている名前(activeDocumentとかselection)には小文字が多いので、私は大文字3文字を変数名にすることが多いです。あとでわかりやすいので。


■選択されているオブジェクトを処理する


さて3行目から。

SEL(選択されているオブジェクト)のすべてを、自分の幅の分だけ横に移動せよと書いてあります。

SELというのは変数ですが、中身は配列になっています。これはDOC.selectionが配列になっているからです。
 
選択しているオブジェクトというのは、ひとつのこともあるし、複数のこともありますからね。
サンプルでは3つです。

ここで“for”というのはループ文です。ぐるぐる回すという意味。
 
SELは配列であり、複数のオブジェクトが入っていますから、それを全部参照するための命令です。

sは添字。SELの何番目を処理するかを指定します。

SEL[0]…SELの1個目の配列
SEL[1]…SELの2個目の配列
SEL[2]…SELの3個目の配列

順番に参照するには、添字に具体的な数字を入れるとわかりやすいですが、100個もあると面倒ですよね?なので添字もsという変数で処理します。

さて、3行目の
s=0; s<SEL.length; s++
について。

添字ゼロをスタートとして、SELの個数分、ひとつづつ処理する

ことを意味しています。forループの構文は

for (s=0; s<SEL.length; s++){
(処理の中身)
}

となっていて、“{”から“}”までがぐるぐる回ります。forのあとの()内がぐるぐる回す条件です。この条件から外れたらループは終わります。

SEL.lengthとは文字どおり訳せばSELの長さですが、実際はSELに含まれる配列の個数を表します。

サンプルでは3ですね。SEL.lengthは3です。

s++は、sにプラス1づつしながらひとつづつ処理することを意味します。なので、

添字ゼロをスタートとして、SELの個数に達する直前まで、添字にプラス1づつして処理する

ということになるのです。


■添字はゼロスタート!これが最初の難関


さてプログラムの勉強で最初の難関はこれ。

添字はゼロスタートだが、配列の個数はゼロを含まないということ。

ぱ、ぱーどぅん?

サンプルだと配列の個数は3ですから、3回ループしたら終わりなのですが、添字で考えると、

SEL[0]…SELの1個目の配列
SEL[1]…SELの2個目の配列
SEL[2]…SELの3個目の配列

となっています。3個なのにゼロスタートだから、添字は2で終わる。

添字の仕組みを最初に考えた人は

熱湯風呂行き〜(IKKO風)

ひどいでしょう?なんで1スタートにしなかったのか!

そう、IT関係の人は当たり前すぎて誰も疑問に思っていませんが、さいしょの人はココが通過できない!

…でもそういうものなので、苦言を呈しても疲れるだけであり、サクッと通過しちゃいましょう(笑)
 

まとめると、

(s=0; s<SEL.length; s++)

これはforループの条件ですが、添字がSEL.length未満の間は、添字を1づつプラスしながらやってくれ!

の意味です。

SEL[0]…SELの1個目の配列
SEL[1]…SELの2個目の配列
SEL[2]…SELの3個目の配列

つまり添字が3になったら、s<SEL.lengthの条件式から外れてしますので、このループは終わります。


■そして移動する

最後に移動の説明です。translateという命令になります。

A.translate( x , y )

これはAというオブジェクトをX軸にxだけ、Y軸にyだけ移動せよということになります。

SEL[s].translate(SEL[s].width,0)

の説明ですが、

SEL[s]…s番目のSELを、
translate…移動せよ
 x軸にs番目のSELの横幅だけ、
 y軸はゼロで。

ということになります。

オブジェクトの位置、座標、高さ、幅はいずれご説明いたしますが、今回は幅が登場しました。

A.widthで、Aというオブジェクトの幅となります。

SEL[s].widthで、SELのs番目の配列のオブジェクトの横幅

を指すわけです。


ちなみに、A.translate( x , y )のxおよびyの単位はポイントです。イラストレーターは中ではぜーんぶポイントで管理しています。

じゃあミリとか歯はどうすんだよ!については、次回以降… 

━━━━━
ご清聴ありがとうございました。2回目にお会いしましょう!

ではでは出羽の海。