Blogger にも「最近のコメント」
Posted at: 2006-06-10
15
「最近のコメント」欄を実現するための二つの方法。
- Blogger のテンプレートタグを利用して JavaScript に情報を渡し、書き出す方法
- メールから RSS を作成するサービスに、コメント通知メールを送り、そのフィードを JavaScript で表示する方法
・Farrago Recent Comments Hack
まず最初に紹介するのは、Farrago Recent Comments Hack 1.03 と呼ばれる有名な方法です。
この方式の「最近のコメント」欄では、コメントの新着順に、投稿者のプロフィールと個別ページへのリンクが表示されます。Big Brother さんの Unter den Linden で導入されているので、どんな感じになるのか確認されるといいと思います。
この方法の長所は、スクリプト単体で書き出されるため、表示が高速な点です。短所はトップページ以外には掲載できない点、トップページに載っていない記事に対するコメントが反映されない点だと思います。
このコメント一覧リンクの導入方法は、OpenCage さんが詳しい 記事 を書かれていますので、そちらをぜひ参考にしてください。
・クリボウ式「最近のコメント」
二つ目がクリボウの考えたものです。適当な名前が思いつきませんでした。
この方式の「最近のコメント」欄は、個別ページへとリンクの張られたコメント投稿日時と、投稿者名とを書き出します。
このブログの、トップページおよびアーカイブページのサイドバーに貼り付けているので、ご確認下さい。
この方法の長所は、トップページに載らないページのコメントも反映できる点。短所は、RSS へのアクセスが発生する分、表示が遅くなる点です。以下、この方式の「最近のコメント」欄の導入方法について説明します。
１．Mail2RSS を開き、@Mail2RSS.org の前の文字をクリック、好きな名前をつけます。名前を確定させたとき Subject, From, Received 欄に何も表示されなければ、そのアカウントは未使用だということ。そのメールアドレスをメモ帳などに控えておきます。
２．Blogger 管理画面「設定 ＞ コメント」よりコメント通知アドレスを１のアドレスに変更します。コメント通知メールの送信先を GMail にされている方は、GMail 側でフィルタリングして１のアドレスに転送する方法もアリです。
３．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>
赤字の部分は、１のアドレスの @ 前の文字列に置き換えてください。<!--
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>
４．テンプレートの「最近のコメント」欄を表示したい部分（たいていサイドバーだと思います）に次のコードを貼り付けます。
<div id="recent-comments"></div>
この div 要素の中身は、コメントのフィードが取得でき次第、コメント情報に差し替えられます。なので div 要素内にはあらかじめ Loading... といった文字列や、ロード画像を入れておくのもおもしろいと思います。ロード中に表示させる画像を作成するには、Ajaxload というツールがオススメです。５．「設定を変更」ボタンをクリックし、ブログを「再構築」すれば、導入は終了です。表示されるのはこの機能の導入後に投稿されたコメントなので、あとはのんびりコメントを待ちましょう。
おわりに
以上、二つの方式の「最近のコメント」欄導入法でした。
今クリボウが考えているのは、メールからフィードを作成してくれるサービス、他にいいところがないかなあということ。Mail2RSS はフィードが出てくるのが遅い気がするのです。他のサービスをご存知でしたら教えてくださいませ。
「最近のコメント」欄、紹介されている以外にこんな方法も考えられるよ、という方も教えて下さい。その他「最近のコメント」欄導入の感想や意見などもぜひコメント下さいね。えーつまり、なんでもコメントしてもらえるとうれしいです、ということです。
追記
H & A さんからリクエストいただいていた、クリボウ式「最近のコメント」のカスタマイズについてです。
「2006-06-17 kuribo」と表示される内容に、任意の文字列を追加できるようにしました。例えば、導入手順３で示した赤字部分の URL に
&a=on&b=%20by%20&c= というパラメータを追加すると「on 2006-06-17 by kuribo」と表示されるようになります。a で日付の前、b で日付とコメント投稿者名の間、c でコメント投稿者名の後の文字列を指定することが可能です。
英数字はそのまま通りますが、日本語や記号は、UTF-8 で URL エンコードしてください。
HTML タグを入れるのもアリなので色々なことが出来ると思うんですが、ダブルクォート（"）だけ、使用できないのでご注意下さい（URL エンコードしても無理です）。
YouTube、誰でも作れる「チャンネル」機能を追加
YouTube にいろんな機能が追加されたという INTERNET Watch の記事なんですが、気になったのがこちら。
ブログでコメントしたいビデオが見つかった時に「blog it」ボタンをクリックするだけで即座にBlogger、BlogSpot、LiveJournalへのブログエントリが作成できるようになった。
YouTube のアカウントが要るものの、YouTube をたくさん貼り付けるブログなんかでは重宝するかも知れないな、と思いつつテストしてみました。
YouTube にログインし、各ビデオが表示される画面で「Blog Video」リンクをクリックすると、下のような記事投稿フォームが出てきます。
おお簡単、と投稿してみたところ、ひとつ問題を発見。入力した Title がブログの投稿のタイトルにならないのです。タイトルにならずにどこに行くかというと、本文冒頭に b 要素になって入っていました。そういう仕様みたいですね（タイトルが英数字だけだとまた違うのかな？）。
タイトルなしは困るので、今後 YouTube のビデオをブログに載せるときには、おとなしく YouTube のビデオ右側の embed にあるコードを貼り付けて、手動投稿しようと心に決めたクリボウなのでした。
Atom しかない、Atom しかないと嘆いていたら、いつの間にやら atom.xml と同じブログのトップディレクトリに、rss.xml が追加されていてビックリしてしまいました。
うちのブログでは、rss.xml へのアクセスを FeedBurner の RSS にリダイレクトするということをしていて気づかなかったんですが、他人のブログ（BlogSpot）のソースに見慣れない link タグを見つけたことで気がつきました。
Blogger Status のエラー情報から見て、RSS は太平洋夏時間の５月30日に実装されたみたいですね。
自分のブログのディレクトリに rss.xml が生成されることで、新しく利用できるようになるサービスとして、真っ先に思い浮かぶのが Yahoo!ブログ検索 への更新通知。
Yahoo! ヘルプ - Yahoo!ブログ検索 を読んでもらえればわかるんですが、検索エンジン用ロボットの巡回対象とならないブログの条件として
RSSのアドレスが、ブログや各記事のドメインと異なる（例：RSSが外部サーバ上にある）
配信しているXMLデータが、RSS形式ではない（例：Atom形式など）
という項目があるため、Blogger の Atom、FeedBurner でつくった RSS、どちらのフィードを使っても、ブログの更新を検索結果に反映させることができなかったのです。
RSS が追加されたことで今後は大手をふって、Yahoo!ブログ検索にブログの更新を通知することができますね。
Blogger ブログに RSS が追加された件については、まだ Blogger Buzz でも紹介されていないんですが、詳細が分かり次第またレポートすることにします。
