Just Diary

Follow me

Photoshop Extensionの開発11 Persistence

Extensionのパネルは一度閉じるとパネル上の進捗データ等を一度リセットしてしまいます。(フォームを操作した後の結果等)もちろんデータベースやjsonに結果を記録して立ち上げる時に前回の操作内容を記録するという事もできますがそこまでする程の内容ではない時は persistenceという機能があるので見てます。このpersistenceをonにするとパネルを閉じた時の内容をPhotoshop自体が終了するまで一時的に保管してくれるので短時間に何度もフォーム操作が必要なパネル等に使用するといいでしょう。以下コードになります。

C

Read more

Photoshop Extensionの開発10 jsonを通じたパネルとjsxのやりとり

前回jsxからincludeで外部jsonを読み込みましたがパネルとの連携時はinclude自体がエラーになってjsxからの読み込みができなくなってしまいます。jsx単独の開発でしたらいくつかのよく使う関数やオブジェクトを外部scriptとして読み込んでコードを見やすくする事が可能ですがExtension開発時にはそれができません。jsx自体の処理をいくつかのファイルに分けて処理事に呼び出すjsxを変える事も可能ですがやはりメインのjsx自体のコードは長くなりがちになってしまします。前回の続きに戻りますが前回jsonの扱いをincludeで読み込んでパースしましたがパネルとの連携時はどうやって

Read more

Photoshop Extensionの開発9 デバッグの方法(json編)

今回jsx側のデバッグについて説明します。まずhtmlパネル側からjsxを呼びましょう。デフォルトで呼び出すメソッドが用意されています。

csInterfaceのevalScriptメソッドでmanifest.xmlで登録したjsx内の関数を呼び出せます(この場合sayHello関数)。

sayHello関数の中にwritelnメソッド(console.logみたいなメソッド)を呼び出していますがパネル側から呼び出してもブラウザーには出力されません。専用のウインド

Read more

Photoshop Extensionの開発8 デバッグ編

デバッグの方法に入ります。.debugというファイルがフォルダの中にあると思います。

各種ソフトウェアのコメントの下にhost nemとport番号が書いてあります。Extension立ち上げ後、各種ソフトウェアに対応したport番号にアクセスする事でコンソールやエラーの内容を確認できます。 Photoshopの場合ブラウザでlocalhost:8088にアクセスしますとデバッグをブラウザ経由でできます。

console.logの出力も このように出力されました。

Read more

Photoshop Extensionの開発7 CSS編

一通り環境設定の説明も終わったのでCSS関係の解説もしたいと思います。まずthemeManagerから。 themeManager.jsがデフォルトでjsフォルダに入っていると思います。

csinterfaceと共にthemeManager.init関数がデフォルトで呼び出されているはずです。このデフォルトの状態でPhotoshopの環境設定カラーを変えてみます。 環境設定のウインドウカラーに合わせてカラーが変わりました。特に何も意図がなければtopcoat等のCSSライブラリをそのまま使うと周りのウインドウに合ったデザインパネ

Read more

Photoshop Extensionの開発6 トランスパイル編

今回はトランスパイルやら何やらの環境構築をしたいと思います。前述の通りCC2017ですらECMA2015もまともに動かないのでAdd on等で公開する事を前提に開発する私としてはトランスパイル自体必須の作業です。 ここの階層にmoduleなんかを設置していきます。というわけでまずはpackage.jsonを作成

トランスパイラですが私はいつもwebpackで環境構築しています。babelのついでにCSS向けのベンダープレフィックス対策やsassの使用環境構築なんかもしてゆきます。このあたりの環境構築に関しましてはicsさんの記事

Read more

Photoshop Extensionの開発5 jsの概要

前回で最低限の環境の構築ができましたがここからパネルのインターフェイスを定義するindex.htmlとmain.jsの中身に触れます。

ぱっと見中身はいたって普通のhtmlファイルですね。パネルのインターフェイスはブラウザ向けのコードと同じようにhtmlとCSSで定義していきます。但しブラウザ向けと異なるのはPhotoshopのExtensionに搭載されているのはクロームベースのエンジンという事でクロスブラウザ対策の必要がそこまで必要ない(但し全く必要ないわけではない)事、スマートフォン向けのコーディングも必要なければSEO対

Read more

Photoshop Extensionの開発4 デバッグモード

ここまでで一通り開発の前準備はできました。この段階でPhotoshopを起動してウインドウ>エクステンションを見ると先程追加したExtensionが追加されるはずです。但しこの段階で該当のExtensionを選択してもエラーが出て起動できないと思います。Extension自体に作者の署名等が無い場合通常起動できません。なので無署名のExtensionを起動させるにはPlayDebugModeを設定しないといけません。詳細は公式サイトに書いてありますが初見ですとよくわからないと思います。それで詳細ですがWindowsの場合検索フォームから(スタートアップボタンの横にあるフォーム)からreg

Read more

Photoshop Extensionの開発 3 manifest.xml

それではCSXSのフォルダ内にあるmanifest.xmlを設定します。

  MS VSCodeのプラグインでつくるとこのようなxmlができます。まずCEPというExtension自体と各種ソフトの対応バージョンを設定しましょう。今回Photoshopのみ対応のExtensionを開発するのでそれ以外は コメントアウトになっています。 以下が該当の部分ですね。  

versionの部分の前の部分が対応バージョンの一番古いバージョンと後ろの部分が

Read more

Photoshop Extensionの開発2 フォルダ作成

Microsoft Visual Studio Code からCC Extension Builder をダウンロードしてExtensionの開発環境を整えましょう。 CC Extension Builderダウンロード後にshift + command + pを押すと上のウインドウがアクティブになってExtension Creator create a New CC Extensionが選べると思います。 Brackets で開発する場合Extension Builderをダウンロード後に上のメニューにACC Extension Builderの項目が追加されます。 各種プラグインを起動後、

Read more

Other link
Close