エクセルの表がどのように読み込まれるか図を上げ直しました。読み込まれた際にはオブジェクト形式でA1,A2,A3,A4….A列の次はそのままB1,B2B3….と各セルがそのまま連続して読み込まれます。これを前回A列、B列と縦列毎に分けました。 以降B,C,Dといった各列のデータ 前回オブジェクトデータの中にMapデータとして各列を整理しました。 因みにAの次にIになっているのはそもそもオブジェクトのプロパティの列挙順が保証されていないためアルファベット順に列挙されたりするわけではないからです。配列のようにsortメソッドも存在しないのでこの辺の処理を気をつけなければなりま
エクセルの表と照らし合わせながらAdobeのソフトでレイアウトを決めたりデザインする作業というのも世の中沢山あるかと思います。というわけで今回はxlsデータをExtensionで読み込んでパネル上に表示させたいと思います。 今回xlsデータの読み込みのためにxlsxモジュールをNodeから使用することにしました。という事でまずはインストール。 インストールしましたらCEPの環境もNode.jsが使用できるようにmanifest.xml等の調整もします。 また今回サンプルのエクセルデータとしてこちらのページから第3章の国民経済計算のエクセルデータを使用しました。 まずはxlsxを読み込みましょう
古い記事ですが古籏氏のPhotoshopのjavascriptでフィルターを作ろうという記事があってjavascriptでの画像処理のやり方がこちらに載っています。 ただ記事を読めばわかるのですがjavascriptですと処理時間がかかりすぎて実用的なものにならないという結論に至っています。2009年の記事なので今ならjavascriptエンジンも改善されているのではと思う方もいるかもしれませんがjsxに関しては現状特にこれといって何も改善されていないので（未だにecma3ですよ）ピクセルを一つずつ操作する処理はなかなか難しそうです。以下記事を参考にしたもっと簡単なピクセル処理のコードです。4
今回はjsx側からファイルを再帰的に取得したいと思います。基本的なやり方はパネル側と変わりませんが仕様がいろいろ違ってややこしいとは思います。 まずパネル側がecma2015だったのに対してこちらはecma3なので大分古臭く見えると思います。(wwww まずウインドウダイアログですがjsxですとFolder.selectDialogで呼び出して変数に選択したフォルダーのパスを代入できます。 この後にこのパスを元にファイルリストを取得してゆきます。ファイル取得関数はjsxですとフォルダーオブジェクトに専用のgetFilesメソッドが用意されているのでフォルダーパスを元にgetFilesメソッドで
大量のデータを処理する時に必ず直面するのがフォルダー内のファイルをサブフォルダーまで遡って全て取得する方法である。今回再帰的にファイルを取得する方法をパネル側、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の作成。