火曜日, 10月 06, 2009

レイヤーカンプからWeb用のJPEGに書き出すJavaScript

Webデザイン(ワイヤーフレームから絵を起こす作業)はPhotoshopで常人の理解を超える数のレイヤーを駆使して行われます。そしてそれをコーダーと呼ばれる人達に渡してブラウザで動くようにしてもらったり、クライアントに対してこのデザインでいいですかという確認をとるために、マウスオーバーでこうなって、ボタンを押すこうなる、みたいな流れがわかるようにJPEGでスクリーンショット的な画像を書き出します。このような場合に「レイヤーカンプ」という機能を使い、それぞれのシーンを作っておくと便利です。

で、いつもJPEGに書き出す際に「Webおよびデバイスに保存...」をしてるのですが、数が増えてくると面倒(一度本当に嫌な思いをしました)なので、レイヤーカンプから自動でシーン毎のJPEGを書き出してくれるスクリプトを書きました(その時に書けば良かったです)。
「別名で保存」と同じようなものは既にファイルメニューにありますが、Webおよび...のやつがなかったので(少し変えればPNGなどにも書き出せます)。
exportLayerComp.jsx

使い方:
1.上の.jsxファイルをどこでもいいので保存して下さい。
2.Macの場合はホーム(デスクトップではありません。家のアイコンの場所)に、Windows場合はC:直下にlayercompsという名前のフォルダを作ります。ここに画像ファイルが書き出されます。
3.Photoshopのメニューからファイル>スクリプト>参照...を選びます。
保存したexportLayerComp.jsxを「読み込み」でレイヤーカンプにつけた名前の通りのjpgが書き出されます。
ファイル名はレイヤーカンプと同じ名前になります。日本語だったり長過ぎるとうまくいかないかも知れないです。書き出されるフォルダの位置や名前を変えたい場合は、任意のテキストエディタでexportLayerComp.jsxを開き、
filePath = ""
の二重引用符内を好きなフォルダのパスに置き換えて下さい。
Windowsの場合は\(または¥)に注意して下さい。一つだと次の文字が特殊文字として扱われてしまうので、階層の区切りには2つ入ることになります。

デフォルトでの書き出しの設定は普通にWebおよび...をした時と同じにしてあります。
画質を変更したい場合は、
exp.quality = 70;
の値を0から100の範囲で指定して下さい。

exp.format = SaveDocumentType.JPEG;
のJPEGのところを変更すればCOMPUSERVEGIF, PNG-8, PNG-24, BMPで書き出しできます。ファイルの拡張子を追加している".jpg"のところも合わせて変えるのを忘れずに。

細かい設定などはAdobe Photoshop CS3/スクリプティングガイドフォルダ内にPhotoshop CS3 JavaScript Ref.pdfというのがあるので参照して下さい(106ページ)。ここからダウンロードもできます。

下記のサイトを参考にしました。
Adobe Photoshop CS3自動化作戦
PhotoShop JavaScript(ExtendScript):Note - ホコホコ hoko-hoko

書き出すファイルや画質の設定をGUIでできるようにしたいのだけど、それはまた次。
こういう感じで社内のワークフローを楽にしてくれる専門の人っていないのかな。