任意のページ上にテレビ番組表を表示するブックマークレット(Firefox限定)
たとえばネットでテレビ番組表を見たいと思ったときに、わざわざポータルサイトのテレビ番組表を別ウインドウや別タブで開くのってめんどくさいですよね？
そこで現在のページ上にiframeで重ねて現在のテレビ番組表を表示するブックマークレットを作ってみました。Firefox限定です。IEで動かないので・・・。
任意のページ上にテレビ番組表を表示するブックマークレット(Firefox限定)
(このリンクはRSSリーダーでは表示されない場合があります。)
こんな風にlivedoor Readerの上にも表示できます。ちなみにテレビ番組欄まで自動スクロールはしません。URLに#mainSarchを付加するとちょこっとスクロールしてくれますが、Closeボタンが隠れたりするのでつけてません。(ちなみにmainSarchはtypoではありません。Yahoo!のhtmlソースがそうなってるだけです。)
iframe要素はdocument.lastChildにappendしているのでフレームを利用しているBloglines上にも表示できます。デフォルトは東京のYahoo!のテレビ番組表になってます。
まぁ表示するサイトはテレビ番組表に限らず、mixiとか自分がちょっとチェックしたいページにしておけば色々使えるので便利です。(以下のソースの太字部分を変えればいい。)
javascript:(function(){var%20y=document.body.scrollTop;var%20d=document.createElement("div");
with(d.style){textAlign="right";backgroundColor="#fff";width="100%";height="50%";position="absolute";
top=y;left=0;margin="auto";}var%20b=document.createElement("input");b.type="button";b.value="Close";
b.setAttribute("onclick","document.lastChild.removeChild(document.lastChild.lastChild)");
var%20i=document.createElement("iframe");i.src="http://tv.yahoo.co.jp/vhf/tokyo/realtime.html";
with(i.style){width="100%";height="90%";}d.appendChild(b);d.appendChild(i);document.lastChild.appendChild(d);})();
ところでどなたかIEで動くようにできますか？
コメントを残す
著者について
先に投稿させていただいたブックマークレットですが、top,leftの指定で5の箇所を”5px”などとしないと正しく動作しないページがありました。訂正します。すみません。
>>oshiroさま
ありがとうございます。
IEで動かないことなどすっかり忘れておりました。
document.lastChildがよくないわけですね。。
勉強になります！
(横に長く表示されていたので改行を入れさせていただきました。)
たびたびすみません。scrollTopの取得で、bodyではなく、documentElementが必要となるページがあるようで、他を参考に(document.body.scrollTop || document.documentElement.scrollTop)としてみました（これでだいたいOKかな？）。pxの単位指定も含んでいます。また、Closeボタンは強引にタグ書きしてたんですが、投稿時にその箇所が消えてしまっていたようです。16進表記にしてみました。改行追加お手数おかけしました。今回はこちらも入れてみています。
javascript:var%20tvmap_func=function(){
var%20d=document;var%20w=window;
d.getElementById(‘tvmap’).style.top=
(d.body.scrollTop||d.documentElement.scrollTop)+5+”px”};
if(window.attachEvent){window.attachEvent(‘onscroll’,tvmap_func)}
else{window.addEventListener(‘scroll’,tvmap_func,true)};
(function(){var%20url=”http://tv.yahoo.co.jp/vhf/tokyo/realtime.html”;
var%20d=document;var%20div=d.createElement(“div”);div.id=”tvmap”;
with(div.style){backgroundColor=”#eee”;border=”solid%201px%20#aae”;
filter=’alpha(opacity=95)’;opacity=.95;zIndex=”999″;
position=”absolute”;textAlign=”right”;margin=”auto”;
width=”95%”;height=”55%”;left=”5px”;
top=(d.body.scrollTop||d.documentElement.scrollTop)+5+”px”}
div.innerHTML+=”%3cinput%20type=\”button\”%20value=\”Close\”%20
onClick=\”document.body.removeChild(document.getElementById(‘tvmap’));
if(window.detachEvent){window.detachEvent(‘onscroll’,tvmap_func)}
else{window.removeEventListener(‘scroll’,tvmap_func)};
delete%20tvmap_func\”%3e”;
var%20i=d.createElement(“iframe”);i.src=url;
with(i.style){width=”100%”;height=”95%”}
div.appendChild(i);d.body.appendChild(div)})()
参考になります。
私はボタンではなくBodyのクリックでremoveするようにしてみました。
ソースはoshiro | 2008年05月23日 04:41さんのコードを拝借しました。
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://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)+5+”px”;
left=5+”px”;margin=”auto”;}d.innerHTML+=””;
var%20i=document.createElement(“iframe”);i.src=url;
with(i.style){width=”100%”;
height=”95%”;}d.appendChild(i);
document.body.appendChild(d);})()
【F.Ko-Ji】 さん
今回勉強になったし便利なので、ソースコードをそのままお借りして私のbolgでも記事としてエントリーさせてもらってもよろしいでしょうか？
> gatchanさん
コメントありがとうございます。
ソースコード掲載の件は全然問題ありません！
どうぞお使いください。
F.Ko-Ji】 さん
コード掲載の件了解していただいてありがとうございます！
今回の私のコードがブログの体裁を崩してしまってるのでヒューマンリーダブルなコード（適度に改行して）にして再投稿したほうがよいですか？
まさかこういう形になるとは思ってなかったものですから^^;~>
申し訳ありません・・・。
いつでもおっしゃってください。ここしばらく見てますので；
Firefoxでは崩れてないですが他のブラウザで崩れてたりしますか？
ちょっと明日確認してみますので大丈夫ですよー
ありがとうございます。
今回表示が崩れた(横スクロールバーが伸びる)ブラウザはChromeです。
IE(7)とFirefox3は大丈夫でした。
お手数です><; よろしくお願いします！
こちらで改行入れておきました。
これで大丈夫ではないかと思います。
対応ありがとうございます！
早速私もブログにエントリーさせてもらいました。
【「天気予報」の表示版】も載せましたので、よかったらみてみてください><; http://d.hatena.ne.jp/gatchan/