Bloggerのスレッドコメントに対応した最近のコメントを表示するJavaScriptを作ってみた(Threaded Recent Comments)

GoogleのブログサービスBloggerで最近のコメントを表示するJavaScriptを作ってみました。スレッド表示にも対応させています。本当はgadgetにして公開しようと思っていたのですがほど良いホスティング場所を決められませんでした。

BloggerのGadgetで最近のコメントを追加するのに一番簡単な方法はガジェットの”フィード”を追加する方法です。RSSのURLを指定すると最大５件の内容を表示させることができます。コメントのRSSを指定すれば５件のコメントが表示されます。コメントのRSSが日付順に並んでいれば最近の５件のコメントが表示されます。

この方法ではコメントの内容だけが順番に表示されます。そのため、何の記事に対するコメントなのか、誰のコメントへの返信なのかが判りません。そうなるとわざわざブログに最近のコメントを表示させる意味も薄くなります。ブログの賑やかしに欲しい程度ですよね。ほとんどの人は見ていないでしょう。

もうちょっと意味のあるコメント表示にするために、コメント先の記事とスレッド表示に対応したいと思いました。少なくともコメントの流れみたいなものが見えると表示させる意味が出てくると思います。

どんな感じかは本ブログの下の方の最近のコメントをご覧ください。たぶん設置されています。（本記事投稿日から日がたっているとこの記事とは異なるスクリプトになっているかもしれません。）

スクリプトは本記事の下の方に載せておきます。
【2014/08/23　追記：
jQueryのプラグイン化したバージョンを公開しました。
最近のコメントをスレッドで表示するJavaScriptを jQuery Plugin にした(Threaded Recent Comments jQuery Plugin)】

使い方

３つの変数を設定します。スクリプト内の値を変更してください。

yourURL　必須！

あなたのブログのURLを設定します。

maxCount　初期値５

表示するコメント数を設定します。

daysofnew　初期値７

”NEW !”と表示する日数を設定します。

Bloggerのレイアウト画面でガジェット"HTML/JavaScript"を追加してスクリプトを張り付けてください。追加したガジェットを好きな位置へ移動すれば準備完了です。
あなたのブログの表示を確かめてください。

スクリプトの説明

JavaScriptはたまにしか使わないので文法が合うまで四苦八苦です。いろんな言語仕様が頭の中でごちゃまぜになってつまらない所でエラーが・・・。合っていると思い込んでいるところにエラーがちりばめられて大変です。

大まかな流れはこんな感じ。

コメントフィードを取得して記事別のコメントツリーになる形で連想配列を作ります。

コメントの親記ごとのタイトルを記事フィードで取得します。

連想配列を元に表示用HTMLを生成します。

HTMLを表示します。

本スクリプトはBloggerのJSONフィードを取得して処理を行っています。JSONの取得にはJQueryを使用しています。BloggerのAPIを使おうと思ったのですがイマイチ使い方が判らなかったです。連想配列の処理でもJQueryを使いたいのでBloggerのAPIを使う意味を感じませんでした。改造すればBlogger以外へも対応させられますしね。
JQueryはGoogleのホストライブラリからもってきています。バージョンは2.1.0です。

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'/></script>

取得したコメントを日付順に並べる処理は入っていません。フィードされたコメントが日付順になっている事が前提です。日付順に並んでいないと全コメントを取得して並べ直さなくてはならず無駄なトラフィックが発生するので作るのをやめていたでしょう。

Bloggerのコメントはスレッド表示ができます。最近のコメントもスレッドに対応したいです。そのためには取得したコメントが親か子かを判断しなくてはなりません。フィードされた情報に親子関係が記録されていないと何もできないところでしたが、どうやら"feed.entry.link[].rel" に子コメントだけ親の情報が記録されているようです。ここの"related"に親コメントの情報が記録されています。これで親子の判断ができました。

コメントの更新日時の情報を使って過去'daysofnew'日間に投稿されたコメントに”NEW !”と表示させています。日付関数の処理がブラウザ毎にちょっと違うなんて知らなかった・・・。フィードの日付形式によっては動かないかも。さらにローカル時間とか考えるとDateオブジェクトがどう動いてるのかよく理解できない・・・。そうそう、new Dateでオブジェクトを作る時、1月が0とかやめて・・・。
どうです、ちゃんと動いているでしょうか？

コメントのフィードの情報にはコメントを付けたブログ記事、親コメントへのリンク情報、固有IDも含まれていたのでスレッドを再現するに十分でした。

コメントのフィードにはコメントした記事のリンクとIDだけが記録されているので、この情報を元に親記事のJSONフィードを取得しています。記事のタイトルだけ欲しかったのですが記事の中身も取れちゃってます。ちょっと無駄なトラフィックな気がしたので記事のタイトルを取得するか悩みました。見た目で記事タイトルが無いと最近のコメントを表示させる意味が半減すると思い取得するようにしています。

この時、JSONフィードの取得が裏で行われる事になるのを知らず丸二日休日をつぶして悩みました。通信関係の処理はいつ通信が終わるか予測できないので普通のプログラムの流れとは別に非同期で行われるのですね。
コメントの取得後コメント先の記事タイトルを取得するのですが、HTMLへ変換するコードが動く時点で取得が完了しておらず、記事タイトルが表示されないという状態でした。
突然マルチタスクのセフォマやキューみたいな事になって面倒だなぁ・・・と。良く知らない言語の変な関数を調べるのは疲れます。いつどの時点でどこのコードが実行されるのかまったく見当がつきません。

最終的には良く知らない関数を使わず非同期のままで済みました。今回は記事のタイトルだけがいつ取得できるか予測できないという状況なので、HTMLの記事タイトルを置く部分にdivセクションでIDを指定しておきさっさとHTMLを表示させます。そして、記事タイトル取得時にdivセクションをタイトルに置き換えれば良いのです。
でもちょっと心配なんですよね。HTMLを表示する前にタイトルの取得が完了してしまうと変な事になるはず・・・。まぁ、そんな速い通信は無いだろうということで・・・、潜在的なバグ仕込み？

さて、一通り動くようになって完成かな？　と思ってスマホでも表示させてみました。するとコメントのリンク先がPC用のURLになっている事に気づきました。モバイルで表示させているときはモバイル用のリンク先にしないといけませんね。どうやろうか？
まず現在表示している端末がモバイルかどうかを判断しなくてはなりません。何か良い関数があるんでしょうか？

良く分からないのでlocation.hrefで表示しているURLを調べます。そこに"m=1"という文字列があればモバイルで表示していると判断しました。そして、モバイルの時はリンク先に"?m=1”を追加してやります。これでとりあえず動いていますが"m=1"だけでは誤検出の可能性もあり得ます。
また、location.hrefを使うとGadget化した時に問題が出ます。location.hrefのアドレスがブログのアドレスでは無くガジェットのコードをホストするアドレスになってしまいモバイルの判断ができません。これでガジェット化は中断しています。

それではコードを置いておきます。

Threaded Recent Comments for Blogger Blog

本スクリプトはエラーや想定外の設定値に対するチェックを行っておりません。本スクリプトを使用し生じたいかなる損害/不利益に対し、本ブログ管理人は一切の責任を負いません。
本スクリプトの転載や販売は許可しません。ガジェット"HTML/JavaScript"での使用をお願いします。改変は原則自由ですが、悪意のある改変を行い当ブログ管理人の製作と誤認させるような行為は禁止します。

2016/09/30更新
新しいバージョンは
スレッド対応最近のコメントを LINE風に表示してみた
になります。
----

このブログを検索

Signal Flag "Z"