UXPで一部Windowメソッドが使えない?
ScriptUIやCEPではそこそこ使われているであろうalertやconfirmメソッド。 ユーザーに簡単に警告を出したり同意を得たりする場合自分で一からUIの実装をしなくて良いので 便利です。見た目も非常に重視する一般的なwebサイトならともかく簡単な拡張機能やScriptなら 特に既製のパーツの使い回しも気にならないでしょう。しかしこれらのウインドウ関係のメソッドが UXPで使えない？というのが本題です。
UXP7.0以降alert（showAlertでなく）prompt,confirmメソッドが使えるようになりました。なので最新のUXPバージョンで 開発できる場合はこれらのウインドウを自作する必要はもはやありません。ただし7.4以降の以下の変更点に注意して使ってください。どちらかというと 代替案を用意した方が安全な気がします。
UXP7.4よりmanifestにenableAlertsのflagが必須になりました。それまでそのままでも動いていたalertprompt,confirmメソッドが 動かなくなるのでUXP7.4以降は必ずenableAlertsの項目のflagをオンにしてください。詳細はmanifestのページenableAlertsの項目を参照してください。またScriptingではもはやこれらのメソッドは動きません。
alertメソッドの実行
とりあえずalertメソッドを実行してみましょう。その前に通常ブラウザー上ではalertメソッドは window(global)オブジェクトより実行できます。しかしこのWindowオブジェクトは省略できるので 単にalertでも実行できます。これはExtendScriptでも同様でしょう。（ただしExtendScriptの場合Windowオブジェクトは存在しないので単にalert、もしくは グローバルスコープでthis.alertとして実行）
それではUXP上でこれは有効なのでしょうか？実行してみましょう。
ReferenceError: alert is not definedなんとalertメソッドが存在しません。そもそも公式でサンプルコードではアラートの表示はapp.showAlertという メソッドが使われています。既にお気づきの方もいるかもしれませんがこれは今までのglobal,もしくはwindowオブジェクトから 実行されているわけではありません。appはphotoshop.appオブジェクト、つまりphotoshopモジュールから実行されています。 つまりこのalertメソッドは従来のalertメソッドとは異なるものなのです。UXPには従来のalertメソッドやpromptメソッドは存在せず、 alertメソッドは勿論このshowAlertメソッドを使えば良いのですが問題はconfirmやpromptになります。大替手段はあるのでしょうか？
ウインドウを自作する
現状UXPのシステムにこれらのメソッドは用意されていないので自作する以外に方法はありません。それではどうやって 自作するのかというとModalDialogを使って一から作ります。ただしこのModalDialogは通常のブラウザー上のModalDialogとは 少し違います。まずはサンプルコード。uxpShowModalメソッドでウインドウサイズの大きさ 、タイトル、リサイズの可否を指定して表示します。 resizeプロパティに設定せきる値はnoneでリサイズ不可、 bothでリサイズが可能、“horizontal”か “vertical”で縦のみ、横のみだと思うのだがbothと挙動が全く変わらなかった。
HTMLにDialogの要素を書き込みJavaScript側から表示します。気をつけたいのがまずuxpShowModalメソッドで呼び出しています。 通常のブラウザーのShowModalメソッドと似ているようで異なるので気をつけてください。 注目すべきはこのメソッドが非同期になっていて結果をres定数で受け取っていることです。 非同期になっている理由としてユーザーがウインドウを閉じるまでここで待ち受けの状態になるためです。 何かしらユーザーがボタンを閉じるメソッドを発火させた後に結果をres定数で受け取って以後の処理に進みます。 ダイアログを閉じるメソッドはcloseメソッドで閉じることが可能です。 上のコードではdialog要素内のボタンを押すとcloseメソッドが発火するようにaddEventListenerで登録しています。 closeメソッド内の引数に値を渡すことで結果をres定数で受け取ることが可能です。 ウインドウのタイトルバーから閉じた場合はreasonCanceledというstring型の値が返ってきます。 上のサンプルではsureという値を受け取った場合とタイトルバーから閉じられた場合にアラートを出すような仕様にしています。 今まで比べてもう一つ大きく異なるのはModalDialogが独立したウインドウになっています。今までのCEPだとこういった独立したパネルを 作れませんでしたがUXPではこうした独立したウインドウを出せるようになりました。
しかしconfirmやpromptメソッドを自作するのは、、、
確かにダイアログを自作すれば上記メソッドは理屈として必要無いですがそれでも数行でユーザーと簡単なやりとりのできた 上記メソッドは便利でした。ちなみにpromptメソッドを自作すると以下のようになります。
CSSを除いて少なめのコードで自作してみようと思ったのですが JavaScript側のコードも増えてHTMLに跨って書き込まないいけないのが既存のダイアログメソッドに比べて面倒に感じます。
複数のパネルを作成
UXPより同一のプラグイン内で複数のパネルを作成できるようになりましたが現在実質Reactを使用しないとまともに作れないので今回取り上げません。興味がある方は私のブログ、Reactを使用してUXPパネルを複数作る。とPhotoshop UXP ウインドウを複数作るをご覧ください。