はじめまして！！
2012年度に新卒で入社し、今現在はサイバーエージェントの子会社である株式会社シロクにて、「My365」という写真日記アプリのUIデザインを担当している石山（@t_ishiyama）と申します！
My365とは？ http://my365.in/
iPhone, Androidなどのスマートフォンで撮影した写真を、1日1枚ずつカレンダーに貼って共有できる写真投稿アプリです。
撮った写真はフィルターを用いてポラロイド風に加工ができ、ブログや日記よりもかんたんに思い出を残していくことができるサービスです。ぜひダウンロードしてみて下さい！
はじめに
My365がリリースから運用段階に入り、私の業務内容もMy365の新機能追加や改善がメインになっています。
しかし、UIデザイン業務の性質上、成果物でしか周囲が評価できない可能性が高く、ワークフローが不明瞭になりがちです。
シロクではこの問題をクリアにするために、PhotoshopScriptを用いてUIデザイン作業のロギングを行なっています。
まず、Adobe PhotoshopでサポートされているScriptは、大きくわけて３つあります。
- AppleScript / MacOS
- Javascript / Windows & MacOS
- VBScript / Windows
横断的なプラットフォームを考慮するならば、JavaScript一択となります。
詳しくはAdobe社が出している、PhotoshopScriptingGuideを御覧ください。
今回紹介するPhotoshopScriptでできること
・「⌘Command+S」をトリガーに、PNG画像の自動書き出し。
出力されたPNG画像を時系列に見返すことで、UIデザインのワークフローを自身で振り返ることができます。
具体的には、作業中のpsdファイルが保存されている同じ階層のpngフォルダ(無ければ生成)に、⌘Command+Sを押すたびにファイル名＋日時情報が付与されたPNG画像が出力されます。
準備
1.Ctrls2png.jsxを用意
Ctrls2png.jsxを、Adobe ExtendedScript Toolkitやテキストエディタで記述し、デスクトップ等に保存してください。ソースは以下。
Ctrls2PNG.jsx
/*
Ctrls2PNG.jsx
ctrl+sでPNG画像をpngフォルダに自動吐き出し for MacPhotoshop
version: 0.9
Author : Takahiro Isihiyama
Mail : ishiyama@sirok.co.jp
導入方法:
1:スクリプトをhogehoge.jsxとして保存
2:Applications/Adobe Photoshop CS5.1/Presets/Scripts/ に移動
3:photoshopの キーボードショートカットのCTRL+S に割り当て
!ver0.9 bugReport!
**ドキュメントを保存してないとエラーが出ますが、ドキュメント保存をしていれば正常に動きます**
*/
#target photoshop
//ドキュメントが開かれているかどうか判別
if (app.documents.length == 0){
}else
{ main(); }
/****************/
function main(){
//編集中のファイル情報の取得
var docObj = activeDocument; //ファイル情報取得
//flag = docObj.saved;//ドキュメントが保存されているかどうか
//if(flag == true){
var docPath = docObj.path; //ファイルパス
var docName = docObj.name; //ファイル名
var date = dateClass(); //現在時刻の取得
publishPng(date, docPath, docName);//PNGパブリッシュ
//上書き保存
docObj.save();
//}
return 0;
}/* fin main */
//現在時刻の取得
function dateClass(){
dTbl = new Array("日","月","火","水","木","金","土");
dObj = new Date();
while((new Date()).getTime() < dObj.getTime() + 1000*5){ //timeOut5秒
//日時の振り分け
year = dObj.getYear();
year2 = (year < 2000) ? year + 1900 : year;
month = dObj.getMonth() + 1;
day = dObj.getDate();
day2 = dTbl[day];
h = dObj.getHours();
m = dObj.getMinutes();
s = dObj.getSeconds();
//alert(year2 + "年" + month +"月" + day +"日"+"("+day2+")"+ h+"時"+m+"分"+s+"秒");
//new Date()の元データを保持
dateRaw = year2+"-"+month+"-"+day+"-"+h+"h"+m+"m"+s+"s";
break;
}
return dateRaw;
}/* fin dateClass */
//png保存
function publishPng(date, docPath, docName){
folderName = docPath +"\/png\/";
folderObj = new Folder (folderName);
flag = folderObj.exists; //フォルダの有無
if(flag == false){
folderObj.create(); //フォルダがない場合にフォルダを作成
}
//フォルダが存在している場合
fileName = docName.slice(0,-4) + "\_" + date;
filePath = folderName + fileName + ".png";
//alert(filePath);
fileObj = new File(filePath);
pngOpt = new PNGSaveOptions();
pngOpt.interlaced = false; //インタレースなし
activeDocument.saveAs(fileObj, pngOpt, true, Extension.LOWERCASE);
}/* fin publishPng */
/*end ctir2png*/
2.Ctrls2png.jsxを設置(MacOS)
1で保存したCtrls2png.jsxを、 "/Applications/Adobe Photoshop(CS5.1 or CS6)/Presets/Scripts/" の中に移動してください。
次に、Adobe Photoshopを立ち上げ、Ctrls2png.jsxをキーボードショートカットに割り当てます。「⌘Command+S」のキーボードにスクリプトを割り当てる理由はお察しの通り、事あるたびに上書き保存してしまうデザイナーの癖を逆手にとっております。
スクリプトが無事に読み込めていれば、こんな具合に表示されます。
キーボードショートカット設定に行きます。
ファイルタブの中、かなり下のほうに設置したスクリプトがあります。
Ctrls2pngに「⌘command+S」のショートカットを割り当てようとすると、既存のショートカットと衝突しますが、上書きで確定します。僕の場合、元のショートカットにあった上書き保存は、「⌘Command+Control+S」に割り当てています。
これで準備完了です。
実行
キーボードショートカットにスクリプトが割り当てたPhotoshopで、普段通りにAdobe Photoshopを用いて作業を行います。Photoshopの作業ファイルを開き「⌘Command+S」を押すたびに、作業中のpsdデータからpngデータが出力されて、同じ階層のpngフォルダにパブリッシュ時間付きで書きだされていきます。
まとめ
今回ご紹介したのは、UIデザイン業務にPhotoshopScriptを用いることでワークフロー（作業中の変更点）を時系列で明確に振りかえれるというものでした。
このように自身のワークフローを目で追っていくことで作業上の反省点や、UIデザインにおける作業時間の短縮化のヒントを得やすくなります。
また、ほぼJavascriptで動くスクリプトなので、スライス作業の自動化や明度差検知、Webとの連動等、まだまだ拡張していける要素はたくさんあります。
UIデザイン業務をより便利に、より効率的にこなすために、Photoshopスクリプティングという領域にふみこんでみてはいかがでしょうか？
...何気ないUIデザインのロギングは、振り返ると素敵な改善点でした。
以上、「ワークフローを振り返るためのPhotoshopスクリプティング」でした！
今後とも、スマートフォンアプリ、My365をよろしくお願い致します！