CEPに比べて簡単になったUXPの開発ですがとはいえCEP含めてAdobeのplugin開発が初めてだとなかなかとっつきにくいでしょう。というわけで最初の開発の一歩を解説します。開発にあたってAdobe Developer Toolが必要になるのでここを参考にCreative Cloudのアプリからインストールしてください。インストール後にアプリを立ち上げます。 初めて立ち上げた場合はアプリのリストは空欄になっていると思います。とりあえず開発に着手しましょう。着手前に空のフォルダー を適当な場所に作ります。今回CEPと違ってpluginを特定のディレクトリーに置かないといけないわけではないので
PhotoshopUXPでサンプルプラグイン作りました。モダンなコードで書くとどんな感じのコードになるかのサンプルになります。内容はPhotoshopの雛形となるドキュメントを自動で生するプラグインです。ドキュメントを作成した後にレイヤーを作成したりガイドを引いたりしてドキュメントの雛形を作ってくれます。コード全体はこちらからご覧ください。 プラグインの概要 classからインスタンスを作成するとドキュメントを作成します。以下のようになります。 DocumentPreset classのコンストラクターに雛形の名前、幅、高さ、解像度、カラーモード、土台
CEPだと複数のウインドウを使用したインターフェースを作る場合ウインドウの数だけプロジェクトを作成してやりとりする必要がありましたがUXPの場合一つのプロジェクトから複数のウインドウを作成できるようになりました。一応サンプルでReactを使用した例が載っていますがReact example正直Adobe pluginの開発者のほとんどがReactでなくVannila jsを使用していると思います。なのでVannila jsを使用したウインドウ作成を紹介します。 manifest.js まずパネルの情報を二つ設定します。idにパネルの名前をつけてください。 次にmain.jsのentrypoin
Photoshop UXPの開発について今回特にサポートされていない事、現状できないことを中心に書いていきます。CEP経験者なんかはドキュメントを結構飛ばして読んでしまうと思いますが結構サポートされていない機能、意外な仕様が多いです。 そもそもUXPのシステムは完全なブラウザベースのパネルではない CEPはgoogle Chromiumベースのシステムでした。つまりほとんどGoogle ChromeをベースにしたシステムであったのでブラウザでサポートしているCSS,HTMLに関してはよほど新しいものでない限りCEP上では動くものでした。それに対してUXPは基本は同じですが完全なブラウザベースの
Photoshop uxpのmanifest.jsonを簡単に触ってわかったことを自分へのメモがわりも含めて少し解説します。 CEPで言う所のmanifest.xmlのようにパネルのサイズや挙動を管理するのがこのmanifest.jsonになります。尚且つ今回UXPではjs内でのuxpモジュールのentrypointsメソッドも利用してパネルの挙動、メニューから呼び起こす関数等も管理します。まず上部のメニューとプラグインパネルのコマンドから実行する関数を設定します。これらの関数はパネルを通さなくても関数を実行できるので簡単なコードをたまに実行したい時などにjsxのように使用できます。manif
CEPの次なるplugin開発システムであるUXP(Unified Extensibility Platform)がPhotoshop2021から搭載されました。CEPとjsxはいつかはUXPに移行することになるらしいですが今すぐ使用できなくなるわけではないらしいです。（実際PhotoshopのUXP APIも開発途上な感じ）ベースがJavascript V8でアプリケーションの操作も同じV8の環境で実行できるのでCEPみたいにパネルとjsxで通信する必要もなくなます。将来的には動作もjsxよりかなり高速になるとは書いてありました。こちらを参照 とりあえず基本的な情報に軽く触れたいと思います。
