この記事の内容は、時間経過およびプログラムやシステムのバージョン アップなどの事情によって、現状に正しくそぐわない内容、またはそれどころか、場合によっては問題を引き起こす可能性があります。参考程度に留め、関連記事アーカイブを検索してみてください。

MovableType のコメントでツリー型掲示板を実現するプラグイン:MTCommentTree

Posted by
ぴろり
Posted at
2005/08/04 00:04
Trackbacks
関連記事 (4)
Comments
コメント (30)
Post Comment
コメントできます
Category
プラグイン カテゴリ
 MovableType には標準でコメントを投稿できる機能がありますが、 投稿されたコメントは時系列に沿って表示することしかできません。 時系列に並んだコメントの中から目的の話題のみを追いかけることは、 コメント欄での議論が白熱した場合などそう容易なことではありません。 一方、記事に親子関係を持つツリー(スレッド)形式の掲示板では、 複数の話題を扱っていても関連する記事だけを簡単に追いかけることができます。 論評系のブログなどで、ツリー形式のコメント欄が欲しいと思われた方もいらっしゃるのではないでしょうか?

 そこで今回、MovableType のコメント欄をツリー形式で表示できるプラグインを作成してみました。 このプラグインは、コメントをツリー形式で表示するための幾つかのテンプレートタグを追加します。 これによりコメントに親子関係を持たせた、ツリー型掲示板のような表示が可能になります。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

はじめに

MTCommentTree.jpg  このプラグインを導入することで、右図のようにコメントをツリー形式で表示することができます。 記事の親子関係はコメント入力欄にある URL フィールドを利用して管理しているため、 既に URL フィールドをお使いの場合、これをそのままにプラグインを導入することはできません。 申し訳ありませんが、ツリー表示を取るか、URL 入力欄を取るかの二者択一となっています m(_^_)m

 "オンラインソフトの発表の場としてのウェブログ"という記事で、 オンラインソフトをブログを使って公開する場合の方法について書いています。 ここで、ユーザとのコミュニケーションツールであるコメント欄について述べた部分がありますが、 その中で従来の時系列コメントについて少しコメントをしています。 機能要望やバグ報告などが盛んに行われるようになると、 時系列コメントでは複数の話題を効率よく追うことが難しくなり、 そのためにもツリー型掲示板に近い機能が欲しくなってきます。

 Web を検索したところ、最近に投稿されたコメントをツリー化するための改造については幾つか発見することができましたが、 個別アーカイブのコメントをツリー化できるものは残念ながら発見できませんでした。
 Lunar's 「本日の○○」:『カストマイズ』 では、MovableType の標準テンプレートを使って、最近に投稿されたコメントをツリー表示とするための改造が紹介されています。 Web で検索できた改造のほとんどはこれと同じものでした。
 また、小粋空間:サイドメニューのツリー化スクリプト(改) では、JavaScript を利用してツリー表示を実現する手法が紹介されています。 ここで公開されてる maketree.js は、コメントに限らずトラックバックやカテゴリなど様々に使うことができ、 サブカテゴリーも再帰的に展開してくれるスグレモノです。 しかし今回、目指しているツリー型掲示板に一番近いものの、このままではコメントの親子関係を実現できそうにありません。

 当初、maketree.js を参考に色々弄ってみましたが、コメント毎に親子関係の情報を持たねばならず、 MovableType 標準では実現できそうにないという結論に至りました。 MovableType には簡単に機能拡張が行えるプラグインという仕組みがあり、 そこで今回、コメント欄でツリー型掲示板を実現できるようなプラグインを自作することにしました。

結局、自作することになったプラグインは全く簡単ではありませんでしたが!

今のところ、どのエントリのコメント欄も平和なもので、 このツリー型コメントが効果を発揮するのはまだまだ先のことになりそうです。しょんぼり。


追加されるテンプレートタグ

MTCommentTree
コメントツリーのコンテナタグです。 MovableType 標準の MTComments タグの替わりに使います。 この中では MovableType 標準の MTComment* タグに加えて、 以下のタグを使うことができます。
MTCommentHasChild
自分を親とする子が少なくとも一つある場合に真になる条件タグです。
MTCommentHasNoChild
自分を親とする子が一つもない場合に真になる条件タグです。
MTCommentIsRoot
自分がルートコメントの場合に真になる条件タグです。
MTCommentChildRecurse
自分の子について、MTCommentTree で定義されているテンプレートを再帰的に呼び出します。

導入方法

Step 0.プラグインのインストール

 アーカイブに含まれる MTCommentTree.pl を MovableType のプラグインディレクトリにコピーします。 そして、MovableType の管理画面のメインメニューで、"使用可能なプラグイン"欄に表示されていることを確認します。

Step 1.個別アーカイブテンプレートの修正

 MTComments テンプレートタグを MTCommentTree に修正し、 コメントが子を持つ場合について MTCommentHasChild タグを用いて記述します。
<MTCommentTree>

<$MTCommentAuthor$>:<$MTCommentDate$><br />
<$MTCommentBody$>

<MTCommentHasChild>
<div>
	<$MTCommentChildRecurse$>
</div>
</MTCommentHasChild>

</MTCommentTree>

Step 2-1.コメント入力フォームに url の hidden フィールドを追加

 記事の親子関係はコメント入力欄にある URL フィールドを利用して管理しています。 URL フィールドは hidden 要素としておきます。 Cookie で url フィールドを自動設定している箇所があるので、こちらも忘れずに削除しておきましょう。
<input type="hidden" name="url" value="">

Step 2-2.各コメント毎に返信用のリンクを追加

 特定の記事に返信を返すと、返信はその記事の子として表示されます。 記事に返信するには、その記事のコメントIDを URL フィールドに入力しますが、 ここで紹介している例では JavaScript を利用して URL フィールドを設定しています。
<!--MTCommenTree タグ中で、各コメントに返信用リンクを追加します-->
<a href="#" onclick="javascript: writeReply (<$MTCommentID$>);">返信する</a>

Step 2-3.url フィールドを更新するための JavaScript を追加

 Step 2-2で追加した返信用リンクがクリックされた時に、 Step 2-1のURL フィールドにコメントIDを埋め込む処理を追加します。
<script type="text/javascript" language="javascript">
function writeReply (id)
{
	document.commentform.url.value = id;
}
</script>

 これで、コメント毎に用意された"返信する"リンクをクリックした後にコメントを投稿すると、 投稿されたコメントは親子関係として表示されることになります。

親に指定されているコメントにアイコンを表示するなど、改善の余地はまだまだありそうです。 このままでは、返信リンクをクリックしても画面に変化が無いので、 意図しないコメントにレスを返してしまうなどの事故があります。

デフォルトでは、ルート(親を持たない状態)にコメントが投稿されます。

トラブルシュート - 動かない時は?

 私がプラグインを作り始めた頃のモノなので、とんでもない不具合が隠されている可能性が高いです。 作者に直接連絡を頂けた方が早く対処できるかもしれません(いいのかそれで)

いろいろ

  • 管理画面からコメントの親子関係を解消するには、子コメントの URL を空欄にしてください
  • MovableType のプラグイン開発は今回が初挑戦でして、未だにその仕組みが理解できていません
  • ひとまず、コメントの親子関係を実現できるところまでは漕ぎ着けましたが、 他にも必要なタグやバグ報告などありましたらツッコミのほど宜しくお願い致します
  • オリジナルの著作権表示を改変しない限り、自由に改造・転載・配布できます

ダウンロード

 MTCommentTreeプラグインをダウンロードできます。

MTCommentTree  new

ver.0.15, '06/02/21, 0bytes, MovableType 3.1x以上
  • 3.151-ja で動作確認
  • 再構築時の警告メッセージを除去
  • 子コメントの日付の不具合修正
  • MTCommentIsRootの不具合修正
  • ある条件下で投稿されたコメントが反映されない不具合修正

最新版のダウンロードやバグレポートはCommentTree の trac レポジトリでも行っています。

ページ下方の Download in other formats → Original Format で取得できます。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:MovableTypeにWYSIWYG編集機能を組み込む:MTFCKeditor

関連記事/トラックバック (全 4 件中、最新 5 件まで表示しています)

Open MagicVox.net のスクリーンショット
タイトル
MovableTypeで掲示板を作る
Trackbacked at
2006/05/17 23:48
from
Open MagicVox.net
概要
 MovableType で本サイトとは別のブログにエントリを一つ作り、 そのエントリのコメント欄を掲示板や一言 BBSとして利用する方法が広く使われているよう...

Open MagicVox.net のスクリーンショット
タイトル
MTCommentTreeプラグインとJavaScript
Trackbacked at
2006/04/17 20:41
from
Open MagicVox.net
概要
 MovableType のコメント欄でツリー掲示板を実現するプラグイン MTCommentTree は、MovableType のテンプレートタグを拡張するだ...

FOX通信 のスクリーンショット
タイトル
コメントをツリー式にするプラグイン、ようやく導入
Trackbacked at
2006/04/14 00:22
from
FOX通信
概要
去年の8月にこんなエントリを書きました。 コメントをツリー形式にするプラグイン発見 それから8ヶ月、ようやくプラグインを導入して、使えるようにしてみました。 ...

FOX通信 のスクリーンショット
タイトル
コメントをツリー形式にするプラグイン発見
Trackbacked at
2005/08/19 13:25
from
FOX通信
概要
mixiのMTコミュで見つけたプラグイン。 コメント欄をツリー型掲示板みたいにしてくれるらしいです。 Open MagicVox - MovableType の...

この記事にトラックバックを送るには?

寄せられたコメント (全 30 件中、最新 5 件まで表示しています)

Posted by
takataka
at
2006/08/02 14:33
ID
DP8wFjGU
すいません、自己レスです。タグが消えちゃいました。
「lantenは使えないようですが、何かいい方法がないでしょうか?」でした。
Posted by
takataka
at
2006/08/02 02:52
ID
DP8wFjGU
mt3.2で使ったらうまくいかず、スクリプトのcommentformをcomments_formに書き換えることに気づくまで苦労しました。
とてもべんりです。ありがとうございました。
ひとつ教えて欲しいのですが、インデックスページなどで、最新一つのルートコメントのみを表示させたいのです。
<MTCommentTree lanten="1">は使えないようですが、何かいい方法がないでしょうか?
Posted by
ふ〜ふ〜
at
2006/06/06 11:29
ID
W6YATRCY
仕事でムーバブルタイプを導入、さらに掲示板も作ることになりました。
でもMTにはBBSやツリー機能がないことがわかり、どうしようかと悩んでおりました。
必死にググっていると、このサイトが見つかりました。
まだこれから導入するところですが、かなり使えそうです。ありがとうございます。
Posted by
ぴろりぴろり
at
2006/04/17 20:44
ID
7zK65Z56
> ぴろりさんのサイトで使用されているタグを、
> もう少し詳しく公開していただけないでしょうか?
> #特に返信の取り消しのjavascriptあたりが知りたいです
リクエストにお応えして(?)説明記事を書いてみました。参考になれば良いのですが。
http://www.magicvox.net/archive/2006/04172001.php
Posted by
IranaIrana
at
2006/04/14 00:16
ID
PZ4GVoVc
以前こちらのプラグインを自分のブログで紹介させていただいた後、
今回ようやく導入することができました。
(そのため、再トラバさせていただきました。ご不快でしたら、お手数ですが削除をお願いします)
なんとか動作確認まではできております。
そこで、一つお願いがあります。
ぴろりさんのサイトで使用されているタグを、
もう少し詳しく公開していただけないでしょうか?
 #特に返信の取り消しのjavascriptあたりが知りたいです
申し訳ありませんが、よろしくお願い致します。

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。