ブログのコメントを対話的に表示するThreaded Recent Comments Ver.2.30をリリースします

Googleのブロガーサービス Bloggerで使う 最近のコメントを対話形式で表示できるjQuery Pluginを作りました。
今回はVer.2.30をリリースします。

内部のクラス階層を見直しました。そのため、CSSも更新しました。
コメント主の名前と一致するコメントを左側に表示するようにしました。


今年の夏は雨が続きますね・・・
Ver.1.51をリリースしたばかりですが、海に行けないので一気に作り直してしまいました。

使い方などは前バージョンと同じです。
スレッド対応最近のコメントを LINE風に表示してみた

久しぶりなので改めて説明を書いておきます。

Threaded Recent Comments jQuery Plugin

Threaded Recent Commentsはコメントを対話的に表示するJavaScriptです。Google Bloggerサービス専用のスクリプトです。
jQueryを使用します。本スクリプトはjQuery Pluginとして動作します。
Bloggerブログのコメントフィードを読み込み、コメントを吹出し風に表示します。

表示例

ボタンを押すとCSSファイルの切り替えができます。


Threaded Recent Comments will be here.

更新概要

クラス階層を刷新しました。
リストタグを排除し、divタグで構成し直しました。

CSSを更新しました。
クラス階層の変更に伴い刷新しました。よりシンプルな設定になったと思います。
投稿者と吹き出しがずれる、文字がはみ出る、投稿者枠がはみ出るなどの問題も修正しました。

記事やページが非公開になったコメントを表示しようとすると、動作が停止するのを修正しました。

コメント主の名前と同じ名前のコメントを左側吹き出し表示します。
より対話らしい表示ができます。
ただし、Googleアカウント以外のコメントの名前はすべてAnonymouseになるため意味がない場合が多いかもしれません。

設置方法

jQueryの読み込み

BloggerブログのソースコードにjQueryを読み込むコードを追加します。Bloggerブログの設定ページのテーマからHTMLの編集をクリックし、</head>タグの頂上あたりに以下のコードを追加します。
<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
他のブログパーツを設置している方は既にjQueryの呼び出しをしているかもしれません。よく確認をしてください。
jQueryのバージョンが1.11以上なら動くと思います。

Threaded Recent Comments用ファイルのホスティング

本スクリプトを導入するにあたり最も敷居が高いのはホスティング場所が必要なところです。本スクリプトとCSSのファイルを送信してくれる場所です。

Bloggerブログでは記事を書くと内部的にHTMLファイルにしてWEBで送信可能な状態になります。しかし、任意のファイルを置いて送信する事はできません。
先のjQueryの呼び出しはgoogleのホスティング場所にあるスクリプトを呼び出しているのです。
同じように、Threaded Recent Comments用のファイルをホストする場所を用意しなくてはなりません。

この記事公開時のお薦め場所はGoogleのサービス Firebaseです。
Google Driveのホスティングサービスが終了したのでFirebaseへ乗り換えてみる
アクセス数が月あたり数万程度なら無料で使えるでしょう。

Threaded Recent Comments jQuery Pluginのファイル

スクリプトファイルは次の場所に置いておきます。
ダウンロードしてホスト場所へ設置してください。

【2018/12/19　githubで公開
Threaded-Recent-Comments-for-Google-Blogger
】

Bloggerブログへの設置

ホスティングできるようになったらブログでスクリプトを呼び出すよう設置します。
Bloggerブログへの設置はガジェットで行えます。

ThreadedRecentCommentsV230_mini.jsの呼び出し

ガジェットではなく直接HTMLへ書き込んでもかまいませんが、編集が容易なガジェットを例に説明します。
BloggerブログのWEB設定画面でレイアウトを表示し"ガジェットを追加"をクリックします。HTML/JavaScriptガジェットを選択し追加します。
ガジェットには次のコードを書きます。
<!-- TRC　V.2.30 -->
<script defer type="text/javascript" src='https://HOST-URL/ThreadedRecentCommentsV230_mini.js' ></script>
HOST-URLはご自分のホスティングアドレスに変更します。
ガジェットを追加したら、レイアウトでページの上の方に移動します。
使っているテンプレートによって最適な場所が異なると思いますが、ページの最初の方で表示に影響しない場所を探して設置します。

Threaded Recent Commentsの表示

ThreadedRecentCommentsを表示する設定です。
HTML/JavaScriptガジェットで表示する事をお薦めします。HTML/JavaScriptガジェットを追加し次のコードを書きます。
<div id="TRC" class="TRC_feed">Comments will be here...</div>

<!-- Simplest style  -->
<link rel="stylesheet" href="https://HOST-URL/TRC_SimplestV22.css" type="text/css" />

<!-- Baloon style 
<link rel="stylesheet" href= "https://HOST-URL/TRC_BaloonV22.css" type="text/css" />
 -->

<script type="text/javascript" charset="UTF-8">
//<![CDATA[
<!--
//============================================================
// Threaded Recent Comments
// Google Blogger用 最近のコメント表示 JQuery Plugin
//
// 2017/08/17  Ver.2.30  削除された記事で停止するのを修正
// 2017/08/17: Ver.2.20 主要クラスのCSS設定用変数を追加
// 2017/08/16: Ver.2.11 階層構造変更 同記事でのコメントスレッドの境界を明示
// 2017/08/16: Ver.2.10 階層構造変更 リストを使わずdivに変更
// 2017/08/15: Ver.2.00 階層構造変更 DOM生成方法変更 コメント主の名前で振り分け
// 2017/08/14: Ver.1.51 ページタイトルの取得
// 2014/09/21: Ver.1.32 エラー処理部修正
// 2014/08/29: Ver.1.31 CSS修正
// 2014/08/27: Ver.1.30 DOM構造見直し 吹き出しスタイル対応
// 2014/08/24: Ver.1.23 スタイル指定を分離した
// 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 ビュレットを三角記号にする.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li
// 2014/04/29: Ver.1.00 初版
//     http://signal-flag-z.blogspot.com/
//      Copyright 2014-2017 Signal Flag "Z"
//============================================================

jQuery(document).ready(function () {
 jQuery('#TRC').ThreadedRecentComments({
  yourURL: "https://YOUR-BLOG.blogspot.com/",
  itemCount: 8,
  daysNew: 7,
  isMobile: /[?&](m=1)[&]?/g.test(location.href) ,
  // cssTRC: { "background-color": "blue" }
 });
});
//-->
//]]>
</script>
HOST-URLはご自分のホスティングアドレスに変更します。
YOUR-BLOGはご自分のBloggerブログのURLです。blogspot.comドメインで書いてください。Bloggerブログのフィードを読み込み整形して表示しています。
このガジェットを表示させたい場所へ移動します。
ここでCSSの読み込みも行っています。この例ではTRC_SimplestV22.cssを使います。
TRC_BaloonV22.cssはコメントにして読み込まないようにしています。最初はTRC_SimplestV22を使ってスクリプトが動くか確認する事をお薦めします。

これで設置完了です。

コメント表示設定

CSSにより表示を変更できます。2種類を用意しています。
  • TRC_SimplestV22.css
    • シンプルに文字列で表示します。
  • TRC_BaloonV22.css
    • 吹き出しで対話的に表示します。
変数を設定すると取得するコメント数を変更できます。
  • itemCount
    • 取得するコメント数
  • daysNew
    • コメントにNew!と表示する日数
  • isMobile
    • モバイル用URLを使うか
新たにCSSの設定を行う変数も用意してみました。
  • cssTRC
    • .ThreadedRecentComments
  • cssPostTitle
    • .postTitle
  • cssCommentThread
    • .commentThread
  • cssParentPostedby
    •  .parent .postedby
  • cssChildPostedby
    • .child .postedby
  • cssParentCommentBaloon
    • .parent  .commentBaloon
  • cssChildCommentBaloon
    • .child .commentBaloon
これらの変数はjQueryによりそれぞれの範囲のCSSを設定します。詳細は後述します。

表示場所の補足

本スクリプトはjQuery Pluginです。jQueryのセレクタで選択した場所へコメントを書き込みます。
前節の例では
<div id="TRC" class="TRC_feed">Comments will be here...</div>
と書いたdivタグに書き込まれます。idのTRCにより識別します。
このid指定されたdivタグは表示するページのどこに有っても良いです。divタグとjQuery Pluginの呼び出しとがページの異なる場所に有っても動きます。
異なるidを使えば複数の異なるコメントソースを表示する事も可能です。

DOM ツリー

前バージョンから大きく変えました。
前バージョンはリストタグを使っていたためCSSがすっきりせず、Bloggerテンプレートの影響も受けていました。今回はdivタグで階層を作っているためテンプレートのCSSとは完全に独立し影響を受けません。CSSのセレクタ指定もすっきりしました。
クラス階層は次のようになっています。
<div class="ThreadedRecentComments">
  <div class="threadList">
    <div class="postTitle">
      <div class="postTitleText">
        <a>
          <span id="0">
            記事タイトル
          </span>
        </a>
      </div>
      <div class="commentThread">
        <div class="parent">
          <span class="comment">
            <span class="new">
              New!
            </span>
            <span class="commentBaloon">
              <span class="commentTxt">
                <a>
                  コメント1
                </a>
              </span>
            </span>
            <span class="postedby">
              <img/>
              <span class="auth">
                投稿者1
              </span>
              <span class="date">
                日時
              </span>
            </span>
          </span>
        </div>
        <div class="child clearfloat">
          <span class="comment">
            <span class="new">
              New!
            </span>
            <span class="commentBaloon">
              <span class="commentTxt">
                <a>
                  コメント2
                </a>
              </span>
            </span>
            <span class="postedby">
              <img/>
              <span class="auth">
                投稿者2
              </span>
              <span class="date">
                日時2
              </span>
            </span>
          </span>
        </div>
      <div class="commentThread">
        ・・・
      </div>
    <div class="postTitle">
      <div class="postTitleText">
        ・・・
    </div>
  </div>
</div>
postTitleクラスに記事単位のコメントが入ります。
commentThreadクラスは親コメントとその子コメントが入ります。一つの記事に複数存在する事もあります。
parentクラスは左側から吹き出しを出すコメントです。通常は親コメントになります。
childクラスは右側から吹き出しを出すコメントです。通常は子コメントになります。
子コメントでも親コメントと同じ名前の投稿者だった場合はparentクラスにします。
親コメントが古く取得していない場合は最初の子コメントをparentクラスにします。

CSSの説明

CSSファイルは転送容量を少しでも節約するため圧縮しています。圧縮と言ってもスペースやコメントを取り除いただけです。テキストエディタでCSSファイルを開いて”}"を"}"と改行に置き換える、”;"を";"と改行に置き換えると見やすくなるでしょう。

TRC_SimplestV22はほぼ何も設定していないCSSファイルです。完全に何も設定していないと見にくいので最小限の整形をしています。
ご自分でCSSを改造する場合はTRC_SimplestV22を元にしてクラスの範囲を理解するのが良いと思います。

TRC_BaloonV22は吹き出し表示をするCSSファイルです。

背景色、マージンやパディングの変更をしたい場合があるでしょう。テキストエディタで"background-color"を検索し色を変更してみる所からいじるのが良いでしょう。
背景色を設定したいであろう所にはbackground-colorを指定してあります。

背景色の設定

とは言え、何が何だか分からないですよね。私も1週間経ったら忘れます。
そこで主要な場所のCSSを設定できるよう変数を新たに設けました。
前述のThreaded Recent Commentsの呼び出しコードではコメントアウトしていますが
cssTRC: { "background-color": "blue" }
と書いてあります。
変数の説明で軽く触れましたが、これはクラス ThreadedRecentComments のCSSを設定できます。例は背景色を青にする記述です。
変数は配列で記述しますのでカンマで区切って他の設定も書くことができます。例えば背景色と枠線を書くには
cssTRC: { "background-color": "red", "border": "solid green" }
とします。
まずは背景色を設定してどこが変化するか試してみると良いでしょう。
他の変数も同様です。選択するクラスが異なります。
  • cssTRC
    • ThreadedRecentComments全体の領域
  • cssPostTitle
    • 投稿記事タイトルとそのコメントの領域
  • cssCommentThread
    • コメントの領域
  • cssParentPostedby
    • 左側投稿者の領域
    • Parentの下のPostedby
  • cssChildPostedby
    • 右側投稿者の領域
    • Childの下のPostedby
  • cssParentCommentBaloon
    • 左側コメント
    • Parentの下のCommentBaloon
  • cssChildCommentBaloon
    • 右側コメント
    • Childの下のCommentBaloon

あとがき

雨ばかり降る8月です。お盆はこのスクリプトの改造で終わってしまいました。
久しぶりにJavaScriptをいじりました。最近はブラウザの方言をほとんど気にしなくて良いようなのでChromeで動作確認をしています。一応、Edgeでも見ています。
CSSファイルの変更などはブラウザがキャッシュのデータを読み込んで変更が表示に反映されない場合があります。キャッシュの消去を行ってください。

下書きへ戻した記事のコメントがフィードに生き残ります。削除しても同じなのでしょうか？コメント情報から記事IDだけが消えているため処理に失敗していました。回避処理を入れました。しかし、消えた記事へのリンクを保ったままコメントを表示しています。analyticsなどで404エラーの原因になるかもしれません。

前バージョンはHTMLタグを直接書いていくというベタなコードになっていました。DOMとか言っていましたが全く使っていませんでした。そのため構造変更はとても面倒な作業になってしまいます。
ずーっと頭の片隅にDOMを使って書き直したいと思っていました。

私のブログはコメントが少なく問題ないのですが、コメントが多いサイトで使うと改善したい点が見えてきます。
コメント数が多いと見にくい。コメントの親子関係だけで吹き出しの向きを決めているため対話している感じがない。スレッドが複数あるとスレッド間の境界がわからずコメントが意味不明にる。
これらモヤモヤっとした気になるところを、この長雨のなか一気に修正しました。

(´・ω・｀)パルメ　さん　ありがとう！
漫画を描こう　https://suliruku.blogspot.jp/



コメント

  1. (´・ω・｀)パルメ2017/08/18 14:19

    ＞(´・ω・｀)パルメ　さん　ありがとう！

    ( ；∀；)こちらこそ、ありがとう（以前のバージョンでも、見辛いと思ったことないけど）

    返信削除

コメントを投稿

最近のコメント

Threaded Recent Comments will be here.