PSDファイル上のデータをHTMLに移すのが面倒
ビジュアルデザイナーが作成したPSDファイルを元に、マークアップエンジニアがHTMLを作成することがあるかと思います。その際、Photoshop上のデータをHTMLに反映させるのが面倒だと思いました。
テキストレイヤーの文字列を反映させる場合
例えばテキストレイヤーで定義された文字列をコピーして、HTMLにペーストすることを考えます。
問題点
コピペに失敗するリスク
正しくコピペできたと思っていても、一部分抜けていることがあるかもしれません。
修正があった時の手間
修正があった時は、またコピペをする必要があります。
解決策
プログラミングを用いて、テキストレイヤーの文字列を取り出せないかと考えました。
Photoshop Generator
Photoshop CCではGeneratorが使えます。これはGeneratorはNode.jsサーバであり、Photoshopの操作を監視しながら、Photoshopのネイティブ機能にアクセスすることができます。
Generatorを導入
導入の仕方は以下を参照してください。
・参考
Node.js＋Photoshop: Generatorの設計と使い方
PSDファイルを用意
| レイヤー名 | テキスト |
|---|---|
| layerHoge | hoge |
| layerFuga | fuga |
| layerPiyo | piyo |
| 上のようなPSDファイルを用意してみました。 | |
| 今回はグループを使った入れ子構造には対応していませんwグループを作ったら動かないです。 |
TextLayerを探す
Generatorを使って、テキストレイヤーを探してみましょう。
参考資料
まず以下の参考ページで、「generator-getting-started-master」をgitもしくはzipでダウンロードし、プラグインの使い方をざっくり理解してみてください。
Script Your First Adobe Generator Plugin For Photoshop
全てのレイヤー情報を取得
function requestEntireDocument(documentId) {
if (!documentId) {
console.log("Determining the current document ID");
}
_generator.getDocumentInfo(documentId).then(
function (document) {
// console.log("Received complete document:", stringify(document));
jsonParse(stringify(document));
},
function (err) {
console.error("[Tutorial] Error in getDocumentInfo:", err);
}
).done();
}
「generator-getting-started-master」を見ると「_generator.getDocumentInfo」のところで全てのレイヤー情報をJSONで出力していることがわかります。それを自分で定義した関数jsonParseに渡します。
json作成
function jsonParse(jsonString){
var obj = JSON.parse(jsonString);
var layers = obj.layers;
var textLayers = {};
var textLayerData = {};
var fs = require("fs");
for(var i = 0;i < layers.length;i++){
var layer = layers[i];
//find textLayer
if(layer.type == "textLayer"){
//set textLayer name and textKey
var textObj = {};
textObj["text"] = layer.text.textKey;
textLayers[layer.name] = textObj;
}
}
textLayerData["textLayerData"] = textLayers;
fs.writeFile("./test/plugins/naoyaTest/config.json", JSON.stringify(textLayerData, null, ' '));
}
「./test/plugins/naoyaTest/config.json」ひとまず、プラグイン直下にjsonを保存してみます。
・全ソース
https://gist.github.com/naoyashiga/118efc572122eb51b462
{
"textLayerData": {
"layerHoge": {
"text": "hoge"
},
"layerFuga": {
"text": "fuga"
},
"layerPiyo": {
"text": "piyo"
}
}
}
上のようなjsonが保存できました。
Jadeでjsonを使用
今回はテンプレートエンジンJadeを用いて、得られたJSONデータを出力してみます。
gulpfile.jsの設定
var gulp = require('gulp');
var jadeTest = require('jade');
var jade = require('gulp-jade');
var data = require("gulp-data");
var paths = {
jadeFile:"./app/jade/*.jade",
json:"./app/config/test.json"
};
gulp.task('jade', function() {
return gulp.src(paths.jadeFile)
.pipe(data(function(file) {
return require(paths.json);
}))
.pipe(
jade({
pretty: true//not minifiy
})
)
.pipe(gulp.dest('app'));
});
gulp.task('watch', function() {
gulp.watch(paths.jadeFile, ['jade']);
});
gulp.task('default', ['watch']);
gulp-dataを使って、jsonを取得して、jadeに渡しています。
・参考
https://www.npmjs.com/package/gulp-jade
jadeでjsonデータを出力
p #{textLayerData.layerHoge.text}
p #{textLayerData.layerFuga.text}
p #{textLayerData.layerPiyo.text}
jadeではそのままjsonにアクセスできる状態になっているので、ドットで繋げて出力します。
<p>hoge</p>
<p>fuga</p>
<p>piyo</p>
テキストレイヤーの文字列を出力することができました。
まとめ
作成し終えて所感を述べます。メリット、デメリットをあげてみます。
メリット
コピペミスを解決
jsでテキストレイヤーの中身を取得するので、コピペミスがなくなりました。
ファイル更新が楽
ビジュアルデザイナーがPSDファイルを編集したら、Generatorを使って、jsonを更新してもらいます。それをgitにpushしてもらい、マークアップエンジニアがpullすれば、テキストが更新されます。
デメリット
レイヤーに命名規則が必要
ビジュアルデザイナーに事前にレイヤー名の規則を伝える必要が有ります。例えば日本語ではなく、英語で命名する必要があったりします。
入れ子構造に対応していない
サンプルのPSDファイルはグループを使った入れ子に対応できてません。致命的ですw 実践にはまだ使えそうにないです。。。。