Hatena::ブログ(Diary)

@camelmasaの開発日記 このページをアンテナに追加 RSSフィード

Githubで活動しています。

2009-01-11

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

| 15:21

javascriptに興味があって、javascriptbookmarkletを書けたら良いなあと思っていたところ、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)の部分の書き方を始めて見たので、調べてみるとFirefoxIE等のブラウザによって値が変わる為の記述のようです。

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

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/

furyu-teifuryu-tei 2009/01/11 21:54 老婆心ながら。
| オブジェクトを作成する時は、varは必要無いのかなと思ってしまいましたが
その後のリンク先でも触れられていますが、var を付けない場合にはグローバル変数として処理されます。
#例えばH='http://hamachiya.com/'としたあとで、alert(window.H)としてみてください。
従って、もし、グローバル変数として既にHが存在していた場合には上書きしてしまうことになるため、他のスクリプトの動作に思わぬ影響を与えてしまう可能性がありますので、気をつけた方がよいです。
id:Hamachiya2さんのスクリプトで、わざわざvarが付いている変数をvar抜きにした場合、動作がどう変わるか試してみても面白いかも知れません。

camelmasacamelmasa 2009/01/11 22:10 id:furyu-teiさんコメント有難うございます!
javascriptでvarを付ける付けないで、挙動がどのように変わるかわからなかったので、大変助かります。
”他のスクリプトの動作に思わぬ影響を与えてしまう可能性がある”というのは怖いですね。