Movable Type 備忘録
MovableTypeのコメント、トラックバック一覧をAjax化
- Next Page: タグ検索をAjaxで表示する
- Prev Page: ブログを上手に運用する3
以前、AjaxでIFRAME的な表示をやってみるで<iframe>タグのように、外部ファイルをAjaxで表示する方法をご紹介しました。
今回はその応用として、コメント一覧、トラックバック一覧をAjax化してみましたので、そのカスタマイズ方法をご紹介します。
たくさんの人からコメントやトラックバックされると嬉しいものですが、コメント一覧やトラックバック一覧が長ぁ~くなってしまいますよね。
人によっては、邪魔なものかもしれませんね。
そこで、エントリ・アーカイブのテンプレートをカスタマイズすることで、一覧を見たい人用としてリンクを用意することで対応してみました。
コメント一覧、トラックバック一覧のカスタマイズ
まず、テスト用のページを作るなどして、こちらのAjaxでIFRAME的な表示をやってみるを参考に、各自で外部ファイルが正しく読み込められるようにしてください。
次にコメント一覧、トラックバック一覧を外部ファイルに保存します。
以下はMovableType(ムーバブルタイプ)のデフォルト・テンプレートの、トラックバック一覧を表示する部分です。<MTIfPingsActive><div class="trackbacks"><h3 id="trackback" class="trackbacks-header"><MT_TRANS phrase="TrackBack"></h3><div id="trackbacks-info"><MTIfPingsAccepted><p><MT_TRANS phrase="TrackBack URL for this entry:"><br /><$MTEntryTrackbackLink$></p></MTIfPingsAccepted></div><MTPings><MTPingsHeader><div class="trackbacks-content"><p><MT_TRANS phrase="Listed below are links to weblogs that reference"> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p></MTPingsHeader><a id="p<$MTPingID pad="1"$>"></a><div class="trackback" id="ping-<$MTPingID$>"><div class="trackback-content"><p>» <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> <MT_TRANS phrase="from"> <$MTPingBlogName$><br /><$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[<MT_TRANS phrase="Read More">]</a></p></div><p class="trackback-footer"><MT_TRANS phrase="Tracked on"> <a href="#ping-<$MTPingID$>"><$MTPingDate$></a></p></div><MTPingsFooter></div></MTPingsFooter></MTPings></div></MTIfPingsActive>
上記のように、エントリ・アーカイブ・テンプレートからトラックバック一覧を表示している部分を抜き出して外部ファイル化します。
その際、一覧表示している部分を削除するのではなくコピーして、その部分をコメントにします。 コメントは<MTIgnore>~</MTIgnore>で囲うと便利ですよ。コメント一覧・トラックバック一覧用のアーカイブを作成します。
MovableType(ムーバブルタイプ)の管理画面からアーカイブ一覧を表示して、画面上にある「テンプレートを新規作成」をクリックしてください。
そして、以下のように入力して保存します。>テンプレート名: エントリー・トラックバック テンプレートの内容: コピーしたトラックバック一覧同様に、コメント一覧を外部ファイル化します。
以下にMovableType(ムーバブルタイプ)のデフォルト・テンプレートの、コメント一覧を表示する部分を記します。<MTComments><MTCommentsHeader><div class="comments-content"><h3 class="comments-header"><MT_TRANS phrase="Comments"> (<$MTEntryCommentCount$>)</h3></MTCommentsHeader><a id="c<$MTCommentID pad="1"$>"></a><div class="comment" id="comment-<$MTCommentID$>"><div class="comment-inner"><div class="comment-header"><$MTCommentAuthorLink default_name="<MT_TRANS phrase="Anonymous">" show_email="0"$><MTIfNonEmpty tag="CommentAuthorIdentity"> <$MTCommentAuthorIdentity$></MTIfNonEmpty>:</div><div class="comment-content"><$MTCommentBody$></div><p class="comment-footer"><MT_TRANS phrase="Posted by"><$MTCommentAuthorLink default_name="<MT_TRANS phrase="Anonymous">"$> <$MTCommentAuthorIdentity$> |<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a></p><p class="comment-footer-experimental"><MT_TRANS phrase="Posted on"><a href="#comment-<$MTCommentID$>" title="<MT_TRANS phrase="Permalink to this comment">"><$MTCommentDate format="%x %H:%M"$></a></p></div></div><MTCommentsFooter></div></MTCommentsFooter></MTComments>
トラックバック一覧と同様に削除するのではなくコピーしてコメントにします。
そして、以下のように新規テンプレートを作成します。テンプレート名: エントリー・コメント テンプレートの内容: コピーしたコメント一覧次に新規作成したテンプレートを、エントリ・アーカイブと関連付けます。
MovableType(ムーバブルタイプ)の管理画面からブログを選択して、左端にある「設定」をクリックします。画面上にある「公開」をクリックすると、画面下の方に「アーカイブ・マッピング」という一覧が表示されています。
右上に「マッピング新規作成」とあるので、それをクリックして先ほど作ったエントリー・コメント、エントリー・トラックバックのテンプレートを、エントリ・アーカイブにマッピングします。
入力内容は以下の通りです。アーカイブの種類: エントリ テンプレート: エントリー・トラックバック選択したら、右横の「追加」ボタンをクリックします。
このようにして、エントリー・コメントのテンプレートも追加します。一通り追加したら、エントリーという枠内にそれぞれ一覧表示されていることを確認してください。
次に出力ファイル名を変更します。
ここは各自の環境によって異なると思いますので、アーカイブ・ファイル名定義を参考に、出力ファイル名を入力してください。以下はわたしのサイトで使っている出力ファイル名になります。
エントリー・アーカイブ: %y/%m/%d-%h%n%s.html エントリー・トラックバック: %y/%m/entry%E-trackback.html エントリー・コメント: %y/%m/entry%E-comment.html上記例だと出力されるファイル名は、2006/11/entry102-trackback.htmlのように出力されます。
次に、一覧表示していたエントリー・アーカイブ・テンプレートに、Ajax化するためのコードを追加します。
先ほど、外部ファイルの読込みテストを行ったときのようにコード追加します。
なので、コメント一覧、トラックバック一覧を表示するコードのみ説明します。その他追加/変更はAjaxでIFRAME的な表示をやってみるを参考にしてください。
以下はわたしのサイトで使っているコードになります。
トラックバック一覧用
<a href="javascript:void(0)" title="<$MTEntryTitle$>"onclick="ajax_content_onload_get('<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m"$>/entry<$MTEntryID$>-trackback.html','','ajax_trackbacklist','ajax_trackbacklist_progress')">Show Trackbacks</a> [<$MTEntryTrackbackCount$>]
コメント一覧用
<a href="javascript:void(0)" title="<$MTEntryTitle$>"onclick="ajax_content_onload_get('<$MTBlogArchiveURL$><$MTEntryDate format="%Y/%m"$>/entry<$MTEntryID$>-comment.html','','ajax_commentlist','ajax_commentlist_progress')">Show Comments</a> <span>[<$MTEntryCommentCount$>]
青い字の部分は、各一覧の外部ファイルのURLを指定しています。
ここには、先ほどエントリ・アーカイブに関連付けたときのパスを指定する必要がありますので、アーカイブ・ファイル名定義を参考に、各自の環境に合わせて変更してください。赤い字の部分がトラックバック一覧および、コメント一覧の結果を表示するタグIDとAjax LoaderイメージのタグIDをそれぞれ別名で指定しています。
最後に
~の間に以下を追加します。JavaScriptの読み込み
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script><script type="text/javascript" src="<$MTBlogURL$>js/ajaxcontents.js"></script>
青い字の部分を各自の環境に合わせて変更します。
以上で完了です。
あとは、エントリ・アーカイブを再構築して、各一覧が表示されることを確認します。
では、SEE YOU♪
Trackback Pings(0)
No trackbacks found.
Comments(40)
- #2: Posted by bzbell [RES]
>>1 oscar さん
こんにちわ^^
はい。
他サイト見てて、コメント、トラックバック一覧が長いとスクロールするのが面倒だったので(; ̄∇ ̄A
必要な人だけ表示させればいいかな、と思って外部ファイルにして閉まってみました♪ついでに、スクロールバーもつけてコメントの内容をみながらコメントできるようにしたんです。
- #4: Posted by bzbell [RES]
>>3 oscar さん
こんにちわ^^
あっ!! いいかも、ですね♪
でも、実はわたしのトップページで表示している自前のアクセス・ページ・ランキングで連続IPアドレスの拒否にCookieを使用しようとおもったのですが…できなかったんです(; ̄∇ ̄AいろんなサイトでCookieについて紹介されてますけど…できなかったんです(T_T)ウゥ
あと、oscarさんのサイトで紹介してるXMLの記事読みました♪
今四苦八苦しながらTRYしてるところです。
- #5: Posted by oscar [RES]
>連続IPアドレスの拒否にCookieを使用しようとおもったのですが…できなかったんです(; ̄∇ ̄A
あれれ、上の「Remember personal info?」の部分はCookieで記憶されてますから、使えるはずですよ。
ちゃんと、名前やアドレス表示されますから。>あと、oscarさんのサイトで紹介してるXMLの記事読みました♪
>今四苦八苦しながらTRYしてるところです。
がんばってください。・・・と、まるで人ごと・・
- #6: Posted by bzbell [RES]
>>5 oscar さん
実は自前のページ・ランクはPHPで作ってるんですけど、Cookie情報を読み込んだ後の使い方が悪いんだと思うんです。
oscarさんにお願いです!!
MTで保存するCookieの使い方を教えていただけませんか。読込み方とか、保存された情報がどういうフォーマットになってるかなど。
チョビッとずぅずぅしいですかね(; ̄∇ ̄A
- #7: Posted by oscar [RES]
Cookieは私もそれほど理解してる訳じゃないですが、記憶させたCookieが、表示上記憶してる事にならなかったんで、少し元スクリプト(mt-site.js)いじりました。
その時のをちょっとネタにしてみますね。
- #8: Posted by bzbell [RES]
>>7 oscar さん
> その時のをちょっとネタにしてみますね。
ヽ(∇⌒ヽ) わぁい♪ (ノ⌒∇)ノ
ありがとうございます♪oscarさん、頼りになりますね。
楽しみにしてます!!
- #9: Posted by す [RES]
エントリー画面にはコメントを2件だけ表示し、
残りのコメントはポップアップウインドウで見るという方法はありますか?
あれば教えてください。
よろしくお願いします。
- #10: Posted by bzbell [RES]
>>9 す さん
度々、こんにちわ^^
ご質問の件ですが、こちらのトラックバック一覧をポップアップ画面にするを参考にすれば、コメント一覧をポップアップさせることができます。
たとえば以下のようにすれば、最近のコメント2件分を表示させて、残りはポップアップウィンドウで表示することができます。
<!-- ここでは最近のコメント2件を表示 --> <MTComments lastn="2"> : 2件分のコメント表示 : </MTComments> <!-- ここでは2件以上のコメントが投稿されてれば、ポップアップウィンドウ表示用のリンクを表示させる --> <MTIfGreater a="[MTEntryCommentCount]" b="2" numeric="1"> <a href="<$MTCGIPath$><$MTCommentScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">すべてのコメント表示</a> [<$MTEntryCommentCount$>] </MTIfGreater>上記では、こちらのCompareプラグインというのを併用しています。
このプラグインは、「AがBより小さい場合~」とか、「AがBと同じだったら~」などのように、AとBを比較させることができるプラグインです。詳しくは上記URLを参照してください。不明点などあれば、ご連絡ください。
- #13: Posted by す [RES]
>>10 bzbell さん
申し訳ないのですが、この方法でやったところ、リンク先(
<$MTCGIPath$><$MTCommentScript$>?__mode=view&entry_id=<$MTEntryID$>にアクセスしても
なにも表示されないのですが、
(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=shift_jis"></HEAD>
<BODY></BODY></HTML>だけです)
どうすればよいでしょうか
- #14: Posted by bzbell [RES]
>>12 す さん
こんにちわ^^
エントリ・ページには2件分のコメントを表示して、残りを別ページとして表示したい・・・ということですね ( ̄∇ ̄)b
そうすると、<MTComments>~</MTComments>を別ファイルにして、個別エントリ・アーカイブにマッピングする必要があります。マッピングの仕方はご存知でしょうか。
手順が多いので、ここでカンタンには説明できないのですが、要約すると以下のような手順になります。- 個別エントリー・テンプレート内のコメント欄(<MTComments>~</MTComments>)をコピーして別ファイルとして新規作成します。
- 作成したコメント欄用のテンプレートを個別エントリー・テンプレートにマッピング(関連付け)します。
- 個別エントリー・テンプレート内のコメント欄を>>10で紹介したように、2件分だけ表示させて、2件以上ある場合には別ファイルへのリンクを表示します。
- あとは再構築するだけです。
というような手順になります。
週末でもよければカスタマイズ例を記事としてご紹介しますので、その時はご連絡ください。
- #15: Posted by bzbell [RES]
>>13 す さん
説明不足でしたね(; ̄∇ ̄A
<MTComments>タグは個別エントリ・アーカイブ内か、<MTEntries>~</MTEntries>の間で使用する必要があります。
ですので、あるエントリに投稿されたコメント欄を別ファイルとして表示させるには、個別エントリにマッピングする必要があります。
単純に<MTComments>タグを抜き出して別ファイルにしても何も表示されないんです。主旨が違いますが、MovableTypeをPHP化するの下の方でアーカイブ・マッピングの方法についてカンタンに説明しています。
急ぎでしたらそちらを参考にTRYしてみてください( ̄∇ ̄)
>>14でも返答してますが、ご連絡いただければ、週末にでもそこら辺の説明を記事にしてご紹介します。
- #16: Posted by す [RES]
>>15 bzbell さん
「週末でもよければカスタマイズ例を記事としてご紹介しますので、その時はご連絡ください。」
ありがとうございます。
よろしくおねがいします。質問に迅速に的確に答えていただいてありがとうございます。感謝しています。
- #17: Posted by bzbell [RES]
>>16 す さん
こんにちわ^^
分かりました♪
じゃ、すいませんがもうしばらくお待ちください ( ̄∇ ̄)/> 質問に迅速に的確に答えていただいてありがとうございます。感謝しています。
わたしもMT始めたころってやっぱり早く回答してもらえたらなぁ・・・って思ってたので、す さんも同じ気持ちだと思います♪
できる限り早く返答したいのですが、中々そうもいかなくて・・・すいません (; ̄∇ ̄A
- #18: Posted by す [RES]
>>15 bzbell さん
このように設定したのですが、これでOKでしょうか?設定>>公開>>アーカイブ・マッピング
http://smart-walker.com/350.bmpテンプレートの「コメント専用」
http://smart-walker.com/351.html
(お手数ですが、上のhtmlファイルは「ソースの表示」からご覧下さい。)よろしくお願いします。
- #19: Posted by bzbell [RES]
>>18 す さん
確認させてもらいました。
まず、アーカイブ・マッピングですが、す さんがマッピングしたコメント専用のページのファイル名は以下のようになりますがよろしですか?エントリページのファイル名が '2007/01/test.html' の場合、 コメント専用ページのファイル名は '2007/01/18/test/index.html' となります。
たとえば、エントリページのファイル名に 'comment' を付けるようにしてみてはどうでしょう ( ̄∇ ̄)b
エントリページのファイル名が '2007/01/test.html' の場合、 コメント専用ページのファイル名は '2007/01/test-comment.html' となります。
上記のようにするには、アーカイブマッピングのドロップダウンリストのところから「カスタマイズする」を選択して以下のように変更します。
%y/%m/%F-comment%x
アーカイブ・ファイル名の命名については、Movable Type 3.3 マニュアル - アーカイブ・ファイル名定義を参考にするといいですよ♪
ちなみにわたしのサイトのエントリページのファイル名は以下のように設定しています。エントリページのファイル名:%y/%m/%d-%h%n%s%x コメント専用ページのファイル名:%y/%m/%d-%h%n%s-comment%x
「コメント専用」テンプレートの方は、内容的には問題なさそうです。
このテンプレートを、MTの管理画面左サイドバーにある、「テンプレート」>「アーカイブ」を選択して、右上の「テンプレートの新規作成」をクリックして「コメント専用」のテンプレートを新規作成して、マッピングすればOKです♪
- #22: Posted by bzbell [RES]
>>21 す さん
やりましたねっ(>∀< )!!
> いくつもの初歩的な質問にもすぐに答えていただきありがとうございました。
いえいえ、わたしはチョビッと補足した程度ですので(; ̄∇ ̄A
す さんの努力のタマモノです♪
- #23: Posted by す [RES]
「このサイトの感想」ページで
投稿者が「良い評価」「悪い評価」を選んで投稿し、
別々にコメントを表示する、というページはどうすれば出来るでしょうか?よろしくお願いします。
- #24: Posted by bzbell [RES]
>>23 す さん
こんにちわ^^
> 投稿者が「良い評価」「悪い評価」を選んで投稿し、別々にコメントを表示する、というページはどうすれば出来るでしょうか?
う~ん…それについてはカンタンにはできません。
データ的に、良い評価、悪い評価として投稿されたコメントを関連付ける必要があります。
オリジナルのテーブルを作成して、そのテーブルでは良い評価で投稿されたコメント番号、悪い評価で投稿されたコメント番号を記録するなどの小細工が必要かと思います。す さんがMySQLを使用しているようでしたら、わたしの方でカンタンな実験をやった上でそのコードをお伝えすることはできると思います ( ̄▽ ̄)b
ここではご紹介できませんので、ご連絡頂ければ記事としてご紹介します。では・・・。
- #25: Posted by す [RES]
>>24 bzbell さん
>MySQLを使用しているようでしたら
はい。MySQLを使用しています。>ご連絡頂ければ記事としてご紹介します。
わがままだとは思いますがぜひお願いします。bzbellさんにはとても感謝しています。
- #26: Posted by bzbell [RES]
>>25 す さん
こんにちわ^^
> わがままだとは思いますがぜひお願いします。
わかりました ( ̄∇ ̄)/
カンタンに実験してみて、後日、記事でご紹介しますので、しばらくお待ちください♪
- #28: Posted by す [RES]
また質問なのですが、
<$MTCommentBody$>
でコメント本文を表示されると、
<P>コメント本文</P>
となりますが、その<P>と</P>を消したいのですがどうすればよいでしょうか?
お願いします。
- #29: Posted by bzbell [RES]
>>28 す さん
こんにちわ^^
> その<P>と</P>を消したいのですがどうすればよいでしょうか?
う~ん・・・たしか、MTのサイドメニューから「設定」>「コメント/トラックバック」を選択して、画面下にある「改行設定」のところを 'なし' にすると、<p> タグによる整形がされなくなったように記憶してます。
記憶があやふやなので、す さんの方で確認してみてください (; ̄∇ ̄A
- #31: Posted by bzbell [RES]
>>27 す さん
す さぁ~ん、すいませぇ~ん ( ̄∇ ̄)/
>>24 についてお聞きしたいことがありまぁ~す♪MT標準のコメント機能と、「良い」「悪い」などの評価を関連付けて表示する用途ってナンでしょうか。
Ajaxを使ってデータ保存まではできるのですが、その後エントリページにどう表現( 表示 )していいのかイメージ沸かなくて先に進めないでいます(つω-`。)
たとえば、こちらのAjaxでアンケート投票するで紹介したカスタマイズは、わたし的にはいろんな人の意見を聞きたい( アンケート )時に便利そうだなぁ・・・と容易に想像できますが、MTのコメント機能と評価を関連付けて、別々で表示する用途( 目的 )が想像つかないんです (; ̄∇ ̄A
ぶっちゃけ、MTのコメント機能は本来の主旨であるエントリに対するコメントとしてそのまま残して、こちらのAjaxでアンケート投票するをさらにカスタマイズすることで、投票時にコメントが付けられればいいのでしょうか。
で、そのデータを評価別に表示できるようにすれば、す さんが求めている機能は満たせますか!?以上、お手数ですがよろしくお願い致します。
- #32: Posted by す [RES]
>>31 bzbell さん
すいません。説明不足でいた。
言葉で説明するのは私には難しくて出来ないので、図にしてみました。
http://smart-walker.com/321.gifこんなカンジでお願いします。
汚い図で申し訳ありません。
- #33: Posted by bzbell [RES]
>>32 す さん
わたしの想像力が乏しいばかりに、お手数とらせてすいません (; ̄∇ ̄A
やっぱり、わたしが想像してたのと大きく異なってました (>∀< )あちゃ
確認しておいて良かったです♪図のイメージだと、MT標準のコメント機能と連動せず、ONLY ONEな投票用のテーブルを作成して、エントリIDと関連づけだけすれば良さそうですね♪
それならサンプルとして、す さん専用のテンプレートを作って、そのテンプレートとスクリプトなど一式お渡ししたほうが早そうです ( ̄∇ ̄)bとりあえず、後日、サンプルページなど作ってご連絡しますね。
今日はもう遅いので寝ます。。。おやすみなさい☆彡
- #34: Posted by す [RES]
>>33 bzbell さん
>わたしの想像力が乏しいばかりに、お手数とらせてすいません (; ̄∇ ̄A
いえ、あれだけの説明しなかったために
bzbellさんに余計な手間をかけてしまい申し訳ありませんでした。>それならサンプルとして、す さん専用のテンプレートを作って、そのテンプレートとスクリプトなど一式お渡ししたほうが早そうです ( ̄∇ ̄)b
ありがとうございます。私のためだけに作っていただいてすみません。
- #36: Posted by bzbell [RES]
>>35 す さん
こんにちわ^^
あわわ、ごめんなさいっ!!
風邪で体調が悪かったのと、お仕事が忙しかったので、まだ確認できてないんです (つω-`。)今週末までお待ちいただくことできますか!?
カンタンには説明できないので、スクリプトとサンプルをお作りします。ホントに、ホントにごめんなさい (m;_ _)mペコ
- #40: Posted by bzbell [RES]
>>38 す さん
こんにちわ^^
説明の内容が多かったので記事でご紹介しました♪
特殊な投稿機能についてたぶん、す さんの要望を満たしてると思います。参考にしてください♪


デフォルトでコメントが表示されてないのは、これをやったからなんですね。
うん、面白いかもしれない。