最近のコメントをスレッドで表示するJavaScriptを jQuery Plugin にした(Threaded Recent Comments jQuery Plugin)

前回の記事"Boggerのスレッドコメントに対応した最近のコメントを表示するJavaScriptを作ってみた(Threaded Recent Comments)"で書いたように、スレッドで最近のコメントを表示するJavaScriptを作りました。何とか動くものを書いただけでグローバル名前空間を汚しています。
そこで、できるだけグローバル変数を使わないようにしてみました。ついでにｊQueryのプラグインにしました。

Bloggerブログのコメントはスレッド表示ができます。最近のコメントもスレッド表示にしたいと思いJavaScriptを書いてみました。とりあえず動くものを書きましたがグローバル変数を使ったり、関数名も他のスクリプトとの干渉を考慮していませんでした。

そこで、少なくともグローバル名前空間を汚さないようにしようと思いました。ユーザーが設定するパラメータがいくつかありますが、どうやって値を渡せば良いのでしょうか？JavaScriptなんてやっつけコードを書くくらいなので流儀を知りません。

フィードを取得するのに使っているjQueryをお手本にパラメータの受け渡し方法について勉強してみました。どやらオブジェクトリテラルにして何でも突っ込んでおけば変数名一つで受け渡しできて便利なようです。
そして、関数呼び出しの引数部分に直接オブジェクトリテラルを書いてやれば無用なグローバル変数を使わなくて済むようです。流儀を知らないと引数がどう扱われるのか判りづらいです。JavaScript独特の表現ですね。
グローバル関数も定義しまくりなので、この際ローカルに押し込みました。もうちょっとJavaScriptの流儀を知らないときれいに書けません。

これでグローバル名前空間を使わなくなりました。ここまでするとjQueryのプラグインの形式にするのは簡単です。プラグイン化してみました。最近のコメントなんてブログサイトに一つしか置かないでしょうからプラグインにしてもメリットは無いでしょうけど。

このブログの下の方に設置してありますのでどんなものかご覧ください。

Threaded Recent Comments jQuery Plugin

使い方

必要なライブラリ

jQuery
Google Hosted LibrariesなどからｊQueryをロードしておきましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Threaded Recent Comments jQuery Plugin
今回作成したプラグインです。

<script type="text/javascript" src='https://googledrive.com/host/0B_bSun58DCliTkZGRlhRSHcwdHM'></script>

Google Driveに置いています。Google Driveで筆者が操作を間違えるとホストのURLが変わってしまい参照できなくなる可能性があるのが難点です。ほど良い公開場所ないかなぁ。Google Codeってほどじゃないし。
この２つをBloggerのテンプレート編集で</head>タグの直前に書いておきます。

サイトの表示速度を少し気にして私はjQueryを</head>タグの前に書き、プラグインをHTML/JavaScriptガジェットに書いてページの一番下に置いています。ブログのコピーライトの下です。他で使う外部ファイルの呼び出しも書いています。下記、最近のコメント呼び出し本体を置くガジェット内に書くと何故か動いてくれません。プラグインのロードは別のガジェットに書く必要がありました。ガジェットのレイアウトの順番は影響しないようです。Bloggerの外部ファイルのロード順が判らない・・・。

HTML/JavaScript ガジェットの追加

ブログにHTML/JavaScript ガジェットを追加します。
以下のコードをコピーして貼り付けます。

<div id="TRC" class="TRC_feed"></div>

<script type="text/javascript" charset="UTF-8">
//<![CDATA[
<!--
//============================================================
// Threaded Recent Comments
// Google Blogger用 最近のコメント表示 JQuery Plugin
//
// 2014/08/22: Ver.1.22 JQueryのプラグイン化
// 2014/08/21: Ver.1.11 パラメータを配列にして変数を削減
// 2014/08/20: Ver.1.10 コールバック関数を分離しグローバル変数を削減
// 2014/05/22: Ver.1.02 タイトルを取得できかった場合の処理を追加
// 2014/05/07: Ver.1.01 ビュレットを三角記号にする
// 2014/04/29: Ver.1.00 初版
//     http://signal-flag-z.blogspot.com/
//      Copyright 2014 Signal Flag "Z"
//============================================================

jQuery(document).ready(function () {
 jQuery('#TRC').ThreadedRecentComments({
  yourURL: "http://--YOUR BLOG--.blogspot.com/",
  itemCount: 6,
  daysNew: 7,
  isMobile: /[?&](m=1)[&]?/g.test(location.href)
 });
});
//-->
//]]>
</script>

表示したい位置へガジェットを移動させます。

メソッド

ThreadedRecentComments()
$(#yourID).ThreadedRecentComments()で呼び出します。divセクションにIDを付けて置くとその中身が最近のコメントで置き換えられます。

パラメータ

yourURL

あなたのブログのURLを指定します。最後に'/'を付けて下さい。

itemCount (default: 5)

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

daysNew (default: 7)

投稿日からNEW!を表示する日数を指定します。

isMobile (default: false)

モバイルからの閲覧かどうかを指定します。
URLに'&m=1'があるかどうかで判断しています。

スタイルシート

今のところ分離できていないため指定できません。近いうちに修正します。（Ver.1.22）

2014/08/29 追記：Ver.1.30 から分離しました。まだ未公開。
2014/08/30 追記：追記をあきらめ記事を書き直しました。
スレッド対応最近のコメントjQuery Pluginを LINE風に表示にしてみた

----

このブログを検索

Signal Flag "Z"