はてブ追加ページでタグが探しにくい

はてブの追加ページって、 自分が過去に登録したタグをワンクリックで入力できますけど、 タグを追加しすぎて探すのが大変です。 特に面倒なのが流行り物の扱いです。 アニメを放映中には「musashi」とかタグつけたりしますけど、 放映が終わって1年も経てば、 新しくmusashiタグをつけることもないし、 かといってmusashiタグを消すのもおかしいので、 どうしたものかなあと思っていました。

そんなこんなでいくつか試してみました。 パターン1。 ブックマーク一覧ページにある自分のつけたタグは、 そのタグをつけたエントリーの個数によって文字の大きさが変わるので、 それを読み込んできて同じように文字の大きさを変えたらどうか。

(function() {
     function resizeTags(text) {
         var dummy = document.createElement('div');
         dummy.innerHTML = text;
         var anchors = dummy.getElementsByTagName('a');
         var cloud = {};
         for (var i=anchors.length-1; i>=0; i--) {
             var a = anchors[i];
             if ((a.className == 'tag-latest') || (a.className == 'tag-later')) {
                 cloud[a.innerHTML] = a.style.fontSize.substr(0, a.style.fontSize.length-2);
             }
         }
 
         var tags = $('tags_list').getElementsByTagName('span');
         for (var i=tags.length-1; i>=0; i--) {
             var tag = tags[i].innerHTML;
             if (cloud[tag]) {
                 var size = (cloud[tag] - 8) * 5;
                 if (size <= 0) {
                     size = 1;
                 }
                 tags[i].style.fontSize = '' + size + 'pt';
             }
         }
     }
 
     var request = new Ajax.Request(
         'http://b.hatena.ne.jp/' + Hatena.id,
         {
             'method': 'get',
             onComplete: function(req) {
                 resizeTags(req.responseText);
             }
         }
     );
 })();

やってみたら、あまり有効ではありませんでした。 数字をいじってタグの大きさを強調しているのですが((大きさ-8)*5)、 それでもあまり差が出ません。 もっと計算を工夫すればいいのかもしれませんが。

パターン2。 最新のページのタグの数で、同じようにしてみる。

(function() {
     function resizeTags(text) {
         var dummy = document.createElement('div');
         dummy.innerHTML = text;
         var span = dummy.getElementsByTagName('span');
         var cloud = {};
         for (var i=span.length-1; i>=0; i--) {
             if (span[i].className == 'tag') {
                 var a = span[i].getElementsByTagName('a');
                 if (! cloud[a[0].innerHTML]) {
                     cloud[a[0].innerHTML] = 1;
                 } else {
                     cloud[a[0].innerHTML]++;
                 }
             }
         }
 
         var tags = $('tags_list').getElementsByTagName('span');
         for (var i=tags.length-1; i>=0; i--) {
             var tag = tags[i].innerHTML;
             if (cloud[tag]) {
                 var size = 10 + cloud[tag] * 5;
                 tags[i].style.fontSize = '' + size + 'pt';
             }
         }
     }
 
     var request = new Ajax.Request(
         'http://b.hatena.ne.jp/' + Hatena.id,
         {
             'method': 'get',
             onComplete: function(req) {
                 resizeTags(req.responseText);
             }
         }
     );
 })();

統計の対象にするタグの数が少なすぎていまいち。

パターン3。 こうなったら自分で無視タグリストを管理する。 流行り物タグを登録していくわけですね。

(function() {
     var ignoreTags = [
         'musashi',
         'らきすた'
     ];
     var ignoreTable = {};
     for (var i=ignoreTags.length-1; i>=0; i--) {
         ignoreTable[ignoreTags[i]] = true;
     }
     var span = document.getElementById('tags_list').getElementsByTagName('span');
     for (var i=span.length-1; i>=0; i--) {
         var tag = span[i].innerHTML;
         if (ignoreTable[tag]) {
             span[i].style.display = 'none';
         }
     }
 })();

これは割といい感じです。これでちょっと使ってみます。

Original Article: http://blog.fuktommy.com/1205793485