概要
Photoshop のプラグインを UXP (Unified Extensibility Platform) で開発してみます。
本記事では、公式のスターターを実行し、レイヤー名の取得ができることを確認します。
Photoshop のアドオンについて
公式のデベロッパーページに記載がある通り、Photoshop のプラグインを開発する際には、複数の開発環境の選択肢があります。
今回は UXP Plugins をターゲットにします。
| 名称 | 用途 | 難易度 | 言語 | 最小バージョン | 公式で開発中か | 拡張子 | 注釈 |
|---|---|---|---|---|---|---|---|
| UXP Scripts | 反復作業の効率化 | 初級 | JS(ES6) | 23.5 | はい | PSJS | |
| UXP Plugins | 効率化のためのパネルや拡張機能の作成 データをローカルに保存可能 |
中級 | JavaScript, HTML, CSS | 22.0 | はい | CCX | |
| UXP Hybrid Plugins | UXPを利用したネイティブアプリの開発 | 上級 | C++, JavaScript, HTML, CSS | 24.2 | はい | CCX | |
| Photoshop API | クラウド上のPhotoshopファイルの編集 | 中級 | 任意の言語(REST API) | はい | |||
| Scripting with ExtendScript | 反復作業の効率化 | 初級 | JS(ES3) | CS3 | いいえ | JSX | |
| CEP Panels | 効率化のためのパネルや拡張機能の作成 | 中級 | Extendscript(ES3), HTML, CSS | 14.0～20.0 | いいえ | ZXP | ARM版Windows, M1 Mac, M2 Mac では使用不可 |
| C++ SDK | 高速で強力なプラグインの開発 | 上級 | C++ | CS3 | いいえ | DLL, EXE, DMG | |
| Generator | 画像の自動生成 他アプリとの連携 Photoshopの制御など |
中級 | JavaScript, NodeJS | 14.1 | いいえ | UXPが画像APIをサポートするまでの暫定機能 |
筆者の環境
- Windows 11
- Photoshop 25.1 (インストール済み)
- UXP Developer Tools 2.0.1
環境構築
UXP Developer Tools のインストール
Adobe Createve Cloud のデスクトップアプリで、"UXP"と検索し、"UXP Developer Tools"をインストールします。
インストール後起動し、開発者モードを有効化してください。
プラグインの作成
画面中央の"Create Plugin"を選択してください。
作成するプラグインの情報を入力します。
Plugin Name, Plugin ID, Plugin Version は自由に入力してください。
Host Application Version は、使用しているPhotoshopのバージョンに合わせてください。
Template は "quick-layers-starter" を使用します。
入力が完了したあと、"Select Folder"をクリックします。
プラグインの保存先を指定してください。
一覧に作成したプラグインが表示されていれば完了です。
Photoshop の開発者モード有効化
Photoshopを起動して、編集 > 環境設定 > プラグイン を選び、環境設定を開きます。
開発者モードを有効にしてください。その後、Photoshop を再起動してください。
動作確認
Photoshop を起動している状態で、 UXP Developer Tools の "Load & Watch" をクリックしてください。
パネルが表示されれば成功です。
Photoshopで新規ファイルを作成、レイヤーを追加または削除し、"Populate Layers" をクリックします。現在のレイヤー名が取得できていることを確認してください。
今回はここまで。
備考
"Load & Watch" をクリックしても起動しない
Photoshop は起動していますか？先に立ち上げておく必要があります。
パネルを閉じてしまった
プラグイン > プラグイン名 > Starter Panel から再表示できます。
続き
- 公式チュートリアル(英語) の "Step 3: Adjust the plugin"