Photoshop UXP上ではNode.jsは動かない。
振り返ったらPhotoshop UXPとNode.jsについてまとまった記事を書いていない事に気づいたので書くことにしました。まあ結論から言うとUXP上でNode.jsは使えないです。しかし下記のコードを見ると誰しもがNode.jsベースで動いたコードと思ってしまうとは思います。
requireでPhotoshopモジュールを呼び出してPhotoshop関係のメソッドを実行しています。見た目そのままNode.jsではありますがそれでは以下はどうでしょうか。
結果は以下。
pathモジュールもfsモジュールも一見使えそうではあります。そのpathモジュールのメソッド、例えばextnameやdirnameをconsoleで調べてみます。
basenameメソッドはかろうじて存在するようですがその他dirnameとextnameメソッドはundefinedが帰ってきました。pathモジュール自体がこれのメソッドを所持していないようです。どっちにしろUXPではファイルパスをstring型として扱えない以上pathモジュールが使えた所であまり意味もないかもしれませんが。ちなみにfsモジュールも以下のように調べてみました。
mkdirメソッドは存在はしているようですが実際実行するとエラーで拒否されます。どうやらローカルにUXPのシステムからはアクセスしてファイルの操作はできないようです。また公式でもNode.jsはサポート外であることがこちらでも言及されています。ここは素直に諦めるべきでしょう。それではnpm packageも使えないのか、というと公式にReactなんかはサポートされているので使えない、というわけではありません。しかし素のjsでrequireでモジュールにアクセスしようとするとエラーが帰ってきます。とりあえずNode.jsのシステムは動かないのでブラウザーでも動くpath-browserをインストールして使ってみましょう。
Module not foundとエラーが出ました。おそらくUXPがNode.js自体をサポートしていないためCEPと違ってnode_modulesフォルダー自体どこのディレクトリーにあるか認識してくれないのでしょう。node_modules内のフルパスを指定してもどうにもなりませんでしたがこれは素のjsではなくwebpackによるビルドを通じて読み込むことで一応の解決ができます。
webpackを使用してnpm packgeを使う
とりあえず簡単なwebpackを使用してコンパイルします。今回webpackに関して深く触れないので入門から学びたい方はわかりやすい入門記事を紹介しておくので参考にしてください。
最新版で学ぶwebpack 5入門 JavaScriptのモジュールバンドラ
それではまずは以下をインストール
webpack.configファイルは以下になります。
これでnpm modulesをimportする事により簡単にnpm packageにアクセスできるようになります。
path.joinメソッドがpath-browser経由で使えました。とりあえずpath-browserパッケージへのアクセス自体は成功しました。しかしその他のメソッドはどうでしょうか。以下の一文を追加してみましょう。
createElementプロパティーがないとエラーが出ました。UXPではdocument.createElementメソッドはサポートされているのでなぜcreateElementがundefinedとエラーを返しているのか詳しいことは分かりませんがこれはUXPのシステムがブラウザー周りのシステムも全てはサポートしていないためブラウザー上で動くようなパッケージですら動かない場合もあるので何かしらUXPがサポートしていないオブジェクトモデルがパッケージ内で使用されているのだと思います。無論Nodeのネイティブモジュールが使われているパッケージはまず動かないと思ったほうが良いでしょう。ただしReactに関しては公式でサポートされると公言されているのでReactおよびwebpack周りのパッケージが突然使えなくなる、ということはおそらくないと思います。
なぜCEPで使えたNode.jsが使えない。
どうもセキュリティの理由で使えないようにしているみたいです。こちらでも説明した通りUXPでは既存のExtendScriptのようにPhotoshopから直接ローカルにアクセスしてファイルの保存やファイルを開くことができなくなりました。主にユーザーの許可無しにローカルにシステムがアクセスすること自体を禁止しているみたいです。なのでuxpモジュールを使用すればローカルファイルの操作がUXP上でできるようにはなりますがそれでも事前にユーザーによるダイアログの操作が必要になります。今後この辺のシステム周りに関しては改善する意思はあるみたいですが具体的にいつ頃どのように公式に公言されていません。