カテゴリー:Photoshop 一覧

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

今回はトランスパイルやら何やらの環境構築をしたいと思います。前述の通りCC2017ですらECMA2015もまともに動かないのでAdd on等で公開する事を前提に開発する私としてはトランスパイル自体必須の作業です。 ここの階層にmoduleなんかを設置していきます。というわけでまずはpackage.jsonを作成 トランスパイラですが私はいつもwebpackで環境構築しています。babelのついでにCSS向けのベンダープレフィックス対策やsassの使用環境構築なんかもしてゆきます。このあたりの環境構築に関しましてはicsさんの記事を参考にしました。 babelのインストール。 sass load

Read more

Photoshop Extensionの開発5 jsの概要

前回で最低限の環境の構築ができましたがここからパネルのインターフェイスを定義するindex.htmlとmain.jsの中身に触れます。 ぱっと見中身はいたって普通のhtmlファイルですね。パネルのインターフェイスはブラウザ向けのコードと同じようにhtmlとCSSで定義していきます。但しブラウザ向けと異なるのはPhotoshopのExtensionに搭載されているのはクロームベースのエンジンという事でクロスブラウザ対策の必要がそこまで必要ない(但し全く必要ないわけではない)事、スマートフォン向けのコーディングも必要なければSEO対策も全く必要ありません。正しくhtmlのコーディングが出来なくてd

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の部分の前の部分が対応バージョンの一番古いバージョンと後ろの部分が一番新しい対応バージョンですね。Photoshopでいうと16.099.9の部分ですね。ちなみに16.0はPhotoshopですとCC2015になります。各種対

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

Photoshop Extensionの開発1 まずはテキストエディターから

Photoshop Extensionの開発について何回かに分けて載せていこうかと思います。出来るだけ最新の情報も含めて出来るだけ詳細まで載せていく事を考えています。 PhotoshopのExtensionは普通のscriptと違って様々なファイルから構成されています。主に Extensionの情報を管理するXMLファイル パネルのインターフェイスを構成するhtml css パネルの動きをコントロールするmain.js Photoshopの動きをコントロールするjsx デバッグの情報を管理する.debugファイル 色々あってややこしいですが一から作成するのはとても面倒なのでこれらのベースのファ

Read more

Photoshop Extension

過去に仕事で大量の写真画像を加工していたので効率化のためjavascriptでPhotoshop用のExtensionやscriptを開発していました。開発していたExtensionはAdobe add on にて申請、発表しています。それでExtensionとは何ぞやという話なのでscriptがPhotoshopをjavascript等の言語で動かすファイルそのものを指しているのに対してExtensionはscriptを動かすためのフォーム要素の様なインターフェイスパネルも作成してよりユーザーが柔軟にscriptを動かせる様に開発出来るのがExtensionです。(他にも色々違いはありますが

Read more