吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Photoshop拡張機能】拡張パネルの作り方(HelloWorld)

2013年5月27日 / category : jsx

Photoshopの拡張パネルの作り方を紹介いたします。

1.Adobe Flash Builderを起動する。(私の環境のバージョンは4.7です。)
「ファイル」→「新規」→「Flex プロジェクト」を選択する。

プロジェクト名:「HelloWorld」
プロジェクトの場所:任意のフォルダを選択する。
(私の場合は C:/works/photoshop/Plug-ins/Panels/HelloWorld )
アプリケーションの種類:「Web」
Flex SDKのバージョン:「特定のSDKを使用する」を選択し、「Flex3.6A」をプルダウンから選択する。

2.CSXSLibrary.swcをFlexプロジェクトのlibsフォルダに格納する。
CSXSLibrary.swcとは、AS3とPhotoshopのJSXの相互作用を橋渡しするライブラリファイルです。

2-1.下記のadobeのサイトを開く
http://www.adobe.com/devnet/photoshop/sdk.html

2-2.「Download the Photoshop CS5 SDK for Windows」をクリックし、「adobe_photoshop_cs5_sdk_win.zip」をダウンロードする。
2-3.下記の場所に「CSXSLibrary-2.0-sdk-3.3.swc」が格納されているので、コピー。
/adobe_photoshop_cs5_sdk_win/flashpanels/libraries/CSXSLibrary-2.0-sdk-3.3.swc

2-4.コピーした「CSXSLibrary-2.0-sdk-3.3.swc」を、Flexプロジェクトの「HelloWorld」フォルダ内の「libs」フォルダにペーストする。
(私の場合)C:/works/photoshop/Plug-ins/Panels/HelloWorld/libs/CSXSLibrary-2.0-sdk-3.3.swc

2-5.Flash Builderの画面に戻り、「パッケージエクスプローラー」パネルの「HelloWorld」プロジェクト「libs」フォルダに「CSXSLibrary-2.0-sdk-3.3.swc」が追加されていることを確認する。
2-6.「パッケージエクスプローラー」パネルの「HelloWorld」プロジェクトフォルダにマウスをもっていき、右クリック→「プロパティ」を開き、プロパティパネルを開く、「Flexビルトパス」をクリックし、「ライブラリパス」のタブをクリックする。「libs」フォルダに「CSXSLibrary-2.0-sdk-3.3.swc」が追加されていることを確認する。

3.AS3のコードを記述する。
HelloWorld.mxmlファイルを開き、下記のコードを記述する。
HelloWorld.mxml → HelloWorld/src/デフォルトパッケージ/HelloWorld.mxml



4.swfファイルを書き出す。
「実行」ボタンをクリックし、swfファイルを書き出す。

下記に「HelloWorld.swf」ファイルが書き出されたのを確認する。
(私の場合)C:/works/photoshop/Plug-ins/Panels/HelloWorld/bin-debug/HelloWorld.swf


5.「HelloWorld.jsx」ファイルを生成する。
下記のコードを記述し、「HelloWorld.jsx」というファイル名で保存する。
※HelloWorld.swfとファイル名を同じにするのがルールです。
保存する場所→(私の場合)C:/works/photoshop/Plug-ins/Panels/HelloWorld/bin-debug/HelloWorld.jsx

6.拡張パネル用のフォルダを保存する。
「HelloWorld」というフォルダを生成し、そのフォルダの中に下記の2ファイルを格納する。

HelloWorld
- HelloWorld.swf
- HelloWorld.jsx

サンプルファイルを下記にアップしましたので、必要であればダウンロードください。
HelloWorld.zip

「HelloWorld」フォルダを下記のディレクトリに保存する。
windowsの場合(CS6)
→ Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Plug-ins/Panels
macの場合(CS6)
→ Applications/Adobe Photoshop CS6/Plug-ins/Panels


7.正しく動作するか確認する。
7-1.Photoshopを起動する。
7-2.「ウィンドウ」→「エクステンション」→「HelloWorld」を選択する。

7-3.「HelloWorld」パネル内の「HelloWorld」ボタンをクリックする。
アラート画面が開き、「HelloWorld!!」のテキストが表示されればOKです。


8.構成図を作ってみました。