【ウェブデザイナーに嬉しい】Photoshopの自動画像生成だとICCプロファイル付かないので、node.js経由で生成する。

どうも、
Photoshopも一部をオープンソースで開発し始めているんですね。

便利な世の中になったなぁ。　なら、その機能を早速使ってみよう。

#Adobe-Photoshop / Generator-core
https://github.com/adobe-photoshop/generator-core

Adobe Photoshop CC 2014くらいから**Generator**というものが標準装備されまして、任意のレイヤー名の後ろに`.jpg`とかつけるだけで、それを画像として吐き出してくれるようになっています。　もちろんレイヤーごとなので、背景透過とかもきちんとされている嬉しさ。

詳しくはこちらの記事をどうぞ:
[ベテランほど知らずに損してるPhotoshopの新常識（4）まだスライスで消耗してるの？「画像アセットの生成」でスライス不要のサクサク切り出し:
https://blogs.adobe.com/creativestation/dtp-photoshop-kihon-tips-04](https://blogs.adobe.com/creativestation/dtp-photoshop-kihon-tips-04)


ただし、この機能はデフォルトだと**生成された画像にICCプロファイルが付かない**のでウェブ業界で使うには**致命的**でした...そう。

＿人人人人人人人人人人人人人人人人人人人人人人人人＿
＞　 作ったイメージと生成されたイメージの色が違う!　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

どうやら標準の機能をoffにして、自分でソースコードから使えるようにするとちゃんと設定できるようになるらしいので、やってみましょう。

デザイナーさん向けにできるだけ詳しく手順を書きます。

#Photoshopの設定をいじる
・Photoshop CCのバージョンが2015.5なのを確認してください。
(もしくはアップデートしてください。)
・まずは環境設定のプラグインsにある`Generatorを有効に使う`をオフに
・`リモート接続を有効にする`をオンに
・パスワードはpasswordに変更
こんな感じ
![Screen Shot 2016-06-23 at 8.09.12 PM.png](https://qiita-image-store.s3.amazonaws.com/0/63543/268176c2-a414-6cfa-49a8-268efc392f85.png)
・Photoshop再起動

#黒い画面:ターミナルで準備
Macならデフォルトでターミナルというアプリケーションが入っています。
![Screen Shot 2016-06-23 at 8.24.23 PM.png](https://qiita-image-store.s3.amazonaws.com/0/63543/3c2c01e5-711c-248c-fb18-345afa07249a.png)

そちらを起動して、一行ずつ実行していきます。入力するときに`$`サインは入りません

```bash
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

$ brew update
$ brew upgrade
$ brew install node, git 
$ node --version
$ npm --version
$ git --version

$ cd /Applications/Adobe\ Photoshop\ CC\ 2015.5/Plug-ins
$ mkdir generator
$ cd generator
$ git clone https://github.com/adobe-photoshop/generator-core.git
$ cd generator-core
$ npm install

$ cd ../
$ mkdir plugins
$ cd plugins
$ git clone https://github.com/adobe-photoshop/generator-assets.git
$ cd generator-assets
$ npm install
```
ここまででインストール完了


ここからプログラム起動

```bash
$ cd /Applications/Adobe\ Photoshop\ CC\ 2015.5/Plug-ins/generator/generator-core/
$ node app.js -v -f ../plugins
```
するとこんな感じのメッセージが出ます。

```js
Parsed config file: /Users/tawago/generator.js                      
[debug:core 20:35:03.846 generator.js:103:17] Launching with config:
{
  "generator-assets": {
    "svg-enabled": true,
    "svgomg-enabled": true,
    "css-enabled": false,
    "use-smart-scaling": false,
    "include-ancestor-masks": false,
    "allow-dither": false,
    "use-psd-smart-object-pixel-scaling": false,
    "use-pngquant": true,
    "convert-color-space": true,
    "webp-enabled": false,
    "interpolation-type": "bicubicAutomatic"                          
  }                                                                 
}                                                                   

```

実はこれではまだICCプロファイルが追加されないので、一旦プログラムを止めます。
`control+c`を押してください。

で、おそらくFinderのユーザー部分に`generator.js`というものがひょっこりあると思うので、
そちらをメモ帳なりなんなりで編集します。
![Screen Shot 2016-06-23 at 8.50.45 PM.png](https://qiita-image-store.s3.amazonaws.com/0/63543/196b524d-b8d5-a6b8-9c39-14935ab2dc1a.png)


`"use-flite": true, "icc-profile": "sRGB IEC61966-2.1", "embed-icc-profile": true`  
を追記することで生成される画像にICCプロファイルが付与されるようになります。


もう一度ターミナルで `$ node app.js -v -f ../plugins`を実行しましょう

```js
Parsed config file: /Users/tawago/generator.js                      
[debug:core 20:35:03.846 generator.js:103:17] Launching with config:
{
  "generator-assets": {
    "svg-enabled": true,
    "svgomg-enabled": true,
    "css-enabled": false,
    "use-smart-scaling": false,
    "include-ancestor-masks": false,
    "allow-dither": false,
    "use-psd-smart-object-pixel-scaling": false,
    "use-pngquant": true,
    "convert-color-space": true,
    "webp-enabled": false,
    "interpolation-type": "bicubicAutomatic", 
    "use-flite": true,
    "icc-profile": "sRGB IEC61966-2.1", 
    "embed-icc-profile": true                                       
  }                                                                 
}                                                                   

```
こうなっていれば、photoshopで普通に`ファイル > 生成 > 画像アセット`のメニューが使えるようになっています。

#結果
適当なボタンの画像で比べてみました。

デフォルトの画像アセット生成機能: ICCプロファイルなし
![top.jpg](https://qiita-image-store.s3.amazonaws.com/0/63543/f322e2da-1c7b-0920-8c06-ebe6f69d93c1.jpeg)

ソースからインストールした画像アセット生成機能: ICCプロファイルあり
![top2.jpg](https://qiita-image-store.s3.amazonaws.com/0/63543/fd31d3a2-31de-86ba-7a49-183d38f0b6cc.jpeg)
　
きちんと色が出るようになりましたね。　わーい^q^



--
Mac BookproのRetinaで見たら違いがわからなかったので、端末によっては上の画像の違いが分かりづらいかもしれません。

書いてみてから思ったけど、もしかしたらこんなことしないで`generator.js`だけいじればいけるのかもしれない...