PhotoshopのUIの明るさ（カラーテーマ）に応じてパネルの見た目も変わるReactベースのUXPプラグインを作りたいときは、Spectrum Web Componentsを使ったUXPプラグインの資料ページを見るとサンプルが見つかります。具体的にはGitHubにある swc-uxp-react-starter です。
しかし実際試してみると、エラーでプラグインをビルドできなかったり、読み込みエラーでパネルが空になったりします。調べると、各種設定ファイルを適切に変える必要がありました。
また、パネルUIの明るさを環境設定に追従させる方法もサンプルには含まれていません。全体的に見て、すでに詳しい人でないと最初の一歩を踏み出すのが難しい印象でした。
そこで今回は、Adobe公式サンプルを、ひとまずビルドできてカラーテーマ対応に改造したPhotoshop用UXPプラグイン見本swc-uxp-react-theme を紹介します。
続きを読む
Illustratorには合成フォント機能があり、漢字・ひらがな・アルファベット・数字などの種類ごとに別々のフォントを指定し合成した単一のフォントを作れます。
単一のフォントになっているため、それをテキストに割り当てるだけで自動的に文字の種類ごとに意図通りの見た目に変わってくれます。自力で個別に指定するよりずっと確実で、ヒューマンエラーを減らすのに効果的です。
Illustratorの合成フォント機能は、残念ながらスクリプトでの操作に対応していません。せめて情報の取得だけでもできればよかったのですが、XMPメタデータを通じて内訳のフォントファイル名を取得するところまでが限界でした。フォントファイル名からPostScript名を求める部分は、外部のデータベースかFont Bookなど外部アプリの機能が必要です。惜しいですね。
調べたところ、合成フォントファイルを読むことで内訳のPostScript名が得られそうでした。
そこで今回は、ExtendScriptでIllustratorの合成フォントの内訳のPostScript名を取得する例 を紹介します。
続きを読む
こちらはFigma 開発 Advent Calendar 2022，23日目の記事です。
2022年12月に，キーオブジェクトに整列・分布するFigma/FigJam用プラグイン「Singari」を公開しました。すでにFigmaコミュニティの次のページからアクセス可能です。
Adobe Illustratorの同機能と似た，キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作にこだわって開発しています。ぜひ使ってみてください。
使用方法など詳細は，別記事【解決】Figmaでもキーオブジェクトに整列・分布したい！にまとめました。興味があるかたはそちらをどうぞ。
今回の記事では開発者向けに，プラグインAPIでは不可能に見える 「キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作」を実現した，そのしくみを解説します。
というのも，Figmaでは「こう考えて，こう開発しました」という内容の記事が公開されていて面白いのです。それに倣ってみようと思います。
プログラムの開発をしていると，技術や経験は個人に蓄積していきます。役立つ資料や道具のありかもしかりです。しかし自分の頭の中にあるだけの状態より，誰でもその情報にアクセスできたほうが世界はもっと良くなるでしょう。
そこで今回は，普段IllustratorでExtendScriptなどのスクリプトを書くときに使っている資料やWebサービスを公開します。
続きを読む
前回の記事【解決】画面にOCRをかけて文字を抽出したい！（1）により，スクリーンショットとOCRで簡単に画面上のテキストを取得できるようになりました。
しかし，実はこの話はGoogle Cloud Vision APIのOCR認識精度がもの凄く高くて便利だなーというところから始まっています。
せっかくなのでそのすごいAPIを呼び出すものも紹介します。ただし，今回はAPI Key（利用者アカウントみたいなもの）を自力で取れる方が対象です。我こそはという方は続きをどうぞ。
続きを読む
Illustratorのスクリプトで，条件に当てはまるオブジェクトをすべて選択するという処理をしたいことがよくあります。でも，普通にやるとIllustratorがクラッシュしたり，動作が遅すぎて固まることがしばしば。撃墜王の称号をつけたくなりますね。
そこで今回は，Illustratorスクリプトでオブジェクトの選択を速くする方法を紹介します。スクリプトを書かない人には何の役にも立たないのでご注意ください。
Illustratorのアピアランス機能は，修正しやすく再利用も簡単なデータを作るのに欠かせないものになっています。
あまり詳しくない方でも，文字に白フチをつけたり，線路の点線を作ったりするのに使ったことがあるのではないでしょうか。
そんな当たり前のように使うアピアランス機能ですが，残念ながら基本的にはスクリプトで操作することができません。
一応applyEffect()というメソッドを使えば，スクリプトによってアピアランス効果を追加できるものの，その効果はオブジェクトの末尾に加わるだけの素朴な結果になります。
きっと塗りや線の効果を使いこなしているあなたには不満が残りますよね。
そこで今回は，FXGファイルを使ってアピアランスを操作する方法を紹介します。
ただしこの方法はあまり実用性がないので，あくまでもお遊びとして見てみてください。
Illustratorには，手動では使えるもののスクリプトだとコントロールできない機能がたくさんあります。例えば「ブレンド」「段組設定」などですね。
それらを自由に操作するため先人たちは，アクションのソースコードをスクリプトで即時生成・編集して実行する，という技を編み出しました。
でもその技術を使うにはそれなりの知識を持っている必要があります。また，相応の知識を持っていても実際に使おうとすると結構面倒そうです。「これなら諦めて手作業にしたほうが速いかな」なんて予感がよぎり，憂鬱になってしまいますよね。
そこで今回はアクションの即時生成と実行をサポートするJavaScriptのfunctionを紹介します。コピー&ペーストで使えることを目標に書いていますので，読んだ後はある程度簡単に即時生成をコントロールできるようになると思いますよ。
なおスクリプトを書かない方は，読んでもまったく理解できないと思いますのでご注意ください。
IllustratorやPhotoshopなどで使う拡張子jsxのスクリプト，AdobeのExtendScriptの話です。
このファイルはQuick Lookを使ってもアイコンが表示されるだけで，中身のテキストを確認することができません。スクリプトを書いていると，「あれ，この処理どっかで書いたな。検索しよ」ってことがよくありますよね。でも検索で出てきたファイルをいちいち開かないといけないのが面倒です。今回はこれを「タイプコード変更」で簡単に解決します。
