開発者向け

【解決】モジュール化したExtendScriptを自動で1つにまとめたい!(2)

モジュール化したExtendScriptを自動で1つにまとめたい!(2) アイキャッチ図版

前回の記事【解決】モジュール化したExtendScriptを自動で1つにまとめたい!(1)にて、複数ファイルに分割したJavaScriptから1つのExtendScript(.jsx)ファイルを生成できるようになりました。もしまだ手順がよくわかっていない場合は、該当記事のどうやって生成するの?の部分を改めてご参照ください。

第2回のこの記事では、package.jsonやrollup.config.jsの設定内容を中心にお送りします。何が何を制御しているかを理解し、自分でも改造できるようにしましょう。

続きを読む

【解決】モジュール化したExtendScriptを自動で1つにまとめたい!(1)

モジュール化したExtendScriptを自動で1つにまとめたい!(1) アイキャッチ図版

IllustratorやInDesignなど用にExtendScriptを書いていると、だんだんコード量が肥大化してくることがあります。

そんなときはキリのいい区切りでファイルを分割し、//@includeや//@includepathで読み込むと開発・管理がしやすくなります。1ファイルあたりの情報量(行数)が減って、内容を把握するのが楽になるのです。

最終的にVisual Studio Codeの機能拡張 ExtendScript Debugger か ExtendScript Toolkit でバイナリとして書き出すと、外部ファイルから読み込んだコードも含めて1つのファイルにまとめられます。

Visual Studio Codeの機能拡張ExtendScript Debugger 画面

しかしバイナリとして書き出しは、自ら能動的に操作して毎回実行する必要があります。修正するたびに同じ操作をするのはなかなか負担が大きいのです。

WebpackやViteなどモジュールバンドラーを利用したフロントエンドの開発では、ファイルを保存したタイミングでまとめ処理を自動的に実行できます。ExtendScriptでもそうできたら嬉しいですね。

そこで今回は、RollupとBabelを使い、モジュールごとに別ファイルに切り分けたExtendScriptを自動で1つにまとめる方法 を紹介します。これをすると、テンプレートリテラルやArray.filterなどES5やES2015(ES6)以降に追加された機能を利用してコードを書けるようになります。こちらがメインでも良いくらいですね。

TypeScriptの導入は行わないので、Adobeアプリ用スクリプトにTypeScriptは大げさなんだよなー、というかたに特におすすめです。

初回のこの記事では、前提知識や技術選定理由を中心にお送りします。

続きを読む

【遊び】クラウド保存したIllustratorスクリプトを実行したい!

executeCloudScript.jsx アイキャッチ図版

複数のmacやWindowsマシンを持っている場合、それぞれの環境に同じスクリプトを用意しておくのはなかなか難しいことです。一応、Keyboard Maestroマクロをクラウド共有したり、Dropboxにスクリプトファイルを配置して同期したりすることで実現できます。

しかし実際そこまでするかたは少ないでしょう。どれも同じAdobeアカウントでログインしているのだから、そのアカウントにスクリプトをクラウド保存して実行できたらいいですね。

そこで今回は、クラウドドキュメントに保存したスクリプトを実行するIllustrator用ExtendScript、executeCloudScript.jsx を紹介します。あまり実用性はないので、あくまでもお遊びとして見てください。

続きを読む

【解決】Illustrator全メニュー名のテキストがほしい!

sttk3_menu_titles アイキャッチ画像

テクニカルライターやスクリプト開発者は、Illustratorのバージョンごとの更新を常に追跡していることでしょう。新機能の追加でメニューが増えたり、ローカライズの都合でメニューの文言が変わったら、それを成果物に反映する必要があるからです。

特にIllustrator 2023以降は、バージョンが0.1進むだけのマイナーアップデートでも、機能の追加や機能名の変更が頻繁に起こっています。変化を見つけるのもひと苦労ですね。

そこで今回は、Illustratorの全メニューのタイトル(テキスト)を取得し、ダイアログに出すIllustrator用スクリプト を紹介します。バージョンごとに取得したテキストを保存しておけば、diffコマンドなどのテキスト比較ツールで機械的に違いを検出できる、という作戦です。

続きを読む

【解決】カラーテーマ対応のPhotoshop用UXPプラグイン見本がほしい!

swc-uxp-react-theme アイキャッチ画像

PhotoshopのUIの明るさ(カラーテーマ)に応じてパネルの見た目も変わるReactベースのUXPプラグインを作りたいときは、Spectrum Web Componentsを使ったUXPプラグインの資料ページを見るとサンプルが見つかります。具体的にはGitHubにある swc-uxp-react-starter です。

しかし実際試してみると、エラーでプラグインをビルドできなかったり、読み込みエラーでパネルが空になったりします。調べると、各種設定ファイルを適切に変える必要がありました。

また、パネルUIの明るさを環境設定に追従させる方法もサンプルには含まれていません。全体的に見て、すでに詳しい人でないと最初の一歩を踏み出すのが難しい印象でした。

そこで今回は、Adobe公式サンプルを、ひとまずビルドできてカラーテーマ対応に改造したPhotoshop用UXPプラグイン見本swc-uxp-react-theme を紹介します。

続きを読む

【解決】スクリプトで合成フォントの内訳のPostScript名を取得したい!

Illustrator合成フォントPostScript名取得 アイキャッチ図版

Illustratorには合成フォント機能があり、漢字・ひらがな・アルファベット・数字などの種類ごとに別々のフォントを指定し合成した単一のフォントを作れます。

単一のフォントになっているため、それをテキストに割り当てるだけで自動的に文字の種類ごとに意図通りの見た目に変わってくれます。自力で個別に指定するよりずっと確実で、ヒューマンエラーを減らすのに効果的です。

Illustratorの合成フォント機能は、残念ながらスクリプトでの操作に対応していません。せめて情報の取得だけでもできればよかったのですが、XMPメタデータを通じて内訳のフォントファイル名を取得するところまでが限界でした。フォントファイル名からPostScript名を求める部分は、外部のデータベースかFont Bookなど外部アプリの機能が必要です。惜しいですね。

調べたところ、合成フォントファイルを読むことで内訳のPostScript名が得られそうでした。

そこで今回は、ExtendScriptでIllustratorの合成フォントの内訳のPostScript名を取得する例 を紹介します。

続きを読む

【まとめ】キーオブジェクトに整列・分布を実現するしくみ(Figmaプラグイン)

キーオブジェクトの推察 概念図

こちらはFigma 開発 Advent Calendar 2022,23日目の記事です。

2022年12月に,キーオブジェクトに整列・分布するFigma/FigJam用プラグイン「Singari」を公開しました。すでにFigmaコミュニティの次のページからアクセス可能です。

FigmaプラグインSingari イメージ画像

Adobe Illustratorの同機能と似た,キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作にこだわって開発しています。ぜひ使ってみてください。

使用方法など詳細は,別記事【解決】Figmaでもキーオブジェクトに整列・分布したい!にまとめました。興味があるかたはそちらをどうぞ。

今回の記事では開発者向けに,プラグインAPIでは不可能に見える 「キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作」を実現した,そのしくみを解説します。

というのも,Figmaでは「こう考えて,こう開発しました」という内容の記事が公開されていて面白いのです。それに倣ってみようと思います。

続きを読む

【まとめ】Illustratorスクリプトの開発資料

【まとめ】Illustratorスクリプトの開発資料 アイキャッチ図版

プログラムの開発をしていると,技術や経験は個人に蓄積していきます。役立つ資料や道具のありかもしかりです。しかし自分の頭の中にあるだけの状態より,誰でもその情報にアクセスできたほうが世界はもっと良くなるでしょう。

そこで今回は,普段IllustratorでExtendScriptなどのスクリプトを書くときに使っている資料やWebサービスを公開します。

続きを読む

【解決】画面にOCRをかけて文字を抽出したい!(2)

Google APIでスクリーンショットOCR アイキャッチ図版

前回の記事【解決】画面にOCRをかけて文字を抽出したい!(1)により,スクリーンショットとOCRで簡単に画面上のテキストを取得できるようになりました。

しかし,実はこの話はGoogle Cloud Vision APIのOCR認識精度がもの凄く高くて便利だなーというところから始まっています。

せっかくなのでそのすごいAPIを呼び出すものも紹介します。ただし,今回はAPI Key(利用者アカウントみたいなもの)を自力で取れる方が対象です。我こそはという方は続きをどうぞ。

続きを読む

【解決】Illustratorスクリプトで選択をもっと速くしたい!

高速選択スクリプト アイキャッチ図版

Illustratorのスクリプトで,条件に当てはまるオブジェクトをすべて選択するという処理をしたいことがよくあります。でも,普通にやるとIllustratorがクラッシュしたり,動作が遅すぎて固まることがしばしば。撃墜王の称号をつけたくなりますね。

そこで今回は,Illustratorスクリプトでオブジェクトの選択を速くする方法を紹介します。スクリプトを書かない人には何の役にも立たないのでご注意ください。

続きを読む

【遊び】スクリプトで塗りアピアランスを追加したい!

アピアランスのスクリプト アイキャッチ

Illustratorのアピアランス機能は,修正しやすく再利用も簡単なデータを作るのに欠かせないものになっています。
あまり詳しくない方でも,文字に白フチをつけたり,線路の点線を作ったりするのに使ったことがあるのではないでしょうか。

そんな当たり前のように使うアピアランス機能ですが,残念ながら基本的にはスクリプトで操作することができません。

一応applyEffect()というメソッドを使えば,スクリプトによってアピアランス効果を追加できるものの,その効果はオブジェクトの末尾に加わるだけの素朴な結果になります。
きっと塗りや線の効果を使いこなしているあなたには不満が残りますよね。

そこで今回は,FXGファイルを使ってアピアランスを操作する方法を紹介します。
ただしこの方法はあまり実用性がないので,あくまでもお遊びとして見てみてください。

続きを読む

【解決】スクリプトでのアクション動的生成を簡単にしたい!

スクリプト即時生成アイキャッチ

Illustratorには,手動では使えるもののスクリプトだとコントロールできない機能がたくさんあります。例えば「ブレンド」「段組設定」などですね。

それらを自由に操作するため先人たちは,アクションのソースコードをスクリプトで即時生成・編集して実行する,という技を編み出しました。

でもその技術を使うにはそれなりの知識を持っている必要があります。また,相応の知識を持っていても実際に使おうとすると結構面倒そうです。「これなら諦めて手作業にしたほうが速いかな」なんて予感がよぎり,憂鬱になってしまいますよね。

そこで今回はアクションの即時生成と実行をサポートするJavaScriptのfunctionを紹介します。コピー&ペーストで使えることを目標に書いていますので,読んだ後はある程度簡単に即時生成をコントロールできるようになると思いますよ。
なおスクリプトを書かない方は,読んでもまったく理解できないと思いますのでご注意ください。

続きを読む

【解決】jsxファイルってQuick Lookできないの?

jsxのアイコンがプレビューに変わる

IllustratorやPhotoshopなどで使う拡張子jsxのスクリプト,AdobeのExtendScriptの話です。

このファイルはQuick Lookを使ってもアイコンが表示されるだけで,中身のテキストを確認することができません。スクリプトを書いていると,「あれ,この処理どっかで書いたな。検索しよ」ってことがよくありますよね。でも検索で出てきたファイルをいちいち開かないといけないのが面倒です。今回はこれを「タイプコード変更」で簡単に解決します。

続きを読む