はてなブックマークのアイコンを拡大縮小するボタンを付けるBookmarklet - NOBODY:PLACE

はてなブックマークのアイコンを拡大縮小するボタンを付けるBookmarklet はてなブックマークのアイコンを拡大縮小するボタンを付けるBookmarklet

March 25, 2008 - [ hatena ][ javascript ][ sleipnir ]

はてなブックマークのアイコンを大きくしてみたらどうか？というrikuoさんの提案。

2008-03-24 - 聴く耳を持たない(片方しか)
はてなブックマークが近いうちにリニューアル・機能が改善されるとのこと。

で、実際にどういう風な機能がつくかは分からないですし、インタビュー記事を楽しみに待とうと思うのですが、システムで対応する他にもアイコンの大きさを変えるだけでも効果が出るんじゃないかな？と考えました。

（中略）

この16×16ピクセルのアイコンって、かなり小さくて、それぞれの特徴とか掴み難いのです。それで、表題にも書いたのですけれども、これをもしも大きくしてみたら、……具体的には32×32ピクセルにしたらどうだろう？と考えました。

で、Bookmarklet を作ってみました。

で、このBookmarkletをもうちょっといじってみました。

Greasemonkey/SeaHorse Scriptも作ってみました。

具体的な発想としては。

ボタンで拡大したい
縮小もしたい
できればはてブのページを開いた時点でそうなってて欲しい
1. SleipnirならURIアクションマネージャ
2. FirefoxならGreasemonkey

そんな感じのアレを実装してみたいってことで。

完成品はこちら。

javascript:void(function(e){e.innerHTML+='<input type="button" value="L" onClick="'+"var v=this.value;var a=document.getElementsByTagName('img');s='src';var o,n,w,h;if(v=='S'){o='profile.gif';n='profile_s.gif';w=16;h=16;this.value='L';}else{o='profile_s.gif';n='profile.gif';w=32;h=32;this.value='S';}for(i=0;i<a.length;i++){l = a[i].getAttribute(s);if (!l) continue;r=new RegExp(o + '$');if (!l.match(r)) continue;a[i].setAttribute(s,l.replace(o,n));a[i].setAttribute('width',w);a[i].setAttribute('height',h);}"+'" style="border:none;padding:0 5px;margin:0;font-weight:bold;background-color:#69c;color:#fff;" id="hbm-icon-larger-button">';})($("comments"))

動作確認はFireFox。

FireFoxでは動くんだけど、IE6ではイマイチ動かない感じ。
~~forの中のgetAttributeが上手くできてない。~~ → 追記
単独のプログラムとしては動くんだけど（rikuoさんのBookmarkletは問題ない）、
onClickで呼ぶとダメっぽ。

はて。

一応、インデントしたソースも晒しておきます。

javascript:void(function(e){
  e.innerHTML+='<input type="button" value="L" onClick="'
    +"var v=this.value;
    var a=document.getElementsByTagName('img');
    s='src';
    var o,n,w,h;
    if(v=='S'){
      o='profile.gif';
      n='profile_s.gif';
      w=16;
      h=16;
      this.value='L';
    }else{
      o='profile_s.gif';
      n='profile.gif';
      w=32;
      h=32;
      this.value='S';
    }
    for(i=0;i<a.length;i++){
      l = a[i].getAttribute(s);
      if (!l) continue;
      r=new RegExp(o + '$');
      if (!l.match(r)) continue;
      a[i].setAttribute(s,l.replace(o,n));
      a[i].setAttribute('width',w);
      a[i].setAttribute('height',h);
    }"
    +'" style="border:none;padding:0 5px;margin:0;font-weight:bold;background-color:#69c;color:#fff;" id="hbm-icon-larger-button">';
})($("comments"))

一応、上記のスクリプトで構想の1と2は実現できます。
IEはわかりませんがSleipnirのスクリプトなら動くので、体裁を整えるとこんな感じ。

以下、ソース。

/**
 *
 * はてなブックマークにアイコン拡大（縮小）のボタンを付ける
 *
 * 改版履歴
 * v0.0.1 2008/03/25 新規作成
 *
*/

/* 初期化 */
pnir     = new ActiveXObject("Sleipnir.API");
tabindex = pnir.ActiveIndex;
docid    = pnir.GetDocumentID(tabindex);
document = pnir.GetDocumentObject(docid);

function addHbmIconEnlargeButton() {
  var e=document.getElementById("comments");
  e.innerHTML+='<input type="button" value="L" onClick="'+"var v=this.value;var a=document.getElementsByTagName('img');s='src';if(v=='S'){var o='profile.gif';var n='profile_s.gif';var w=16;var h=16;this.value='L';}else{var o='profile_s.gif';var n='profile.gif';var w=32;var h=32;this.value='S';}for(i=0;i<a.length;i++){l = a[i].getAttribute(s);if (!l) continue;r=new RegExp(o + '$');if (!l.match(r)) continue;a[i].setAttribute(s,l.replace(o,n));a[i].setAttribute('width',w);a[i].setAttribute('height',h);}"+'" style="border:none;padding:0 5px;margin:0;font-weight:bold;background-color:#69c;color:#fff;" id="hbm-icon-larger-button">';
}
addHbmIconEnlargeButton();

コレを例えば、「HbmIconEnlarge.js」とか名前を付けて、
sleipnir直下のscriptディレクトリに格納。
例えばこんな感じかな。