Movable Type 備忘録

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

こんばんわ^^

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

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

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

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

スクリプトの説明

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

  1. function dtree_communication()
  2. {
  3.     var node = 0; /*各ノードの ID を示す変数*/
  4.     var depth = 0; /*ツリーの階層を示す変数 */
  5.     var x = new dTree('x');/*dtree オブジェクトを作成*/
  6.  
  7.     x.config.useCookies = false; /*Cookie を有効にしたい場合 true を指定 */
  8. // x.config.target = '_blank';/*各リンクに target 属性を付加したい場合有効にする*/
  9.  
  10.     var comment_node = 99999998; /*dtree 内で唯一な ID( 数値 )を指定*/
  11.  
  12.     /*
  13.      * コメントツリー用 ROOT ノード作成( 必ず作成する必要があります )
  14.      */
  15.     x.add(comment_node, /*ノード ID( 必ず唯一な ID にすること )*/
  16.           -1, /*ROOT ノードの ID( -1 固定 )を指定 */
  17.           '<span class="bold">Recent Comments</span>',/*ROOT ノード表示名を指定 */
  18.           '', /*ROOT ノードの URL( なし ) */
  19.           '最近のコメント', /*ROOT ノードの title 属性 */
  20.           '', /*ROOT ノードの target 属性( なし ) */
  21.           dtree_icon_fold, /*ROOT ノードのオープン状態のアイコン */
  22.           dtree_icon_open, /*ROOT ノードのクローズ状態のアイコン */
  23.           true); /*ROOT ノードの初期表示時の状態 */
  24.                                                       /* false: 閉じた状態/true: 開いた状態 */
  25.  
  26.     /*
  27.      * コメントツリー作成
  28.      * 最初は ROOT ノードを親ノードとしてツリー表示します
  29.      */
  30.     <MTEntries recently_commented_on="5">/*最近コメントされたエントリ 5 件分を抽出 */
  31.         node = <$MTEntryID$> + 5000; /*エントリ ID + 5000 をノード ID とする( 唯一な ID )*/
  32.  
  33.         x.add(node, /*ノード ID( エントリ ID + 5000 ) */
  34.         comment_node, /*コメントツリー用ノードを指定 */
  35.         '<$MTEntryTitle encode_js="1"$>', /*エントリタイトルをノード表示名とする*/
  36.         '<$MTEntryPermalink$>', /*エントリ URL をノードの URL とする */
  37.         '<$MTEntryTitle encode_js="1"$>', /*title 属性にエントリタイトルを指定 */
  38.         '', /*target 属性( なし ) */
  39.         dtree_icon_page, /*ノードのオープン状態のアイコン */
  40.         dtree_icon_page); /*ノードのクローズ状態のアイコン */
  41.  
  42.         <MTComments lastn="5" sort_order="descend">/*エントリにポストされた最近のコメント 5 件分を抽出*/
  43.  
  44.             x.add(<$MTCommentID$>, /*ノード ID( コメント ID ) */
  45.             node, /*エントリのノード ID を親ノードとする */
  46.             '<$MTCommentDate format="%y/%m/%d "$> <$MTCommentAuthor$>',/*日付 + コメント投稿者名をノード表示名とする*/
  47.             '<$MTEntryLink$>#c<$MTCommentID$>', /*コメント欄のジャンプ先 URL */
  48.             '<$MTCommentAuthor$>', /*title 属性にコメント投稿者名を指定 */
  49.             '', /*target 属性( なし ) */
  50.             dtree_icon_coments, /*ノードのオープン状態のアイコン */
  51.             dtree_icon_coments); /*ノードのクローズ状態のアイコン */
  52.         </MTComments>
  53.     </MTEntries>
  54.  
  55.     var trackback_node = 99999999;/*dtree 内で唯一な ID( 数値 )を指定します*/
  56.  
  57.     /*
  58.      * トラックバックツリー用 ROOT ノード作成( 必ず作成する必要があります )
  59.      * ※基本的にはコメントツリーの ROOT ノードと同様です
  60.      */
  61.     x.add(trackback_node,
  62.     -1,
  63.     '<span class="bold">Recent Trackbacks</span>',
  64.     '',
  65.     '最近のトラックバック',
  66.     '',
  67.     dtree_icon_fold,
  68.     dtree_icon_open,
  69.     true);
  70.  
  71.     /*
  72.      * トラックバックツリー作成
  73.      * 最初は ROOT ノードを親ノードとしてツリー表示します
  74.      * ※Movable Type のプラグイン( http://as-is.net/blog/archives/000965.html )を併用します
  75.      * 他のブログシステムの場合、もしかするとできないかもしれません
  76.      */
  77.     <MTEntries recently_pinged_on="5">/*最近トラックバックされたエントリ 5 件分を抽出 */
  78.         node = <$MTEntryID$> + 6000; /*エントリ ID + 6000 をノード ID とする( 必ず唯一な ID )*/
  79.  
  80.         /*
  81.          * 基本的にはコメントツリーと同様です
  82.          */
  83.         x.add(node,
  84.         trackback_node,
  85.         '<$MTEntryTitle encode_js="1"$>',
  86.         '<$MTEntryPermalink$>',
  87.         '<$MTEntryTitle encode_js="1"$>',
  88.         '',
  89.         dtree_icon_page,
  90.         dtree_icon_page);
  91.  
  92.         <MTPings lastn="5">/*エントリにポストされた最近のトラックバック 5 件分を抽出*/
  93.             /*
  94.              * 基本的にはコメントツリーと同様です
  95.              */
  96.             x.add(<$MTPingID$>, /*ノード ID( トラックバック ID ) */
  97.             node, /*エントリのノード ID を親ノードとする */
  98.             '<$MTPingDate format="%y/%m/%d "$> <$MTPingBlogName encode_js="1"$>',/*日付 + トラックバック先ブログ名をノード表示名とする*/
  99.             '<$MTPingURL$>', /*トラックバック先 URL */
  100.             '<$MTPingTitle encode_js="1"$>', /*title 属性にトラックバック先エントリタイトルを指定 */
  101.             '', /*target 属性( なし ) */
  102.             dtree_icon_trackbacks,
  103.             dtree_icon_trackbacks);
  104.         </MTPings>
  105.     </MTEntries>
  106.  
  107.     /*
  108.      * ノード登録した dtree オブジェクトを表示
  109.      */
  110.     document.write(x);
  111. }

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

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

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

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

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

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

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

 Trackback Pings(1)

from あるMAS受講生の日記(ブログ)-road's BLOG-MASMAS

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

 Comments(13)

#1: Posted by TomomiX @ April 14, 2008 [REPLY]
user-pic

こんばんわ。
何度も実践してみましたが、なかなかうまくいきませんでした。
アップロードにつきましては、dtree.zipをダウンロードしまして
1.dtree/imgすべてのファイル
2.dtree.css(そのままアップロード)
3.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で個別に指定しています。

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

#2: Posted by Author Profile Page bzbell @ April 14, 2008 [REPLY]
user-pic

>>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 ではできないことになります。ご確認ください。テレテレ

#3: Posted by TomomiX @ April 15, 2008 [REPLY]
user-pic

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

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

2.続けて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>

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

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

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

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

#4: Posted by Author Profile Page bzbell @ April 15, 2008 [REPLY]
user-pic

>>3 TomomiX さん

おはようございます^^

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

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

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

#5: Posted by TomomiX @ April 15, 2008 [REPLY]
user-pic

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

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

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

#6: Posted by Author Profile Page bzbell @ April 15, 2008 [REPLY]
user-pic

>>5 TomomiX さん

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

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

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

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

#7: Posted by TomomiX @ April 17, 2008 [REPLY]
user-pic

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

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

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

#8: Posted by Author Profile Page bzbell @ April 17, 2008 [REPLY]
user-pic

>>7 TomomiX さん

こんばんわ^^

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

#9: Posted by TomomiX @ April 17, 2008 [REPLY]
user-pic

あ、Shadowbox でしたか;
早合点してしまいました。
Shadowbox も近々勝負(リベンジ)してみますバイバイ

#10: Posted by TomomiX @ April 25, 2008 [REPLY]
user-pic

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

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

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

それではまた^^

#11: Posted by Author Profile Page bzbell @ April 25, 2008 [REPLY]
user-pic

>>10 TomomiX さん

こんにちわ^^

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

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

#12: Posted by TomomiX @ April 26, 2008 [REPLY]
user-pic

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

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

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

#13: Posted by Author Profile Page bzbell @ April 26, 2008 [REPLY]
user-pic

>>12 TomomiX さん

こんばんわ^^

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

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

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

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

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

 Post a Comment

 

コメント用フィード