AssetExpress -PhotoShopの画像書き出し-

# はじめに
この記事で紹介するのはAssetExpressという、PhotoShopスクリプトの紹介です。筆者がWEB制作経験を積む中で、どうも良い書き出しツールが無かったので自作しました。PhotoshpにはGeneratorという画像書き出しの機能が追加されていますが、これはGeneratorを使わない単体のスクリプトです。なので、細かくは確認していませんが、古いバージョンのPhotoShopでも利用することが出来ます。インストールは以下からお願いします。
https://github.com/Takepepe/AssetExpress

# 画像スライスの時間、無駄ですよね。
過去、画像書き出し作業はとても時間と労力がかかっていました。

- 画像名を書き出しの度に考える
- 置きたい場所に、既に同じ名前の画像があった。
- 既にある画像の更新はその画像名を調べる
- 書き出した画像を該当ディレクトリに移動させる
- 簡単なスプライト画像も位置を動かして微調整
- Retina用にサイズ違いを用意する

#  AssetExpressを利用するメリット
- どこに・どんな名前で保存するか考えるのは、最初だけ。
- 冗長な名前をレイヤー1つずつに着けなくて済む。
- 合理的な名前が自然と決まる。（考える必要がない）
- ショートカットを併用して1発書き出し。
- 移動して欲しい場所に直に飛んでいく。
- PSDがhtmlと整合性のある作りに自然となる。
- PSDが整頓され綺麗になる。
- 無料

# 機能紹介
GithubのリポジトリにPhotoshop用のショートカットを用意してあるので、そのショートカットを割り当てていることを前提に解説していきます。

## レイヤーグループ名で画像書き出し
.jpg .png .gif の拡張子が付いたレイヤーグループを書き出しします。グループ内レイヤーの全ピクセルがぴったり収まったサイズで書き出されます。書き出し先は、デフォルトではPSDと同ディレクトリです。以降、拡張子の付いたレイヤーグループを対象グループと呼びます。※レイヤー単体の書き出しには対応してしていません。  
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/f986ae70-14a2-fbba-c18a-2baceb1a6f2b.jpeg)

## Retina対応書き出し
対象グループと同名の画像を@2xサフィックス付きで書き出します。元のPSDは倍の解像度で作る必要があります。ここまでは普通の書き出しツールと機能は変わりません。  
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/10549f39-d35f-0707-3b51-112516053062.jpeg)

## 親グループ名の継承
親グループの名前を参照し、プレースホルダ「^」を置き換えます。「^」がある限り祖先の名前を参照します。cssプリプロセッサのネストからアイデアを得ているので、それと相性が良いです。上手くネストすると、一つ一つのレイヤーに長い名前をつける必要がなく、名前が競合する機会が減少します。  
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/cbe84bae-bfa8-c182-e863-e07eb1a5e8ae.jpeg)

## ファイル名の継承
PSDファイル名を参照します。デフォルトのプレースホルダは「@」です。サンプル画像では親グループを継承しつつPSDファイル名を継承しています。  
![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/a536dd6c-7775-28ba-5551-93c77dfce095.jpeg)

## 書き出し先の指定
名前に「/」が入っていると、ディレクトリと見なします。ディレクトリが無い場合は新たにディレクトリを生成します。相対パス「../」で上の階層に書き出すことも出来ます。  
![5.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/6bbe8eb7-32cc-d733-d4dd-57219ef8e277.jpeg)

## 書き出し先の指定
PSDと同階層に「psd-config.json」というものを用意すると、書き出しするディレクトリを保持出来ます。"images_dir"に相対パスで指定します。その画像が、何という名前で書き出され、どこに保存されているのか、都度気にしなくても修正出来る様になります。「⌥ ⌘,」のショートカットで該当ディレクトリに「psd-config.json」が新規作成されます。  
![6.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/80e0da89-1bd8-ed4c-cd41-db7e0242a0fc.jpeg)

```json:psd-config.json
{
	"*.psd":{
		"images_dir":"./img/"
	}
}
```

## 2枚仕立てのスプライト画像書き出し
ボタンのon・offスプライト画像を、それぞれ「on」「off」というグループ名で対象グループ配下に入れると、上下にくっついた状態で書き出しされます。cssメタ言語でスプライトボタンのmixinを用意しておけば、スプライトボタンを作るのは一瞬で済みます。  
![7.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/6eecbb17-43e2-1c23-d65c-f518312cfd18.jpeg)

## 子階層をまとめて書き出し
スクリプトを発火させた時に選択されているグループ配下の対象グループを全てを書き出します。今のところ、同時に複数枚書き出す方法はこれのみです。孫階層は参照しません。

## ドキュメントサイズで書き出し
スクリプトを発火させた時に選択されている対象グループ名で、ドキュメントサイズのまま書き出しします。子階層まとめて書き出しには対応しておらず、PSDで見えている状態をそのまま書き出します。  
![8.jpg](https://qiita-image-store.s3.amazonaws.com/0/59071/e4f4e458-e79c-a6a0-1846-5cc8d6134f79.jpeg)

## 子フォルダ操作
スクリプト発火時に表示されるGUIに配列を渡すと、その規則に沿ってフォルダを移動させます。ルーチンワークに便利です。配列のセパレータは、スペースとカンマに対応しているので、CSSプリプロセッサで定義した配列をそのまま使うことが出来ます。

## 子フォルダの複製
スクリプト発火時に表示されるGUIに配列を渡すと、その規則に沿ってフォルダを複製します。ルーチンワークに便利です。配列のセパレータは、スペースとカンマに対応しているので、CSSプリプロセッサで定義した配列をそのまま使うことが出来ます。

## psd-config.json
AssetExpressの設定を記述するものです。
先に述べたbase_dirの設定の他に、デフォルトでは画像Qualityや色数が指定出来る様になっています。
プレースホルダを別の記号に変えることも出来ます。設定はワイルドカードの他、psdファイル名を指定し、個別に設定を上書きすることが出来ます。jsonを以下の様に記述すると、「img.psd」は「img」ディレクトリに保存され、jpegの書き出し品質は「60」pngは24ではなく8で書き出しされます。

```json:psd-config.json
{
	"*.psd":{
		"images_dir":"./",
		"bg_color":null,
		"resize_even":false,
		"jpg":{ "quality":80 },
		"gif":{ "colors":256 },
		"png":{ "colors":256, "PNG8":0 }
	},
	"img.psd":{
		"images_dir":"./img/",
		"bg_color":null,
		"resize_even":false,
		"jpg":{ "quality":60 },
		"gif":{ "colors":256 },
		"png":{ "colors":256, "PNG8":1 }
	}
}

```