PhotoshopのJSXでレイヤーを任意の順番に並び替える

2016年9月6日 @hoihoi コメントをどうぞ

たまにPhotoshopの自動処理を書いていると必要になってくるのでメモ書き。

使用方法

引数には並び替えたい順番でレイヤー名が格納されている配列を渡してあげると動作します。
例）['レイヤー名1','レイヤー名2','レイヤー名3']
例の配列を渡してあげるとレイヤー名1が最前面に、レイヤー名3が再背面に来る感じです。
処理の動きとしては、もらった配列の後ろのレイヤーからどんどん最前面に押し上げていってソートを実現している感じ。

ソース

function sortLayers ( layerNameList ) {
    var layerNameList = layerNameList.reverse();
    for( var i=0; i<layerNameList.length; i++ ) {
        var layerName = layerNameList[i];
        activeDocument.activeLayer = activeDocument.layers[ layerName ];
        if( layerName.name != activeDocument.artLayers[0].name ) {
            var idmove = charIDToTypeID( "move" );
            var desc26557 = new ActionDescriptor();
            var idnull = charIDToTypeID( "null" );
            var ref3177 = new ActionReference();
            var idLyr = charIDToTypeID( "Lyr " );
            var idOrdn = charIDToTypeID( "Ordn" );
            var idTrgt = charIDToTypeID( "Trgt" );
            ref3177.putEnumerated( idLyr, idOrdn, idTrgt );
            desc26557.putReference( idnull, ref3177 );
            var idT = charIDToTypeID( "T   " );
            var ref3178 = new ActionReference();
            var idLyr = charIDToTypeID( "Lyr " );
            var idOrdn = charIDToTypeID( "Ordn" );
            var idFrnt = charIDToTypeID( "Frnt" );
            ref3178.putEnumerated( idLyr, idOrdn, idFrnt );
            desc26557.putReference( idT, ref3178 );
            executeAction( idmove, desc26557, DialogModes.NO );
        }
    }
}

function sortLayers ( layerNameList ) {

var layerNameList = layerNameList.reverse();

for( var i=0; i<layerNameList.length; i++ ) {

var layerName = layerNameList[i];

activeDocument.activeLayer = activeDocument.layers[ layerName ];

if( layerName.name != activeDocument.artLayers[0].name ) {

var idmove = charIDToTypeID( "move" );

var desc26557 = new ActionDescriptor();

var idnull = charIDToTypeID( "null" );

var ref3177 = new ActionReference();

var idLyr = charIDToTypeID( "Lyr " );

var idOrdn = charIDToTypeID( "Ordn" );

var idTrgt = charIDToTypeID( "Trgt" );

ref3177.putEnumerated( idLyr, idOrdn, idTrgt );

desc26557.putReference( idnull, ref3177 );

var idT = charIDToTypeID( "T " );

var ref3178 = new ActionReference();

var idLyr = charIDToTypeID( "Lyr " );

var idOrdn = charIDToTypeID( "Ordn" );

var idFrnt = charIDToTypeID( "Frnt" );

ref3178.putEnumerated( idLyr, idOrdn, idFrnt );

desc26557.putReference( idT, ref3178 );

executeAction( idmove, desc26557, DialogModes.NO );

}

未分類

PhotoshopのJSXで特定のレイヤーを天地左右中央揃えに

2016年9月6日 @hoihoi コメントをどうぞ

特にJSでやる必要もないんだけど、メモ書き程度に。

使用方法

引数には移動させたいレイヤーのレイヤー名を渡してあげると動作します。
おなじレイヤー名がある場合のエラーハンドリングとかはしていないのでよきようにしてもらえると。

ソース

function translateLayerInCenter ( layerName ) {
	var targetLayer = activeDocument.layers[layerName];
	var targetLayerBounds = targetLayer.bounds;
	var targetLayerX = parseInt(targetLayerBounds[0]);
	var targetLayerY = parseInt(targetLayerBounds[1]);
	var targetLayerWidth = Math.abs( parseInt(targetLayerBounds[0]) - parseInt(targetLayerBounds[2]) );
	var targetLayerHeight = Math.abs( parseInt(targetLayerBounds[1]) - parseInt(targetLayerBounds[3]) );
	var canvasWidth = activeDocument.width;
	var canvasHeight = activeDocument.height;
	var distanceX = ( canvasWidth - targetLayerWidth ) / 2;
	var distanceY = ( canvasHeight - targetLayerHeight ) / 2;
	targetLayer.translate( targetLayerX * -1, targetLayerY * -1 );
	targetLayer.translate( distanceX, distanceY );
}

function translateLayerInCenter ( layerName ) {

var targetLayer = activeDocument.layers[layerName];

var targetLayerBounds = targetLayer.bounds;

var targetLayerX = parseInt(targetLayerBounds[0]);

var targetLayerY = parseInt(targetLayerBounds[1]);

var targetLayerWidth = Math.abs( parseInt(targetLayerBounds[0]) - parseInt(targetLayerBounds[2]) );

var targetLayerHeight = Math.abs( parseInt(targetLayerBounds[1]) - parseInt(targetLayerBounds[3]) );

var canvasWidth = activeDocument.width;

var canvasHeight = activeDocument.height;

var distanceX = ( canvasWidth - targetLayerWidth ) / 2;

var distanceY = ( canvasHeight - targetLayerHeight ) / 2;

targetLayer.translate( targetLayerX * -1, targetLayerY * -1 );

targetLayer.translate( distanceX, distanceY );

}

JavaScript, Photoshop

PhotoshopのJSXでレイヤーの絶対座標への移動

2016年9月5日 @hoihoi コメントをどうぞ

Photoshopnのtranstaleメソッドだと、レイヤーが現在いる場所からの相対座標の移動の指定しかできないためキャンバスを基準とした絶対位置への移動をしていできる関数を作成しました。

使用方法

第一引数には移動させたいレイヤーのレイヤー名を、第二引数・第三引数にはXとYそれぞれの座標を渡してあげると動作します。
おなじレイヤー名がある場合のエラーハンドリングとかはしていないのでよきようにしてもらえると。

ソース

function　translateLayerAbsolutePosition ( layerName, moveX, moveY ) {
	var targetLayer = activeDocument.layers[ layerName ];
	targetLayerBounds = targetLayer.bounds;
	resetX = parseInt(targetLayerBounds[0]) * -1;
	resetY = parseInt(targetLayerBounds[1]) * -1;
	targetLayer.translate( resetX , resetY );
	targetLayer.translate( moveX, moveY );
}

function　translateLayerAbsolutePosition ( layerName, moveX, moveY ) {

var targetLayer = activeDocument.layers[ layerName ];

targetLayerBounds = targetLayer.bounds;

resetX = parseInt(targetLayerBounds[0]) * -1;

resetY = parseInt(targetLayerBounds[1]) * -1;

targetLayer.translate( resetX , resetY );

targetLayer.translate( moveX, moveY );

}

CSS, JavaScript, Prototyping, UI

デザイナーが開発中のモバイル用webサービスにスタイルを追加して、あれこれスマホで確認したい時にやってる方法

2016年4月15日 @hoihoi コメントをどうぞ

はじめに

大規模なモバイルwebサービスをチームで開発している時に、なるべくデザイナーとしても開発効率をあげるため、精度の高い状態で次の工程（主にフロントエンジニア）に修正依頼や、追加要素の実装のお願いをしたいと考えているのですが、Photoshopなどのアプリケーションを用いて画像でいくら精度をつめても、結局実装してみるとイマイチで再度修正してもらうなんとことはよくあると思います。

また、追加要素としてwebページのパーツにCSSでアニメーションを加えて華やかにしたいとか、現場入ってるアニメーションの速度を微調整したいといった時になかなか感覚的なものなので口頭だと伝えづらいなんとこともあったりと。

デザイナーでも多少のCSSの知識がある人は多いと思うのですが、大規模なwebサービスになるとおいそれと実際に使用されているCSSをデザイナーがいじくるわけにはいきません。

自分の書いたCSSファイルを一つだけでも開発中のサービスに突っ込めれば・・・、CSSアニメーションなどもいい感じに調整後数値でエンジニアに伝えることができるのに・・・

一応これが今回の経緯になります。

必要なスキル

CSSの知識

自身のスタイルシートを開発中のwebサービスに突っ込むまでの流れ

自身のPCにXAMPPを用いてローカルにwebサーバーをたてる
Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする
つっこまれたJSファイルから立てたwebサーバーにおいてあるCSSをつっこむ
実機で確認するためにスマホでプロキシを経由するようにする

それでは順を追って説明していこうと思います。

1.自身のPCにXAMPPを用いてローカルにwebサーバーをたてる

これはもう溢れんばかりの記事があるので以下記事がわかりやすいので参考にしてもらえればと思います。
http://techacademy.jp/magazine/1722

そしてさらにLAN内で公開できるようにhttpd.confの設定を変更して下さい。以下の記事がわかりやすいので参考に。
http://weble.org/2009/11/28/xampp-intranet

そしてxamppのhtdocsフォルダ内にprotoというフォルダを作って、その中にテキストエディタでproto.jsとproto.cssという名前の空のからのテキストファイルを保存し、apacheを起動しておいて下さい。

2.Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする

まずはFiddlerをインストール

以下のリンクからFiddlerをダウンロードして下さい。
https://www.telerik.com/download/fiddler/fiddler4

Fiddlerの起動

Fiddlerを起動して、開いてるブラウザのページのどれかをリロードしてみると勝手に通信内容がつらつらと表示されていくと思います。

CustomizeRulesの修正をしてbodyダグの一番下にscriptタグを突っ込むように修正

まずFiddler上部のメニューリストから
Rules > Customize Rulesと選択して下さい
そうすると何かしらのテキストエディタが起動してスクリプトを表示してくれます。

次にこのスクリプトのOnBeforeResponseメソッドを修正します。
（だいたい277行目くらいから）

static function OnBeforeResponse(oSession: Session) {
	// 以下略
}

static function OnBeforeResponse(oSession: Session) {

// 以下略

}

を以下のようにまるっと書き換えて下さい。

static function OnBeforeResponse(oSession: Session) {
    if (m_Hide304s && oSession.responseCode == 304) {
        oSession["ui-hide"] = "true";
    }
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html")) {
if (oSession.HostnameIs("[開発中のサービスのドメイン]")) {
    var oBody = oSession.GetResponseBodyAsString();
    // Remove any compression or chunking
    oSession.utilDecodeResponse();
    var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);

    oBody = oBody.Replace("</body>", "<script src=\"http://[自身のPCのIP]/proto/proto.js\"></script></body>");

    oSession.utilSetResponseBody(oBody);
}
	}
}

static function OnBeforeResponse(oSession: Session) {

if (m_Hide304s && oSession.responseCode == 304) {

oSession["ui-hide"] = "true";

}

if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html")) {

if (oSession.HostnameIs("[開発中のサービスのドメイン]")) {

var oBody = oSession.GetResponseBodyAsString();

// Remove any compression or chunking

oSession.utilDecodeResponse();

var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);

oBody = oBody.Replace("</body>", "<script src=\"http://[自身のPCのIP]/proto/proto.js\"></script></body>");

oSession.utilSetResponseBody(oBody);

}

[開発中のサービスのドメイン]と[自身のPCのIP]はそれぞれに適した値を入力して下さい。

JSファイルの用意

次にFiddlerでつっこむJSファイルの準備を行います。
先ほど作った空のproto.jsに以下のスクリプトをコピーして下さい。

(function() {
	var tag = document.createElement('link');
	tag.setAttribute('href','http://[自身のPCのIP]/proto/proto.css');
	tag.setAttribute('type','text/css');
	tag.setAttribute('rel','stylesheet');
	document.getElementsByTagName('head')[0].appendChild(tag);
})();

(function() {

var tag = document.createElement('link');

tag.setAttribute('href','http://[自身のPCのIP]/proto/proto.css');

tag.setAttribute('type','text/css');

tag.setAttribute('rel','stylesheet');

document.getElementsByTagName('head')[0].appendChild(tag);

})();

このスクリプトによってwebサーバーに用意してあるproto.cssファイルを開発しているwebサービスのheadタグ内に追加することができます。
実際ここで少しproto.cssに何かスタイルを記載してみて見た目がが変更されているかをPCのブラウザで確認して下さい。

4.実機で確認するためにスマホでプロキシを経由するようにする

最後にスマホで確認する方法です。以下の記事はiPhoneの例です。
わかりやすいので参考にして下さい。
http://qiita.com/hikoma/items/2c983a521ba2dae5972b

まとめ

以上の流れで自身の任意のスタイルシートを追加した開発中のwebサービスの表示が、スマホでも確認できるようになると思います。

JavaScript, Photoshop

Photoshopで外部画像をリンク配置するJSX

2016年2月9日 @hoihoi コメントをどうぞ

使用できるのはリンク配置機能が追加されたCC意向だと思う。
検証はしていない。
引数で渡すリンク配置画像のパスは絶対パスで渡し、バックスラッシュの表記は不可。
必ずスラッシュに置き換えてから使用する。

非表示レイヤーを削除

function placementLinkImg( filePath ){
	var changeLayer = activeDocument.artLayers.add();
	changeLayer.name = 'change-layer';
	var path = filePath.replace('/','\\');
	var idPlc = charIDToTypeID( "Plc " );
	var desc24 = new ActionDescriptor();
	var idnull = charIDToTypeID( "null" );
	desc24.putPath( idnull, new File( filePath ) );
	var idLnkd = charIDToTypeID( "Lnkd" );
	desc24.putBoolean( idLnkd, true );
	var idFTcs = charIDToTypeID( "FTcs" );
	var idQCSt = charIDToTypeID( "QCSt" );
	var idQcsa = charIDToTypeID( "Qcsa" );
	desc24.putEnumerated( idFTcs, idQCSt, idQcsa );
	var idOfst = charIDToTypeID( "Ofst" );
		var desc25 = new ActionDescriptor();
		var idHrzn = charIDToTypeID( "Hrzn" );
		var idPxl = charIDToTypeID( "#Pxl" );
		desc25.putUnitDouble( idHrzn, idPxl, 0.000000 );
		var idVrtc = charIDToTypeID( "Vrtc" );
		var idPxl = charIDToTypeID( "#Pxl" );
		desc25.putUnitDouble( idVrtc, idPxl, -0.000000 );
	var idOfst = charIDToTypeID( "Ofst" );
	desc24.putObject( idOfst, idOfst, desc25 );
	executeAction( idPlc, desc24, DialogModes.NO );
}

function placementLinkImg( filePath ){

var changeLayer = activeDocument.artLayers.add();

changeLayer.name = 'change-layer';

var path = filePath.replace('/','\\');

var idPlc = charIDToTypeID( "Plc " );

var desc24 = new ActionDescriptor();

var idnull = charIDToTypeID( "null" );

desc24.putPath( idnull, new File( filePath ) );

var idLnkd = charIDToTypeID( "Lnkd" );

desc24.putBoolean( idLnkd, true );

var idFTcs = charIDToTypeID( "FTcs" );

var idQCSt = charIDToTypeID( "QCSt" );

var idQcsa = charIDToTypeID( "Qcsa" );

desc24.putEnumerated( idFTcs, idQCSt, idQcsa );

var idOfst = charIDToTypeID( "Ofst" );

var desc25 = new ActionDescriptor();

var idHrzn = charIDToTypeID( "Hrzn" );

var idPxl = charIDToTypeID( "#Pxl" );

desc25.putUnitDouble( idHrzn, idPxl, 0.000000 );

var idVrtc = charIDToTypeID( "Vrtc" );

var idPxl = charIDToTypeID( "#Pxl" );

desc25.putUnitDouble( idVrtc, idPxl, -0.000000 );

var idOfst = charIDToTypeID( "Ofst" );

desc24.putObject( idOfst, idOfst, desc25 );

executeAction( idPlc, desc24, DialogModes.NO );

}

JavaScript, Photoshop

PhotoshopのJSXでヒストリーの一番初期に戻す関数

2015年11月2日 @hoihoi コメントをどうぞ

ヒストリーの最初の段階に戻すメソッドがドキュメントを見ても見つからなかったので、
Scripting Listenerで吐き出されたソースを少し改変して作成。

使用方法

基本的には以下の関数を実行すればヒストリーの一番上に戻ります。
（※ヒストリーパネルのファイル名をクリックした時と同じ挙動）

ソース

function revertHistory() {
    var idslct = charIDToTypeID( "slct" );
    var desc = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
    var ref = new ActionReference();
    var idSnpS = charIDToTypeID( "SnpS" );
    ref.putName( idSnpS, activeDocument.name );
    desc.putReference( idnull, ref );
    executeAction( idslct, desc, DialogModes.NO );
}

function revertHistory() {

var idslct = charIDToTypeID( "slct" );

var desc = new ActionDescriptor();

var idnull = charIDToTypeID( "null" );

var ref = new ActionReference();

var idSnpS = charIDToTypeID( "SnpS" );

ref.putName( idSnpS, activeDocument.name );

desc.putReference( idnull, ref );

executeAction( idslct, desc, DialogModes.NO );

}

Illustrator, JavaScript, UI

Illustrator（イラレ）でアプリのプロトタイピングを手軽に行えるスクリプト

2015年10月15日 @hoihoi コメントをどうぞ

Illustrator（イラレ）でアプリのプロトタイピングを手軽に行えるスクリプト

作った背景

1~2年前から様々なペーパープロトタイピングツールが出ている中、いくつかの不満点があったため作成。
まだまだ出来のよくないところもありますが一応動くので一度公開してみようかと思います。

既存のプロトタイピングツールの不満点

既存のプロトタイピングツールはよくできており、直感出来で使いやすいのですがいくつかの不満点を感じていました。

自分が感じていた不満点は以下になります。
※今はいろいろ改善されているかもしれません。最近全然触ってなくてわからない

・誰でも使える事に焦点を当てているため、グラフィックソフト（イラレとかね）との連携がイマイチ

・上記の理由からレイアウトに修正が入るたび、リンクの貼り直しなどがメンドクサイ

・新しいツールまた覚えるのメンドクサイ

主に上記のような理由+スクリプトの勉強がてらプロトタイピングようのスクリプトを作ろうと思いました。
ただ現在のプロトタイピングツールはほんとに高機能なため、そういった部分では全く太刀打ちができません。
あくまでサッと確認するときに便利なスクリプトかなと思います。

このスクリプトでできること

あくまで簡易確認ツールになるので、主にできることといえばイラレのオブジェクトにリンクを貼って、他のページに遷移するといった感じです。

実際に出力されるファイルはhtmlで、それをローカルのwebサーバーに上げて確認する形になります。

自分のプログラミング能力だとこれが限界。
とりあえず以下から使い方の説明を順をおってしていこうと思います。
実際のスクリプト実行例は以下になります。

イラレで画面を作成

以下の様な感じでアートボードを分割して各ページを作成していきます。

そして今回作成しているスクリプトを利用すると、以下の様な形でページが生成されます。
↓↓↓↓↓↓↓↓↓↓
生成されたページ

上記を実行するスクリプトファイルのzip
↓↓↓↓↓↓↓↓↓↓
page_export.zip
※使用は自己責任でお願いします

使い方

1.新規ドキュメントを作成する

まずイラレの新規ドキュメントを作成して下さい。
このスクリプトはイラレのアートボード1つを1ページとみなします。

新規作成でこれから作るアプリやウェブサイトのサイズを入力し、だいたい必要になりそうなページ数分アートボード数を入力して下さい。

完了後任意のディレクトリに保存して下さい。

※ちょっと多めに作っておくほうがオススメ
※イラレの仕様上アートボードは100までしか作成できません

2.設定ファイルを入力する

スクリプトの都合上いろいろな情報を記載する必要があります。
zipファイルを開封後、その中にconfig.jsxというファイルがあるのでテキストエディタで開きます。

以下のようなスクリプトが記載されているので、指定通りに入力していって上書き保存して下さい。

var Config = {
	"ROOT_DIR":"C:/Users/User/Desktop", // 処理したいaiファイルが入っているパス
	"CAPTURE_NAME":"image", // 変更なし大丈夫
	"JSON_FILE_NAME":"data.json", // 変更なし大丈夫
	"FIXED_ITEM_DIR_NAME":"fixed_parts", // 変更なし大丈夫
	"ARTBOARD_COL_NUM":10, // アートボードの列の数
	"ARTBOARD_ROW_NUM":10, // アートボードの行の数
	"ARTBOARD_WIDTH":320, // アートボードの横幅
	"ARTBOARD_HEIGHT":920, // アートボードの縦幅
	"ARTBOARD_MARGIN_RIGHT":100, // アートボード同士の右側のマージンサイズ
	"ARTBOARD_MARGIN_BOTTOM":100, // アートボード同士の下側のマージンサイズ
	"TAP_HIGHLIGHT_COLOR":"rgba(0,0,0,2)" // リンクカラー
}

var Config = {

"ROOT_DIR":"C:/Users/User/Desktop", // 処理したいaiファイルが入っているパス

"CAPTURE_NAME":"image", // 変更なし大丈夫

"JSON_FILE_NAME":"data.json", // 変更なし大丈夫

"FIXED_ITEM_DIR_NAME":"fixed_parts", // 変更なし大丈夫

"ARTBOARD_COL_NUM":10, // アートボードの列の数

"ARTBOARD_ROW_NUM":10, // アートボードの行の数

"ARTBOARD_WIDTH":320, // アートボードの横幅

"ARTBOARD_HEIGHT":920, // アートボードの縦幅

"ARTBOARD_MARGIN_RIGHT":100, // アートボード同士の右側のマージンサイズ

"ARTBOARD_MARGIN_BOTTOM":100, // アートボード同士の下側のマージンサイズ

"TAP_HIGHLIGHT_COLOR":"rgba(0,0,0,2)" // リンクカラー

}

リンクカラーはrgbaで設定できます。アルファの部分を0にすると色無しで表示されます。
※ここの数値が性格に入力されていないとアウトプットされたページのリンク位置などがずれてしまうので正確に入力して下さい。

3.アートボードに名前をつける

次にスクリプト上でアートボードを判別するためにアートボードに名前を付ける必要があります。

アートボード名の確認は上部メニューの

ウィンドウ＞アートボード

からアートボードのパレットを出すことで確認できます。
デフォルトの名前はアートボード 1とかになっているかと。

アートボードの名前はzipファイルの中に格納してあるadd_page_numbering.jsxを実行することで自動的に変更できます。

スクリプトの実行の仕方は、先ほど作成したイラレのドキュメントを開き、その開いたドキュメントがアクティブな状態で上部メニューの

ファイル＞スクリプト＞その他のスクリプト

からadd_page_numbering.jsxを選択して実行して下さい。

アートボード名がa-1、a-2のような表記になりアートボードの左上に小さくa-1などテキストで表記されれば成功です。

4.ページのデザインを作る

ここはもう自由に、いつもどおり作成して下さい。
特に制限はありません。
画像のリンクや、効果などもどんどん使ってもらって構いません。

5.リンクを貼る

あらかたページのデザインが固まってきたらリンクを貼っていきます。
リンクの貼り方はまずリンクを張りたいオブジェクトを選択します。（テキストでも画像でもシェイプでもなんでもいいです）

選択後、レイヤーウィンドウから選択しているオブジェクトの名前を変更します。

オブジェクト数が多く選択しているオブジェクトが見つけにくい場合は虫眼鏡のアイコンをクリックすると一気に移動することができます。

名前を以下のように変更するとリンクを貼ることができます。

$link=a-2

$link=はリンクを張るときの決まり文句のようなものなのであまり気にせず書いて下さい。
その後に続くa-2は移動したいページ名になります。a-2とかけばa-2ページに移動します。
そのような感じでリンクを貼っていって下さい。

6.ページを書き出す

あらかたリンクを貼り終えたらhtmlページを出力します。

出力用のpage_export.jsxというファイルがあるのでそれを

ファイル＞スクリプト＞その他のスクリプト

から実行して下さい。

実行したイラレのドキュメントと同じ階層にページのhtmlが出力されます。
※すべてのオブジェクトのロックを解除してください
※一つでもオブジェクトが乗っているアートボードのみページとして出力されます

7.確認する

後は任意のhtmlファイルを開いて遷移を確認します。スマホで確認したい場合などはローカルにXamppなどを用いてサーバーを立てて確認すると便利です。

Xamppの設定の仕方は調べればいくらでも出てくると思うのでそちらを参考に。
※簡単です
これで大まかな説明は終わりです。

まとめ

設定ファイルの入力やアートボードに名前をつける作業は一度してしまえば再度する必要がないので、
デザイン修正をしページを書き出して確認と高速に行うことが可能です。

一度リンクを張ったオブジェクトは移動してもその位置にリンクを貼り直す必要はありません。
そこらへんは既存のプロトタイピングツールよりは便利なポイントかなと思ってます。

まだまだ使い勝手もよいとはいえませんが、改善要望などあれば対応しようかなと思います。
とりあえずGUIでいろいろ入力できるようにはしたいと思ってます。

またプログラムへの指摘などあればどんどんいただけるとありがたいです。

JavaScript, Photoshop, 未分類

PhotoshopのJSXで指定したレイヤーの複製を作成する関数

2015年9月9日 @hoihoi コメントをどうぞ

任意のレイヤーを指定した名前で複製する関数を作成してみました。

使用方法

第一引数には複製したいレイヤーの名前を文字列で渡し、第二引数には複製したレイヤーの名前を文字列で渡します。

ソース

function duplicateLayer ( originName, replicaName ) {
    var replicaLayer = activeDocument.artLayers[originName].duplicate();
    replicaLayer.name = replicaName;
    return replicaLayer;
}

function duplicateLayer ( originName, replicaName ) {

var replicaLayer = activeDocument.artLayers[originName].duplicate();

replicaLayer.name = replicaName;

return replicaLayer;

}

CSS

div一つでローディングアイコン

2015年9月3日 @hoihoi コメントをどうぞ

box-shadowの属性値を円周にそう形で複数かいて、あとはanimationでstepsを用いてrotateさせるだけ。
※擬似要素へのアニメーション指定は動作しないスマホ端末とかがあったはずだから
実際では使えないかも。GIFアニメとかの方が現実的かなぁ

See the Pen RWNrqB by Yuji Arai (@arahell) on CodePen.

JavaScript, Photoshop

PhotoshopのJSXで指定したCSVファイルをparseする関数

2015年9月1日 @hoihoi コメントをどうぞ

Photoshopで大量の自動処理を行う場合、どこからかデータを取得する必要が多く発生します。
PhotoshopではCSVファイルを読み込むことが可能なので、CSVを読み込みparseする関数をつくってみました。

使用方法

引数にはCSVファイルを配置しているディレクトリのパスを文字列で渡します。
CSVは一行目はそのカラムのタイトルを記載しておき、それ以下はそのカラムのタイトルに応じた値を追記していきます。
parseされたCSVは二次元配列で返され、data[カラム名][行番号]で呼び出すことができます。

ソース

function parseCSV ( fileName ) {  
    // 変数
    var returnObj = {};
    var csvTextLine;
    var csvPropertyCells;
    var csvValueCells;
    var csvPropertyCellsLen;
    var endFlg;
    var firstLineFlg = true;
    
    // 絶対パス指定
    var fileObj = new File( fileName );
    var isSuccess = fileObj.open( 'r' );
    
    // オブジェクトに格納する
    if( isSuccess ) {
        // オブジェクトのプロパティをCSVの一行目から取得
        csvTextLine = fileObj.readln();
        csvPropertyCells = csvTextLine.split( ',' );
        csvPropertyCellsLen = csvPropertyCells.length;
        for( var i=0;  i<csvPropertyCellsLen; i++ ) {
           returnObj[csvPropertyCells[i]] = [];
        }
    
        // それぞれのプロパティに書く列の値を配列で突っ込む
        do {
            csvTextLine = fileObj.readln();
            endFlg = csvTextLine.indexOf( &#039;,&#039; ) &gt; 0 ;
            if( endFlg ) {
                csvValueCells = csvTextLine.split( ',' );
                for( var i=0;  i<csvPropertyCellsLen; i++ ) {
                    returnObj[csvPropertyCells[i]].push(csvValueCells[i]);
                }
            } 
        } while ( endFlg );
        fileObj.close();
        return returnObj;
    }
}

function parseCSV ( fileName ) {

// 変数

var returnObj = {};

var csvTextLine;

var csvPropertyCells;

var csvValueCells;

var csvPropertyCellsLen;

var endFlg;

var firstLineFlg = true;

// 絶対パス指定

var fileObj = new File( fileName );

var isSuccess = fileObj.open( 'r' );

// オブジェクトに格納する

if( isSuccess ) {

// オブジェクトのプロパティをCSVの一行目から取得

csvTextLine = fileObj.readln();

csvPropertyCells = csvTextLine.split( ',' );

csvPropertyCellsLen = csvPropertyCells.length;

for( var i=0; i<csvPropertyCellsLen; i++ ) {

returnObj[csvPropertyCells[i]] = [];

}

// それぞれのプロパティに書く列の値を配列で突っ込む

do {

csvTextLine = fileObj.readln();

endFlg = csvTextLine.indexOf( ',' ) > 0 ;

if( endFlg ) {

csvValueCells = csvTextLine.split( ',' );

for( var i=0; i<csvPropertyCellsLen; i++ ) {

returnObj[csvPropertyCells[i]].push(csvValueCells[i]);

}

} while ( endFlg );

fileObj.close();

return returnObj;

}

使用方法

ソース

使用方法

ソース

使用方法

ソース

はじめに

必要なスキル

自身のスタイルシートを開発中のwebサービスに突っ込むまでの流れ

1.自身のPCにXAMPPを用いてローカルにwebサーバーをたてる

2.Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする

まずはFiddlerをインストール

Fiddlerの起動

CustomizeRulesの修正をしてbodyダグの一番下にscriptタグを突っ込むように修正

JSファイルの用意

4.実機で確認するためにスマホでプロキシを経由するようにする

まとめ

非表示レイヤーを削除

使用方法

ソース

作った背景

既存のプロトタイピングツールの不満点

このスクリプトでできること

イラレで画面を作成

使い方

1.新規ドキュメントを作成する

2.設定ファイルを入力する

3.アートボードに名前をつける

4.ページのデザインを作る

5.リンクを貼る

6.ページを書き出す

7.確認する

まとめ

使用方法

ソース

使用方法

ソース

デザイン雑記