2004年12月29日

ツリー化スクリプト for livedoor

というわけで出来ました。サンプルはトップページにて。

行き当たりばったりの設計なので、ちゃんと動作するかは分かりませんけど、とりあえず、Firefox 1.0とInternet Explorer for Windowsでは動作している様子。

特に難しいことはしていませんが、設置に際してはそれなりに知識が必要です。

まずは下準備。

デザインは「カスタマイズ」を原則としていますが、htmlテンプレートの修正は必要ないはずです。とりあえず、ここではhtmlテンプレートは「デフォルト」に戻しています。

スタイルシートにツリー用のスタイル設定の記述を追加します。ただし、これは画像によるツリー化をしなければ、必要ありません。

続いて、プラグインの設定を確認します。ポイントは以下の通り。

  • 最新コメントの表示があること。そのタイトルを記録しておく。
  • 最新トラックバックの表示があること。そのタイトルを記録しておく。

フリーエリアのプラグインを追加してください。内容は下記の通り。

<script type="text/javascript">
<!--
function makeTreeElements (treeType,objList) {
  if (!objList.innerHTML) return;
  if (treeType.indexOf('com') > -1) {
    var objLink = objList.getElementsByTagName('a')[0];
    var linkUrl = objLink.getAttribute('href');
    var tmpText = objList.innerHTML;
    tmpText.match(/\((.*)\)/);
    this.elem = RegExp.$1;
    if (this.elem == null) this.elem = 'anonymouse';
    this.base = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (treeType.indexOf('tb') > -1) {
    var objLink = objList.getElementsByTagName('a')[1];
    var linkUrl = objLink.getAttribute('href');
    var elemUrl = objList.getElementsByTagName('a')[0].getAttribute('href');
    var elemTxt = objList.getElementsByTagName('a')[0].innerHTML;
    var tmpText = objList.innerHTML.split('&nbsp;')[0];
    tmpText.match(/\((.*)\)/);
    this.elem = Array('<a href="',elemUrl,'">',elemTxt,'</a>(',RegExp.$1,')').join('');;
    this.base = Array('<a href="',linkUrl,'#trackback">',objLink.innerHTML,'</a>').join('');
    
  }
  return this;
}
function createTreeList(treeName,treeType,treeOpt) {
  var objFocus = this.document.getElementById('links');
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('div');
  var linkList = new Array();
  var outText  = new Array();
  if (objLists.length > 0) {
    for (var i=0;i<objLists.length;i++) {
      if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == treeName) {
        if (objLists[i+1] && objLists[i+1].className == 'side') {
          var objTreeElems = objLists[i+1].getElementsByTagName('div');
          for (var j=0;j<objTreeElems.length;j++) {
            var chckFlag = true;
            var elemText = new makeTreeElements(treeType,objTreeElems[j]);
            if (!elemText.base || !elemText.elem) return;
            for (var k=0;k<linkList.length;k++) {
              if ( linkList[k].base.indexOf(elemText.base) > -1 ) {
                chckFlag = false;
                linkList[k][linkList[k].length] = elemText.elem;
              }
            }
            if (chckFlag) {
              var tmpNum = linkList.length;
              linkList[tmpNum] = new Array();
              linkList[tmpNum][0] = elemText.elem;
              linkList[tmpNum].base = elemText.base;
            }
          }
        } // end of if (objLists[i+1] && objLists[i+1].className == 'side')
        if (linkList.length > 0) {
          outText[outText.length] = '<ul>\n';
          for (var j=0;j<linkList.length;j++) {
            outText[outText.length] = Array('<li>',linkList[j].base,treeOpt.top).join('');
            if (linkList[j].length > 0 && treeOpt.sort) linkList[j].reverse();
            for (var k=0;k<linkList[j].length;k++) {
              outText[outText.length] = (k == linkList[j].length - 1) ? treeOpt.end : treeOpt.list;
              outText[outText.length] = Array(linkList[j][k],treeOpt.leaf).join('');
            }
            outText[outText.length] = Array(treeOpt.btm,'</li>').join('');
          }
          outText[outText.length] = '</ul>\n';
          objLists[i+1].innerHTML = outText.join('');
        }
      } // end of if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == 'treeName')
    } // end of for (var i=0;i<objLists.length;i++)
  } // end of if (objLists.length > 0)
}
/* ツリー設定 */
var gTreeOption = new Array;
gTreeOption['sort'] = false;               /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">';  /* ツリー用マーク(通常) */
gTreeOption['end']  = '<li class="end">';  /* ツリー用マーク(末端) */
gTreeOption['leaf'] = '</li>\n';           /* 各枝の末尾 */
gTreeOption['top']  = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm']  = '</ul>';             /* ツリー本体の最後 */
createTreeList('Comments','com',gTreeOption); // コメントリストのツリー化
createTreeList('Trackbacks','tb',gTreeOption); // トラックバックリストのツリー化
/* 著作表記 */
document.write('<address style="font-style:normal;text-align:center;">scripted by <a href="http://blog.livedoor.jp/simpleboxes/">takkyun</a></address>');
// -->
</script>

強調表示した部分は、先の「プラグインの設定」で確認しておいたそれぞれのプラグインの名前を記述します。

フォーマットは「変換しない」を選んでください。タイトルは別に何でも良いんですが、後で分かりやすくするため「Scripts」とでもつけておいてください。

「ツリー設定」の部分でそれなりにカスタマイズ可能ですが、詳細は省略します。

詳しい設定内容などは「JUGEMカスタマイズ講座 | ツリー化スクリプト ver 2」もしくは「JUGEMカスタマイズ講座 | ツリー化カスタマイズ応用編」を参照してください。唯一の違いはgTreeOption['leef']gTreeOption['leaf']になっていることぐらいです。

プラグインの設定やスタイルを変更したら、ブログの再構築を忘れずに。後、確認時にはブラウザのリロード操作が必要になるでしょう。

[参考]動作確認済みブラウザ

  • Internet Explorer 6 for Windows
  • Firefox 1.0 for Windows
  • Internet Explorer for Mac OS X
  • Safari
  • Firefox 1.0 for Mac OS X
  • Opera 7/7.5 for Windows

もし、この本文にスクリプトソースが見えない場合は、続きの方にも念のため同じソースを貼り付けておきますので、ご参考に。


<script type="text/javascript">
<!--
function makeTreeElements (treeType,objList) {
  if (!objList.innerHTML) return;
  if (treeType.indexOf('com') > -1) {
    var objLink = objList.getElementsByTagName('a')[0];
    var linkUrl = objLink.getAttribute('href');
    var tmpText = objList.innerHTML;
    tmpText.match(/\((.*)\)/);
    this.elem = RegExp.$1;
    if (this.elem == null) this.elem = 'anonymouse';
    this.base = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (treeType.indexOf('tb') > -1) {
    var objLink = objList.getElementsByTagName('a')[1];
    var linkUrl = objLink.getAttribute('href');
    var elemUrl = objList.getElementsByTagName('a')[0].getAttribute('href');
    var elemTxt = objList.getElementsByTagName('a')[0].innerHTML;
    var tmpText = objList.innerHTML.split('&nbsp;')[0];
    tmpText.match(/\((.*)\)/);
    this.elem = Array('<a href="',elemUrl,'">',elemTxt,'</a>(',RegExp.$1,')').join('');;
    this.base = Array('<a href="',linkUrl,'#trackback">',objLink.innerHTML,'</a>').join('');
    
  }
  return this;
}
function createTreeList(treeName,treeType,treeOpt) {
  var objFocus = this.document.getElementById('links');
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('div');
  var linkList = new Array();
  var outText  = new Array();
  if (objLists.length > 0) {
    for (var i=0;i<objLists.length;i++) {
      if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == treeName) {
        if (objLists[i+1] && objLists[i+1].className == 'side') {
          var objTreeElems = objLists[i+1].getElementsByTagName('div');
          for (var j=0;j<objTreeElems.length;j++) {
            var chckFlag = true;
            var elemText = new makeTreeElements(treeType,objTreeElems[j]);
            if (!elemText.base || !elemText.elem) return;
            for (var k=0;k<linkList.length;k++) {
              if ( linkList[k].base.indexOf(elemText.base) > -1 ) {
                chckFlag = false;
                linkList[k][linkList[k].length] = elemText.elem;
              }
            }
            if (chckFlag) {
              var tmpNum = linkList.length;
              linkList[tmpNum] = new Array();
              linkList[tmpNum][0] = elemText.elem;
              linkList[tmpNum].base = elemText.base;
            }
          }
        } // end of if (objLists[i+1] && objLists[i+1].className == 'side')
        if (linkList.length > 0) {
          outText[outText.length] = '<ul>\n';
          for (var j=0;j<linkList.length;j++) {
            outText[outText.length] = Array('<li>',linkList[j].base,treeOpt.top).join('');
            if (linkList[j].length > 0 && treeOpt.sort) linkList[j].reverse();
            for (var k=0;k<linkList[j].length;k++) {
              outText[outText.length] = (k == linkList[j].length - 1) ? treeOpt.end : treeOpt.list;
              outText[outText.length] = Array(linkList[j][k],treeOpt.leaf).join('');
            }
            outText[outText.length] = Array(treeOpt.btm,'</li>').join('');
          }
          outText[outText.length] = '</ul>\n';
          objLists[i+1].innerHTML = outText.join('');
        }
      } // end of if (objLists[i].className == 'sidetitle' && objLists[i].innerHTML == 'treeName')
    } // end of for (var i=0;i<objLists.length;i++)
  } // end of if (objLists.length > 0)
}
/* ツリー設定 */
var gTreeOption = new Array;
gTreeOption['sort'] = false;               /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">';  /* ツリー用マーク(通常) */
gTreeOption['end']  = '<li class="end">';  /* ツリー用マーク(末端) */
gTreeOption['leaf'] = '</li>\n';           /* 各枝の末尾 */
gTreeOption['top']  = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm']  = '</ul>';             /* ツリー本体の最後 */
createTreeList('Comments','com',gTreeOption); // コメントリストのツリー化
createTreeList('Trackbacks','tb',gTreeOption); // トラックバックリストのツリー化
/* 著作表記 */
document.write('<address style="font-style:normal;text-align:center;">scripted by <a href="http://blog.livedoor.jp/simpleboxes/">takkyun</a></address>');
// -->
</script>

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/simpleboxes/11477812
この記事へのトラックバック
Takkyunさん、ほんとうにありがとうございます♪ わたしのBlogでご紹介させていただきました〜☆ あとは、Opera 7.5の不都合を改善してくれるのを期待しております・・・。 お忙しいでしょうにすいません(&gt;_&lt;;)
Q. コメント・トラックバックのツリー化をするには?【livedoor Blog Style*】at 2004年12月30日 18:36
おかげさまで、できました!ありがとうございました♪
テンプレートいじり中〜サイドバー開閉&ツリー式【ぼちぼち日記 】at 2005年01月05日 23:15
コメント&トラックバックをツリー化してみました★ どの記事に、どなたがコメント&トラックバックしてくださったかが、個人的ではありますが、とてもわかりやすくなりました(^^) 他の皆さんからみると、どうなんでしょうね(^o^) P.S.自分でカウンターをつけた
ツリー化【排球&自分勝手日記】at 2005年01月16日 11:54
ぇぇ〜っと声が小さくなってしまうのですが、 ちょっとカスタマイズを考えています。 それは、このデザインが気に入っているので基本はこのまま。 コメントとトラックバックの表示をもっとなんか見やすいように! 今のコメント欄とトラックバック欄ってごちゅごちゃ
カスタマイズに挑戦してみる【 ◇ママの独り言◇AperioFriends】at 2005年02月01日 14:51
takkyunさんのブログ、scripts for livedoorにていい感じのコメント&トラックバックツリー化を教えて頂き、やってみました。 &nbsp; ←すっきりしてとーっとてもいい感じですtakkyunさま、ありがとうございます。 &nbsp; カバチタレさんのサイトで教えて頂いたJavaScr
コメントツリー化Part2 & トラックバックも!【Papillog】at 2005年02月12日 12:31
scripts for livedoorさんのツリー化スクリプト for livedoorを利用させて頂いて,コメントやトラックバックの一覧を見やすくしました。 これでみんながどの記事に書込みしてるかよく分かります。
コメント,トラックバックのツリー化【北九州ストライダーズ】at 2005年03月02日 01:00
久しぶりにブログをカスタムしました。 今回変えたところはトラックバックとコメント欄のツリー化です。 今までは、1つひとつに元の記事のリンクが付いていましたが このカスタムをすると共通の物はひとつにまとめられます。 弱小エンジニアの小言さんの所の『トラック.
TBとコメントをツリー化【ひなたのゆめ】at 2005年03月11日 20:09
このblogのトップページをご覧いただければ分かるが、 トラックバックとコメント表示をツリー化にした。 以前からゴチャゴチャして見難く気になっていたので、 時間がある時に決行。 ついでに、エントリーを簡単に折畳めるソースも同時導入。 (このエントリーの[.
トラックバック・コメント表示のツリー化、記事折畳み【スポーツトレーナー始末記 〜養生指南・最上晴朗〜】at 2005年03月13日 02:15
●My blog listにPing送信できていません。 もう2月から。 ケータイからエントリするモブログは、反映されるのに。 パソコンからはダメ。 Feedの再構築とかやってみたけど、だめ。 なんでやねん!(-_\)(/_-):ウゥ ●コメントとトラックバックをツリー化してみ
Blog【PADDLE*】at 2005年03月22日 11:23
以前からやろうとしていたブログの3カラム化。 やっと出来ました。 &nbsp; 小春日和の陽射しの中でに書かれていた方法を参考にしたのですが、やりたいと考えていたテンプレート(simple_blue)だと画面全体が絵の枠で囲まれているためなかなかうまくいきまでした。 そこ
3カラム化そしてコメントと・トラックバックのツリー化【子育てへの係わり〜父親〜】at 2005年05月02日 15:18
実は、ここ数日、コメントとトラックバックをツリー化しようとずっと試みていたのですが、ぜんぜんできず。。。(*_*) 諦めかけていたところで、 scripts for livedoor様のツリー化スクリプト for livedoorを発見!! や、、、やっと出来ました! そのままコピー&ペ.
コメントとトラックバックをツリー化してみました【シェイクで乾杯!】at 2005年05月29日 16:48
最近、気が付いたんですがコメント、トラックバックをツリー化できる方法があったんですね! そこで早速、scripts for livedoorさんのツリー化スクリプト for livedoorを、まんま利用させて頂いて,コメントやトラックバックの一覧を見やすくしました。 すっきり。すっき
コメント、トラックバックをツリー化!【infinite loop】at 2005年06月15日 15:15
目的はただひとつ!SEXフレンドが欲しい!なのにメールを何度も交換したり、会う前にメールが途絶えちゃったり、自然消滅‥そんなめんどくさいことも今日で終わり☆ 「セフレンド」ではセフレ・割り切り希望同士のセフレのセフレによるセフレの為のサイトです*援助交際のお
面倒な操作は一切なし!一発検索で簡単セフレ探し★【セフレンド】at 2005年07月16日 21:27
う〜ん。 せっかくなので3カラムデザインにしてみたのですが、 コメントとトラックバックのツリー化ができなくなりました。 スクリプト自体には間違いはないと思うのですが^^; ずっと使わせていただいてるのは scripts for livedoor様のツリー化スクリプト for livedoo...
ツリー化ができなくなった【 ◇ママの独り言◇AperioFriends】at 2005年08月13日 21:03
テンプレートに「プラグインの設定 」が追加されてから、一つだけ、どうしようと気にかけていたことは、折角のコメント、トラバのツリー化です。 一生懸命有効、無効に対応しようと??
FC2プラグインでコメントツリー化【HTMLってな〜に?】at 2005年09月04日 07:54
この記事へのコメント
ん〜、Opera 7.5だとトラックバックしかツリー化されない。

おそらくどちらか一方(後に動作させた方かな?)しか有効にならないんでしょうね。

余裕があったら、対処しようかとは思いますが、とりあえず放置で。
Posted by takkyun at 2004年12月29日 09:09
えぇと、トラックバックしていただいた記事でコメントしていますが、Opera 7.5 for Windowsでもツリー化されるのは確認済みです。
Posted by takkyun at 2004年12月31日 06:05
Opera 7.52 for Macで確認したところ、動作していました〜。
takkyun さん、本当にありがとうございます!
Posted by reika at 2004年12月31日 17:16
わーい!できました!ありがとうございました!
Posted by happy_come_come at 2005年01月05日 16:26
やりました!半日悩んだんですが(素人なため)念願のツリー化!!
ありがとうございました〜♪
Posted by ママ at 2005年02月01日 14:52
ツリー化までは簡単に出来るのですが私のページのバックが黒の為、色が同化して投稿者の名前が見えません…。なぜ、何もしないとフォントは白いのにこのスクリプトソースを入力すると黒くなるのでしょうか…。どなたか、最新コメント欄や最新トラックバック欄のフォントの色を元の白に変える方法教えて下さいませんか?
Posted by ナガトモ at 2005年03月07日 22:05
>>ナガトモさん
とりあえず、私の環境からは白く見えていますが……。

もしきちんと設定したいという場合でしたら、
http://blog.livedoor.jp/simpleboxes/archives/11476548.html
をご参照頂いて、スタイルシートを設定して下さい。

上記の設定ではツリー部分の色を設定していませんが、color: #ffffff; を ul.tree li の中にでも追加すればよろしいかと思います。

以上、ご参考まで
Posted by takkyun at 2005年03月08日 03:23
ご丁寧に早いコメント有難うございます。
実は悩んだあげくにCSSのside{}の中に強引にcolor:#fff;と入力したら良く解らないけど出来ました。
スタイルシートも設定させて頂いたおかげで見栄えよくなりました☆
ホントお手数掛けました。

再び、質問ですが何故ツリー化をしたとたんにコメントやトラバのリンクの色が本文のリンクと同じ色になるのでしょうか?

出来ればこちらも白く戻したいのですが…。

ホントすいません。教えて下さい。
Posted by ナガトモ at 2005年03月08日 22:29
参考にさせていただき無事、ツリー化できました。
有り難うございます!!
Posted by あられ at 2005年03月13日 01:14
ツリー化出来ました。
念願だったので大変うれしいです。有難うございました。

ただ、実は少々手間取りました。
というのは、私のblogが3カラムだったのが原因だったのですが、
最初は何度やってもうまく行きませんでした。
それで…

function createTreeList(treeName,treeType,treeOpt) {
var objFocus = this.document.getElementById('links');

よく見てみると、上記の「’links’」の部分が3カラムの場合は名前変更をしなければならない事に気付きました。

既に他のエントリーに注意書きがあるのかも知れませんが、
もし無いようでしたら、私と同様の方がいらっしゃるかも知れませんので、
追記しておいていただくと助かるかも知れません。

私の見落としであれば、申し訳ありません。
今後もよろしくお願い致します。
Posted by mogami at 2005年03月13日 01:35
こちらのblogを参考にさせていただいて
コメントとトラバのツリー化ができました。
どうもありがとうございました。
Posted by ルカ at 2005年03月22日 11:23
ツリー化にさせてもらいました。
どうもありがとうございます
Posted by KG at 2005年04月13日 08:27
初心者なもので
ほーんとに悩みながら
やっとこさツリー化できました
ありがとうございました。
Posted by yuko at 2005年05月16日 21:58
リニューアルされるまできれいにツリー化ができていたのに、
リニューアル移行後、作動しなくなってしまいました(つД`)
どこかいじれば元に戻るんでしょうか……?
Posted by ren at 2005年08月10日 17:58
うちも新しくされてしまったら、ツリー化しなくなってしまいました。
おっしゃるように書き換えたのですが…今までのようにフリースペースに書いていたんじゃだめみたいです。ファイル化してアップさせないといけないのかなぁ…うーん、むつかしいです…

ほかの3カラムにするためには排除してるのに、機能しないとは…うーん(><)
Posted by smappiee at 2005年08月15日 10:40