KYOKUTYO NO BLOG.

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

before:

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

after:

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

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

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

やりかたわかんなくなるのでメモ。小規模なWebサイトの例。

svnリポジトリにプロジェクトを追加

$ cd /var/www
$ mkdir project_name
$ cd project_name
$ mkdir img  scripts skin skin/src dir1 dir2
$ touch index.html sitemap.xml dir1/index.html dir2/index.html skin/style.css scripts/project_name.js
$ cd ..
$ svn import project_name --auto-props https://svn.hogehoge.com/svn/hoge/trunk/project_name

gitの設定

$ rm -rf project_name
$ git svn clone https://svn.hogehoge.com/svn/hoge/trunk/project_name

ついでに、FeedBurnerからGoogleへの移行がうまくいかなかったので新しいものにしました。
http://feeds2.feedburner.com/kyokutyo です。よろしくお願いします。

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

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

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

Fastladderでフィードのチェックをする時、一気にチェックして気になるものだけを開いておいてあとでゆっくり見るようにしてる。見たいエントリを「v」で開いた時に、都度そのタブにフォーカスが移動すると面倒なのでバックグラウンドで開くように設定したい。ブラウザはFirefox3。

チェック
チェック
チェック - 気になる(開いておく) // ここでタブが切り替わると面倒
チェック
チェック
チェック - 気になる(開いておく) // ここでタブが切り替わると面倒
チェック
チェック - 気になる(開いておく) // ここでタブが切り替わると面倒
チェック
読む
読む
読む

(ピンを立てておいて「o」で開く方法もあるけど、ちょこちょこ開いておいて待ち時間とかなくしたいという思惑で。)

about:configから「background」などで絞り込み、「browser.tabs.loadDivertedInBackground」を「true」に変更。終わり。「False」になっている場合は、ダブルクリックで「true」に切り替え。about:configで何か変えた後ってブラウザの再起動とか要らないんだなー。

間違えてコミットしてしまったファイルを、前のバージョンに戻したい。いくつ前のバージョンに戻したらいいかわからない。という時に。

作業手順

ファイルの中身を確認

% git show HEAD^:path/to/file

や

% git show HEAD^^:path/to/file

をして、以前のバージョンのファイルの中身を覗く。

特定のバージョンにファイルを戻す

バージョンがわかったら戻す。

% git checkout HEAD^ path/to/file

すると以前のバージョンの内容に戻ってる。

使用例

どんな場合に使うか(使ったか)
今回↓のような状態で使った。

% cat index.html

ここは○○のホームページです

  // 普段の内容
% vi index.html

あけましておめでとうございます。ここは○○のホームページです

  // 年始用
% git commit -m '年始用'

年始用をmasterで作業しない方がよかったかな、index.htmlを前の普段の状態に戻しておこう。年始用も今後また使うかもしれないので一応残しておきたい。

% git branch newyear  // newyearというブランチを作成
% git branch
* master
  newyear
% git show HEAD^:index.html

ここは○○のホームページです

  // 普段の内容
% git checkout HEAD^ index.html
% cat index.html

ここは○○のホームページです

  // 普段の内容
% git checkout newyear  // newyearブランチに切り替え
% cat index.html  // 年始用index.htmlを確認

あけましておめでとうございます。ここは○○のホームページです

  // 年始用

作業の合間にUbuntuにirb入れた。

% sudo gem install irb

違うらしい。試しに apt-get install してみる。なんか入ったっぽい。

% sudo apt-get install irb

irb - Rubyリファレンスマニュアルを見ながらいろいろやってみる。

% irb
irb(main):001:0> 1+2
=> 3
irb(main):002:0> class Foo
irb(main):003:1>   def foo
irb(main):004:2>     print 1
irb(main):005:2>   end
irb(main):006:1> end
=> nil

nilの意味がわからない。

アドレスバーに「.」や「,」が入ってることに気づかないことがあったりするけど、等幅にしておくと見逃さない。
これまでWindowsのFxはこれやってたんだけど、UbuntuのFxがプロポーショナルになってたので変更。ついでにメモっておこう。

Windowsの場合は\\C:\Documents and Settings\Username\Application Data\Mozilla\Firefox\Profiles\XXXXX(任意の文字列)\chrome
Ubuntuの場合は/home/Username/.mozilla/firefox/XXXXX(任意の文字列)/chrome
にuserChrome-example.cssがあるのでこれをコピーしてuserChrome.cssに改名。あとは編集。

#urlbar {
   font-family: monospace !important;
}

あたりのコメントを外してFirefoxを起動しなおすと反映される。

ついでにゼロと大文字のオー、大文字のアイと小文字のエルとイチが見分けやすいとなお良い。
WindowsではAndale Monoを使ってる。

#urlbar {
   font-family: "Andale Mono" monospace !important;
}

Ubuntuだと何がいいだろうか。

下記のようなフォルダ/ファイル構造で、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")にしたら消えなかった。
がに変換されてたのも解消された。