CSXSEventでobjectデータを送信する

AdobeのスクリプトでPanel間やjsx・js間でデータのやりとりをすることができるCSXSEventですが、普段stringしか送っていなかったのをデータを送りたいなーと思いやってみたという話。
思ったより簡単にできました。

CSXSEvent基礎

基本はこう書きます

sender.jsx

 var mylib = new ExternalObject( "lib:\PlugPlugExternalObject" );
 var eventObj = new CSXSEvent();
 eventObj.type = "event_type"; // 好きなidentifierをつける
 eventObj.data = "message";
 eventObj.dispatch();  

ちなみにphotoshopであれば"lib:\PlugPlugExternalObject"が内臓されているらしいので特にファイルをダウンロードしなきゃいけないとかはありません。

receiver.js

 var csInterface = new CSInterface();
 csInterface.addEventListener("event_type", function (event) {
   console.log(event.data);
 });

event.dataにはもちろん"message"(string)が入っています。

event.dataにObjectを入れる

stringだと物足りないので、Objectデータを送信したい！という気持ちでチャレンジ

sender.jsx

 var data = {
    message : "送りたいメッセージとかを書き込んでみる",
    id : 1 // idとか取得した数値とかを追加で送ってみる
 }

 var mylib = new ExternalObject( "lib:\PlugPlugExternalObject" );
 var eventObj = new CSXSEvent();
 eventObj.type = "event_type"; // 好きなidentifierをつける
 eventObj.data = data;
 eventObj.dispatch();  

しかし、これで受け取り側でconsole.logを出してみると、objectがstringで送信されてしまうため、[object object]と表示されてしまいます。

event.dataにJson化したデータを入れる

やはりstring以外は送れないのかなーと思ったのですが、stringならばjsondで送ってパースすれば良いのでは？という思いつき。
※ちなみにAdobeのJsxではJSON.stringify/JSON.parseのメソッドが使えないので外部からincludeする必要があります。私はgithub.com/douglascrockford/JSON-jsを利用させていただいています。いくつか方法があると思いますので、お好きな方法を取ってみてください。

sender.jsx

 var data = {
    message : "送りたいメッセージとかを書き込んでみる",
    id : 1 // idとか取得した数値とかを追加で送ってみる
 }

 var mylib = new ExternalObject( "lib:\PlugPlugExternalObject" );
 var eventObj = new CSXSEvent();
 eventObj.type = "event_type"; // 好きなidentifierをつける
 eventObj.data = JSON.stringify(data); // JSON化させる
 eventObj.dispatch();  

こんな感じで送信すると、特に受け取り側ではparseなどしなくても受け取ることができます

CSXSEventはちょっとしたタイミングの受け渡しでしか使えていなかったのですが、色々なデータを詰めて送れるとなるととても便利に使えそうです。