>--> Blogger にも「最近のコメント」 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> Blogger にも「最近のコメント」

Blogger にも「最近のコメント」

Posted at: 2006-06-10 17

追記: Blogger の「最近のコメント」機能については、
クリボウの Blogger 入門: Blogger にも「最近のコメント」
にまとめてあります。最新の情報はそちらをご覧下さい。

「最近のコメント」欄を実現するための二つの方法。

  • Blogger のテンプレートタグを利用して JavaScript に情報を渡し、書き出す方法
  • メールから RSS を作成するサービスに、コメント通知メールを送り、そのフィードを JavaScript で表示する方法
以下にそれらの仕組みを用いた、二つの「最近のコメント」導入方法を紹介します。「最近のコメント」を設置したいなと考えている人は、お好きな方を選んで導入してください。

・Farrago Recent Comments Hack

まず最初に紹介するのは、Farrago Recent Comments Hack 1.03 と呼ばれる有名な方法です。
この方式の「最近のコメント」欄では、コメントの新着順に、投稿者のプロフィールと個別ページへのリンクが表示されます。Big Brother さんの Unter den Linden で導入されているので、どんな感じになるのか確認されるといいと思います。
この方法の長所は、スクリプト単体で書き出されるため、表示が高速な点です。短所はトップページ以外には掲載できない点、トップページに載っていない記事に対するコメントが反映されない点だと思います。
このコメント一覧リンクの導入方法は、OpenCage さんが詳しい 記事 を書かれていますので、そちらをぜひ参考にしてください。

・クリボウ式「最近のコメント」

二つ目がクリボウの考えたものです。適当な名前が思いつきませんでした。
この方式の「最近のコメント」欄は、個別ページへとリンクの張られたコメント投稿日時と、投稿者名とを書き出します。
このブログの、トップページおよびアーカイブページのサイドバーに貼り付けているので、ご確認下さい。
この方法の長所は、トップページに載らないページのコメントも反映できる点。短所は、RSS へのアクセスが発生する分、表示が遅くなる点です。以下、この方式の「最近のコメント」欄の導入方法について説明します。

1.Mail2RSS を開き、@Mail2RSS.org の前の文字をクリック、好きな名前をつけます。名前を確定させたとき Subject, From, Received 欄に何も表示されなければ、そのアカウントは未使用だということ。そのメールアドレスをメモ帳などに控えておきます。

2.Blogger 管理画面「設定 > コメント」よりコメント通知アドレスを1のアドレスに変更します。コメント通知メールの送信先を GMail にされている方は、GMail 側でフィルタリングして1のアドレスに転送する方法もアリです。

3.Blogger のテンプレートを編集します。Blogger 管理画面「テンプレート > 現在の内容を編集」からテンプレートの head 要素内(<head><head> との間)に次のコードを貼り付けます。
<script type="text/javascript">
<!--
function addRecentComments() {
  var element = document.createElement("script");
  element.setAttribute("src", "http://tools.kuribo.info/recentcomment/?user=あなたのMail2RSSアカウント");
  element.setAttribute("charset", "UTF-8");
  document.body.appendChild(element);
}
if (window.addEventListener) {
  window.addEventListener("load", addRecentComments, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", addRecentComments);
} else {
  window.onload = addRecentComments;
}
//-->
</script>
赤字の部分は、1のアドレスの @ 前の文字列に置き換えてください。

4.テンプレートの「最近のコメント」欄を表示したい部分(たいていサイドバーだと思います)に次のコードを貼り付けます。
<div id="recent-comments"></div>
この div 要素の中身は、コメントのフィードが取得でき次第、コメント情報に差し替えられます。なので div 要素内にはあらかじめ Loading... といった文字列や、ロード画像を入れておくのもおもしろいと思います。ロード中に表示させる画像を作成するには、Ajaxload というツールがオススメです。

5.「設定を変更」ボタンをクリックし、ブログを「再構築」すれば、導入は終了です。表示されるのはこの機能の導入後に投稿されたコメントなので、あとはのんびりコメントを待ちましょう。

おわりに

以上、二つの方式の「最近のコメント」欄導入法でした。

今クリボウが考えているのは、メールからフィードを作成してくれるサービス、他にいいところがないかなあということ。Mail2RSS はフィードが出てくるのが遅い気がするのです。他のサービスをご存知でしたら教えてくださいませ。

「最近のコメント」欄、紹介されている以外にこんな方法も考えられるよ、という方も教えて下さい。その他「最近のコメント」欄導入の感想や意見などもぜひコメント下さいね。えーつまり、なんでもコメントしてもらえるとうれしいです、ということです。


追記

H & A さんからリクエストいただいていた、クリボウ式「最近のコメント」のカスタマイズについてです。
「2006-06-17 kuribo」と表示される内容に、任意の文字列を追加できるようにしました。例えば、導入手順3で示した赤字部分の URL に &a=on&b=%20by%20&c= というパラメータを追加すると「on 2006-06-17 by kuribo」と表示されるようになります。
a で日付の前、b で日付とコメント投稿者名の間、c でコメント投稿者名の後の文字列を指定することが可能です。
英数字はそのまま通りますが、日本語や記号は、UTF-8 で URL エンコードしてください。
HTML タグを入れるのもアリなので色々なことが出来ると思うんですが、ダブルクォート(")だけ、使用できないのでご注意下さい(URL エンコードしても無理です)。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:17

  1. Atom API で何かいいことできないかなと思って調べてみたのですが、コメントに関しては何もできないようですね。

    coComment も、特定のブログだけとかできないみたいですね。

    他に何かできないかな、と思ったのですが、どうやら Blogger からのコメント通知メールを受け取って加工するしかなさそうですね。

    ReplyDelete
  2. coComment は、コメント投稿ページに JavaScript を埋め込むことで、非 coComment ユーザーのコメントもトラッキングできるようになっています。

    問題は、Blogger のコメント投稿ページを我々ユーザーがいじれないことです :P。件の JavaScript コードを埋め込めない。何か手はないかと探していますが、今だ良案浮かばずです。

    ReplyDelete
  3. リアルタイム更新のMAIL2RSS サービスがなければ、Bloggerの Email posting 機能を使うことはどうでしょう?

    最新コメントをGmailが受けるようにして、受けた最新コメントを他の Blogger blogに伝達すれば、該当のblogは最新コメントを載せるでしょう。それならfeedも同時に実施されるでしょう。煩わしい方法になりましょうか?(Movable Type Recent Comments in Blogger)

    そして最近、Deliciousの RSSを利用してcategoryを表示するhackを見たが、自体のscriptだけで RSSのリアルタイム表示が可能で、外部の助けが必要ないようでした。(delicious2Blogger) Kuribo様の方法にも適用が可能ではないでしょうか?

    以上、コンピューター門外漢の考えです。

    ReplyDelete
  4. メインページのサイドバーに追加してみました。
    MAIL2RSS も結構更新速いような気がします。

    実はこの前に、???(←ハングル文字)さんが提案されている方法を試してみたのですが、コメント専用に新設したブログが吐く RSS を Feed2JS で変換するだけでは納得の行く表示にはならないことが良く分かったので止めました。

    ここは kuribo さんに期待するしかなさそうです。

    使ってみた感想ですが、今「2006-06-13 H & A」と表示されているのを「on
    2006-06-13 by H & A」なんてするとカッコいいかも、と思いました。

    ReplyDelete
  5. > Hit さん
    そうそう、Blogger がそういった API を用意してくれると助かるんですが、Atom API では無理みたいですね。

    > @aka さん
    > coComment は、コメント投稿ページに JavaScript を埋め込むことで、非 coComment ユーザーのコメントもトラッキングできるようになっています。
    そんなことができるんですか。知りませんでした。
    > Blogger のコメント投稿ページを我々ユーザーがいじれないことです
    Blogger Templates で公開されているようなテンプレート(アイテムページにコメント投稿フォームがあるもの)だといけるかも知れませんね。

    > 랄 라라 さん
    コメントありがとうございます。このブログは文字コードが Shift_JIS なため、お名前をちゃんと表示できません。すみません。(今回は実体参照で書きました。)
    > 受けた最新コメントを他の Blogger blogに伝達すれば
    たしかにコメント通知メールを、別のブログのメール投稿とつないでやると、フィードが得られますね。そのアイデアはあったんですが、一つのブログのコメント一覧を得るためだけに、別のブログを立ち上げるというのも大げさかな?と思ったのです。まあアリかもしれませんね。
    > Deliciousの RSSを利用してcategoryを表示する
    僕も FreshBlog でそのようなハックを見たことがあって、以前ここで紹介したカテゴリシステムと組み合わせたら面白いだろうな、と思っていたんですが、del.cio.us が吐くフィードに載るエントリ数が少ないのが気になって、記事にしていないのです。
    > コンピューター門外漢の考えです
    いえいえ、とてもためになりました。今後も、いろいろなアイデアを教えてくださるとうれしいです。

    > H & A さん
    > コメント専用に新設したブログが吐く RSS を Feed2JS で変換するだけでは納得の行く表示にはならない
    そうなのです。フィードから必要な部分を抜き出して、JavaScript として書き出す CGI が必要ですね。
    > on 2006-06-13 by H & A
    なるほど。導入先でそれぞれ表示をカスタマイズできるようにしてみますね。ご意見ありがとうございます。

    ReplyDelete
  6. はじめまして。どうしても判らないので教えていただけたらと思うのですが。
    bloggerを別サイトで使っていますが、アップすることまでは出来ました。所がPrevious Postsを開くと、bloggerのサイトのページが表示されてしまいます。アーカイブは変更済みです。転送先のFTPを確認するとちゃんとページはアップされているので間違いはないと思うのですが。どうしたら修正できるでしょうか。よろしくお願いします

    ReplyDelete
  7. Blogger の設定に問題があるんじゃないかなと思います。
    別サーバーに Blogger ブログを展開したときには、管理画面「設定 > 公開中」の項目以外に「設定 > アーカイブ」「設定 > サイトデータ」にもサーバーと URL に関する項目があるので、ご確認下さい。

    ReplyDelete
  8. お返事ありがとうございます。
    <管理画面「設定 > 公開中」の項目以外に「設定 > アーカイブ」「設定 > サイトデータ」にもサーバーと URL に関する項目

    は新しいフォルダを作成してそこに設定しました。しかし、間違った設定をしたのかそのフォルダには入らず、トップページと同じフォルダにファイルが出来ていました。

    しかし、根本的な問題は解決できました。ありがとうございます。

    ReplyDelete
  9. >> on 2006-06-13 by H & A
    >なるほど。導入先でそれぞれ表示をカスタマイズできるようにしてみますね。

    機能追加しました。

    ReplyDelete
  10. 素晴らしい!
    早速やってみます。
    ありがとうございました。

    ReplyDelete

  11. Recent comments in the sidebar

    It's works! Try it.
    剛好搜尋到Blogger有這?文件,看來是不用這些旁門左道??
    (from Taiwan)

    ReplyDelete
  12. 宇狗 Hugo さん、コメントありがとうございます。英語も中国語もかけないので、日本語で失礼します。

    リンクを貼ってもらった Blogger Help 記載の「最新のコメント」なんですが、あれは <Blogger> タグを単純に使ったものなので、コメントのあて先の投稿の日付順にコメントが並んでしまって、コメント自体の日付順には並ばないのです(偶然並ぶ可能性はあるでしょうが)。

    なので色んな人が苦労するわけですね。Blogger でちゃんと最近のコメントが表示できるテンプレートタグができるといいんですけどね。

    ReplyDelete
  13. いつも利用させていただいています。

    ところで、Blogger BETA 移行して、コメント通知のメールの形式が少し変更され、とてもみやすくなりました。
    Gmail で受け取ったそのメールをフィルタリングして Mail2RSS へ転送するようにしたのですが、どうもうちのサイドバーにうまく表示されなくなってしました。

    メールの形式変更に原因がするのではないかと思われるので、ご報告しておきます。

    ReplyDelete
  14. はじめまして。

    bloggerってどうなんだろう?と思ってた時にROMらせていただきました。貴重な情報をありがとうございます。

    最近のコメント表示ですが、私は
    Grazr(http://grazr.com/config.html)
    を使っています。

    日本語も通るし、過去記事についたコメントもトップに表示されます。ちょっとしたカスタム?もできます。

    RSS表示ツールならどれでも同じことができそうですが、Grazrは記事ページに飛ばなくても表示されているテキスト部分をクリックするだけでコメント全部が読めるみたいです。

    私のブログ(テニスニュース関連)で使ってますので、よかったら覗いてみて下さい:
    http://tennisandallthatjazz.blogspot.com/

    ReplyDelete
  15. مكان الأطباق التي تحتاج إلى نقع في الماء. اختر الأطباق التي ستمنحك أنت أو غسالة الصحون الخاصة بك أكبر مشكلة لتنظيفها. ضع الأطباق المتسخة بشدة في الأسفل. ملء الأطباق الكبيرة مثل المقالي والأوعية يمكن مع الماء والصابون الساخن ووضعها على العداد لامتصاص.
    شركة النجوم لخدمات التنظيف
    شركة تنظيف فلل بجدة
    شركة تنظيف بيوت بجدة
    شركة تنظيف شقق بجدة

    ReplyDelete
  16. The essayists also possess impressive How to Write a Nursing Research Paper credentials in their areas of specialization, with further training in creating high standard Already Written Essays.

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.