今後UXPの実装が進むとAdobe用のscriptの開発でこれまで以上に非同期処理が重要になるでしょう。もちろん非同期処理自体もはや当たり前のように使われていますが意外にキャンセルボタンの実装をしようと思ったかなりややこしかったのでまとめることにしました。なお、実装にあたってはこちらの記事を参考にしました。キャンセル可能でPromiseなsetTimeout()を作る 最初にPromise関数の実装にあたってPromiseの状態をオブジェクトで管理して一度resolve,rejectの結果を投げるメソッドをプロパティーに代入するという形をとっています。キャンセルボタンされない場合そのまま非同期
Photoshop UXP上のPhotoshop moduleではsaveメソッドが実装されています。これを使えば簡単にドキュメントの上書き保存が実行可能です。詳しくはドキュメント。 ただし違ったフォーマットで保存するとなると話は違ってきます。ドキュメントを見てもそこに対して言及されていません。ということでbatchPlayで行ってみましょう。もちろん保存用のbatchPlay用のコードはAlchemistからコピーします。以下tiff保存用のコード。 pathのプロパティにファイルパスをstring型として渡せば完了。ExtendScriptに慣れている方もそういう風に考えるでしょう。という
UIを組み立てる上でもはや当たり前のアニメーション。派手で華々しいアニメーションとまで行かなくてもちょっとしたボタンの変化、チェックボックスの動きにも使われています。しかし2021年7月3日現在Photoshop UXPでのCSSによるアニメーション、transitionはサポートされていません。と言うわけでjsで動かすしかないのですがjsでも動くライブラリや機能があります。と言うわけでどのライブラリが動くか軽く調べてみました。 調べたのは以下のライブラリ、機能になります。 requestAnimationFrame アニメーションライブラリー gsap 言わずとも知れた j-query モダ
CEPにもありましたがPhotoshopにはアプリケーションの動きに対してコールバックを発火させるイベントを登録できます。全てのアプリケーションの動き、とまで言いませんがかなりの範囲をカバーしています。詳しくはphotoshopのイベントをcepで管理するとphotoshop-extensionの開発17-イベント基本を。CEPの場合csInterfacインスタンスから登録するPhotoshop以外のアプリケーションでもサポートされているイベントとPhotoshopのみのPhotoshopJSONCallbackのイベントがありました。PhotoshopJSONCallbackはIDを取得する
Photoshop UXP Pluginを開発後に配布したい、簡単にインストールできるようにしたい、と言う場合のファイルをパッケージ化手順について触れます。勿論CEPに比べたら簡単だとは思いますがやはりつまずく部分はあります。 アイコンを作成する UXPに関しては開発中はアイコンは一切必要ありませんがパッケージ化する場合はアイコンが必須となります。そしてこのアイコンなのです二種類存在するのですがそこから解説します。具体的にはmanifest.jsonトップレベルにプラグインパネルのアイコン、entrypoints内のアイコンがパネルがツールバーに埋め込まれた時に表示されるアイコンです。 &nb
Photoshop UXPのドキュメンを眺めるとオブジェクトモデルの数が非常に少ないのがわかります。レイヤー、ドキュメント、アクション、選択範囲くらいしかないのですがその他のメソッドは？というとbatchPlayで実行できます。このあたりは何度かこのblogでも取り上げましたが具体的にその手順まで書いていませんでした。という事で早速やってみたいと思いますがまずjardicc氏のalchemistというUXPプラグインを使用します。これはAdobeのマーケットプレイスからもインストールできます。 しかし情報の欄を読むと開発進行中のバージョンをGitHubからダウンロードして使用する方がおすすめと
Photoshop UXPのドキュメントを見るとReactの名前が何度か出てきます。今後Reactを使った開発がさらにサポートされるのかもしれません。実際マルチウインドウの開発のサンプルもReactを使うことを前提のサンプルが上がっていました。というわけで今回はReactを使ってマルチウインドウを開発してみます。 開発環境 今回React,Redux,typescript,styled-componentsを使って開発します。typescriptとstyled-componentsはいつも使っているので今回も使うだけです。今回グローバル変数もパネル間で共有してみたいのでReduxを使用してパネ
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