共通テーマ：
ライブドアブログのカスタマイズ テーマに参加中！

と思ったので、タグクラウドをサイドバー以外の好きな場所に設置できるスクリプトを作りました。

livedoor ProfileのJSONPをjQueryを使って呼び出して、JSONの情報からタグクラウドを作っています。

ブログのタグ一覧RSSからタグクラウドを作るように変更しました。(2008/09/10)

設置方法

jQueryでRSSの<ldtags:weight>というタグを抽出する方法が良くわからないので、以下のソースは並びで抽出している暫定版です。(2008/09/10 追記)

今回はそれぞれのブログに合わせてソースを少し変える必要があります。

  • jQueryを設置していないブログではJavaScriptプラグインを作って↓のURLを設定してください。
http://parts.blog.livedoor.jp/js/jquery.js
  • 次に下のソースコードを以下のように変更します。
  • GETメソッドのパラメータを指定する行で、「ライブドアID」とあるところ2ヶ所を、自分のライブドアIDに変えます。
  • 上の方と下の方に「タグクラウドを挿入する要素のCSSセレクタ」とコメントした行がありますが、ここは各ブログのテンプレートと貼り付けたい位置によって変更する必要があります。
    下のソースではこのブログ（第4世代テンプレート）のヘッダ部分に挿入している例です。
    変更方法が分からない場合はコメントしていただければ少しは対応できるかと思います。

サンプルソース

<script type="text/javascript">
//<![CDATA[
jQuery(function() {
  jQuery.get(
    // RSSのURL
    document.URL.match(/http:\/\/blog\.livedoor\.jp\/.+?\/|http:\/\/.+?\//) + 'tags.rdf',

    // getメソッドのパラメータ（未使用）
    '',

    // getメソッドのコールバック関数
    function (data, status) {
    
      // タグクラウドのulタグ
      var $ul = jQuery('<ul />').addClass('tagcloud');

      // アイテム毎のループ
      jQuery('item', data).each(function() {
      
        // RSSから記事タイトルを抽出
        var title = jQuery('title', this).text();
      
        // liタグを作成
        jQuery('<li />')
        // RSSから抽出したweightをクラスに追加
        .addClass('tag-weight-' + jQuery('*:eq(4)', this).text())
        // RSSから抽出したfreshnessをクラスに追加
        .addClass('tag-lifetime-' + jQuery('*:eq(5)', this).text())
        // liタグの中にaタグを追加する
        .append(
          // aタグの作成
          jQuery('<a />')
          // リンク先をRSSから抽出してhref属性に
          .attr('href', jQuery('link', this).text())
          // 記事タイトルをtitle属性に
          .attr('title', title + ' タグの一覧へ')
          // 記事タイトルをaタグのテキストに
          .text(title)
          // スペースを入れないと半角英数字ばかりのときに改行しなくなる
          ,' '
        // ulタグにliタグを追加
        ).appendTo($ul);

        // ↓引数はタグクラウドを挿入する要素のCSSセレクタ
        jQuery('div.blog-title-outer-3').append($ul);
      });

    // getメソッドのデータの種類 (第4引数)
    }, 'xml'
  );
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
ul.tagcloud {
	line-height: 1.2;
	margin: 0;
	padding: 1em;
	text-align: left;
	height: 100%;
}
ul.tagcloud li {
	display: inline;
	margin: 0;
	padding:0 0.2em;
}
ul.tagcloud li.tag-weight-0 {
	font-size: 80%;
}
ul.tagcloud li.tag-weight-1 {
	font-size: 100%;
}
ul.tagcloud li.tag-weight-2 {
	font-size: 140%;
}
ul.tagcloud li.tag-weight-3 {
	font-size: 160%;
}
ul.tagcloud li.tag-weight-4 {
	font-size: 190%;
}
ul.tagcloud li.tag-weight-0 a {
	color: #a2c5cf;
}
ul.tagcloud li.tag-weight-1 a {
	color: #7fb2c1;
}
ul.tagcloud li.tag-weight-2 a {
	color: #5b9eb1;
}
ul.tagcloud li.tag-weight-3 a {
	color: #3e8fa6;
}
ul.tagcloud li.tag-weight-4 a {
	color: #2b86a0;
}
/*]]>*/
</style>
  • セレクタは標準プラグインのタグクラウドに合わせました。
  • 但し、スタイルシートは標準のものと共用できないので（.sideの指定があるため）、追加しました。上記ソースはその一例です
  • jQueryでJSONを取得するのはjQueryのgetメソッドでも可能ですが、今回は簡単なgetJSONメソッドを使いました。
  • getメソッドのパラメータ「row」の数値を変えるとタグの表示数を変えられます。最大で50まで表示できます。
  • コールバック関数にあるjson.statusは、livedoor ProfileのJSONにあるステータスのプロパティです。このステータスチェックはLDPのJSON固有の方法です。

getJSONメソッドについて

jQueryでJSONを扱うための情報が欲しい方もいると思いますので追記しておきます。(2008/07/16)

  • getJSONメソッドの第一引数はURL、第二引数はHTTP GETメソッドのパラメータ、第三引数はコールバック関数です。
  • GETメソッドのパラメータを第一引数のURLに含めて、第二引数を省略することも可能です。
  • JSONPのコールバック関数名の指定はjQueryの仕様で、第二引数でのパラメータ指定は不可なので、URLに含めるようにします。
  • URLのコールバック関数名が「?」となっています。ここはjQuery側で自動的に関数名を割り振るため、このように「?」としておく必要があります。
  • コールバック関数の引数はJSONです。
  • XMLの場合はjQueryオブジェクトで扱いましたが（eachメソッドでエントリー数のループを回したり）、JSONの場合は普通にJSで扱えます。jQueryだとXMLだろうがJSONだろうが扱う手間は大して変わりませんが、JSONの方が遥かに軽いはずです。

長くなりがちなDOMの記述が非常にシンプルにできるのはjQueryの良さなんでしょうけど。

表示サンプル

ブログのヘッダに設置しました。

変更履歴

  • 2008/07/16 再読み込みの前にjson.status=='wait'の値を確認するように変更しました。
  • 2008/07/16 説明文を追記しました。
  • 2008/09/10 livedoor ProfileのJSONPの配信終了に付きRSSから取得するようにソースを変更しました。修正版ではgetJSONメソッドを使用していませんが、説明文は残しておきます。

「livedoor Blog カスタマイズ」カテゴリの最新記事

「JavaScript」カテゴリの最新記事

タグ ：