AdobeGeneratorBitmaps

最近、画像書き出し機能として話題になった「Generator」ですが、調べていくうちに面白みに浸かってしまったので、ひとくぎりとしてGeneratorの構想と使用感をまとめておきます。

まず「Generator」(生成)で出来るようになったこと。

Photoshop 14.1のファイルメニューの中に「生成>画像アセット」という項目が追加されました。このプラグインでは、Slicyのようにレイヤー名にファイル形式や品質を記述することで、自動的に画像ファイルを生成しています。これを用いることで、時間のかかっていたスライス作業の効率が改善されます。

おさらいするとこのような手順で自動書き出しが可能です。

①生成>画像アセットをクリックしてプラグインを有効にします。

スクリーンショット 2013-09-10 12.26.20

②今回の題材はgrowthpushのバッジ。レイヤー名を書いていきます。

スクリーンショット 2013-09-10 12.25.34

 こんな形で、レイヤーやフォルダに名前をつけていきます。品質の設定とかもできるので、詳しくはこちらの記事この進化はズルイ!Generatorテクノロジーを使ったPhotoshop CCの「画像アセット」 – DTP Transit(CC/CS7, Photoshop, Web制作)などを参考に。

スクリーンショット 2013-09-10 12.27.22

③作業ファイルのディレクトリに、ファイル名-assetsフォルダが生成されています。

スクリーンショット 2013-09-10 12.25.46

④asssetフォルダの中をみてみると、規則にのっとった名前をつけたレイヤーが全部書きだされています。シャドウなどのアピアランスもしっかり含まれた状態でかきだされています。

スクリーンショット 2013-09-10 12.25.25

■画像アセットの課題

めちゃくちゃ便利機能ですが、やっぱり単一機能だとSlicyが持つ機能に比べると見劣りしてしまう。とくに、

・書き出し領域の指定。

Slicyにある書き出し領域の指定で、「@bounds」の代替が今のところ見当たらないので辛い方も多いと思います。この辺りはそのうちアップデートされないと困りますね。

画像アセットはとても便利な機能追加ですけど、それだけじゃない!今回はGeneratorの奥行きを感じてもらうために、感じた範囲でGeneratorの構想をひもときます。

Photoshop 14.1から追加されたAdobe Generatorとは何なのか?

結論をさきにいうと、「Generator」という言葉にもあるように、使用感としては何かを生成することに特化したPhotoshopのためのJSライブラリで、具体的にはユーザのイベントを検知してより柔軟性の高い拡張機能開発ができるという構想です。というわけで、画像アセットの書き出しはそのいち部分という位置づけになります。

■フォトショユーザーからの見え方。

名称未設定-1

表の見え方はこのような感じで、おそらく「Generator」によるワークフローの改善機能はこれからたくさんでてくると思われます。

Generator-画像アセット公開時に、Node.jsベースで動いていることも添えられていましたが、「Node.jsからどうやってPhotoshop操作してるの?」って気になるじゃないですか。

■デベロッパーからの見え方

デベロッパーサイドからみてみると、GeneratorにはPhotoshop上のイベントを非同期でつかみ、ExtendScriptを実行させやすい環境がととのっています。

まだ大枠しか理解できてないですが、概念図的には下のような感じです

スクリーンショット_2013-09-20_20.55.42

・Photoshop Sever

 →iPhoneやAndroid等のデバイスなどから、リモートコネクトが可能に。

・Generator

 →PhotoshopEventの監視が可能に(レイヤー操作したとか、ジェネレータメニューの状態が変わったとか。)

・ExtendScript

 →おなじみPhotoshopの操作。

Generatorが浸透した世界

これまで、ExtendScript単体でなかなか実現できなかった非同期処理が、Generatorを通すことでかなり簡単に出来るようになります。ですので、例えばPhotoshopで作ったものを、iphone画面上で配置の微調整を行えたり、作業ログ記録を作業者のアクティビティにあわせて行えたり、と夢が広がりまくりです。

インストールの説明は省きますが、ユーザー自身がGeneratorプラグインを開発することができます。公開されているリポジトリはここにあります。

手順はひとまずこちらに Script your first Adobe Generator plugin for Photoshop – Tom Krcha

実際試しに動かしてみた。

スクリーンショット 2013-09-20 14.19.38

試しにコンソールにログを出力してみましたが、ユーザーの動き・ファイルの動きなどをガンガン掴んでくれています。レイヤー移動などの細かなところまでちゃんと出力されています。

僕が実現したかった事を可能にしてくれて本当に嬉しい。

せっかくなので導入方法については今度まとめます。