PhotoshopUXP React関係の細かい仕様 Spectrum、Custom Elements
React関連のぼやきをTwitterで呟いたら外国のアカウントから返信が色々きて驚いた最近です。Adobe Spectrumの挙動など外国の方から教えてもらって今回その事を主に取り上げたいと思います。
まず何度も申し上げてますがUXPはブラウザーに似ているようで異なるシステムの上に成り立っています。CEPはChromeのシステムがベースになっていたのでブラウザーで動く事はおおよそその通りの仕様で動くようになっています。しかしUXPは細かい仕様が異なるのでつまづく箇所がそこそこ出てきます。そこで最近何度かつまづいた箇所を（主にSpectrum関連）をまとめておきます。
manifest5よりパネルのイベントのコールバックから受け取れる値が変わった
UXPにおいて複数のパネルを実装する場合各パネルのcreate,もしくはshowイベントのコールバックから返ってくる値のgetter nodeで帰ってくるbody要素にJavaScript上で生成したDOMをappendchildメソッドで加えることでパネルの実装が可能です。
manifest4までは上記のやり方でよかったのですがmanifest5より少しだけ変わりました。getter nodeで帰ってきたbody要素はmanifest5よりコールバックで帰ってくる値そのものがbody要素になりました。なのでmanifest5よりは以下のようにすればパネルのnodeにJavaScriptで構築したDOMを加える事ができます。
細かい変更点ですが何も知らないでmanifestのバージョンを上げるとエラーで真っ白なパネルと対面して困惑すると思います。
Spectrum
ご存知の通りUXPではデフォルトでAdobe Spectrumのパーツが一部使えるようになっています。これはAdobeのCustom ElementsとしてそのままHTML上で使用できます。特に何かをインストールする必要もありません。このCustom ElementsはReactで使用可能ではあるのですが一部のイベントが思ったように動かないことがあります。
そもそもCustom Elementsとは
Custom Elementsとは独自のHTML要素をJavaScriptで登録、使用のできる要素でほとんどのモダンブラウザー上では特殊なライブラリーなどなとくともVanilla.jsで使用できます。私もあまり詳しく無いので詳細は省きますが以下のように独自の要素をJS上で登録してHTMLで使用できます。
Custom Elements以外にもShadow DOM,TemplateElementも含めてWeb Componentsとも呼ばれます。
尚詳細はMDNのページをご覧ください。(Web Componentsについてはこちら。)
このCustom Elementsですが勿論Reactのコンポーネントとは全くの別物なので扱いには注意が必要です。例えば以下のイベントは動きません。
なぜ動かないのでしょうか？まずReactは合成イベントというブラウザ間で挙動が同じになるように特殊なイベント処理が行われているようで。(Reactのページ参照)
この合成イベントがCustom Elements内で動かないのが原因みたいです。しかしReact、Custom Elementsともこういう仕様なのでこれはバグとかそういうものではありません。仕様通り正常に動いた結果イベントが発火しないみたいです。一方Custom Elementsは通常のブラウザーのイベント処理は受けつけます。なので以下のようにaddEventListenerを使えば動くようになります。
少し面倒ですがこれで動きます。尚Adobeの公式でもこれらについて触れられています。一連のイベントの追加をコンポーネント化したサンプルコードもあるので参考、使用すると良いでしょう。
もしくはthejustinwalsh氏がreact-uxp-spectrumという一連のSpectrumをReactのコンポーネント化したパッケージを公開しているのでこれを使うのもいいでしょう。
ちなみにPreactというReactの軽量版があるのですがPreactの場合こういった対策は必要無く、Preactのイベントシステムをそのまま使う事ができます。なぜかというとPreactのイベントはReactと違い合成イベントを使用せずブラウザのイベントシステム（addEventListener）を内部で使用しているかららしいです。 詳しくはこちらの記事が参考になります。
それでは楽しいReactライフを。