KYOKUTYO NO BLOG.

PNG画像をGIF画像に差し替えるスクリプト。IEの7以前だけで作動します。要jQueryです。

before:

<img alt="" src="hogehoge.png" />

after:

<img alt="" src="hogehoge.gif" />

拡張子が変わるだけです。

meca.js使いたかったんだけど動かなかった。
何が悪かったのかよくわからなかった。

テキストリンクのマウスオーバー時にパパパパパ・・・と文字色が変わるのってどうかな。
誰か作ってないかな。

画面がロードされたときにランダムにカラーコードの配列作っておく。こんなの。マウスオーバーした時はたぶんsetIntervalとか使う。

var colors = new Array('369','FC9','003','333','9FF','C0C','6F0');

下記のようなフォルダ/ファイル構造で、JPGだけをピックアップしてタイル状に並べるスクリプトを書いた。画像の順序はランダムにする。

[images]
├[img_a]
│ ├a1.jpg
│ ├a2.jpg
│ └a3.png
│
├[img_b]
│ ├b1.jpg
│ ├b2.jpg
│ └b3.png
│
└[img_c]
　 ├c1.jpg
　 ├c2.jpg
　 └c3.png

1列目にフォルダ名(上記の例でimg_a, img_b, img_c)が書いてあるCSVファイルがあったのでそれを利用してる。
フォルダ内のフォルダリスト作れたりするのかな、できればそれ使った方が良さそう。

 
#target photoshop
 
function shuffle(list) {
	var i = list.length;
	while (--i) {
		var j = Math.floor(Math.random() * (i + 1));
		if (i == j) continue;
		var k = list[i];
		list[i] = list[j];
		list[j] = k;
	}
	return list;
}
 
(function (){
	// 単位の設定(定規:ピクセル, 文字:ポイント)
	app.preferences.rulerUnits = Units.PIXELS;
 
	// open data file (CSV)
	var dataFile  = File.openDialog("CSVファイルを指定してください");
	fileObj = new File(dataFile);
	flag = fileObj.open("r");
 
	if (flag){
		fileData = fileObj.read();
		Line = fileData.split("\n");
		images = new Array();
		// set images array
		for (i = 0; i < line.length-1; i++){
			var data = Line[i].split(",");
			var folderObj = new Folder("\\\\Path\\to\\folder\\" + data[0]);
			var fileList = folderObj.getFiles("*.jpg");
			for (j=0; j<fileList.length; j++) {
				images = images.concat(fileList[j]);
			}
		}
 
		var col = 50; // 横にいくつ並べるか
		var row = 20; // 縦にいくつ並べるか
		var w = 22; // 余白含めたwidth
		var h = 32; // 余白含めたheight
 
		// open basefile (PSD)
		var bgbasefile = app.documents.add(col * w, row * h, 72, "base", NewDocumentMode.RGB, DocumentFill.WHITE);
		RGBColor = new SolidColor();
		RGBColor.red = 0;
		RGBColor.green = 0;
		RGBColor.blue = 0;
		bgbasefile.selection.selectAll();
		bgbasefile.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);
 
		// shufful
		images = shuffle(images);
 
		var n = 0;
		var sum = col * row;
 
		for(k = 0; n < sum; k++) {
			var m = k % images.length;
			var f = open(images[m]);
			if(f.width > f.height) {
				f.close(SaveOptions.DONOTSAVECHANGES);
				continue;
			}
			f.resizeImage(w);
			f.resizeCanvas(w-2, h-2, AnchorPosition.MIDDLECENTER);
			f.selection.selectAll();
			f.selection.copy();
			f.close(SaveOptions.DONOTSAVECHANGES);
			bgbasefile.paste();
			var x = w * (n % col) + w * (1 - col)/2;
			var y = h * Math.floor(n / col) + h * (1 - row)/2;
			bgbasefile.activeLayer.translate(x, y);
			if(k != 0) bgbasefile.activeLayer.merge();
			n++;
		}
 
	}else{
		alert("can't open csv file!");
	}
})();
 

順を追って解説

配列をシャッフルする関数を用意しておく。後で使う。hail2u.net - Weblog - JavaScriptで配列をシャッフルから拝借。

 
function shuffle(list) {
	var i = list.length;
	while (--i) {
		var j = Math.floor(Math.random() * (i + 1));
		if (i == j) continue;
		var k = list[i];
		list[i] = list[j];
		list[j] = k;
	}
	return list;
}
 

単位の設定をする。これをやっておかないと移動距離が狂うことがある。環境設定で単位がピクセル以外に設定されてた場合かな。

 
	app.preferences.rulerUnits = Units.PIXELS;
 

ファイルを選択するダイアログを開く→指定されたファイルを開く。ここではフォルダ名のリストが書いてあるCSVを使ってる。

 
	var dataFile  = File.openDialog("CSVファイルを指定してください");
	fileObj = new File(dataFile);
	flag = fileObj.open("r");
 

各フォルダ内を調べてjpgファイルのリストimagesを作成。

 
	if (flag){
		fileData = fileObj.read();
		Line = fileData.split("\n");
		images = new Array();
		// set images array
		for (i = 0; i < line .length-1; i++){
			var data = Line[i].split(",");
			var folderObj = new Folder("\\\\Path\\to\\folder\\" + data[0]);
			var fileList = folderObj.getFiles("*.jpg");
			for (j=0; j<fileList.length; j++) {
				images = images.concat(fileList[j]);
			}
		}
 

タイルを縦横いくつ並べるか、タイルの横幅、縦幅を指定する。

 
		var col = 50; // 横にいくつ並べるか
		var row = 20; // 縦にいくつ並べるか
		var w = 22; // 余白含めたwidth
		var h = 32; // 余白含めたheight
 

ベースのPSDファイルを開く。↑で設定したcol, row, w, hを元に新しく開くファイルの縦幅、横幅を決めてる。開いた後に真っ黒に塗りつぶされたレイヤーを敷いてる。

 
		// open basefile (PSD)
		var bgbasefile = app.documents.add(col * w, row * h, 72, "base", NewDocumentMode.RGB, DocumentFill.WHITE);
		RGBColor = new SolidColor();
		RGBColor.red = 0;
		RGBColor.green = 0;
		RGBColor.blue = 0;
		bgbasefile.selection.selectAll();
		bgbasefile.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);
 

配列imagesの要素を並べ替える。初めに用意しておいた関数shuffleを使う。

 
		// shufful
		images = shuffle(images);
 

ランダムな順序のファイルのリストができたところでタイルを埋めていく。

 
		var n = 0;           // 並べる位置を決めるのに使う。
		var sum = col * row; // タイルの最大値。
 
		// 必要なタイル数に達するまで続けるfor文。
		for(k = 0; n < sum; k++) {
 
			// タイルを敷き詰めるのに必要な枚数の方がJPGファイルの数より大きい場合のために、
			// kをimages.lengthで割った余りをmとしてる。
			// 必ずm<images.lengthなのでopen(images[m])でJPG画像を開くときに
			// open(images[大きすぎる数字])になることがない。
 
			var m = k % images.length;
			var f = open(images[m]);
 
			// 実は、imagesには横長画像も含まれているので、それはとばす。
			// この場合はn++が実行されない。
			if(f.width > f.height) {
				f.close(SaveOptions.DONOTSAVECHANGES);
				continue;
			}
 
			// wで指定した値にリサイズ。
			f.resizeImage(w);
 
			// 隣とは2pxずつ開けたかったのでキャンパスサイズの変更を縦横2pxずつ減らす。
			// 最初からresizeImage(w-2);してもいいんだけど、
			// なんとなくエッジがぼんやりする気がして、外枠1pxずつ捨ててる。
			f.resizeCanvas(w-2, h-2, AnchorPosition.MIDDLECENTER);
 
			// 全選択→コピー→閉じる(ベースのPSDファイルが前面に出てくる)→ペースト。
			// (前面に来てるドキュメントにしかペーストできない)
			// ペーストはドキュメントの中央にされる。
			f.selection.selectAll();
			f.selection.copy();
			f.close(SaveOptions.DONOTSAVECHANGES);
			bgbasefile.paste();
 
			// 何番目のタイルかn, col, row, w, hによって移動距離を計算、移動。
			var x = w * (n % col) + w * (1 - col)/2;
			var y = h * Math.floor(n / col) + h * (1 - row)/2;
			bgbasefile.activeLayer.translate(x, y);
 
			// pasteしっぱなしだとレイヤー数がひどいことになるので
			// 下のレイヤーとマージする。
			// 最初だけ、黒く敷いたレイヤーとマージさせない。
			if(k != 0) bgbasefile.activeLayer.merge();
 
			// タイルを1個埋めたらnを増やす
			n++;
		}
 

ちなみに、ここでimagesに含まれる画像は縦横比が 2:3 or 3:2 と整ったもの。縦横比が違うものが含まれている場合はリサイズ処理など、もう少し気を配る必要がありそう。

CSVファイルを読んでPNG画像を作るJavaScript。要Photoshop。テキストファイルはこんな。
txt1,txt2,・・・は保存する時にファイル名やフォルダ名として使う。

txt1,てきすと1
txt2,てきすと2
txt3,てきすと3
 ・
 ・
 ・

csvtoimg.jsx

#target photoshop
 
/*
 * 画像形式:PNG
 * サイズ  :500*500
 * 背景    :透過
 * 文字色  :白(255,255,255)
 * フォント:BookAntiqua
 * 文字配置:中央
 */
 
function main() {
	// 単位の設定(定規:ピクセル, 文字:ポイント)
	app.preferences.rulerUnits = Units.PIXELS;
	app.preferences.typeUnits = TypeUnits.POINTS;
 
	var dataFile  = File.openDialog("テキストファイルを指定してください。");
	fileObj = new File(dataFile);
	flag = fileObj.open("r");
 
	if (flag){
		fileData = fileObj.read();
		Line = fileData.split("n");
 
		// base file open
		var basefile = app.documents.add(500, 500, 72, "base", NewDocumentMode.RGB, DocumentFill.TRANSPARENT);
 
		// png save options
		var pngOpt = new ExportOptionsSaveForWeb();
		pngOpt.format = SaveDocumentType.PNG;
		pngOpt.PNG8 = false;
 
		var textColor = new SolidColor;
		textColor.rgb.red   = 255;
		textColor.rgb.green = 255;
		textColor.rgb.blue  = 255;
 
		for (i=0; i < Line.length-1; i++){
			var data = Line[i].split(",");
			var tmpfile  = app.documents.add(500, 500, 72, "tmp", NewDocumentMode.RGB);
			var newTextLayer = tmpfile.artLayers.add();
			newTextLayer.kind = LayerKind.TEXT;
			newTextLayer.textItem.font = "BookAntiqua";
			newTextLayer.textItem.fauxBold = true;
			newTextLayer.textItem.size = 24;
			newTextLayer.textItem.color = textColor;
			tmpfile.activeLayer.textItem.contents = data[1];
			tmpfile.selection.selectAll();
			tmpfile.selection.copy();
			tmpfile.close(SaveOptions.DONOTSAVECHANGES);
			basefile.artLayers.add();
			basefile.paste();
			// save
			var savefile = new File("\\path\to\outputdir\" + data[0] + "\txt.png");
			basefile.exportDocument(savefile, ExportType.SAVEFORWEB, pngOpt);
			basefile.activeLayer.remove();
		}
		basefile.close(SaveOptions.DONOTSAVECHANGES);
	}else{
		alert("データファイルが見つかりません");
	}
}
 
main();

jsxファイルをダブルクリック
or jsxファイルをPhotoshopにドラッグする
or Photoshopのメニューからファイル > スクリプト > 参照、jsxファイルを選択
で動かす。

つまったところ

中央配置

テキストを中央に配置するよい方法がわからなかったので"base"というドキュメントの他に"tmp"というドキュメントを作った。"tmp"にテキストレイヤーを作って文字列挿入、コピーして"base"へ張り付け。何も考えずペーストすると中央に置かれる。もっとよい方法ありそう。

ついでに、何もないレイヤーにペーストすると、新しいレイヤーが作られない。レイヤーが1個しかない状況でactiveLayer.remove()できないので、なんか無駄に basefile.artLayers.add(); とかしてる。selectAll()してから消去とかもできたのかな。

ドキュメントのフォーカス

"tmp"でコピーした後は"base"を前面に出してペースト。"tmp"を背面に押しやる方法がわからなかったのでドキュメントを閉じてる。CSVの行の分だけ、open,closeを繰り返してる。

Error 1233: 既存のファイル / フォルダへの参照が必要
とか言われる。for文でいくつかJPGファイルを開こうとしてて、5枚目まではすんなり開けるんだけど 6枚目を開こうとすると上記のエラーが出る。うーむ。。

開くファイルの順番を変えてみても、やっぱり途中でエラーが出た。今度は6枚目まで開けた。

わかった、ファイルのリストに存在しないファイル名書いてた。。ファイルのリスト作った後に似通った画像消したんだった。

今日jQueryでつまづいたところ。

IEでNG。

var d = document.createElement("div");
$(d).css("background-image","url(hoge.jpg);");

;を入れるとダメみたいだ。

var d = document.createElement("div");
$(d).css("background-image","url(hoge.jpg)");

XHTML1.0Strictではaタグにtarget="_blank"が使えない。別ウィンドウで開きたいのならXHTML1.0Trasitionalでtarget="_blank"使えばって誰か言ってたみたいだけど。ここではJavaScriptを使って別ウィンドウで開く方法を書きます。

1. <a href="http://kyokutyo.com/" onclick="window.open("http://kyokutyo.com/"); return false;">リンク</a>

   とかやってみる。長い。

2. <a href="http://kyokutyo.com/" onclick="window.open(this.href); return false;">リンク</a>

   とthis.href使うとちょっと短くなる。
   だけどaタグに毎度書いてるとHTMLがごちゃごちゃしてくる。

3. スクリプトを外に出してHTMLをすっきりさせたい。別ウィンドウで開きたいリンクにはrel="external"を付けるようにする。
   HTML

   <a href="http://kyokutyo.com/" rel="external">リンク</a>

   JSファイル

   function externalLinks() {
     if (! document.getElementsByTagName ) return;
     var a = document.getElementsByTagName("a");
     for (var i=0; i<anchors.length; i++) {
       if(anchors[i].getAttribute("href") && anchors[i].getAttribute("rel") == "external"){
         anchors[i].setAttribute("onclick","window.open(this.href); return false;");
       }
     }
   }
   
   window.onload = externalLinks;

   ロードされたらexternalLinksを実行。aタグを全部拾って、順にチェック。hrefがあって、且つrelにexternalが指定されてる場合、onclickにwindow.open(this.href); return false;を設定する。IEでうごかない。

4. HTMLは3と同じ。

   IE対応版JSファイル

   function externalLinks() {
     if (! document.getElementsByTagName ) return;
     var anchors = document.getElementsByTagName("a");
     var isIE = (document.documentElement.getAttribute("style") == document.documentElement.style);
     for (var i=0; i<anchors.length; i++) {
       if(anchors[i].getAttribute("href") && anchors[i].getAttribute("rel") == "external"){
         if(isIE) anchors[i].setAttribute("onclick",new Function("window.open(this.href); return false;"));
         else anchors[i].setAttribute("onclick","window.open(this.href); return false;");
       }
     }
   }
   
   window.onload = externalLinks;

4のコードをSnipplrに置いた。
external link - JavaScript - Snipplr
やっぱりハイライトついてた方が見やすいな。

参考にしたサイト

• スクリプトOFFでもちゃんと閲覧できるように　サブウインドウを開く弊害と対策 - ［ホームページ作成］All About
• hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。
• IE の getAttribute / setAttribute: Days on the Moon