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以前だとテンプレート文字
Extensionのパネルは一度閉じるとパネル上の進捗データ等を一度リセットしてしまいます。（フォームを操作した後の結果等）もちろんデータベースやjsonに結果を記録して立ち上げる時に前回の操作内容を記録するという事もできますがそこまでする程の内容ではない時は persistenceという機能があるので見てます。このpersistenceをonにするとパネルを閉じた時の内容をPhotoshop自体が終了するまで一時的に保管してくれるので短時間に何度もフォーム操作が必要なパネル等に使用するといいでしょう。以下コードになります。 CSEvent からインスタンスを作成。extensionのidをc
前回jsxからincludeで外部jsonを読み込みましたがパネルとの連携時はinclude自体がエラーになってjsxからの読み込みができなくなってしまいます。jsx単独の開発でしたらいくつかのよく使う関数やオブジェクトを外部scriptとして読み込んでコードを見やすくする事が可能ですがExtension開発時にはそれができません。jsx自体の処理をいくつかのファイルに分けて処理事に呼び出すjsxを変える事も可能ですがやはりメインのjsx自体のコードは長くなりがちになってしまします。前回の続きに戻りますが前回jsonの扱いをincludeで読み込んでパースしましたがパネルとの連携時はどうやって
