Blogger で Tag Cloud を表示する |JavaScript|

気付いてる人もいるかもしれないけど、このブログの右カラム一番上「About」セクションに Tag Cloud を付けた。今回は Blogger で、Tag Cloud を表示させる方法を書いてみる。

Tag Cloud とは

Tag Cloud は、よく使われているタグほど大きなフォントで表示するタグの見せ方。 はてなブックマークや Flickr なんかで見かけることができる。

Blogger では、Tag Cloud どころかタグ (カテゴリー) すらサポートされていないので、まず「 関連情報をエントリーの外に表示させる (3)」のやり方でタグ (カテゴリー) を付ける。次に、JavaScript で同じページに表示されてるタグを集めて、タグの出現回数ごとに (フォントを大きくするよう) CSS を指定する手順を踏む。

そんなわけで、この Tag Cloud は複数の記事が載ってるページ (インデックス・ページと月別アーカイブ・ページ) でしか表示されない。個別ページでこの記事を読んでる人は、 インデックス・ページを見て下さいな。

準備

まず、タグ (カテゴリー) を挿入するコードだけど、それは前の記事 ( 関連情報をエントリーの外に表示させる (3)) の設定が必要。

次に Tag Cloud を表示させたい所に、次のコードを入れる。

<MainOrArchivePage>
  <div id="TagCloud"></div>
</MainOrArchivePage>

MainOrArchivePage で囲むのは、個別ページだと Tag Cloud がちゃんと動かないから。

Source Code

• outEntry.js

//
// User options
//
var hatena = 'http://b.hatena.ne.jp/at-aka/';

//
// Main function
//
function outEntry ()
{
  var divs = document.getElementsByTagName('div');
  var length = divs.length;
  for (var i=0; i<length; i++){
    printCategory (divs[i]);
//    printAmazon (divs[i]);
  }
  printTagCloud ();
}

//
// Utility functions
//
function gid (id){
  return document.getElementById(id);
}

function getNum (e)
{
  return (e.className=='post') ? e.getAttribute('id') : getNum(e.parentNode);
}

//
// Functios
//

var tag_list = new Array();
var tag_cloud = new Array();
function printCategory (e)
{
  if (e.className == 'category'){
    var num = getNum(e);
    var txt = '<br />Category: ';
    var tag = e.getAttribute('title').split(',');
    for (var j=0; j<tag.length; j++){
      var t = tag[j];
      tag[j] = '<a href="' + hatena + t + '/" class="tag">' + t + '</a>';
      // for Tag Cloud
      if (tag_cloud[t]){
        tag_cloud[t].num++;
      } else {
        tag_list[tag_list.length] = t;
        tag_cloud[t] = new TagCloud (tag[j], 1);
      }
    }
    txt += tag.join(', ');
    gid('category_'+num).innerHTML = txt;
  }
}

function TagCloud (name, num)
{
  this.name = name;
  this.num  = num;
}

function printTagCloud ()
{
  var div = gid ('TagCloud');
  if (div){
    tag_list.sort(compareNames);
    for (i=0; i<tag_list.length; i++){
      var tag = tag_list[i];
      var span = document.createElement ("span");
      var space = document.createTextNode (" ");
      span.innerHTML = tag_cloud[tag].name;
      span.className = "tag_cloud_" + tag_cloud[tag].num;
      div.appendChild (span);
      div.appendChild (space);
    }
  }
}

function compareNames (a, b)
{
  var nameA = a.toLowerCase();
  var nameB = b.toLowerCase();
  if (nameA < nameB) return -1;
  if (nameA > nameB) return 1;
  return 0;
}

      

前回のコードと比べると、色を付けた部分が変更されている。それから、新しい関数 TagCloud, printTagCloud, compareNames が加わった。

CSS の編集

関数 printTagCloud によって、Tag Cloud 内のタグには次のようなクラス名が付寄される。

tag_cloud_#num

つまり、1 回しか使われなかったタグは tag_cloud_1。5 回使われたタグは tag_cloud_5 というクラス名を持つ。

これに CSS で適当なフォント・サイズを指定すればいい。僕は次のような CSS を書いてる。

.tag_cloud_1  { font-size: 80%; }
/* .tag_cloud_2  { font-size: 100%; } */
.tag_cloud_3  { font-size: 120%; }
.tag_cloud_4  { font-size: 144%; }
.tag_cloud_5  { font-size: 173%; }
.tag_cloud_6  { font-size: 200%; }
.tag_cloud_7  { font-size: 220%; }
.tag_cloud_8  { font-size: 230%; }
.tag_cloud_9  { font-size: 240%; }
.tag_cloud_10 { font-size: 250%; }

ここら辺、上手くいってるかどうか自信がない。見易いかなぁ? 各自、好みで変えて下さい。

.