今回は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で読み込んでパースしましたがパネルとの連携時はどうやって
今回jsx側のデバッグについて説明します。まずhtmlパネル側からjsxを呼びましょう。デフォルトで呼び出すメソッドが用意されています。 csInterface.evalScript(“sayHello()”); csInterfaceのevalScriptメソッドでmanifest.xmlで登録したjsx内の関数を呼び出せます（この場合sayHello関数）。 function sayHello(){ $.writeln(“test_…check”); alert(“hello from ExtendScript”); } sayHello関数の中にwritelnメソッド（console
デバッグの方法に入ります。.debugというファイルがフォルダの中にあると思います。 各種ソフトウェアのコメントの下にhost nemとport番号が書いてあります。Extension立ち上げ後、各種ソフトウェアに対応したport番号にアクセスする事でコンソールやエラーの内容を確認できます。 Photoshopの場合ブラウザでlocalhost:8088にアクセスしますとデバッグをブラウザ経由でできます。 console.logの出力も このように出力されました。通常のwebsiteを作成するようにcssの確認もブラウザでできます。リロードは一度Extensionパネルを閉じた後にもう一度パネ
一通り環境設定の説明も終わったのでCSS関係の解説もしたいと思います。まずthemeManagerから。 themeManager.jsがデフォルトでjsフォルダに入っていると思います。 csinterfaceと共にthemeManager.init関数がデフォルトで呼び出されているはずです。このデフォルトの状態でPhotoshopの環境設定カラーを変えてみます。 環境設定のウインドウカラーに合わせてカラーが変わりました。特に何も意図がなければtopcoat等のCSSライブラリをそのまま使うと周りのウインドウに合ったデザインパネルをそのまま使用できるのでオススメです。今後Extensionの開
今回はトランスパイルやら何やらの環境構築をしたいと思います。前述の通りCC2017ですらECMA2015もまともに動かないのでAdd on等で公開する事を前提に開発する私としてはトランスパイル自体必須の作業です。 ここの階層にmoduleなんかを設置していきます。というわけでまずはpackage.jsonを作成 トランスパイラですが私はいつもwebpackで環境構築しています。babelのついでにCSS向けのベンダープレフィックス対策やsassの使用環境構築なんかもしてゆきます。このあたりの環境構築に関しましてはicsさんの記事を参考にしました。 babelのインストール。 sass load