シリーズ投稿。Photoshopフィルタとしてsbsarを使う
とりあえずUXPでアプリを動かす手順を公式のガイドに沿ってメモ。
スタートアップガイド https://developer.adobe.com/photoshop/uxp/2022/guides/
UXP Developer tool での作業
DEVツールのインストール
Adobe UXP Developer Tool
ここの手順に従うが、普通にCCアプリからインストールできた。
プラグインの作成
DEVツールを立ち上げ作業開始。
CreatePluginからプラグインを作成。
バージョンを指定しないと作れない。洗濯させてくれてもよさそうが、手入力の必要がある。今回は作業時の最新バージョン24.2とした。
IDは公開しないのでデフォルトのまま。公開する場合はwebのコンソールでIDを発行する必要がある。以前は開発用でも正式なIDが必要だったような。テンプレートは今回UIは作らないのでリアクトやwebviewのものではなく、一番簡単かもしれないquick layers starter というものを使う。
選択したフォルダにファイルがたくさん作れられたが、ライブラリ依存？を解決するコマンド実行が必要らしいがいったん無視して進む。→ 追記：今回選択したテンプレートでは必要なかった。
プラグインの開発準備
Plugin workflows ここの内容に沿って行う。
DEVツールに作成したプラグインが一覧で並ぶようになったので、おもむろにLOADを実行してみたが、失敗する。
Photoshopを立ち上げてLOADしたところ、成功し、フォトショップ側にパネルが表示された。
新規ドキュメントを作成して、レイヤーを作成してボタンを押すとレイヤー一覧が更新される。これだけのアプリだろうか？ただ、自分が最終的に作りたいアプリはレイヤー名を参照するので参考にはなりそう。
ヘッダメニューにも項目が増えていた。パネルを表示するもののようだ。
Photoshopと接続している状態では、DEVツール上のメニューから実行できる項目が増えていた。Reload、Watch、Debug、Logsは名前からして便利そうだ。
→Watchはreloadを自動でするもの。Package はプラグイン一般公開時に使うもののようだ。DebugとLogsは普通にChromeの開発ツールが開いた。ブレークポイントなども使えるらしい。
パネルの構成は、htmlからjsを読み込んでいるだけ。cssはインライン記述。(デフォルトcssとしてAdobeのCSSが当たっているようだが)。先ほどのファイル一覧から考えてhtml/jsでプラグイン本体を開発、設定はmanifest.jsonに記述、その他jsライブラリ依存をpackage.jsonで管理、だろう。なんだ簡単じゃないか。
function showLayerNames() {
const app = require("photoshop").app;
const allLayers = app.activeDocument.layers;
const allLayerNames = allLayers.map(layer => layer.name);
const sortedNames = allLayerNames.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
document.getElementById("layers").innerHTML = `
<ul>${
sortedNames.map(name => `<li>${name}</li>`).join("")
}</ul>`;
}
document.getElementById("btnPopulate").addEventListener("click", showLayerNames);jsも（何かライブラリを使わないなら）require(“photoshop”).app あたりがポイントなだけで、あとは非常にベタだ。app以下はjsxと同じ感じなのだろうか。違うものであってほしい。
README.mdの中身
生成ファイルの中にreeadmeがあるので軽くまとめてみる。
- フォトショップ開発のスタートに最適なサンプルだよ、何のフレームワークにも依存してないよ、バニラ（素のJSという意味だったはず）だから。
- フォトショが起動した状態で、Devツールからプラグイン起動してね、プラグインはあらかじめ作ってね。
- あとはここをみよ https://developer.adobe.com/photoshop/uxp/2022/guides/devtool/udt-walkthrough/
- フォトショのドキュメントを編集する方法のリンク ※ 後述
- ファイルを書き出す方法のリンク ※ 後述
最後の2つのリンクは役に立ちそうなので以下に個別にまとめた。
フォトショのドキュメントを編集する
https://developer.adobe.com/photoshop/uxp/2022/guides/getting-started/editing-the-document/
ざっくり解説。
- テンプレートのレイヤー一覧表示プラグインを改造してレイヤー削除プラグインにする。
- layer.name を書き換えるコードに変更すると、モーダルスコープじゃなきゃダメ！というエラーが出る。
- 他の処理と編集がかぶらないように、特別な書き方をする。具体的にはexecuteAsModal関数で処理をすべて囲む。
- 何度も実行してレイヤー名が長くなっていくのを防ぐコード例（重要ではない）。
ファイルを書き出す
https://developer.adobe.com/photoshop/uxp/2022/guides/getting-started/writing-a-file/
ざっくり解説。
- テンプレートさらに改造してレイヤー情報をtsvファイルに書き出す。
- htmlにExport Reportボタンを追加する。
- jsにレイヤー情報のテキストを作成し、ファイルを書き出すコードを追記する。
window.require(“uxp”).storage でファイルアクセス系のモジュール参照が取れる。 - ファイルの保存は非同期なのでawait使うよ。
- ファイル名はユーザーが保存ダイアログで変更できる。ちゃんとtsv書き出される。
- UXP API も確認してね。
https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-js/
リアクト？
また、 Working with React ここにリアクト連携する記事がまとまっているが、今回はUIをメニュー以外使わないつもりなのでざっと読む。これもざっくりまとめると
- リアクトに限らず、外部jsフレームワークを利用する際のことも述べている。
- manifest.jsonが2つ必要になる、開発用と配布用。配布用を参照して開発するとリロードなどが行えなくなるぞ。
manifest.json使うのがおすすめだが、オプションからごのごにょするとそうじゃなくてもできる。- 外部フレームワークを利用する場合は、
npm installとかyarn installで依存を解決してね。DEVツールは何もしない。 - バンドラー系のフレームワークを使う際は、DEVツールはどのようにビルドを行うか知りえないので自分でwatchの準備をしてほしい。
事前準備はこんなものでよさそう。
NEXT TODO
今回はここまで。次回は手を動かす、まで行きたい。。行かないかな。
- モーダル実行について ドキュメント確認。
https://developer.adobe.com/photoshop/uxp/2022/ps_reference/media/executeasmodal/ - APIについて、とりあえずこのページだけ確認。
https://developer.adobe.com/photoshop/uxp/2022/ps_reference/ - こっちのAPI一覧はざっくり必要そうな部分のみ確認。
https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-js/ - その他クイックガイドを確認。まずManifest あたりを。
https://developer.adobe.com/photoshop/uxp/2022/guides/ - メニューからコマンド実行させる 。
- レイヤー名で画像を書き出したい。
日本語参考記事
Just Diary カテゴリー：UXP 一覧
ここに UXP開発関連のたくさんのまとめがされていた。ありがたし。一通り公式サイトベースで作業し終わった後に確認して答え合わせをしよう。
