« リンク先読みjavascript | トップページ | マイヤヒー マイヤフー »

2005年3月21日 (月)

リンク先読みBookmarklet

前回記事にしたリンク先読みjavascriptですが、任意のページで実行できるようにBookmarkletにしてみました。(Bookmarkletとはjavascriptで構成された規模の小さなスクリプトです。詳細についてはこちらのJavaScript::Bookmarkletが詳しいです)
 
 

■Bookmarklet■
リンク先を縮小表示 ← 普通にクリックしないでください。
対応ブラウザ…Internet Explorer 6(のはず)
ご利用する際は自己責任でお願いします。

 
 
実際にこの機能を使ってみる場合には、上記の「リンク先を縮小表示」のリンクを右クリックし「お気に入りに追加」してください。その際、「追加しようとしているお気に入りは、安全ではない可能性があります。続行しますか?」というメッセージが出ますが、はいをクリックしてください。

その後、縮小表示機能をONにしたいページで、登録したBookmarkletをクリックしてからリンクをポイントすると…

popup

こんな感じでリンク先を縮小表示します。
また、縮小表示機能をOFFにしたい時は、他のページへ移動するか、更新をすればOKです。
 
 
このBookmarkletのスクリプト内容としては以下のようになってます。

javascript:
function aO(){
 d=document;
 s=d.getElementsByTagName('A');
 for(i=0;i<s.length;i++){
  s[i].outerHTML='<a onmouseover="iL(\''+s[i].href+'\');" onmouseout="iC();" href='+s[i].href+'>'+s[i].innerHTML+'</a>';
 }
}
function iL(iU){
 e=event;
 db=d.body;
 f=d.createElement('iframe');
 fs=f.style;
 fs.position='absolute';
 fs.width=1024;
 fs.height=600;
 fs.setAttribute('zoom','40%');
 fs.top=e.clientY+db.scrollTop+8;
 fs.left=e.clientX+db.scrollLeft+8;
 f.src=iU;
 db.appendChild(f);
}
function iC(){
 db.removeChild(f);
}
aO();

実際はこれが1行になってるのですが、それをそのまま載せても分かりにくいのでここでは改行をしてあります。

このBookmarkletの基本的な考えとしては、

  • 実行されたら、Aタグにイベントを埋め込む(onmouseoverとonmouseout)
  • onmouseoverしたときの関数を作成。
    インラインフレームを生成し、サイズや表示位置を決めた後、ズーム機能でそれを縮小。
  • onmouseoutしたときの関数を作成。
    インラインフレームを削除。

となっています。

なので、表示倍率を変えたい場合にはfs.setAttribute('zoom','40%');のパーセントの数値を40% → 60%(もう少し大きく)などに変えることも可能です。

今のところ分かっている問題点としては…

  • ココログだと縮小表示の位置がずれる
  • 元々フレーム構成のページでは無効
  • 縮小表示を何度もした後、ブラウザの「戻る」が役に立たない(縮小表示のURLも「戻る」の対象になってるっぽい)
  • 縮小表示をした先のサイトによっては、親ページが切り替わってしまったり、勝手にスクロールしてしまったりする(縮小表示先のAタグの構成によって)
  • 縮小表示先のサイトがブラクラなどを設置してる場合は影響を受けるかもしれない(純粋にHTMLをそのまま解釈してるので…)
  • ページ内にjavascriptを含んだAタグがあると構文がそのまま出てきてしまう
  • 縮小表示先のページでjavascriptを使用してるとエラーが表示される

こんな感じの問題もあったりしますが、ニュースサイトのリンク切れチェックや走り読み、リンク先の画像を小さいサイズで確認したい場合、仕事で大量のサイトを確認しなければならない場合などには便利だと思うので、ぜひ使ってみてください。

« リンク先読みjavascript | トップページ | マイヤヒー マイヤフー »

おすすめソフト」カテゴリの記事

無駄な日記」カテゴリの記事

コメント

この記事へのコメントは終了しました。

オススメサイト

最近のトラックバック

2017年5月
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

忍者



無料ブログはココログ