大量のデータを処理する時に必ず直面するのがフォルダー内のファイルをサブフォルダーまで遡って全て取得する方法である。今回再帰的にファイルを取得する方法をパネル側、jsx側の両方で解説する。パネル側の方はNode jsのネイティブモジュールを使用する事で簡単にファイル情報を取得できる。 おおよそよくある再帰的処理なのですが解説。まずウインドウダイアログから該当のフォルダーを選択。事前にファイルリスト用の空の配列を作成。再帰的にフォルダーからファイルを取得関数に事前にウインドウから取得したフルパスを指定（f.data[0]となっているのはウインドウから取得したデータオブジェクト型でdataプロパティ
前回一部CEP上のイベントを紹介したがさらに以下紹介する。 com.adobe.csxs.events.WindowVisibilityChanged Extensionパネルが出たり消えたりした時に発火 com.adobe.csxs.events.ExtensionLoaded Extensionパネルが読み込まれた時に発火?多分 com.adobe.csxs.events.ExtensionUnloaded Extensionパネルが読み込まれなかった時のイベント?多分。もしかしたら閉じた時のイベントかもしれません。すいませんよくわかっていません。 WindowVisibilityChan
Extensionには既存のブラウザー向けのイベントは勿論Adobeのソフトで動く専用のイベントも用意されている。具体的にはドキュメントを閉じたり開けたりした時のイベントだ。Photoshop上でドキュメントが編集された時にイベントを発火させたい時など既存のクロームのイベントだけだと対応できない。但し登録のやり方自体ブラウザ向けのイベントとほとんど変わらない。 csinterfaceのインスタンスにaddEventlisternerを登録。documentAfterActivateはPhotoshop上で何かしらのドキュメントが開かれたりしたアクティブになった時に発火するイベント。コールバック
前回述べたとおりCEPの基本のイベントはブラウザ同様の手法で反応します。それではkeyイベントを登録すればExtension上のショートカットを登録できるのではないのだろうか？そう思っていた時期が私にもありました。 ウインドウにkeydownイベントを登録して準備完了。Photoshop上で何かしらキーを押す。 反応しない。ちなみにfキーを押すと Photoshopのデフォルトのショートカット通りフルスクリーンモードになりました。Photoshopのショートカットは反応するけどパネルには反応しない？そうです、キーイベント自体ウインドウに登録してもパネルそのものがウインドウになるのでパネルにフォ
何度も述べている通りCEP自体クロームベースのエンジンなのでイベントを定義する場合はブラウザ上で行う場合と全く同じでaddEventListenerを使用。CEP専用のイベントもaddEventListenerがベースになっているのでフロントエンドに慣れていればとっつきやすい。既に何度かイベント関連のコードはアップしているが再度載せておく。 html CSSはtopcoatを使用。switchのようなformはlabelとdiv要素でフォームがレイアウトが作られている。labelにfor属性を持たせて中のフォーム要素のidに同名の値を定義させるとlabelとfrom要素を関連つける事ができる。
Extensionのパネル自体クロームベースであるためブラウザ同様Imageオブジェクトから画像サイズを取得できる事は前回述べたができる事がかなり限られてしまう。しかしCEP側からはNode.jsモジュールが使用できるので何かしらモジュールを使用すればパネル上で画像データの取得ができる。という事今回はNodeモジュールの使用方法も含めて画像データを取得方法を記載する。まずこちらで画像サイズを取得するimage-sizeというモジュールが公開されている。PSDも含めた幅広い拡張子に対応しているそうなので今回はこれを使ってみよう。 というわけでまずはpackage.jsonの作成。
今回はCEP(エクステンション)から画像データ情報の読み込みをします。理由がない限りは実はPhotoshopから画像データの情報を読み込んだ方が豊富なオブジェクトとメソッドが用意されているので簡単に細く取得できるがPhotoshopの場合一度ファイルを開かないと取得できないためパネル上に事前に表示させたい場合はやはりCEP側から取得できればいい。例えばPhotoshop処理の前にCEP側で画像の詳細を一覧でユーザー側が確認してからPhotoshopに処理をさせるアプリを開発する事などよくあるだろう。それを一々Photoshopで開いてからデータを確認するなど処理が重くなる。（Photoshop
ファイル選択後に各種ファイルのパス、拡張子といったデータを読み込みたいと思う事があるだろう。前回のウインドウやドラッグアンドドロップといった方法でパスデータを読み込む事が出来たが細かいデータは最初から用意されていない。Photoshopの処理に移る前にCEP（パネル側）で読み込みたい時が頻繁にあると思う。これらはNode.jsのネイティブモジュールを使えば簡単に読み込める。 各種、ファイル情報に対応したメソッドが用意されているがまとめて読み込みたい場合はparseでオブジェクトとしてまとめて取得出来る。 折角Extensionでファイル操作をするのだからパネル側で事前に操作できるとできる事に幅
Extensionの自作において重要なローカルファイルとのやりとりにおいてもう一つ、ドラッグアンドドロップについて取り上げる。ブラウザと同じようにパネル上にもイベントの登録ができる。但し一般的なブラウザと同じようにデフォルトでwindowオブジェクト自体にドロップイベントが組み込まれていて不便なのでまずはこのデフォルトのイベントの伝播をキャンセル必要させよう。 prevent_draganddrop.js このwindowのデフォルトのドロップイベントのキャンセル関数は基本的にドラッグアンドドロップ機能を載せる、載せないに関わらず呼び出した方が良い。通常のwebブラウザと違ってPhotosho
csInterface.evalScriptメソッドでパネルからjsx側とやりとりできるのは前回述べた通り。しかし前回はmanifest.xmlに登録しているjsxとのやりとりのみである。その他複数のjsxとパネル側からやりとりする場合はどうすれば良いのか。実はjsxまでのパスを指定すれば個別のjsxとのやりとりが可能である。具体的には前回と同じcsInterface.evalScriptの引数に$.evalFileとjsxまでのパスをしてすれば実行できる。 $.evalFile引数の中にさらにjsxパスの引数を入れつつクオートで挟まないといけないのでECMA2015m以前だとテンプレート文字