Hamachiya2さんの記事を読んでjavascriptのbookmarkletを勉強してみました。

bookmarklet javascript

javascriptに興味があって、javascriptのbookmarkletを書けたら良いなあと思っていたところ、id:Hamachiya2さんの記事を読んで、ソースを解読しながら勉強してみました。
(間違えている箇所があるかもしれません…。)

http://d.hatena.ne.jp/Hamachiya2/20090109/fallingirl

javascript:(function(){

scroll(0,0);# X座標:0 Y座標:0に移動

#オブジェクトを作成
H='http://hamachiya.com/';
D=document;
F=Math.floor;
R=Math.random;
Q=new Image;
Q.src=H+'g1.gif';

#無名関数作成
#画像を追加、下にスクロールして一定の高さになると画像を変える
L=function(){

	#ローカル変数の定義
	var X=F(R()*vw);　#画面の幅の値を取得
	var Y=0;
	var r=F(R()*9)+3;　#0-9までのランダムの値+3の値を取得
	var V=Z(X,Y);

	#img要素の追加
	D.body.appendChild(V); 

	#無名関数作成
	#画像が下にスクロールし、一定の高さになると画像を変える
	var f=function(){
		if(Y+r<vh)
		{
			V.style.top=(Y+=r)+'px'　#変数Yにrを追加し、画像の高さを設定
		}else{
			V.style.top=vh+'px';
			V.src=H+'g2.gif';
			setTimeout(function(){V.src=H+'g3.gif'},550);　#0.55秒後に画像を変える
			clearInterval(t);
		}
	};

	#0.04秒毎に無名関数fを実行
	var t=setInterval(f,40)
};

#無名関数作成
#画像要素を作成し、styleを設定している
Z=function(x){
	var e=D.createElement('img');
	e.src=Q.src;
	var s=e.style;
	s.position='absolute';
	s.left=x+'px';
	s.top=0;
	return e;
};

#グローバル変数の定義
var vw,vh;

#imageオブジェクトのonloadに無名関数作成
#画像のサイズを読み込んで、表示可能な範囲を決定している
Q.onload=function(){
	vw=(self.innerWidth||D.documentElement.clientWidth||D.body.clientWidth)-Q.width;　#画面の幅から画像の幅を引いた値を取得
	vh=(self.innerHeight||D.documentElement.clientHeight||D.body.clientHeight)-Q.height;　#画面の高さから画像の高さを引いた値を取得
	setInterval(L,800);　#0.8秒毎に無名関数Lを実行
	Q.onload={}　#Q.onloadを空にする
}

})()

(self.innerWidth||D.documentElement.clientWidth||D.body.clientWidth)の部分の書き方を始めて見たので、調べてみるとFirefoxやIE等のブラウザによって値が変わる為の記述のようです。

下記は確認用JavaScriptです。IEとFirefoxで値の取得の仕方が違うのを確認できます。

JavaScript:(function(){D=document;alert(self.innerWidth);alert(D.documentElement.clientWidth);alert(D.body.clientWidth);alert(self.innerWidth||D.documentElement.clientWidth||D.body.clientWidth);})()


オブジェクトを作成する時は、varは必要無いのかなと思ってしまいましたが、特には必要無い様子。

参考サイト
http://www.asahi-net.or.jp/~rn8t-nkmr/pentomino/appendix-2-1.html


img.onloadは使用した事が無い。画像が読み込まれた時動作する？
上のid:Hamachiya2さんのソースでは無名関数が実行される。

参考サイト
http://hisasann.com/housetect/2008/07/imgonload.html


Q.onload={}としているのは、GIFアニメのコマが再生されるたびにimg.onloadが呼ばれる為空の値にしている。(IE7では恐ろしい数の女の子が降ってきた)

参考サイト
http://blog.hakoniwa.net/archives/204

(追記)
IE7では恐ろしい数の女の子が降ってきたのは、Q.onload={}を抜いた場合です^^


では、応用して左から女の子が移動して、右に着陸(？)するソースはどのように書くのか？

javascript:(function(){scroll(0,0);H='http://hamachiya.com/';D=document;F=Math.floor;R=Math.random;Q=new Image;Q.src=H+'g1.gif';L=function(){var X=F(R()*vh);var Y=0;var r=F(R()*9)+3;var V=Z(X);D.body.appendChild(V);var f=function(){if(Y+r<vw){V.style.left=(Y+=r)+'px'}else{V.style.left=vw+'px';V.src=H+'g2.gif';setTimeout(function(){V.src=H+'g3.gif'},550);clearInterval(t);}};var t=setInterval(f,40)};Z=function(x){var e=D.createElement('img');e.src=Q.src;var s=e.style;s.position='absolute';s.top=x+'px';s.left=0;return e;};var vw,vh;Q.onload=function(){vw=(self.innerWidth||D.documentElement.clientWidth||D.body.clientWidth)-Q.width;vh=(self.innerHeight||D.documentElement.clientHeight||D.body.clientHeight)-Q.height;setInterval(L,800);Q.onload={}}})()

こんな感じかな。
id:Hamachiya2さんのソースと全然変わってない…。

いやー、凄い勉強になりました。
ソースを公開しているid:Hamachiya2さん有難うございました！



[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/