Photoshop UXP Plugin 入門備忘録

概要

Photoshop 拡張において、そろそろ Adobe ExtendScript を卒業したく、最新の選択肢である UXP に辿り着く。
UXP 開発のファーストステップの備忘録を残す。

参考文献

• UXP for Adobe Photoshop 公式リファレンス
  • Plugins Quickstart Guide
  • Photoshop API
  • UXP API
• QualiArts engineer blog Photoshop UXP への移行について
  • 前編 、 後編
• Photoshop UXP ことはじめ 環境構築
  

成果物

複数選択したレイヤー（レイヤーマスク）を対象に移動、回転、スケールを一括で行うツール。

備忘録

言語

JavaScript + HTML + CSS
ExtendedScript と違い、モダンな Javascript が書ける。今回は使ってないが、フレームワークも使用可能な模様。
また、今回は触れないが C++ と連携したハイブリッド Plugin も作れる模様。

開発環境

任意の IDE + UXP Developer Tools (Debuger) の組み合わせですんなり構築できるのでハードルが低い。
Develpler Tools も Adobe Creative Cloud Desktop からインストールできる。

API

API は発展途上期らしく、バージョン毎にわりと大きな更新が入っている模様。
今回は最初期のバージョンである 2022(23.5.5) を対象に成果物を作ったが、このバージョンはリファレンスに書かれているが使えい、あるいは使い方が最新と違う API が多く存在しており、ほとんどを batchPlay で実装した。

例）

• Document.selection が undefined
• Document.createLayer のレイヤーモードの指定方法が違う

BatchPlay

Photoshop 上のアクションからコマンドを生成することができる（UI上でコピーできる）。
コマンドは Object なので改造も可能。 Maya の Mel のような作り方ができるので実装がとても簡単。

// example レイヤーを選択
const command = {
  _obj: "select",
  makeVisible: false,
  _target: [{
    _ref: "layer",
    _id: id
  }]
};

細かい Tips

テーマ毎のカラー

PhotoShop はユーザーが UI テーマ (light, dark 等) を設定できるため、固定色を指定するとテーマによっては視認性が悪くなる。
あらかじめテーマ毎のカラーが用意されているので、それらを使うと良い。

/* example */
.hoge {
  color: var(--uxp-host-text-color-secondary)
}

sp-dropdown

sp-dropdown is deprecated. Please use sp-picker instead.
sp-dropdown を使用すると、非推奨だから sp-picker を使ってくれ、と注意される。
しかし、 sp-picker は少なくとも本環境下では正しく動作しない（選択したメニューが正しく表示されない）し公式リファレンスにも sp-dropdown が記載されているので無視とする。

懸念点、要検証点

Plugins の配布

Package した .ccx ファイルをダブルクリックでインストール、またはマーケットプレイスからインストールが主な導入方法らしい。
導入にユーザーアクションが必要なので、社内ツール配布はちょっと手間が掛かりそう。

最後に

まだ新しい仕組みということで痒いところに手が届ききらない印象はあるものの、 ExtendedScript に比べて開発環境は格段に便利になったし、これならどんどんプラグインを作りたい気持ちも湧いてきます。
今後の成長にも期待できるので、楽しみです。