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

コメントRSSが最終的に仕様変更があって、DOMノードの構造も若干変わり以前のコメント一覧のプラグインでは表示できないところがあったので修正しました。

昔組んだソースだったので修正したいところがたくさん出てきてこの際全部見直そうかと思ったのですが、予想以上に時間がかかりそうだったので適当なところで切り上げました。

見た目がほとんど変わってしまったので新たに記事にします。

設置方法

以下のソースをサイドバーに貼り付けるだけでとりあえず動きます。

更にCSSで表示を整えると良いですね。参考までにこのブログのCSSを挙げておきます。

ソースコード

<div id="recentcomments"></div>

<script type="text/javascript">
//<![CDATA[
/* コメントRSSオブジェクト */
var LdbRss = {
  maxNum: 50,
  commentLength: 20,
  openButton: '\u25bc',
  closeButton: '\u25b2',
  notButton: '\u25bd',
  prefix: '',
  suffix: 'さん',
  myNameIs: '',
  openArticles: 1,
  targetID: 'recentcomments',

  getBaseUrl: function() {
    return document.URL.match(/http:\/\/blog\.livedoor\.jp\/.+?\/|http:\/\/.+?\//);
  },

  toggleButton: [],
  commentMore: [],
  commentConti: [],
  articleButton: {},
  articleWrapper: {},
  toggle: function() {
    arguments[0].className =  arguments[0].className.replace(/(close|open)button/, function(a, b) { return (b == 'open' ? 'close' : 'open') + 'button'; });
    for(var i = 0; i < arguments.length; i++)
      arguments[i].className = arguments[i].className.replace(/display(none|show)/, function(a, b) { return 'display' + (b == 'none' ? 'show' : 'none'); });
  },

  toggleComment: function(i) {
    this.toggle(this.toggleButton[i], this.commentMore[i], this.commentConti[i]);
  },
  toggleArticle: function(title) {
    this.toggle(this.articleButton[title], this.articleWrapper[title]);
  },

  onLoad: function() {},

  commentOnLoad: function(oj) {
    var comment = [];
    var el_target = document.getElementById(this.targetID);
    var rss_item = oj.responseXML.getElementsByTagName('item');
    var fl = document.createDocumentFragment();
    var m = Math.min(rss_item.length, this.maxNum);
    for (var i = 0; i < m; i++) {
      var item = this.nodeToJson(rss_item[i]);
      item.title = item.title.replace(/「(.+)」へのコメント/, '$1');
      if (comment[item.title] == null || comment[item.title] == 'undefined')
        comment[item.title] = [];
      comment[item.title].push(item);
    }
    i = 0;
    for (var a in comment) {
      var el_title = this.createEl('div', 'sidebody commentlist');
      var el_arti = this.createEl('a', 'article_button toggle_button', null, el_title, {'href': 'javascript:LdbRss.toggleArticle(\'' + a + '\')'});
      this.articleButton[a] = el_arti
      this.createEl('a', 'comment_link', a, el_title, {'href': comment[a][0].link});
      var el_article = this.createEl('div', 'article_wrapper', null, el_title);
      this.articleWrapper[a] = el_article;
      if (i >= this.openArticles) {
        el_arti.className += ' openbutton';
        el_article.className += ' displaynone';
      }
      else{
        el_arti.className += ' closebutton';
        el_article.className += ' displayshow';
      }
      for (var c in comment[a]) {
        var leaf_classname = c == comment[a].length - 1 ? 'leaf_last' : 'leaf';
        var el_leaf = this.createEl('div', leaf_classname, null, el_article);
        var el_button = this.createEl('a', 'toggle_button', null, el_leaf);
        this.createEl('span', 'commentauthor', this.prefix + comment[a][c].author + (this.myNameIs == comment[a][c].author ? '' : this.suffix), el_leaf);
        var el_wrapper = this.createEl('div', 'comment_wrapper', '', el_leaf);
        var str_content = eval('comment[a][c].content.match(/(<.+?>|[^<>]){1,' + this.commentLength + '}/)[0]');
        var rc = RegExp.rightContext;
        this.createEl('span', 'comment_main', str_content, el_wrapper);
        if (rc != '') {
          el_button.setAttribute('href', 'javascript:LdbRss.toggleComment(' + this.commentMore.length + ')');
          el_button.className += ' openbutton';
          var el_cocont = this.createEl('span', 'comment_continue displayshow', '...', el_wrapper);
          var el_comore = this.createEl('span', 'comment_more displaynone', rc, el_wrapper);
          this.commentMore.push(el_comore);
          this.commentConti.push(el_cocont);
          this.toggleButton.push(el_button);
        }
      }
      fl.appendChild(el_title);
      i++;
    }
    el_target.appendChild(fl);

  },

  nodeToJson: function(node) {
    var key, j, json = [];
    for(var i = 0; i < node.childNodes.length; i++)
      if(node.childNodes[i].nodeType == 1) {
        key = node.childNodes[i].nodeName;
        key = key.replace(/:encoded/, '');
        j = node.childNodes[i].childNodes.length == 1 ? 0 : 1;
        if(node.childNodes[i].childNodes[j])
          json[key] = node.childNodes[i].childNodes[j].nodeValue;
        else
          json[key] = '名無し';
      }
    return json;
  },

  createEl: function() {
    var el = document.createElement(arguments[0]);
    if(arguments[1]) el.className = arguments[1];
    if(arguments[2]) el.innerHTML = arguments[2];
    if(arguments[3]) arguments[3].appendChild(el);
    if(arguments[4])
      for(var i in arguments[4])
        el.setAttribute(i, arguments[4][i]);
    return el;
  },

  ajaxReq: function(url) {
    var httpoj;
    if(window.ActiveXObject) {
      try { httpoj = new ActiveXObject('Msxml2.XMLHTTP'); }
      catch(e) { return; }
    } else if(window.XMLHttpRequest) httpoj = new XMLHttpRequest();
    else return;
    httpoj.open('GET', url, true);
    var copy = this;
    httpoj.onreadystatechange = function() {
      if (httpoj.readyState == 4 && httpoj.status == 200)
        copy.onLoad(httpoj);
    }
    httpoj.send('');
  },

  req: function(file) {
    if(file == 'recent_comments.xml')
      this.onLoad = this.commentOnLoad;
    this.ajaxReq(this.getBaseUrl() + file);
  }
};

LdbRss.req('recent_comments.xml');

//]]>
</script>

そのままでも動きますが、ソースの上の方にある以下の部分を変えるとカスタマイズできます。

  • maxNum: 記事数コメントの数を設定します。最大は50です。,
  • commentLength: 閉じているときのコメントの文字数です。,
  • openButton: '開くボタンを設定します。画像タグを入れることもできます。',
  • closeButton: '閉じるボタンを設定します。画像タグを入れることもできます。',
  • notButton: '開閉ボタンがないとき、ボタンに見えてもボタンではないものを設定します。',
  • prefix: '名前の前に敬称を設定します。',
  • suffix: '名前の後ろに敬称を設定します。',
  • myNameIs: '自分の名前を設定すると自分がコメントしたときに敬称を略します。',

CSSのサンプル

あくまでこのブログの設定です。画像は別に直リンクでもかまいませんが、こちらの都合で削除することがあるかもしれないので、各自DLして自分のブログにアップロードした後、CSSのURLを再設定した方がいいです。

<style type="text/css">
/*<![CDATA[*/
/* コメント一覧全体 */
div.side div.commentlist {
/*	font-size: 90%;	文字サイズ*/
	background: transparent;
}
div.side a.article_button {
	margin-left: -10px;
}
/* 投稿者 */
div.side .commentauthor {
	color: #000000;	/*文字色*/
	text-decoration: none;
	padding: 0.1em 0 0.2em 0;
	line-height: 1.7em;
}
/* 記事タイトル */
.comment_link {
	color: #000000;	/*文字色*/
	display: block;
}
/* 開閉ボタン */
div.side .toggle_button {
	display: block;
	margin: 0.3em 0.2em 0 0;
	float: left;
	height: 12px;
	width: 12px;
	line-height:12px;
	padding: 0;
	overflow: hidden;
	background: url(http://livedoor.blogimg.jp/eeu/imgs/e/c/ecf1fe03.gif) 0 12px;
}
div.side a.articlebutton {
	margin-left: -1em;
}
/* 開閉ボタン（オンマウス） */
div.side a.toggle_button:hover {
	color: #f3bbb7;	/*文字色*/
}
div.side a.openbutton {
	background-position: 12px 0;
}
div.side a.openbutton:hover {
	background-position: 12px 12px;
}
div.side a.closebutton {
	background-position: 0 0;
}
div.side a.closebutton:hover {
	background-position: 0 12px;
}
.displaynone {
	display: none;
}

/* コメント内容 */
div.side .comment_main,
div.side .comment_continue,
div.side .comment_more {
	color: #000000;	/*文字色*/
}
div.side .comment_main {
/*	margin-left: 0.5em;*/
}
/* ツリー */
.leaf {
	padding:2px 2px 2px 18px;
	margin:0;
	background: url(http://livedoor.blogimg.jp/eeu/imgs/b/8/b8143967.gif) no-repeat; 
}
/* ツリーの最後 */
.leaf_last {
	padding:2px 2px 2px 18px;
	margin:0;
	background: url(http://livedoor.blogimg.jp/eeu/imgs/8/3/838588a9.gif) no-repeat; 
}
/*]]>*/
</style>

DOMが多いこういうソースは長くなるので、次ぎ作るならjQueryにすると思います＾＾；

更新履歴

2009/4/14 名前が半角スペースのときエラーになるので、エラーチェックを入れました。

2009/6/12 今までサイドバーに設置してあった高機能版に変更しました。

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

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

タグ ：