Prototype 1.6.1 RC2, IE8 対応版

prototype.js が IE8 に対応した Prototype 1.6.1 RC2 をリリースしています。
Prototype 1.6.1 RC2: IE8 compatibility, Element storage, and bug fixes

RC なので IE8 対応が必要にならないなら stable 版を使おうかと思います。
IE8 もリリース直後にそこそこインストールされたようですが、サイトブラウジングの問題からダウングレードされたのかシェアは斬減傾向らしいです。

IE8本格普及期には対応しなければいけないのかもしれませんが、それはいつになるのでしょう?

prototype.js, IEではEventインスタンスがFirefoxと違っている

クリックをオブザーブしたハンドラに送られる Event インスタンスの中身が IE だけ微妙に違ってた。

HTML

<div id="thumbnail">
	<a href="images/image1.jpg" class="gallery"><img src="images/image1-thumb.jpg" alt="画像1" /></a>
	<a href="images/image2.jpg" class="gallery"><img src="images/image2-thumb.jpg" alt="画像2" /></a>
	<a href="images/image3.jpg" class="gallery"><img src="images/image3-thumb.jpg" alt="画像3" /></a>
</div>

Javascript

document.observe("dom:loaded",
	function (){$$('. gallery').each(
		function (element) {
			element.observe("click",clickHandler)
		})
	}
);
function clickHandler (event) {
	....
}

prototype.jsを使ってハンドラに送られた Event インスタンスを調べてみた。

Object.keys(event);
Object.values(event);

IE には Event インスタンスに currentTarget が存在しない。
また、 target は [objcect] になっておりその中身も [object HTMLImageElement] な Firefox などとは若干違っている。

希望は
currentTarget : a タグ
target : img タグ

IE は currentTarget が無いので a タグの DOM を取得するのにどうすんだろうが調べてみるきっかけ。
今回の script では a タグの href が必要だっただけなので無理矢理ごまかした。

IE, target.href プロパティ。
target(img)に本来は存在しない href プロパティがあった。
中身は img タグ src の値。

な〜んかへんなの。
多分、IEがやっちまってるのだろうと納得しておく。

update 2009-09-09
イベントを発生させた要素を取得するメソッドがありました。

event.element();

prototype.js, フォーム checkbox & radio がチェック済みかをチェック

prototype.js を使ってフォーム入力検証。
checkbox と radio のチェック。
Field.present('ID') が IE で使えないみたい。
で関数を作ってみた。

function checkFormChecked (type, name, count)
{
	var bool = false;
	var find = 0;
	if (!count) count = 1;
	var elements = $('form ID').getInputs(type, name);
	elements.each(
		function (obj) {
			if ($F(obj)) find++;
			if (find >= count) {
				bool = true;
				return;
			}
		}
	);
	return bool;
}

フォーム

<!--radio-->
<input type="radio" id="q1-0" name="q1" value="ある" /><label for="q1-0">ある</label>
<input type="radio" id="q1-1" name="q1" value="ない" /><label for="q1-1">ない</label>
 
<!--checkbox-->
<input type="checkbox" id="q2-1" name="q2[]" value="1.りんご" /><label for="q2-1">1.りんご</label>
<input type="checkbox" id="q2-2" name="q2[]" value="2.みかん" /><label for="q2-2">2.みかん</label>
<input type="checkbox" id="q2-3" name="q2[]" value="3.いちご" /><label for="q2-3">3.いちご</label>
<input type="checkbox" id="q2-4" name="q2[]" value="4.すいか" /><label for="q2-4">4.すいか</label>>

使い方は

checkFormChecked("radio","q1"); // true or false
 
checkFormChecked("checkbox","q2[]"); // true or false

prototype.js の $('form ID').getInputs(type, name) を使って対象データを取出して eachを使って処理をする。
Ver. 1.6 からは break, continuereturn にしてネらしい。

prototype.js, フォーム selectタグが選択済みかをチェック

prototype.js でフォームの入力チェックをする時に、Field.present('ID') で「入力済み」「選択済み」がチェック可能なのは助かる。
input type が text に使え、textarea, select タグにも使える。

IE のためにselectタグにvalue属性を忘れずに

ただ select タグをチェックするとき IE は value 属性が無いと選択していても false しか返さないので注意が必要。

<select name="fruits" id="fruits">
	<option value="">選択してください</option>
	<option value="みかん"> みかん </option>
	<option value="リンゴ"> リンゴ </option>
</select>
if ($("fruits") && Field.present('fruits')) {
	// 選択済み
}

面倒くさがらないでちゃんと value 属性を書くと吉。

Yahoo! UI Library: YUI Compressor で prototype.js を圧縮してみた

便利に使っている prototype.js だけど Ver.1.6.0.3 だとファイルサイズは 128KB!
少しでもサイズを減らせないかとあがいてみる。

Yahoo! UI Library の 圧縮ツール JAVA アプリ YUI Compressor を使ってみた。

http://www.julienlecomte.net/yuicompressor/ からダウンロード。
現在のバージョンは 2.4.2。
ターミナルを起動し
1. 展開したフォルダ内の「build」フォルダへ移動
2. yuicompressor-2.4.2.jar を使って圧縮

1
2
cd /path to yuicompressor-2.4.2/build
java -jar yuicompressor-2.4.2.jar /path to prototype.js -o /path to output prototype-pack.js

見事に 76KB へ圧縮された。

圧縮は、改行コード・インデントをとることでファイルサイズを小さくしているのが基本のようだ。
圧縮ツールは色々あるけど YUI Compressor は品質がよろしいらしい。

always to preserve the operational qualities of the code

その他のツール
JSMIN
the Dojo compressor
Packer