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

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

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

(中略)

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




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


で、このBookmarkletをもうちょっといじってみました。
Greasemonkey/SeaHorse Scriptも作ってみました。
具体的な発想としては。

  1. ボタンで拡大したい
  2. 縮小もしたい
  3. できればはてブのページを開いた時点でそうなってて欲しい
    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ディレクトリに格納。
例えばこんな感じかな。

C:\Program Files\Fenrir & Co\Sleipnir\scripts

でもって、メニューバー>スクリプト>スクリプトの再読み込みをしてやると、
一覧に出てくるのでクリックして実行。




bookmarkletは動いてないけど、
これでSleipnirでも似たようなことが出来ます。



3については、現在格闘中なので、
またエントリを改めて。



追記

あ、IE6で動かないのは長すぎるからだ…508文字までか…。
100文字以上オーバーしてるわ。
やっぱり、処理を別ファイルに書き出さないとダメかな…

Bookmarklet - ブックマークレットを作成する際のポイント



追記その2

Greasemonkey/SeaHorse Script向けにもしてみました。
うーむ、なかなか面白い。

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