自作タグクラウドを設置する

タグクラウド設置サービスはいくつかありますが、サーバーダウンしていたり思ったようなタグに纏めてくれていなかったり、デザインが気に入らなかったりとなかなか難しい問題があります。

そこで、この記事(http://ameblo.jp/blog-lab/entry-11080825699.html)で紹介したタグ別に記事を纏める方法を使って自作のタグクラウドを作ってみようと思います。
前回のコードで

/*
　ここに後でタグクラウドの処理を書きます。
*/

と書いてあった部分に手を入れてみます。

<script type="text/javascript">
(function($){
  var loc = location.href;
  $.ajax({
    url: "http://ameblo.jp/blog-lab/entry-11080656524.html",
    cache: false,
    success: function(html){
      var tagObj = {};
      var tagsCache = [];
      $('div.taggedentry:lt(50)',html).each(function(){
        tagsCache = $('p.tags:eq(0)',this).html().split(',');
        tagsCache = tagsCache.slice(1,tagsCache.length-1);
        for(var i=0,l=tagsCache.length;i<l;i++){
          if(tagObj.hasOwnProperty(tagsCache[i])){
            tagObj[tagsCache[i]] += 1;
          }else{
            tagObj[tagsCache[i]] = 1;
          }
        }
      });
      for(var tagKey in tagObj){
        tagObj[tagKey] =  tagObj[tagKey] < 7?tagObj[tagKey] :6;
        $('#tagCloud').append(
          '<li class="level'+
          tagObj[tagKey]+
          '"><a style = "top:'+
          String(~~(Math.random()*11)-5)+
          'px" href="http://ameblo.jp/blog-lab/entry-11080656524.html?tag='+
          encodeURI(tagKey)+
          '">'+
          tagKey+
          '</a></li>'
        );
      }
      if(loc.search('entry-11080656524') === -1 && $('article').length){
        $('article').each(function(){
          var self = this;
          var aloc = $('a:eq(0)',self).attr('href');
          var newhtml = $('.articleText:eq(0)',html).html()
          .replace(aloc,'<span class="matchurl">'+aloc+'</span>');
          ($('span.matchurl',newhtml).length) && (
            $('span.matchurl',newhtml).each(function(){
              var parent = ($(this).parents('div.taggedentry'))[0];
              $('.articleTheme:eq(0)',self)
              .after('<br><span class="articleTags">タグ：</span>');
              var tags = $('p.tags:eq(0)',parent).html().split(',');
              tags = tags.slice(1,tags.length-1);
              for(var i = 0,l = tags.length;i < l;i++){
                $('.articleTags:eq(0)',self)
                .append(
                  '<a href="http://ameblo.jp/blog-lab/entry-11080656524.html?tag='+
                  encodeURI(tags[i])+'">'+tags[i]+'</a> '
                );
              }
            })
          );
        });
      }else if(loc.search('entry-11080656524') !== -1){
        $('.articleDetailArea').css('display','none');
        $('.articleText br').remove();
        var tag = decodeURI(loc.split('?tag=')[1]);
        $('.skinArticleHeader2 h1 a:eq(0)').html('タグ『'+tag+'』記事一覧');
        var articleTxt = $('.articleText:eq(0)');
        articleTxt.html(
          articleTxt.html()
          .replace(
            new RegExp(','+tag+',', 'g'),'<span class="matchtag">'+tag+'</span>'
          )
        );
        $('.taggedentry:has(span.matchtag)').each(function(){
          $(this).css('display','block');
          $('p.title:eq(0)',this).wrap('<a href="'+$('p.url',this).html()+'"></a>');
        });
      }else{
  
      }
    }
  });
}(jQuery));
</script>

※『entry-11080656524』は、タグ表示用の記事のURLの一部分に書き換えてください。
※『http://ameblo.jp/blog-lab/entry-11080656524.html』は、タグ表示用の記事のURLに書き換えてください。

9行目の『$('div.taggedentry:lt(50)',html)』の『:lt(50)』の部分は、最新記事から何記事目までをタグクラウドに反映させるか、という数字です。
好きな数字に変更してください。

次に、フリースペースにタグクラウドのHTMLを書きます。

<div class="skinMenuHeader"><span class="skinMenuTitle" style="visibility: visible; ">Tag Cloud</span></div><ul id="tagCloud" class="tagCloud"></ul>

改行するとbrタグが勝手に挿入されてしまうので、改行せずに書いてください。

最後にCSS。
僕のところではCSSはこちらのサイトでお借りしました。
ただ、ちょっと改変していまして、記事数が多いほどレベルが上がり、レベルが高いほど強い、という仕様にしています。

/*--------------------------------------
	Tag Cloud
---------------------------------------*/

ul.tagCloud {
	margin: 0;
	padding: 0.5em 10px;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

ul.tagCloud li {
	margin: 0 2px;
	padding: 0;
	display: inline;
	font-size: 100%; /* ここで相対的に文字サイズを変更 */
}

ul.tagCloud li a {
	padding: 0 5px;
	position: relative;
	text-decoration: none;
	color: #fff;
	background-color: #fff;
}

ul.tagCloud li.level6 a {
	z-index: 2;
	font-size: 175%;
	background-color: #6897af;
}

ul.tagCloud li.level5 a {
	top: 5px;
	z-index: 3;
	font-size: 150%;
	background-color: #7ea6ba;
}

ul.tagCloud li.level4 a {
	z-index: 4;
	font-size: 125%;
	background-color: #95b6c7;
}

ul.tagCloud li.level3 a {
	top: 5px;
	z-index: 5;
	font-size: 100%;
	background-color: #acc6d3;
}

ul.tagCloud li.level2 a {
	z-index: 6;
	font-size: 75%;
	background-color: #c3d6df;
}

ul.tagCloud li.level1 a {
	z-index: 1;
	font-size: 50%;
	background-color: #d9e5eb;
}

/* オンマウス */
ul.tagCloud li a:hover {
	z-index: 10;
	background-color: #5a89a1;
}

div.freespaceArea{
margin:0;
}

とても素敵なCSSです。
作者の方に感謝！！

これで設置が完了しました。
タグを1記事ごとに編集しないといけないのでメンドクサイと言えば面倒なのですが、直接記事に手を加える必要がないし、タグ登録用ページも案内用ページとしてきちんと機能するので無駄は無いです。
ちょっとコードが長いのでプラグインの文字数が心配ですね・・・。