デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

【効率化】イラストレーター(Illustrator)操作をJavaScriptで自動化(複数の画像を配置しアートボードを自動作成スクリプトを作ってみました)

どうもこんにちは、InomaCreateです。
今年は、ブログやYoutube等、とにかくアウトプットを頑張っていこうと決意しているのですが、ブログ用の作図作業や動画の編集作業って結構泥臭い作業が多いですよね。
ということで、「なんとか作業を効率化したい!」と思い、色々調べると、イラストレーターは、JavaScriptで自動化できる情報を見つけましたので、やってみました。
今回は、選択したフォルダ内にある画像のアートボードを自動で作成するというスクリプトを作ってみましたので解説したいと思います。

スポンサーリンク

動画解説

YouTubeに解説動画もアップしていますので、よろしければどうぞ。

準備:VsCodeにExtendScript Debuggerをインストール

JavaScriptでイラストレーターをコントロールするため、VisualStudioCodeに「ExtendScript Debugger」というプラグインを入れます。
VsCodeで、スクリプトを格納するフォルダを開きます。
そして、拡張機能からExtendScript Debuggerをインストールしましょう。

インストールしたら、デバッグメニューに入り、launch.jsonファイルを作成します。をクリックします。

すると、以下のようなlaunch.jsonファイルが自動作成されます。

launch.jsonをスクリプトを格納するフォルダ内に保存します。

Vscodeの下のほうに、「ターゲットアプリケーションを選択」という表示がありますので、クリックします。

今回、イラストレーターと連携するので、Adobe Illustrator 2021を選択します。

正しく接続されると、表示が「Adobe Illustrator」に変わります。

さて、うまくスクリプトが動作するか確認してみましょう。
新規ファイルを作成し、以下のようにalert(“test”);と記載しましょう。

新規ファイルをtest.jsxという名前で保存します。

さて、作成したtest.jsxを実行してみます。
実行とデバッグを開き、上の▶マークをクリックします。実行するスクリプトを入力する画面になりますので、test.jsxを入力します。

イラストレーター側で、以下のようなアラート画面が表示されればOKです。

プラグインのインストール及び、設定方法は以下の記事を参考にさせていたきました。
(最新) Extendscript toolkitが見つからない場合の対処法 (Illustratorスクリプト,イラレ スクリプト)

1.今回自動化したいこと

今回やりたいことは、私がブログでチュートリアル的な記事を結構書くので、ニーズは限られるかもしれませんが、
フォルダ内の画像をすべて配置し、画像サイズのアートボードを自動作成するスクリプト
(※ただし、画像のMax横幅は、650pxまでにする。)
です。

なぜ、このようなスクリプトを作ったかというと、
チュートリアル記事の説明画像は、基本、PCのスクリーンショットをペタペタとイラレに配置し、補足の文章や枠、矢印などを追加して、画像を書き出すというフローになります。
その時、配置した画像それぞれに手動でアートボードを作っていくのが面倒なのです。。。
今回作ったスクリプトで少しでも効率化できたらよいなぁと思っています。

2.スクリプトの解説

簡単に今回作ったスクリプトの処理フローを説明します。

<処理フロー>
①ドキュメント新規作成

②画像が入っているフォルダを選択

③画像を配置

④画像サイズの調整(横幅が指定したMaxサイズに収まるように)

⑤アートボードのサイズを画像サイズに合わせる

⑥次の画像があれば、次のアートボードを作成 →③へ戻る(繰り返し)
画像なければ、終了。

実際に組んだスクリプトは、以下になります。

それでは、フロー毎に処理を解説します。

①ドキュメント新規作成

イラレで新規ドキュメントを作成するには、app.documents.add()を実行します。(13行目)
そして、作成したドキュメントオブジェクトをdocの中に格納します。
add()の引数は、カラーをRGBモード、アートボードの縦、横幅を指定しています。

なお、12行目の座標系をアートボード基準にしている理由は、後ほど画像をアートボード上の座標系で指定するためです。

②画像が入っているフォルダを選択

16行目のFolder.selectDialogで選択したフォルダオブジェクトを取得します。
19行目、20行目で、フォルダ内のpng,jpgファイルのパスを取得しリストに入れます。
そして、リストを結合し、リスト数を取得します(22-24行目)

③画像を配置

placedItems.add() でリンク画像用のオブジェクトを新規で作成します。(31行目)
その後、obj.fileに配置したいファイルオブジェクトを指定、obj.positionでアートボードの原点を指定することで、画像を配置します。

④画像サイズの調整(横幅が指定したMaxサイズに収まるように)

私は、ブログのレイアウト的に横幅は650pxで収めたいので、画像横幅が650より大きい場合は、650に収めるように処理しています。
(縦横比を変えないように、比率で計算しています)(36行〜43行目)

⑤アートボードのサイズを画像サイズに合わせる

アートボードのサイズを画像のサイズに合わせます。
artboardsでアートボードのオブジェクトを取得し、artboardRectで、アートボードの矩形座標を指定します。
配列の要素で左,上,右,下の順番で指定します。

⑥次の画像があれば、次のアートボードを作成 

for文で画像数分繰り返しますので、最後の画像の場合は、ここで処理終了です。
まだ画像がある場合は、artboards.add(rect) (53行目)で次のアートボードを追加し、③へ戻り、繰り返します。

3.作ったスクリプトをイラストレーター内に組み込んでみる

さて、作ったスクリプトをイラストレーター内に組み込むには、以下のフォルダ内にスクリプトを格納し、イラストレーターを再起動します。
/Applications/Adobe Illustrator 2021/Presets.localized/ja_JP/スクリプト

イラストレーターのファイル→スクリプトに、作成したスクリプトが表示されればOKです。選択して実行してみましょう。

最後に

以上、イラストレーター操作をJavascriptで自動化する方法、今回私が作ったスクリプトの解説でした。
まだまだ知らないことがたくさんありますので、いろんなスクリプトを作って、どんどん効率化をしていこうと思います!
またスクリプト作ったら、解説記事をアップしていきます!
それでは、最後までお読みいただきありがとうございます。

※今回作成したスクリプトは以下からダウンロードできます。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン