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

【効率化】イラストレーター(Illustrator)操作をJavaScriptで自動化(テキストファイルから文字画像を作成するスクリプトを作ってみました)


どうもこんにちは、InomaCreateです。
今回のイラストレーター自動化は、テキストファイルからテロップ用の文字画像を作成するスクリプトを作ってみましたので紹介します。

ちなみに、JavaScriptでのスクリプトを作成するには、VisualStudioCodeとプラグインのExtendScriptが必要です。
前回記事で、そのあたり説明しているので、設定されていない方は以下記事参考にしてください。
【効率化】イラストレーター(Illustrator)操作をJavaScriptで自動化(複数の画像を配置しアートボードを自動作成スクリプトを作ってみました)
スポンサーリンク

今回作成したスクリプト

今回作ったスクリプトは、テキストファイルに記載されている文章を1行ずつ読み出し、
指定したフォント、カラーで文字画像を作るというスクリプトです。
なぜ、このようなスクリプトを作ったかというと、動画編集のとき、PremiereProで補足のテロップを入れていくのですが、直接PremierePro上からテキストを入れて、文字を入力していくのが面倒で、また文字入力のレスポンスも悪いので非効率だと思っていたからです。
なお、PremierePro上で、喋っている言葉を自動でテロップにしてくれる機能もあるようなのですが、私の場合、喋っている言葉そのままではなく、言葉だけでは通じないような補足の文言を入れたいので、使っていません。

では、次から実際にスクリプトについて解説していきます。

スクリプトの解説

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

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

②テキストファイルを読み込み1行ずつ配列に格納

③配列数分ループ

⑤配列に入っている文字をテキストフレームに設定

⑥アートボードサイズをテキストフレームに合わせて調整

⑦次の文字列があれば、次のアートボードを作成→⑤に戻る(繰り返し)
なければ終了

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

では、コードを解説します。

テキストファイルを読み込み1行ずつ配列に格納

File.openDialogで、選択したテキストファイルのオブジェクトを取得します。(27行目)
※openDialogの第1引数は、ダイアログに表示する内容、第2引数は選択するファイル形式、第3引数は複数選択を可能にするかどうかで今回はfalseにします。

その後、fileObj.open(“r”)とすることで、テキストファイルを読み込みます。openに成功したら、trueが返ってきますので、その場合、fileObj.readln()メソッドをコールすることで、1行ずつ読み込んで結果をlineStr配列に格納していきます。(29行目〜34行目)

配列に入っている文字をテキストフレームに設定

activeDocument.textFrames.add() (38行目)で新規でテキストフレームを追加し、オブジェクトをtextFrameObjへ格納します。
そして、textFrameObj.contentsに配列に入っている文字列をテキストフレームに設定します。
そして、テキストフレームの位置、文字色、フォントなどを設定します。(38行目〜43行目)

アートボードサイズをテキストフレームに合わせて調整

アートボードをテキストフレームに合わせてサイズを変更します。
アートボードのサイズは、artboardRectに左、上、右、下座標を設定して変更します。
以下図のように、テキストフレームをアートボードの原点に配置した場合、縦座標がテキストフレームの真ん中あたりに配置されます。したがって、テキストフレーム高さから2で割った値に、余白分(text_padding)を加えた値を上座標にしています。
あとは、全体的に余白分を加算してテキストフレームに合わせこみます。(47行目)

これでアートボードのサイズが調整できましたので、あとは次の文字列がある場合は、アートボードを新規で作成(51〜52行目)して、テキストフレームの追加処理を繰り返します。

動かしてみる

試しに以下のようなテキストファイルを準備し、スクリプトを実行してみます。

スクリプトを実行してみます。
スクリプトが実行されたら、以下のアラート画面が表示されます。

事前に準備したテキストファイルを選択します。

スクリプトが終わると、以下のようにテキストファイルの1行毎の文言のテキストフレームが作成されます。

個人的には、これに、ドロップシャドウやアピアランスを適用して、動画のテロップ画像として使おうと思います。
多分、直接PremierePro上で文字を書いていくよりも効率化できそうです。

最後に

今回は、読み込んだテキストファイルからテキストフレームを自動作成するスクリプトを組んでみました。
作成したスクリプトは以下からダウンロードできます。

ファイルから読み込み色々作図できるようになると、もっと色々な応用ができそうです。
また何か作ったら配信していきます。

それでは!!

スポンサーリンク

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

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

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

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

無料WordPressテーマ

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

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

ブログ用無料WordPressテーマ

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

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

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン