任意のページ上にテレビ番組表を表示するブックマークレット(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で動くようにできますか？

document表示テレビ番組lastChildページvarブックマークレットcreateElement

English version

「任意のページ上にテレビ番組表を表示するブックマークレット(Firefox限定)」を携帯で読む

2007/03/08 23:37:39 by F.Ko-Ji
パーマリンクコメント (6) トラックバック (1) Javascript

前のエントリー: « エントリーページではエントリータイトルをh1タグで括ったほうがよい
次のエントリー: やっぱり位置情報は面白い - モバイルナビ会議 »

トラックバック

このエントリーのトラックバックURL:

この一覧は、次のエントリーを参照しています: 任意のページ上にテレビ番組表を表示するブックマークレット(Firefox限定):

» [javascript]TVの時刻表を表示するBookmarkletが凄く便利な件 from I am Cruby!
前にも書いたような気がするけど、このbookmarkletがすこぶる便利。任意のページ上にテレビ番組表を表示するブックマークレット(Firefox限... [詳しくはこちら]

任意のページのほうをスクロールしてもiframeがついてくる、もしくは現在見ている画面内(縦にある程度スクロールした状態)の上部に表示なんてことは出来ないでしょうか。
（記事を読んでいる状態でブックマークレットを表示すると上部に戻らないと確認が出来ないので。。）

投稿者: mi2 | 2007年03月28日 14:33

>>mi2さん

コメントありがとうございます。
ご指摘の件は自分でも不便に感じていたところです。
ちょっと検討してみます。

投稿者: F.Ko-Ji | 2007年03月29日 14:01

参考にさせて頂いてます。

IEだとlastChildあたりの参照がうまくいかないようですね。idを使って、さらにscrollに対応もさせてみました。次でどうでしょう？いちおうIEとFirefoxで動作確認してます。番組表サイトを切り替えられたりするともっと便利なんですが、さらに長くなっちゃいますね。

javascript:var%20tvmap_func=function(){
with(document.getElementById('tvmap').style){
top=document.body.scrollTop+5}};
if(window.attachEvent){window.attachEvent('onscroll',tvmap_func)}
else{window.addEventListener('scroll',tvmap_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+5;
left=5;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);})()

投稿者: oshiro | 2008年05月23日 04:41

先に投稿させていただいたブックマークレットですが、top,leftの指定で5の箇所を"5px"などとしないと正しく動作しないページがありました。訂正します。すみません。

投稿者: oshiro | 2008年05月23日 06:24

>>oshiroさま
ありがとうございます。
IEで動かないことなどすっかり忘れておりました。
document.lastChildがよくないわけですね。。
勉強になります！

(横に長く表示されていたので改行を入れさせていただきました。)

投稿者: F.Ko-Ji | 2008年05月23日 23:21

たびたびすみません。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)})()