Movable Type のコメント／トラックバック一覧をツリー表示

• Apr092008
• Author: bzbell
• Categories: Customize
• Tags: Customize, dtree.js, JavaScript

• Next Page: MathOperatorExpander プラグイン
• Prev Page: Movable Type 4 で FCKeditor を使用する

こんばんわ^^

わたしのサイトではコメント一覧、トラックバック一覧を 1 つのコミュニケーションという枠でツリー表示してます。
訪問者さんのご質問で、Movable Type 以外のブログシステムでも同じことができないか･･･とのことだったので、できるかどうかはともかく、ツリー表示しているスクリプトの説明をしてみますね。

Movable Type 以外ではやったことないので断言はできないのですが、たぶんコメントの一覧表示やトラックバックの一覧表示を行うタグがあると思うので、それに合わせて置き換えればできるのではないかと思われまする (●´∀｀●)

以前、こちらのMovableTypeのカテゴリ一覧などをツリー表でカテゴリ一覧をツリー表示する方法をご紹介しました。

基本的にはカテゴリツリーと同様に Destroydrop さんとこで配布されてる dtree.js を使用してます。

• dTree is a free JavaScript tree menu.

スクリプトの説明

わたしのサイトで使ってますスクリプトの説明をします。
以下のコードは当然ですが Movable Type のコメント一覧、トラックバック一覧を表示するタグを併用して dtree.js によるツリー表示を行ってます。

function dtree_communication()
{
    var node  = 0;             /*各ノードの ID を示す変数*/
    var depth = 0;             /*ツリーの階層を示す変数  */
    var x     = new dTree('x');/*dtree オブジェクトを作成*/

    x.config.useCookies = false;   /*Cookie を有効にしたい場合 true を指定           */
//  x.config.target     = '_blank';/*各リンクに target 属性を付加したい場合有効にする*/
var comment_node = 99999998;   /*dtree 内で唯一な ID( 数値 )を指定*/
/*
     * コメントツリー用 ROOT ノード作成( 必ず作成する必要があります )
     */
    x.add(comment_node,                               /*ノード ID( 必ず唯一な ID にすること )*/
          -1,                                         /*ROOT ノードの ID( -1 固定 )を指定    */
          '<span class="bold">Recent Comments</span>',/*ROOT ノード表示名を指定              */
          '',                                         /*ROOT ノードの URL( なし )            */
          '最近のコメント',                           /*ROOT ノードの title 属性             */
          '',                                         /*ROOT ノードの target 属性( なし )    */
          dtree_icon_fold,                            /*ROOT ノードのオープン状態のアイコン  */
          dtree_icon_open,                            /*ROOT ノードのクローズ状態のアイコン  */
          true);                                      /*ROOT ノードの初期表示時の状態        */
                                                      /*  false: 閉じた状態/true: 開いた状態 */

    /*
     * コメントツリー作成
     * 最初は ROOT ノードを親ノードとしてツリー表示します
     */
    <MTEntries recently_commented_on="5">/*最近コメントされたエントリ 5 件分を抽出           */
node = <$MTEntryID$> + 5000;     /*エントリ ID + 5000 をノード ID とする( 唯一な ID )*/
x.add(node,                                    /*ノード ID( エントリ ID + 5000 )     */
        comment_node,                                  /*コメントツリー用ノードを指定        */
        '<$MTEntryTitle encode_js="1"$>',              /*エントリタイトルをノード表示名とする*/
        '<$MTEntryPermalink$>',                        /*エントリ URL をノードの URL とする  */
        '<$MTEntryTitle encode_js="1"$>',              /*title 属性にエントリタイトルを指定  */
        '',                                            /*target 属性( なし )                 */
        dtree_icon_page,                               /*ノードのオープン状態のアイコン      */
        dtree_icon_page);                              /*ノードのクローズ状態のアイコン      */

        <MTComments lastn="5" sort_order="descend">/*エントリにポストされた最近のコメント 5 件分を抽出*/

            x.add(<$MTCommentID$>,                                     /*ノード ID( コメント ID )                   */
            node,                                                      /*エントリのノード ID を親ノードとする       */
            '<$MTCommentDate format="%y/%m/%d "$> <$MTCommentAuthor$>',/*日付 + コメント投稿者名をノード表示名とする*/
            '<$MTEntryLink$>#c<$MTCommentID$>',                        /*コメント欄のジャンプ先 URL                 */
            '<$MTCommentAuthor$>',                                     /*title 属性にコメント投稿者名を指定         */
            '',                                                        /*target 属性( なし )                        */
            dtree_icon_coments,                                        /*ノードのオープン状態のアイコン             */
            dtree_icon_coments);                                       /*ノードのクローズ状態のアイコン             */
        </MTComments>
    </MTEntries>
var trackback_node = 99999999;/*dtree 内で唯一な ID( 数値 )を指定します*/
/*
     * トラックバックツリー用 ROOT ノード作成( 必ず作成する必要があります )
     * ※基本的にはコメントツリーの ROOT ノードと同様です
     */
    x.add(trackback_node,
    -1,
    '<span class="bold">Recent Trackbacks</span>',
    '',
    '最近のトラックバック',
    '',
    dtree_icon_fold,
    dtree_icon_open,
    true);

    /*
     * トラックバックツリー作成
     * 最初は ROOT ノードを親ノードとしてツリー表示します
     * ※Movable Type のプラグイン( http://as-is.net/blog/archives/000965.html )を併用します
     *   他のブログシステムの場合、もしかするとできないかもしれません
     */
    <MTEntries recently_pinged_on="5">/*最近トラックバックされたエントリ 5 件分を抽出         */
node = <$MTEntryID$> + 6000;  /*エントリ ID + 6000 をノード ID とする( 必ず唯一な ID )*/
/*
         * 基本的にはコメントツリーと同様です
         */
        x.add(node,
        trackback_node,
        '<$MTEntryTitle encode_js="1"$>',
        '<$MTEntryPermalink$>',
        '<$MTEntryTitle encode_js="1"$>',
        '',
        dtree_icon_page,
        dtree_icon_page);

        <MTPings lastn="5">/*エントリにポストされた最近のトラックバック 5 件分を抽出*/
            /*
             * 基本的にはコメントツリーと同様です
             */
            x.add(<$MTPingID$>,                                                  /*ノード ID( トラックバック ID )                     */
            node,                                                                /*エントリのノード ID を親ノードとする               */
            '<$MTPingDate format="%y/%m/%d "$> <$MTPingBlogName encode_js="1"$>',/*日付 + トラックバック先ブログ名をノード表示名とする*/
            '<$MTPingURL$>',                                                     /*トラックバック先 URL                               */
            '<$MTPingTitle encode_js="1"$>',                                     /*title 属性にトラックバック先エントリタイトルを指定 */
            '',                                                                  /*target 属性( なし )                                */
            dtree_icon_trackbacks,
            dtree_icon_trackbacks);
        </MTPings>
    </MTEntries>

    /*
     * ノード登録した dtree オブジェクトを表示
     */
    document.write(x);
}

大事なところを赤字にしてます。
dtree.js では各ノードで指定する ID( エントリ ID やコメント ID、トラックバック ID )はユニーク( ツリー内で唯一 )な ID にする必要があることを注意してください。
そうしないと期待通りの表示がされなくなります。

トラックバックツリーに関しては他のブログシステムの場合、エントリにポストされた最近のトラックバックに関する情報に、エントリ情報、トラックバック情報が取得できない場合、わたしのサイトで表示するようなツリー表示はできないかもしれません。
Movable Type でもデフォルトの機能ではツリー表示できず、recentry_pinged_on というプラグインを併用してます。

以上、ざっとですがコメント／トラックバックツリーのスクリプトを説明してみました。
使い方は以下のコードを、テンプレート内のツリー表示したい場所に追加します。

<script type="text/javascript">dtree_communication();</script>

どうでしょうか。
他のブログシステムでも使えそうでしょうか (;￣∇￣A

FC2 ブログのサイトを見る限り、コメント一覧、トラックバック一覧を表示する際、エントリタイトルをいっしょに表示できるようなので、同様の表示ができそうなかんじします。
もし分からないようでしたら、コメント一覧、トラックバック一覧を表示するためのタグを教えていただければ、わたしの方で置き換えてみますよ (￣∇￣)b

ちなみに、小粋空間さんところで、dtree.js を詳しく説明されてます。参考にしてください (●＞∀＜●)／

• ツリー表示 JavaScript 「dTree」詳解

• Related Entries
• 08/02/11ナビゲーションバーのカレントリンクを強調表示する
• 07/12/25ブラウザのスクロールに連動する RSS アイコン表示
• 07/08/09jQueryでフォーム入力エラー時にブルブルさせてみる
• 07/08/05リンクテキストをロールオーバする（scrollover.js）
• 07/08/01Lightboxのように透過レイヤー表示してみる
• 07/07/30jQueryでページ分割
• 07/07/29jQueryで横スライドなメニューを表示する
• 07/07/18IE6 で min-width、max-width を実装する２
• 07/07/16ブックマークレットを外部ファイルとして管理する(JavaScript版)
• 07/07/14IE6 で min-width、max-width を実装する

• Edit
• Permalink
• Comments(13)
• Trackbacks(1)

 Trackback Pings(1)

TrackBack URL for this entry:

from あるＭＡＳ受講生の日記（ブログ）-road's BLOG-MASMAS

こんばんは。今日は興奮気味で眠れないクレイジーアフィリエイターRoadです（笑）「コメント」や「トラックバック」って聞いたことありますか？※意味については...

Tracked on May 1, 2008

 Comments(13)

#1: Posted by TomomiX [RES]

こんばんわ。
何度も実践してみましたが、なかなかうまくいきませんでした。
アップロードにつきましては、dtree.zipをダウンロードしまして
１．dtree/imgすべてのファイル
２．dtree.css（そのままアップロード）
３．dtree.js（「this.icon =」直下のgifをフルパスで記述しアップロード）
です。
※jsファイルのその他編集がわからず、ここで止まってしまっています。。

コメント・トラックバックを指しているタグは以下の通りです。
●コメント
<div id="commentlist">
<ul class="rcomment">
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment"><%rcomment_name> (<%rcomment_month>/<%rcomment_day>)</a> <script type="text/javascript">
nw(<%rcomment_year>,<%rcomment_month>,<%rcomment_day>,<%rcomment_hour>)
</script></li>
<!--/rcomment-->
</ul>
</div>

●トラックバック
<div id="tblist">
<ul class="rtrackback">
<!--rtrackback-->
<li><%rtrackback_etitle><br /><a href="<%rtrackback_link>#trackback"><%rtrackback_blog_name> (<%rtrackback_month>/<%rtrackback_day>)</a> <script type="text/javascript">
nw(<%rtrackback_year>,<%rtrackback_month>,<%rtrackback_day>,<%rtrackback_hour>)
</script></li>
<!--/rtrackback-->
</ul>
</div>

※ul class=""で、現状はリスト用のアイコンをCSSで個別に指定しています。

丸投げ状態にしてしまって誠に申し訳ありません

Posted on April 14, 2008

#2: Posted by bzbell [RES]

>>1 TomomiX さん

こんばんわ^^

FC2 のタグはよく分からないのですが、ほぼカンで作ってみました

var dtree_icon_page       = 'http://●●●/dtree/img/page.gif';
var dtree_icon_fold       = 'http://●●●/dtree/img/folder.gif';
var dtree_icon_open       = 'http://●●●/dtree/img/folderopen.gif';
var dtree_icon_coments    = 'http://●●●/dtree/img/comments.gif';
var dtree_icon_trackbacks = 'http://●●●/dtree/img/trackbacks.gif';

function dtree_communication()
{
    var node   = 0;
    var parent = 0;

    a = new dTree('a');
    a.config.useCookies = false;
//  a.config.target     = '_blank';

    /*
     * 最近のコメント
     */
    parent = 1000;
    node   = 1500;

    a.add(100,  -1, '<span class="bold">Recent Comments</span>', '', '最近のコメント', '', dtree_icon_fold, dtree_icon_open, true);
    <!--rcomment-->
    a.add(parent, 100, '<%rcomment_etitle>', '<%rcomment_link>', '<%rcomment_etitle>', '', dtree_icon_page, dtree_icon_page);
    a.add(node++, parent++, '<span class="right"><%rcomment_year>/<%rcomment_month>/<%rcomment_day></span><%rcomment_name> ', '<%rcomment_link>#comment', '<%rcomment_name> ', '', dtree_icon_coments, dtree_icon_coments);
    <!--/rcomment-->

    /*
     * 最近のトラックバック
     */
    parent = 2000;
    node   = 2500;

    a.add(200, -1, '<span class="bold">Recent Trackbacks</span>', '', '最近のトラックバック', '', dtree_icon_fold, dtree_icon_open, true);
    <!--rtrackback-->
    a.add(parent, 200, '<%rtrackback_etitle>', '<%rtrackback_link>', '<%rtrackback_etitle>', '', dtree_icon_page, dtree_icon_page);
    a.add(node++, parent, '<span class="right"><%rtrackback_year>/<%rtrackback_month>/<%rtrackback_day></span><%rtrackback_title>', '<%rtrackback_url>', '<%rtrackback_title>', '', dtree_icon_trackbacks, dtree_icon_trackbacks);
    <!--/rtrackback-->

    document.write(a);
}

1. 新規テンプレートを作成して、上記スクリプトをコピペします。そして、出力ファイル名を dtree.commu.js( アップロードした dtree.js と同じ場所に作成 )という名前で作成するようにしてください。
   また、1 ～ 5 行目の URL を dtree/img の URL に変更します。

2. 次に再構築!? すると上記コード中のタグが変換されてコメントトラックバックツリーの Javascript が作成されると思います。

3. 最後にツリー表示したいテンプレート中の HTML ヘッダ中に以下を追加します。

   <script type="text/javascript" src="http://●●●/dtree/dtree.js"></script>
   <script type="text/javascript" src="http://●●●/dtree/dtree.commu.js"></script>
   

   次にツリー表示したい場所に以下を追加します。

   <script type="text/javascript">dtree_communication();</script>
   

以上です。
ホントできるかどうか分かりませんよ
FC2 で上記手順の 1. ができるかどうかがポイントだと思います
1. ができないと FC2 ではできないことになります。ご確認ください。

Posted on April 14, 2008

#3: Posted by TomomiX [RES]

早速の対応ありがとうございます
現在、左カラムのプラグインに入れてみました。が、ツリー展開せず、jsが動作しないみたいです。また、FC2ブログ独自の変数と思われる&lt;%rcomment_etitle&gt;などが丸出しになってしまいました；

工程としては・・
１．上記(1)のスクリプトを画像URLの記述後、メモ帳保存からdtree_commu.jsに名称変更し、jsファイルとして保存。（名称の_は、拡張子前にピリオドがついているとアップロードできない仕様の為）

２．続けてdtree.jsをアップロード。これは下記のような編集済みのjsアップロードで良いのか不明でした；
<pre>/*--------------------------------------------------|

| dTree 2.05 | www.destroydrop.com/javascript/tree/ |

|---------------------------------------------------|

| Copyright (c) 2002-2003 Geir Landrö |

| |

| This script can be used freely as long as all |

| copyright messages are intact. |

| |

| Updated: 17.04.2003 |

|--------------------------------------------------*/

// Node object

function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

this.id = id;

this.pid = pid;

this.name = name;

this.url = url;

this.title = title;

this.target = target;

this.icon = icon;

this.iconOpen = iconOpen;

this._io = open || false;

this._is = false;

this._ls = false;

this._hc = false;

this._ai = 0;

this._p;

};

// Tree object

function dTree(objName) {

this.config = {

target : null,

folderLinks : true,

useSelection : true,

useCookies : true,

useLines : true,

useIcons : true,

useStatusText : false,

closeSameLevel : false,

inOrder : false

}

this.icon = {

root : 'http://blog31.fc2.com/b/blackcat13numbers/file/base.gif',

folder : 'http://blog31.fc2.com/b/blackcat13numbers/file/folder.gif',

folderOpen : 'http://blog31.fc2.com/b/blackcat13numbers/file/folderopen.gif',

node : 'http://blog31.fc2.com/b/blackcat13numbers/file/page.gif',

empty : 'http://blog31.fc2.com/b/blackcat13numbers/file/empty.gif',

line : 'http://blog31.fc2.com/b/blackcat13numbers/file/line.gif',

join : 'http://blog31.fc2.com/b/blackcat13numbers/file/join.gif',

joinBottom : 'http://blog31.fc2.com/b/blackcat13numbers/file/joinbottom.gif',

plus : 'http://blog31.fc2.com/b/blackcat13numbers/file/plus.gif',

plusBottom : 'http://blog31.fc2.com/b/blackcat13numbers/file/plusbottom.gif',

minus : 'http://blog31.fc2.com/b/blackcat13numbers/file/minus.gif',

minusBottom : 'http://blog31.fc2.com/b/blackcat13numbers/file/minusbottom.gif',

nlPlus : 'http://blog31.fc2.com/b/blackcat13numbers/file/nolines_plus.gif',

nlMinus : 'http://blog31.fc2.com/b/blackcat13numbers/file/nolines_minus.gif'

};

this.obj = objName;

this.aNodes = [];

this.aIndent = [];

this.root = new Node(-1);

this.selectedNode = null;

this.selectedFound = false;

this.completed = false;

};

// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {

this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);

};</pre>

３．dtree.jsとdtree_commu.jsのアップロード後のURLを指定したスクリプト呼び出し文をHEAD間に記述

４．以下の<pre>&lt;script type="text/javascript"&gt;dtree_communication();&lt;/script&gt;</pre>
を左カラムプラグイン内に記述

※プラグイン（左カラム）は、ブログ特有の基本フリースペースでありまして、HTML記述やスクリプト記述で構築できるスペースです。

また、丸投げになってしまいましたが、FC2ブログでは変数が独自なので難しいのでしょうか；；

Posted on April 15, 2008

#4: Posted by bzbell [RES]

>>3 TomomiX さん

おはようございます^^

まず、1. の工程のスクリプトをそのままファイルに保存してアップロードしただけではダメです。FC2 固有のタグ変換を行ってもらわないとコメント一覧を表示することができません。

そうしましたら、トップページのテンプレート内の下の方（</body>タグの上辺り）に上記スクリプトをコピペしてください。
その際、スクリプト全体を <script type="text/javascript"></script> で囲うことを忘れずに

で、トップページを再構築!? することでツリー表示されれば OK です。
されなかった場合、わたしの記述にミスがあるかもなので確認していただけますか

Posted on April 15, 2008

#5: Posted by TomomiX [RES]

ご連絡ありがとうございます。
ひとつ質問ですが、MTや通常のウェブサイトのように、ディレクトリ形式のアップロード・配置ができないと難しいでしょうか。
FC2ブログにはファイル単体でのアップしかできず、dtree/直下にgifやjsを・・という風にはいかず、すべて従来の言い方で言うと、index/直下になってしまうのです。

FC2固有のタグ変換につきましては、完全に勉強不足なので、色々調べてみてはいじってみます。<%hogehoge>の部分ですよね？

なかなか解決できずすみません。。

Posted on April 15, 2008

#6: Posted by bzbell [RES]

>>5 TomomiX さん

> ･･･ディレクトリ形式のアップロード・配置ができないと難しいでしょうか。

いいえ、そんなことないですよ。
各イメージファイルやスクリプトなどのパスが正しく通っていればどこでも問題ないと思います
なので、TomomiX さんの方でそこら辺の修正がされてればいいのではないでしょうか。

> <%hogehoge>の部分ですよね？

そうですね。
FC2 は使ったことないので詳しくは知りませんが、ネットで調べたらそんなようなタグがヒットしました。
やっぱり MT のタグとはかなり違うようで戸惑いましたけど

Posted on April 15, 2008

#7: Posted by TomoｍiX [RES]

こんばんわ^^
dtreeですが、dtree.commu.js内の変数修正を完成すればうまくいきそうな気もしますので、調べながら別のFC2ブログで実現しているところを探してみます。
本格着手が連休になりそうですが；；
あと、dtree.commu.jsは、途中ピリオドのファイルをアップロードできないのですが、_や－にしても影響はないですよね。確認させてください。

あと、別件ですが、bzbellさんのHighslideに憧れて、FC2ブログでも採用してしまいました。（ディレクトリアップできないので修正必要でしたが）
しかし、代償としてGreyboxが（ナビバーメール部分や特定の記事）動作しなくなりました。prototypeとの競合でもなさそうですし、どうやってbzbellさんは共存させているのか質問したいと思いました。

いっつも相談・質問ごとばかりで本当に恐縮です、、、

Posted on April 17, 2008

#8: Posted by bzbell [RES]

>>7 TomoｍiX さん

こんばんわ^^

わたしのサイトでは GreyBox は利用してないんですよ
Shadowbox と Highslide を併用してますが、特にブッキングするようなことはないです。普通に使えてますよ

Posted on April 17, 2008

#9: Posted by TomoｍiX [RES]

あ、Shadowbox でしたか；
早合点してしまいました。
Shadowbox も近々勝負（リベンジ）してみます

Posted on April 17, 2008

#10: Posted by TomomiX [RES]

bzbellさん、こんばんわです^^

自分も最近テンプレを変えてみました。久々の黒ベースです。
一部記事の変更や白系プラグインの変更に手を焼きましたが。
しばらくはコレでやってきたいと思います

あ、Shadowbox実装できましたよ。
Greyboxは、Highslide導入後動作しなくなりましたが、
Shadowboxが穴埋めしてくれるので、放置しておきます

それではまた^^

Posted on April 25, 2008

#11: Posted by bzbell [RES]

>>10 TomomiX さん

こんにちわ^^

TomomiX さんのとこ見に行きました。
カックいいですぅ

わたしは黒が好きなので興味をそそられまする
shadowbox も表示できるようになったようですし何よりです

Posted on April 25, 2008

#12: Posted by TomomiX [RES]

こんばんわ^^
どうもありがとうございます。bzbellさんがたまに黒系テンプレに変えているのを見ていたのと、FC2blogの相互リンクのブログさんで黒ベースがいたのを見ててちょこっと変えたくなりました

最初は久々に０から作ろうとしたんですが、公開されているテンプレ集を覗いてみたら一目ぼれしたので、ダウンロードした後、カスタマイズしてしまいましたよ^^

障壁になっているIE6でも現在は正常に見れるし満足です

Posted on April 26, 2008

#13: Posted by bzbell [RES]

>>12 TomomiX さん

こんばんわ^^

> 最初は久々に０から作ろうとしたんですが、公開されているテンプレ集を覗いてみたら一目ぼれしたので、ダウンロードした後、カスタマイズしてしまいましたよ^^

やっぱり黒はいいですねぇ
でも、黒背景にフォントの色が明るすぎると目が疲れてしまうのでお気けてくださいね

> 障壁になっているIE6でも現在は正常に見れるし満足です

油断大敵です!!
わたしのサイトも、わたしが確認した限り IE6 では思惑通りに表示されるのですが、どうやら IE6 系のブラウザ!? によるのか、何らかのアクションを行うと想定外の表示がされてるようなんです。

先ほど訪問者さんに教えてもらったのですが･･･ ショックです

Posted on April 26, 2008