月別2019年05月 一覧

Photoshop Extensionの開発32 jsxで作成するGUI

html,cssを駆使してExtensionでscriptのインターインターフェイスを作成できますが実はjsxだけでもユーザーインターフェイス作成できます。まずダイアログの作成ですが。 ウインドウ、コンストラクトから引数にdialogでウインドウ(ダイアログ)を作成する事を指示。第二引数にダイアログの名前。第三引数はダイアログの大きさを配列形式で指定。各配列は[右,上,左,下] と角ダイアログの座標に対応しています。詳しくは古籏氏のサイトを参照するといいかと思います。(かなり詳しく載っています) さらに細かいパーツを追加する場合このウインドウオブジェクトから作成したインスタンスにプロパティーを

Read more

Photoshop Extensionの開発31 ScriptingListener

Adobeから無料で配布されているScriptingListenerはPhotoshop上で操作したユーザーの動作を記録してscriptとしてテキストに書き出してくれる。一部のスクリプト開発者の間では有名だがインストールの方法と一部詳細をここに記載する。 プラグインの場所 こちらのAdobeのサイトからダウンロードできる。ScriptingListener プラグインのwin用かmac用のプラグインをダウンロード、解凍したファイルの保存先はAdobeのサイトに記載してある場所に保存。再度Photoshopを立ち上げるとファイル->スクリプトメニューにScriptingListener O

Read more

Photoshop Extensionの開発30 エクステンションでエクセルデータを表示させる

エクセルの表がどのように読み込まれるか図を上げ直しました。読み込まれた際にはオブジェクト形式でA1,A2,A3,A4….A列の次はそのままB1,B2B3….と各セルがそのまま連続して読み込まれます。これを前回A列、B列と縦列毎に分けました。 以降B,C,Dといった各列のデータ 前回オブジェクトデータの中にMapデータとして各列を整理しました。 因みにAの次にIになっているのはそもそもオブジェクトのプロパティの列挙順が保証されていないためアルファベット順に列挙されたりするわけではないからです。配列のようにsortメソッドも存在しないのでこの辺の処理を気をつけなければなりま

Read more

Photoshop Extensionの開発29 エクステンションでエクセルデータを読み込む

エクセルの表と照らし合わせながらAdobeのソフトでレイアウトを決めたりデザインする作業というのも世の中沢山あるかと思います。というわけで今回はxlsデータをExtensionで読み込んでパネル上に表示させたいと思います。 今回xlsデータの読み込みのためにxlsxモジュールをNodeから使用することにしました。という事でまずはインストール。 インストールしましたらCEPの環境もNode.jsが使用できるようにmanifest.xml等の調整もします。 また今回サンプルのエクセルデータとしてこちらのページから第3章の国民経済計算のエクセルデータを使用しました。 まずはxlsxを読み込みましょう

Read more

Photoshop Extensionの開発28 フィルター作成

古い記事ですが古籏氏のPhotoshopのjavascriptでフィルターを作ろうという記事があってjavascriptでの画像処理のやり方がこちらに載っています。 ただ記事を読めばわかるのですがjavascriptですと処理時間がかかりすぎて実用的なものにならないという結論に至っています。2009年の記事なので今ならjavascriptエンジンも改善されているのではと思う方もいるかもしれませんがjsxに関しては現状特にこれといって何も改善されていないので(未だにecma3ですよ)ピクセルを一つずつ操作する処理はなかなか難しそうです。以下記事を参考にしたもっと簡単なピクセル処理のコードです。4

Read more

Photoshop Extensionの開発27 フォルダー内のファイルをJSXから取得する

今回はjsx側からファイルを再帰的に取得したいと思います。基本的なやり方はパネル側と変わりませんが仕様がいろいろ違ってややこしいとは思います。 まずパネル側がecma2015だったのに対してこちらはecma3なので大分古臭く見えると思います。(wwww まずウインドウダイアログですがjsxですとFolder.selectDialogで呼び出して変数に選択したフォルダーのパスを代入できます。 この後にこのパスを元にファイルリストを取得してゆきます。ファイル取得関数はjsxですとフォルダーオブジェクトに専用のgetFilesメソッドが用意されているのでフォルダーパスを元にgetFilesメソッドで

Read more

Photoshop Extensionの開発26 フォルダー内のファイルを取得する

大量のデータを処理する時に必ず直面するのがフォルダー内のファイルをサブフォルダーまで遡って全て取得する方法である。今回再帰的にファイルを取得する方法をパネル側、jsx側の両方で解説する。パネル側の方はNode jsのネイティブモジュールを使用する事で簡単にファイル情報を取得できる。 おおよそよくある再帰的処理なのですが解説。まずウインドウダイアログから該当のフォルダーを選択。事前にファイルリスト用の空の配列を作成。再帰的にフォルダーからファイルを取得関数に事前にウインドウから取得したフルパスを指定(f.data[0]となっているのはウインドウから取得したデータオブジェクト型でdataプロパティ

Read more

Photoshop Extensionの開発25 オープンリンク

Extension自体クロームベースで動いている事自体は述べました。もちろんhrefでリンクを開くこともできます、しかしwebブラウザ上で開くのはともかくExtension上で開くとどうなるのか? 結果 webサイトをパネル上で開く事ができました。ただし実用性もあまりない気もします。ただしパネル上にURLのリンクを貼ってブラウザ上でリンクを開きたいといった事はあると思います。実は別途方法があります。 onClickでwindow.cep.util.openURLInDefaultBrowserを登録するだけで対象の属性をクリックした時にブラウザ上にリンクを開いて誘導する事ができます。自作のEx

Read more

Photoshop Extensionの開発24 css スクロールバー

今回はスクロールバーの見た目を変えて見ます。こちらもあまりweb上で見かけないのはクロスブラウザ問題が深刻だからです。MDNのサイトでも使用自体勧められていません。fire foxで使用出来ないのはかなり問題ですがご存知の通りCEPはクロームベースなので関係ありません。webサイトのスクロールバーをいじることじたい抵抗があるかもしれませんがExtension上ではアプリと割り切っていじっても良いでしょう。それではhtmlとcss html css overflowでリストの中身が溢れた時にscroll表示するようにしました。それではこのdiv要素のスクロールを変えてゆきます。 id listに

Read more

Photoshop Extensionの開発23 フォームデザイン2

続いてスライドバーを作ります。input type=”range”でスライドバーのフォームが用意されているのですがあまりwebサイトで見かけた事がないと思います。このスライド、各ブラウザで見えかたが大きく異なったりしてクロスブラウザ問題を考えるとかなり扱いずらいフォームだとは思います。しかしCEPはクロームベースで動いているのでこういった問題は殆ど気にしなくてもいいのがメリットです。 valueでデフォルトの数値、 minで最小値の設定、 maxで最大値の設定 stepで一ステップ事の数値を設定できます。ちなみにデフォルトの状態が以下になります。 見えかたはクロームに依

Read more