KYOKUTYO NO BLOG.

下記のようなフォルダ/ファイル構造で、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 と整ったもの。縦横比が違うものが含まれている場合はリサイズ処理など、もう少し気を配る必要がありそう。

使うかわかんないけど、HTTP::redirectを入れておきたかったので

% sudo pear install HTTP

ってやったらpearのバージョンが古いので入れられないよと言われた。

pear/HTTP requires PEAR Installer (version >= 1.7.1), installed version is 1.6.1
No valid packages found
install failed

% sudo pear upgrade PEAR

した後に再度試してみたらOKだった。

テンプレートファイルにCDATA書いたのに吐き出されたHTMLファイルでは消えてた。
index.tmpl

 
    <script type="text/javascript">
    < ![CDATA[
      swfobject.registerObject("swfobj", "9.0.0", "menu.swf");
    ]]>
    </script>
 

↓
index.html

 
    <script type="text/javascript">
 
      swfobject.registerObject("swfobj", "9.0.0", "menu.swf");
 
    </script>
 

追記(2008/10/17 14:04)--
render("html")と書いてたのを
render("xhtml")にしたら消えなかった。
がに変換されてたのも解消された。

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を繰り返してる。

ブランチの削除はこうやる。

% git branch -D <branch>

違う書き方してる人もいたので、バージョンやOSによって違いがあるのか？@Ubuntu8.04

% git --version
git version 1.5.4.3

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

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

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

KYOKUTYO NO BLOG. » Blog Archive » 配列の最大要素で各要素を割るあたりからVimPress使ってみてる。

Vimpress - Manage wordpress blog posts from Vim : vim online

下書き保存とかってあるのかな。あとStrIDって自分で連番ふらなきゃダメなのかな。
勝手に振ってくれるみたいだ。カテゴリの作成はできない模様。

なんか昨日から動きが超にぶくなった。なんでだろ。

Djangoのテンプレートでfor文中で3回に1度だけ文字列を出力したい。

 
{% for item in items %}
  {{ item.name }},
  {# 3つ出力して改行入れたい #}
{% endfor %}
 

 
{% for item in items %}
  {{ item.name }},
  {% ifequal forloop.counter%3 0 %}{% endifequal %}
{% endfor %}
 

こんなんじゃダメなのかな。動いてない気がする。@GAE。
↑preタグ内の<br />が消えてる。。

Pukiwikiでほげほげ書いて、ブックマークレットぽちっとやると、そのページに書いてあるものがスライドショー形式になってプレゼンとかで使えるとうれしい。

PHPで下記のような配列があったとして、

 
$list = array(160, 180, 200, 150);
 

↓最大値を1に変換して、他の値は160/200など割り算したい。

 
$list = array(0.8, 0.9, 1, 0.75);
 

どうすんだろ。forとか使わない方がスマートかな。
array_mapとかarray_reduceとか使うといいんだろうか。

PHP: array_map - Manual
PHP: array_reduce - Manual

パッケージ配布先追加

% sudo pear channel-discover pearified.com

インストール

% sudo pear install pearified/Smarty

php.iniを編集

% sudo vi /etc/php5/apache2/php.ini

; UNIX: "/path1:/path2"
;include_path = ".:/usr/share/php"

↓このようにコメントを外してパスを足した

; UNIX: "/path1:/path2"
include_path = ".:/usr/share/php:/usr/share/php/smarty"

apache再起動

% sudo /etc/init.d/apache2 restart

pearコマンドでSmartyやphpMyAdminをインストール:phpspot開発日誌
を見てやった。