Adobe Photoshop CC 2015 エクステンション開発 ハマりどころ


# エクステンションの種類と概要

まずは、エクステンションの種類を確認したいと思います。
こんなところでしょうか、他にもありましたらご指摘お願いします。

|タイプ|概要|
|:-----------|:------------|
| ExtensionScript | jsxと呼ばれるスクリプトファイル |
|Generator|Photoshopに内蔵しているNodeJSを使って処理を行う、イベント検知型（画面はない？）|
|カスタムGUI(CEP※1)|HTMLを使ってGUIがつくれる、Node.jsを使うことも可能|
|develop by SDK|未調査|

## jsx
- 自動処理スクリプト、要はマクロ、操作内容をコマンド出力してくれるプラグインなどと併用すると便利そう。
- [Photoshopによる定形作業をスクリプト（JSX）で自動化する] (http://syotaro.ruhoh.com/posts/20130217-tips-photoshop-script/)


## Generator

Generator≠生成ではないので注意、GeneratorはNode.jsサーバを指します。
これについて詳しく紹介されている記事 [Node.js＋Photoshop: Generatorの設計と使い方](
http://aphall.com/2013/10/generator%E3%81%AE%E8%A8%AD%E8%A8%88%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9/)

- レイヤーを選択した、レイヤーに変更を加えたなど主に加工に関わる操作をした際に発行される  `imageChanged `
- 主にツールパレットでツールを変更した際に発行される`toolChanged `
- 選択しているPSDを切り替えた際に発行される`currentDocumentChanged `  
他にも色々ありますが、このようなイベントに対して拡張機能をつくるのがこのGeneratorになります。  
-[Photoshop Generatorプラグインの作り方](https://codezine.jp/article/detail/7545?p=4)  
-[サンプルソース](https://github.com/deconcepter/generator-first-plugin)

## カスタムGUI(CEP※１)

<strong>これが今回一番やりたかったこと</strong>

まずはこの記事で概要を確認します。[CEPガイド１：紹介と技術の概要](http://aphall.com/2014/08/cep-5-overview/)

<strong>Photoshop CC 2015では色々とハマるところがあるので注意です。</strong>

### ハマったポイントはコチラ
- CC 2015からnode.jsがデフォルトでサポートされなくなっている。
- CC 2015からzxp化されていない、プラグインは追加出来ないようになっている。CC 2014まではextensionフォルダにいれるだけで使えたらしい、、、
- CC 2015からExtension Managerが使えなくなった。コマンドラインで(ExManCmd)でのインストールすることになっている。
- Creative Cloud Extension Builder for Bracketsから生成する、雛形のバージョンがCC 2015に対応していない
- [ZXPInstaller](http://zxpinstaller.com/)で証明書エラーがでる、ZXPInstallerはExManCmdのラップしただけのGUIツールのようだが、上手く行かない時はろくなエラーを出さないので、原因究明が困難になります。Adobe labから提供のExManCmdを使うのが吉。


### 私の体験から得た、CEPプラグイン開発の最短ルートは以下のようになりました。
１.[brackets](http://brackets.io/)をインストール
２.bracketsに[Creative Cloud Extension Builder for Brackets](http://davidderaedt.github.io/CC-Extension-Builder-for-Brackets/)プラグインをインストール
３.まっさらなプラグインを作成、プラグインの出力先は次のようになっています。  

```
~/Library/Application Support/Adobe/CEP/extensions/
```

４. CSXS/manifest.xmlのバージョンの修正、ターゲットが古くなっているはずなので次のように変更しました。

``` 
            <Host Name="PHXS" Version="[15.0,16.9]" />
            <Host Name="PHSP" Version="[15.0,16.9]" />
```

nodeを使用する場合は、<resources>内に下記の記述を追加

``` 
<CEFCommandLine>
  <Parameter>--enable-nodejs</Parameter>
  <Parameter>--mixed-context</Parameter>
</CEFCommandLine>
```

５. コマンドラインツールをダウンロード
- http://www.adobeexchange.com/ExManCmd_mac.zip
- http://labs.adobe.com/downloads/extensionbuilder3.html

「ExManCmd_mac.zip」と"Download CC Extensions Signing Toolkit for Mac"から「ccextensionsmac.zip」をダウンロード&解凍してください。

ExManCmdとZXPSignCmdが次の作業で必要になるのでフォルダを統合してもらっても構いません。 

６. セルフサイン証明書(.p12)を作成する。

```
# ZXPSignCmd -selfSignedCert 国 地域 組織 名前 パスワード 出力ファイル名
./ZXPSignCmd -selfSignedCert JP Tokyo company name password myCert.p12

```

７. パッケージング

```
# ZXPSignCmd -sign ソース 出力ファイル名 証明書 パスワード
./ZXPSignCmd -sign "../extensionSource" myExt.zxp myCert.p12 password
```

８.インストール

```
# ExManCmd --install zxpファイル
./ExManCmd --install myExt.zxp
```

９．Photoshopの再起動
<strong>２回目移行のインストールの場合は、再起動が不要になる場合がありますが、zxpを新規インストールする場合は反映されないことがあますので</strong>念の為再起動してください。


- 作りかけのプラグイン
NodeGitを使ったpsdファイルをgit管理するツール、まだ`未完成`の為ソースコードの公開はしばらく先になりそうですw

![unspecified-1.png](https://qiita-image-store.s3.amazonaws.com/0/49384/9ff5ed96-5278-a289-fdbd-6415ef5368fa.png "unspecified-1.png")


### 用語
※１CEP（Common Extensibility Platform・共通拡張プラットフォーム）


### 参考にしたサイト
- [PhotoshopExtensionのつくりかたとか](http://qiita.com/tanishi/items/e0e9167d5d76a94f6265)
- [Photoshopによる定形作業をスクリプト（JSX）で自動化する] (http://syotaro.ruhoh.com/posts/20130217-tips-photoshop-script/)

- [Photoshop Generatorプラグインの作り方](https://codezine.jp/article/detail/7545?p=4)
- [RSSリーダーのサンプル](https://github.com/Adobe-CEP/Samples/tree/master/RSSReader)