Photoshop UXP 25.1主にSWC React
Adobeの各種アプリケーションがアップデートされました。IllustratorにもAIが搭載されて自動でベクターが作れる機能とか来ましたがここではいつも通りスルーしてUXPの話題です。Photoshop UXPの25.1の変更内容がアップされました。主にSpectrum Web Component(以下SWC)のReact対応でしょうあ。Web-Components版は既に対応していましたが今後はReactのコンポーネントも扱えます。ちなみにSWCとかWeb-ComponentsとかSpectrumUXPあたりの違いはこちらのページを参照してください。
実装してみる
公式のサンプルコードがありますのでここから必要なモジュール等参照できますがややわかりづらい部分もあったのでまとめてみました。とはいえ基本はWeb-Components版と同じですので一度前回の記事UXP 7.2 Spectrum Web Component(SWC)を使ってみるに目を通してください。
前提として。
- Photoshop25.1?、UXP v7.3より対応。
- webpack使用
- yarn使用
ということで大まかな流れは以下の通りです。
- manifestにfeatureFlagsのenableSWCSupportをtrueにセット。
- いきなり直接モジュールをインストールしないで依存パッケージを確認。package.json内のresolutionsにリストで書き込む。
- モジュールのインストールには各種@swc-uxp-wrappersのUXPに対応させるためのwrapperが必要。
- さらに@swc-reactより始まる各種パッケージもインストール。
ということでWeb-Components版との一番の違いはwrapperと別に@swc-reactより始まる本体？のパッケージも必要なとこでしょうか。前回説明したようにresolutions内に依存パッケージのバージョンを書き込む必要があるのは説明しました。勿論themeなど一部wrapper自体不要なコンポーネントもあります。パッケージのインストールなどには対応バージョンにも気をつけてください。詳細は公式のドキュメントより確認できます。それで本体のパッケージなのですが本家 React SWCのドキュメントを見えればある程度わかるのかと思ったのですがどうも@adobe/react-spectrumというモジュールにまとめられているのか全くわかりませんでした。ちなみにサンプルでは各種@swc-react/action-buttonのような形で別々にインストールしていたので別々にインストールしなければいけないでしょう。ということでこの辺りの必要なモジュールはサンプルを参照するしかなさそうです。ということでサンプルのpackage.jsonを参照しながらインストールしてください。ラジオボタンだったら@swc-react/action-buttonと@swc-uxp-wrappers/radioの二つが必要になります。以下のような感じで動きました。
resolutionsで依存パッケージのバージョンを管理しているのですが実際dependenciesインストールでもバージョンを指定した方がいいのかどうかがよくわかっていません。
仕様の参照
仕様に関してはAdobe React Spectrumのページを参照しつつ実際にUXPに対応しているかは確認のためにUXPのドキュメントを参照すればよいでしょう。（めんどくさい）
Themeのwrapperはトップレベルのコンポーネントに作れば問題無い
サンプルですとThemeのwrapperをIndex,Appとそれぞれの階層で囲んでましたが全て同じThemeで統一する場合はトップレベルのみで囲めば大丈夫です。ちなみにカラーテーマはlightest,light,dark,darkestとありますが事前にimportする必要があります。spectrumのページを参照してください。
ただweb版のReact SpectrumではProviderコンポーネントを使っているのですがこの辺りはUXPだから異なるのか？
GUIDの取得
GUIDの取得ができるようになりました。manifestにてenableUserInfoの項目を追加してください。
その後、uxpモジュールのuserInfoより取得できます。
fetchの送信がFormDataに対応
今まで対応してなかったのか？と思いますたがそういえばフォーラムで一時期話題になってました。詳細は公式を参照してください。