Photoshop Extensionの開発10 jsonを通じたパネルとjsxのやりとり

javascript, Photoshop

前回jsxからincludeで外部jsonを読み込みましたがパネルとの連携時はinclude自体がエラーになってjsxからの読み込みができなくなってしまいます。jsx単独の開発でしたらいくつかのよく使う関数やオブジェクトを外部scriptとして読み込んでコードを見やすくする事が可能ですがExtension開発時にはそれができません。jsx自体の処理をいくつかのファイルに分けて処理事に呼び出すjsxを変える事も可能ですがやはりメインのjsx自体のコードは長くなりがちになってしまします。前回の続きに戻りますが前回jsonの扱いをincludeで読み込んでパースしましたがパネルとの連携時はどうやってjsonを読み込むのか疑問だと思います。それで今回はオブジェクトをパネル側から投げつつjsxで受け取って再度json形式でパネル側にjsxから返してパネル側のjsで読み込みたいと思います。

まずjson2は前回同様jsxと同じフォルダに設置してある事を前提に進めます。jsx側のincludeはコメントアウトにしておきます。(エラーの原因になるため)それでjsonを、jsx側で使うのですが読み込みをパネル側のjsから読み込ませます。驚くかもしれませんがjsxではなくパネル側からです。

main.js

json2.jsを読み込むためにいくつか変数、関数が追加されました。最初にobjを定義しましたが、feedプロパティーが空になっています。このオブジェクトをjsxに投げてそれをパネルのjsから投げ返します。

jsx

jsx側でfeedプロパティにmeatの値を追加します。それをJSON.stringifyで返します。(jsx単独で動かすとここでエラーになります。)

main.js

jsx側で追加されたプロパティーmeatが呼び出されました。このjsonを通じてのパネルとアプリケーション側のやりとりはかなりややこしい要素ですがExtensionを開発する際に重要なポイントになります。

git hubにこれまでのサンプルを載せました。何かの参考になればと思います。

 

Beer 寄付してサイトを応援する。