Photoshop UXP ことはじめ 環境構築

## 概要
Photoshop のプラグインを **UXP (Unified Extensibility Platform)** で開発してみます。
本記事では、公式のスターターを実行し、レイヤー名の取得ができることを確認します。

![ゴールのイメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/e6b8d945-a9d6-dddf-0e0e-6e20a91b5392.png)



### Photoshop のアドオンについて
公式の[デベロッパーページ](https://developer.adobe.com/photoshop/)に記載がある通り、Photoshop のプラグインを開発する際には、複数の開発環境の選択肢があります。
今回は **UXP Plugins** をターゲットにします。

| 名称 | 用途 | 難易度 | 言語 | 最小バージョン | 公式で開発中か | 拡張子 | 注釈 |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| UXP Scripts | 反復作業の効率化 | 初級 | JS(ES6) | 23.5 | はい | PSJS |  |
| UXP Plugins | 効率化のためのパネルや拡張機能の作成<br>データをローカルに保存可能 | 中級 | 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 | 画像の自動生成<br>他アプリとの連携<br>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"をインストールします。
![UXP Developer Tools のインストール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/f506eb75-9f78-49bb-7ecb-a28d555f50d6.png)

インストール後起動し、開発者モードを有効化してください。
![開発者モードを有効化](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/85bf8c79-c0bf-0872-37a8-b76b90d789de.png)

### プラグインの作成
画面中央の"Create Plugin"を選択してください。
!["Create Plugin"を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/c28a3cc6-09b7-c399-2144-748fda9f82bd.png)

作成するプラグインの情報を入力します。
Plugin Name, Plugin ID, Plugin Version は自由に入力してください。
Host Application Version は、使用しているPhotoshopのバージョンに合わせてください。
Template は "quick-layers-starter" を使用します。
![プラグインの情報を入力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/42cd08ca-1213-e375-cd1e-2f2fcbf01040.png)

入力が完了したあと、"Select Folder"をクリックします。
プラグインの保存先を指定してください。

一覧に作成したプラグインが表示されていれば完了です。
![プラグインが表示されていれば完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/cd1279a3-dc21-1bb6-29db-de8d4a12456a.png)


### Photoshop の開発者モード有効化
Photoshopを起動して、編集 > 環境設定 > プラグイン を選び、環境設定を開きます。

開発者モードを有効にしてください。その後、**Photoshop を再起動**してください。
![Photoshop の開発者モード有効化](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/13d37f78-0af3-1081-9621-5b1a38b62bf2.png)



### 動作確認
Photoshop を起動している状態で、 UXP Developer Tools の "Load & Watch" をクリックしてください。
![UXP Developer Tools の "Load & Watch"](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/92cb01c4-90d1-d6ff-1525-6532c28c72f9.png)

パネルが表示されれば成功です。
![パネルが表示されれば成功](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/606d3bb6-8983-aed1-8956-4632d8a571db.png)

Photoshopで新規ファイルを作成、レイヤーを追加または削除し、"Populate Layers" をクリックします。現在のレイヤー名が取得できていることを確認してください。
![背景のみ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/15b22c6e-450a-7314-c12e-ff1167f2fd36.png)![複数レイヤー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/52bbf47e-bc2a-1192-6c6b-a05d7b966baa.png)

今回はここまで。


### 備考
#### "Load & Watch" をクリックしても起動しない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/8d720c6b-9512-0409-580e-7dcd64b5f37e.png)

Photoshop は起動していますか？先に立ち上げておく必要があります。


#### パネルを閉じてしまった
プラグイン > プラグイン名 > Starter Panel から再表示できます。
![プラグイン > プラグイン名 > Starter Panel から再表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499004/b0070e46-175d-84bc-e808-31990f5fdd40.png)

## 続き
https://qiita.com/yukad2/items/04d942edd3bd51ee3d15

- [公式チュートリアル(英語)](https://developer.adobe.com/photoshop/uxp/2022/guides/getting-started/creating-your-first-plugin/) の "Step 3: Adjust the plugin"

## 参考記事
- [Getting Started with UXP for Photoshop - Adobe Developer](https://developer.adobe.com/photoshop/uxp/2022/guides/)
- [Photoshop UXP への移行について 前編 - QualiArts engineer blog](https://technote.qualiarts.jp/article/61/)