technologiesこの広告は、90日以上更新していないブログに表示しています。ExtendScriptAdobeの製品は自分で書いたプログラムを動かすことができ、バッチのように自動で大量のタスクをこなしたりすることができます。このような機能は「スクリプト」と「プラグイン」と呼ばれ、それぞれの役割は似ていても作り方や使い方が違ってきます。今回は「スクリプト」について書いていこうと思います。私も幾つかスクリプトを作ってみました。hats作ってみて分かったことですが、想像していたよりも敷居が低いなぁと思いました。Javascriptなど言語をある程度知っているという条件がありますが。やってみると意外と簡単ですよということを知ってもらうために、事始めの記事を書いてみたいと思います。この記事では単に使い方を紹介するだけでなく、サンプルを通して座標と縦横サイズを書き出すすごく単純なツールを作ってみようと思います。目的も分からず勉強するより、何かしら役立つものを作ったほうが楽しいですからね。私はWIndowsでもMacでも使えるように言語はJavascriptを使用しています。Toolkit(略:ESTK)」を使って作成します。Adobe製品を持っている大抵の人はそうだと思いますが、実はこのアプリはご自身のPCに既にインストールされていたりします。こんなアイコンのアプリです。CloudESTKとillustratorを起動すれば準備OKです。2.Toolkitの簡単な使い方ESTKはコンパクトな開発環境のようなUIをしています。左側のテキストエリアにプログラムを書き、▲ボタンで実行します。右側のコンソールエリアにはプログラムの状態を表示したりすることができます。下記のコードを入力し保存してください。ファイル名は何でもよいです。Error('ドキュメントが開かれていません。}})()いわゆる「おまじない」というものです。自分のプログラムはコメントアウトしている//ここから〜//...//ここまで...の場所に書きます。それ以外の場所に書くとエラーがおきてしまったりするのでご注意下さい。4.コンソールとアラートに何か表示してみる。メインコードの箇所に下記を入力し、実行してください。$.writeln("コンソールに表示します");alert("アラートダイアログを表示します");すると下図のアラートが出て、ESTKのコンソールに下記のように表示されます。alertはJavascriptの使い方と同じですね。コンソールの方に表示するには$.writeln()というコマンドを使用します。5.現在選択しているものを検知する。メインコードの下記のものに書き換えて保存してください。alert(app.selection.length);次にillustratorで長方形ツールで複数図形を作り、選択した状態でESTKに戻り実行してください。すると「1」や「3」などと選択している図形の数が表示されます。app.selectionではillustratorで選択しているオブジェクトにアクセスすることができます。メインコードの下記のものに書き換えて保存してください。図形を選択したまま実行してください。")");下図のようにコンソールに図形の左上と右下の座標が表示されます。app.selection[0];は現在選択されているものの1番目を指します。オブジェクトにはgeometricBoundsというプロパティがあり、左上のX、左上のY、右下のX、右下のYの順の配列で座標が格納されています。ここで「あれれ?」と思ったかもしれませんが、Y座標がマイナス値になっています。illustratorは表面的には下方向にプラスの座標系を採用していますが、スクリプトでは下方向にマイナスになっています。7.座標をドキュメントに書いてみる。コンソールに表示するだけでは直感的でないので、直接ドキュメントに座標を表示してみたいと思います。y2];すると図形の近傍に直接座標が表示されるようになりました。「app.activeDocument.activeLayer.textFrames.add();」ですが「illustratorアプリの現在アクティブなドキュメントの現在アクティブなレイヤーのテキスト類に新しいテキストを追加しますよー」という命令になります。ExtendScriptのjavascriptでは新しい要素は.add();の命令で追加していく様式になります。.contentsでは表示したい文字列を格納します。.positionでは表示する座標を配列で指定してあげます。すると先ほどの図のように座標が直接ドキュメント上に表示されるようになります。8.illustratorのオブジェクトツリーの構造を理解する。先ほどの手順で一気に「わからねー!!!」となった方もいると思うので、ここでillustratorのDOMについて補足しておきます。applicationを最上位階層とし、その傘下にドキュメントやレイヤーなどがぶら下がった階層構造をしています。公式リファレンスには下図が載っています。http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/pdf/illustrator/scripting/cs6/Illustrator-Scripting-Guide.pdfでも、これだけ見ると「なんじゃこりゃ」って事になりそうなので、あくまでイメージですがDOM構造が分かりやすい図を作ってみました。最上位にapplication(変数はapp)がある。appは複数のドキュメント(documents)を持っている。それぞれのドキュメントは複数のレイヤー(layers)を持っている。RasterItemsなど)をもっている。ドキュメントに表示されている要素はPageItemsで全てひとまとめにしてアクセスできる。app.documents[2].layers[3].pageItems[1];であれば、「3番目のドキュメントの4番目のレイヤーの2番目の何かしら表示されている要素」を指す事になります。普段illustratorを使っている人であればイメージがつきやすいと思います。9.関数を作る座標を表示する部分を関数にして分けたいと思います。メインコードとは別のところに書くので、一旦プログラムの全容を掲載します。Error('ドキュメントが開かれていません。}})()座標を書くだけではなく、文字色を赤にするコードも追加しました。基本的には色を示す属性に値を反映するだけなのですが、RGBColorという要素を作って引き渡す必要があります。この関数に渡す引数のY座標のものはあらかじめ符号を反転しています。関数内のプログラムを書くときに、Y座標がマイナスのままだと計算式を考えるのが大変になるので。表示される数値もプラスの値が出るようになりました。描画するときには更に反転しマイナス座標に合わせるようにします。10.幅を示す線を引く次にオブジェクトの幅を描画してみたいと思います。下図の関数を追加し、メインコードをちょこっといじってください。//....アクティブなレイヤーにpathItemを追加し、コの字型になるよう座標を配列で指定してあげます。スタイルは線太さ1px、色が赤、塗り無しになるよう属性を指定します。11.幅の数値も表示する。幅の数値を表示するだけならテキストを追加するだけで良いのですが、要素がバラバラになってしまうとあとでillustrator上で編集したいときに面倒くさいことになります。そこで先ほど描いた線とあらかじめグループになるようにテキストを追加してみたいと思います。サイズを描く部分のコードを下記に書き換えてください。}先ほどと違うのは、あらかじめGropuItemを作成し、それにパスやテキストを追加しているところです。このようにすると要素をグループとしてまとめることが出来ます。線のそばに数値が表示されるようになりました。12.仕上げここまできたらほぼ完成です。仕上げとして縦方向の座標を表示し、座標の数値の位置をオブジェクトに被らないようにずらしてあげます。メインコードを変更し、複数選択したもの全てに対して書出しを行うように書き換えてあげます。"オブジェクトを選んでから実行してください。//...複数要素を選択してから実行してあげると下図のように表示されます。見栄えの問題はありますが座標と縦横サイズを書き出すスクリプトができあがりました。こんな感じでillustratorのスクリプトを作成していくことが出来ます。作成したプログラムの完成形は下記からダウンロードしてください。illustratorスクリプトことはじめ.jsxドキュメント公式ドキュメントは下記にあります。お使いのバージョンのものを参照下さい。Connectionただ、英語はなぁ・・・という方は、古旗さんの書籍を参考にすると良いと思います。新しい本が発売されていたので追記します。JavaScriptシリーズ(NextPublishing))プラグインについてつい先日知ったのですが、今年の6月に発表があったようですがプラグインもHTML5の技術で作成出来るようになったそうです。対応しているバージョンはCCからのようです。ConnectionAdobeエバンジェリストのAndyさんが日本語で記事を書いていますのでそちらも参考にしてください。hallスクリプトだと毎度毎度「ファイル>スクリプト>該当のスクリプト」と選ばなければなりませんでしたが、プラグイン形式にできるとillustratorのパネルとして常駐させておくことができます。そのパネル自体もHTMLで作成できるようになるので、Javascriptを勉強していたひとにとっては朗報ですね。私はCS6の環境なので、そのうちCCにアップグレードしたら挑戦してみようかと思います。この記事を読んで、スクリプト&プラグイン作ってみようかな〜と思っていただけたら幸いです!2015/8/18スクリプトだけで常駐パネルを作る方法をブログに書きました。extension化は結構面倒なので、個人で使う分にはこちらの方法で十分だと思います。03:52illustratorでUIデザイン:スクリプトことはじめTweet広告を非表示にする関連記事2015-07-27素早く画像書き出しできるillustrator向けスクリプトイラレから素早く画像を書き出すことができるスクリプトです。»プロフィールid:two-hatsUIデザイン関連のネタや、個人的なインテリアの趣味など思いついたものを投稿するごった煮なブログです。(2)月別アーカイブはてなブログをはじめよう!two-hatsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。