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

ブログのコメント一覧をRSSから取得するカスタマイズをしました。

コメントの内容が表示されるようになっています。
今サイドバーの『Recent Comments』に貼り付けてありますので、持ち出し・改変など好きにしていただいて構いません。

設置の際は、コメントRSSのURLを実際に設置するブログに変更して下さい。

comments_rss_request.fileName = 'ブログＵＲＬ/recent_comments.xml';

設置方法は一般的なブログパーツ同様、
フリーエリアに貼り付け → 改行設定を『変換しない』にして保存 → 全ページの再構築
という手順で行います。
（注、LDBのバグで、サイドバーの再構築では全ページで反映されないことがあるようです）

追記

このプラグインの更新記事を書きました。これから設置する方や、修正する方は更新記事を参照してください。

コメント一覧のプラグインを更新しました [livedoor Blog カスタマイズ]

ソースコード

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

<script type="text/javascript"><!--
function createHttpRequest() {
  if (window.ActiveXObject) {
    try {return new ActiveXObject('Msxml2.XMLHTTP');}
    catch (e) {
      try{return new ActiveXObject('Microsoft.XMLHTTP');}
      catch(e2){return null;}
    }
  } else if (window.XMLHttpRequest) {return new XMLHttpRequest();}
  else {return null;}
}
function requestFile(reqoj) {
  var httpoj = createHttpRequest();
  httpoj.open(reqoj.method, reqoj.fileName, reqoj.async);
  httpoj.onreadystatechange = function() {
    if (httpoj.readyState == 4 && httpoj.status == 200)
      reqoj.onLoaded(httpoj);
  }
  httpoj.send(reqoj.data);
}
function createRequestValue(data, method, fileName, async, onLoad) {
  this.data = data;
  this.method = method;
  this.fileName = fileName;
  this.async = async;
  this.onLoaded = onLoad;
}
function comment_item(el) {
  el.getElementsByTagName('title')[0].firstChild.nodeValue.match(/「(.*)」へのコメント/);
  this.title = RegExp.$1;
  this.link = el.getElementsByTagName('link')[0].firstChild.nodeValue;
  this.description = el.getElementsByTagName('description')[0].firstChild.nodeValue;
  this.pubDate = el.getElementsByTagName('pubDate')[0].firstChild.nodeValue;
  this.guid = el.getElementsByTagName('guid')[0].firstChild.nodeValue;
  this.author = el.getElementsByTagName('author')[0].firstChild.nodeValue;
  var txt;
  try {txt = el.getElementsByTagName('content:encoded')[0].firstChild.nodeValue;}
  catch (e) {
    try {txt = el.getElementsByTagName('encoded')[0].firstChild.nodeValue;}
    catch (e) {txt = '';}
  }
  this.content = txt.replace(/\s{2,}/g, '');
}
function toggle_comment(i) {
  this.toggleButton[i].innerHTML = this.toggleButton[i].innerHTML == this.openButton ? this.closeButton : this.openButton;
  this.commentMore[i].style.display = this.commentMore[i].style.display == 'none' ? 'inline' : 'none';
  this.commentConti[i].style.display = this.commentConti[i].style.display == 'none' ? 'inline' : 'none';
}
function createElementWithClass(tagname, classname) {
  var el = document.createElement(tagname);
  el.className = classname;
  return el;
}
function createElementWithTextNode(tagname, classname, textnode) {
  var el = createElementWithClass(tagname, classname);
  var tn = document.createTextNode(textnode);
  el.appendChild(tn);
  return el;
}
function comments_rss_on_loaded(oj) {
  var comment = new Array();
  this.toggleButton = new Array();
  this.commentMore = new Array();
  this.commentConti = new Array();
  var el_comment = document.getElementById(this.targetId);
  var comment_rss_item = oj.responseXML.getElementsByTagName('item');
  var fl = document.createDocumentFragment();
  var m = Math.min(comment_rss_item.length, this.maxNum);
  for (var i = 0; i < m; i++) {
    var com = new comment_item(comment_rss_item[i]);
    if (comment[com.title] == null || comment[com.title] == 'undefined')
      comment[com.title] = new Array();
    comment[com.title].push(com);
  }
  for (var a in comment) {
    var el_title = createElementWithClass('div', 'sidebody comment');
    var el_link = createElementWithTextNode('a', 'comment_link', a);
    el_link.setAttribute('href', comment[a][0].link);
    el_title.appendChild(el_link);
    for (var c in comment[a]) {
      var leaf_classname = c == comment[a].length - 1 ? 'leaf_last leaf_author' : 'leaf leaf_author';
      var leaf_textnode = this.prefix + comment[a][c].author + (this.myNameIs == comment[a][c].author ? '' : this.suffix);
      var el_author = createElementWithTextNode('div', leaf_classname, leaf_textnode);
      el_title.appendChild(el_author);
      var el_wrapper = createElementWithClass('div', 'comment_wrapper');
      var el_comain, el_comore, el_cocont;
      el_cocont = createElementWithTextNode('span', 'comment_continue', '...');
      el_comore = createElementWithClass('span', 'comment_more');
      var str_content = comment[a][c].content;
      var content_length = this.commentLength;
      for (var i = 0; 1; i = j) {
        var i = str_content.indexOf('<', i);
        if (i < 0 || i >= content_length) break;
        var j = str_content.indexOf('>', i);
        if (j < 0) break;
        var t = str_content.substring(i, j);
        content_length += t.length;
      }
      el_comore.innerHTML = str_content.substring(content_length, str_content.length);
      if (str_content.length > content_length) {
        var el_button = createElementWithClass('a', 'comment_button');
        el_button.innerHTML = this.openButton;
        el_button.setAttribute('href', 'javascript:comments_rss_request.toggle(' + this.commentMore.length + ')');
        el_wrapper.appendChild(el_button);
        el_comain = createElementWithClass('span', 'comment_main');
        el_comain.innerHTML = str_content.substr(0, content_length);
        el_wrapper.appendChild(el_comain);
        el_cocont.style.display = 'inline';
        el_wrapper.appendChild(el_cocont);
        el_comore.style.display = 'none';
        el_wrapper.appendChild(el_comore);
      } else {
        var el_button = createElementWithTextNode('span', 'comment_button');
        el_button.innerHTML = this.notButton;
        el_wrapper.appendChild(el_button);
        el_comain = createElementWithClass('span', 'comment_main');
        el_comain.innerHTML = str_content;
        el_wrapper.appendChild(el_comain);
      }
      this.toggleButton.push(el_button);
      this.commentMore.push(el_comore);
      this.commentConti.push(el_cocont);
      el_author.appendChild(el_wrapper);
    }
    fl.appendChild(el_title);
  }
  el_comment.appendChild(fl);
}
var comments_rss_request = new createRequestValue('', 'GET', '', true, comments_rss_on_loaded);
comments_rss_request.toggle = toggle_comment;
comments_rss_request.fileName = 'recent_comments.xml';
comments_rss_request.targetId = 'recentcomments';
comments_rss_request.maxNum = 10;
comments_rss_request.commentLength = 22;
comments_rss_request.openButton = '\u25bc';
comments_rss_request.closeButton = '\u25b2';
comments_rss_request.notButton = '';
comments_rss_request.prefix = '';
comments_rss_request.suffix = 'さん';
comments_rss_request.myNameIs = 'imq';
requestFile(comments_rss_request);
//--></script>

CSS

CSSは殆ど含まれていませんが、セレクタでいろいろ設定できるように各タグにclassを割り当てています。
↓のようなスタイルシートを同じフリーエリアに追加すると各部の色が変えることができます。

<style type="text/css"><!--
.leaf_author {
	color: #000000;	/*投稿者の文字色*/
}
.comment_wrapper {
	color: #000000;	/*コメント部分の文字色*/
}
.comment_button {
	color: #000000;	/*開閉ボタンの文字色*/
}
--><style>

↓ちなみにこのブログではこのような設定にしてみました。

<style type="text/css"><!--
/*--- コメント一覧全体 ---*/
.comment {
	font-size: 90%;	/*文字サイズ*/
}
/*--- 投稿者 ---*/
.leaf_author {
	color: #000000;	/*文字色*/
	text-decoration: none;
	padding: 0;
	margin: 0;
}
/*--- 記事タイトル ---*/
.comment_link {
	color: #000000;	/*文字色*/
}
/*--- 開閉ボタン ---*/
a.comment_button {
	color: #0000ff !important;	/*文字色*/
	font-size: 90% !important;	/*文字サイズ*/
	text-decoration: none;
}
/*--- 開閉ボタン（オンマウス） ---*/
a.comment_button:hover {
	color: #8080ff !important;	/*文字色*/
}
/*--- コメント内容 ---*/
.comment_main, .comment_continue, .comment_more {
	color: #000000;	/*文字色*/
}
/*--- ツリー ---*/
.leaf {
	padding:2px 2px 2px 18px;
	margin:0;
	background: url(http://image.blog.livedoor.jp/eeu/imgs/b/8/b8143967.gif) no-repeat; 
}
/*--- ツリーの最後 ---*/
.leaf_last {
	padding:2px 2px 2px 18px;
	margin:0;
	background: url(http://image.blog.livedoor.jp/eeu/imgs/8/3/838588a9.gif) no-repeat; 
}
--></style>

いきさつはライブドアナレッジの質問をどうぞ。

最新のコメント一覧の内容を表示させたい ←α版
RSSをブラウザでパースすることはできますか？ ←β版

見れば分かると思いますが、製作にあたってはBLUEPIXYさんとオニキスさんには大変お世話になりました。足向けて眠れないです。。

後でちゃんと記事を書くつもりなので詳細は省きました。
質問・要望などは気軽にどうぞ。

お詫び

有料版で独自ドメインを取得されているブログでは動作しませんでした。
謹んでお詫び申し上げます。

独自ドメインのブログでも同一ドメインにコメントRSSが作成されるようになりました。これにともなって、有料版独自ドメインでも利用できるようになりました。(2008/03/04追記)

追記

2008/3/04 修正

  • 有料版独自ドメインでも利用できるようになりました。

2008/3/03 修正

  • CSSの記述を追記しました。

2007/12/05 修正

  • 文字数制限の設定で、絵文字は1文字でカウントするように変更しました。絵文字のタグが表示と非表示部分に跨る場合、HTMLタグはそのまま表示されていたのが修正されると思います。
  • 下書きコメントがRSSで表示されなくなりましたので、記事を修正しました。

2007/11/24 修正

  • 記事中のコメントRSSのURLの設定で、「ブログＵＲＬ」を「ブログＩＤ」と間違えていたので訂正しました。
  • リクエスト用インスタンスのプロパティ名に誤字があったのを機に、少し変更をしました。
  • ついでに、自分の名前を設定すると敬称を省けるように変更しました。
  • textNodeだとタグがエスケープされてしまうので、innerHTMLに変えました。これで絵文字も表示されると思います。

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

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

タグ ：