【便利！】任意のページ上にテレビ番組表を表示するブックマークレットについて

任意のページ上にテレビ番組表を表示するブックマークレット
 http://blog.fkoji.com/2007/03082337.html

便利です。

こういうものを常々探していましたし、自分で作ろうかとも思っていました。
毎日出かける前とか天気予報をチラッと見たい時に
「これはブックマークレット的なもの(ワンプッシュで最新の情報を得れるってあたり)がいいな」
という動機から上記サイトにたどりつきました。(今回、天気予報とは違うけど主旨は同じ)

で、このブックマークレットの利点はというと

タブを消費しない(私は毎日番組表のタブを1つキープしていました；)
気になったときにだけ実行すればよい(そして最新の情報が得れる)
すぐに読み込んだ情報を消せる
URLさえ変更すれば色々なサイトに応用できる(汎用性が高い！)

タブブラウジングな時代ですが、消費リソースは最小限にしたいものですね。

で、今回オリジナルの記事主さんに了承を得たのでこっちでコードを追ってみようと思います。
(オリジナルのコードは記事主F.Ko-Ji さん、以下のコードは上記エントリー内のコメント欄でポストしてくれているoshiro さんのを元に更に改良しました)
※コードはヒューマンリーダブルにしてありますのでブックマークレット化するにはソース下にあるコードからうまいことから行ってくださいませｗ

ソース

javascript:
/*イベント定義1*/
var%20tvmap_func=function(){
	with(document.getElementById('tvmap').style){
		top=(document.body.scrollTop||document.documentElement.scrollTop)+"5px";
	}
};
/*イベント定義2:body部をクリックすれば消せるようにした*/
var%20remove_func=function(evt){
	if(document.getElementById('tvmap')&&evt.target.id!="tvmap"){
		document.body.removeChild(document.getElementById('tvmap'));
	}
};
/*ブラウザごとにイベント登録方法を分ける*/
if(window.attachEvent){
	window.attachEvent('onscroll',tvmap_func);
	window.attachEvent('onclick',remove_func);
}else{
	window.addEventListener('scroll',tvmap_func,false);
	window.addEventListener('click',remove_func,false);
}

(function(){
	/*urlを変えればいろんなサイトに応用できる*/
	var%20url="http://tv.yahoo.co.jp/vhf/tokyo/realtime.html";
	var%20d=document.createElement("div");
	d.id="tvmap";
	with(d.style){
		textAlign="right";
		backgroundColor="#eee";
		width="95%";
		height="55%";
		filter='alpha(opacity=95)';
		opacity=.95;
		position="absolute";
		top=(document.body.scrollTop||document.documentElement.scrollTop)+"5px";
		left="5px";
		margin="auto";
		zIndex="100";
	}
	d.innerHTML+="";
	var%20i=document.createElement("iframe");
	i.src=url;
	with(i.style){
		width="100%";
		height="95%";
	}
	d.appendChild(i);
	document.body.appendChild(d);
})()

※動作確認FF3、IE7

はてなはjavascript:プロトコルが設定できないようなので↓の赤字の手順でブックマークレット化してみてください。メンドイですね、すみません＞＜

任意のページ上にテレビ番組表を表示するブックマークレットg
[1]↑のリンクをとりあえずブックマークに追加する
[2]↓のコードを追加したブックマークのURL として設定すればブックマークレットになります

javascript:var%20tvmap_func=function(){with(document.getElementById('tvmap').style){top=(document.body.scrollTop||document.documentElement.scrollTop)+"5px";}};var%20remove_func=function(evt){if(document.getElementById('tvmap')&&evt.target.id!="tvmap"){document.body.removeChild(document.getElementById('tvmap'));}};if(window.attachEvent){window.attachEvent('onscroll',tvmap_func);window.attachEvent('onclick',remove_func);}else{window.addEventListener('scroll',tvmap_func,false);window.addEventListener('click',remove_func,false);}(function(){var%20url="http://tv.yahoo.co.jp/vhf/tokyo/realtime.html";var%20d=document.createElement("div");d.id="tvmap";with(d.style){textAlign="right";backgroundColor="#eee";width="95%";height="55%";filter='alpha(opacity=95)';opacity=.95;position="absolute";top=(document.body.scrollTop||document.documentElement.scrollTop)+"5px";left="5px";margin="auto";zIndex="100";}d.innerHTML+="";var%20i=document.createElement("iframe");i.src=url;with(i.style){width="100%";height="95%";}d.appendChild(i);document.body.appendChild(d);})()

おまけ
任意のページ上に天気予報を表示するブックマークレットg
[1]↑のリンクをとりあえずブックマークに追加する
[2]↓のコードを追加したブックマークのURL として設定すればブックマークレットになります

javascript:var%20tvmap_func=function(){with(document.getElementById('tvmap').style){top=(document.body.scrollTop||document.documentElement.scrollTop)+5}};var%20remove_func=function(evt){if(document.getElementById('tvmap')&&evt.target.id!="tvmap"){document.body.removeChild(document.getElementById('tvmap'));}};if(window.attachEvent){window.attachEvent('onscroll',tvmap_func);window.attachEvent('onclick',remove_func);}else{window.addEventListener('scroll',tvmap_func,false);window.addEventListener('click',remove_func,false);};(function(){var%20url="http://weather.yahoo.co.jp/weather/jp/40/8210.html#contents-start";var%20d=document.createElement("div");d.id="tvmap";with(d.style){textAlign="right";backgroundColor="#eee";width="95%";height="55%";filter='alpha(opacity=95)';opacity=.95;position="absolute";top=(document.body.scrollTop||document.documentElement.scrollTop)+5+"px";left=5+"px";margin="auto";zIndex="100";}d.innerHTML+="";var%20i=document.createElement("iframe");i.src=url;with(i.style){width="100%";height="95%";}d.appendChild(i);document.body.appendChild(d);})()

(元々はこれがやりたかった)

Bloggerにもリンクをおいておきましたのでどうぞ！
Blogger:任意のページ上に天気予報を表示するブックマークレットg

*1:zIndex="100";をプロパティとして追加しました。Nullyさんありがとうございます＞＜；