大量のデータを処理する時に必ず直面するのがフォルダー内のファイルをサブフォルダーまで遡って全て取得する方法である。今回再帰的にファイルを取得する方法をパネル側、jsx側の両方で解説する。パネル側の方はNode jsのネイティブモジュールを使用する事で簡単にファイル情報を取得できる。 おおよそよくある再帰的処理なのですが解説。まずウインドウダイアログから該当のフォルダーを選択。事前にファイルリスト用の空の配列を作成。再帰的にフォルダーからファイルを取得関数に事前にウインドウから取得したフルパスを指定（f.data[0]となっているのはウインドウから取得したデータオブジェクト型でdataプロパティ
Extension自体クロームベースで動いている事自体は述べました。もちろんhrefでリンクを開くこともできます、しかしwebブラウザ上で開くのはともかくExtension上で開くとどうなるのか？ 結果 webサイトをパネル上で開く事ができました。ただし実用性もあまりない気もします。ただしパネル上にURLのリンクを貼ってブラウザ上でリンクを開きたいといった事はあると思います。実は別途方法があります。 onClickでwindow.cep.util.openURLInDefaultBrowserを登録するだけで対象の属性をクリックした時にブラウザ上にリンクを開いて誘導する事ができます。自作のEx
今回はスクロールバーの見た目を変えて見ます。こちらもあまりweb上で見かけないのはクロスブラウザ問題が深刻だからです。MDNのサイトでも使用自体勧められていません。fire foxで使用出来ないのはかなり問題ですがご存知の通りCEPはクロームベースなので関係ありません。webサイトのスクロールバーをいじることじたい抵抗があるかもしれませんがExtension上ではアプリと割り切っていじっても良いでしょう。それではhtmlとcss html css overflowでリストの中身が溢れた時にscroll表示するようにしました。それではこのdiv要素のスクロールを変えてゆきます。 id listに
続いてスライドバーを作ります。input type=”range”でスライドバーのフォームが用意されているのですがあまりwebサイトで見かけた事がないと思います。このスライド、各ブラウザで見えかたが大きく異なったりしてクロスブラウザ問題を考えるとかなり扱いずらいフォームだとは思います。しかしCEPはクロームベースで動いているのでこういった問題は殆ど気にしなくてもいいのがメリットです。 valueでデフォルトの数値、 minで最小値の設定、 maxで最大値の設定 stepで一ステップ事の数値を設定できます。ちなみにデフォルトの状態が以下になります。 見えかたはクロームに依
topcoatのライブラリーを使用すれば自作でcssを用意しなくても便利なフォームデザインが用意されているのは前回述べた通りです。それでも自前でデザインしてみたい場合のカスタマイズについて述べます。ちなみにtopcoatを使用ずる場合はdisabled時やチェック時のフォームの反応やクリックした時の反応等全て事前に用意されているのでこれら全て自前でカスタマイズするとなるとそれなりの労力になる事は覚悟してください。 まずhtml チェックボックスをふた通り用意しました。それぞれ大きくカスタマイズするのでlabel要素の中にdivも一緒に挟んでいます。labelで一緒に挟む事によりdivをクリック
前回一部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の作成。