スレッド対応最近のコメントを LINE風に表示してみた

最近作っている スレッド対応した最新のコメント JavaScriptのスタイルシートを分離しました。これによりお好きな表示スタイルを簡単に指定できるようになります。大した表示をするわけでもない最近のコメントを、わざわざスタイルシートを分離して何か良い事があるのか? とも思ってしまいます。
そこで、LINE風の吹き出しコメントのスタイルシートも作ってみました。




Google Driveのホスティングサービス終了に伴う変更【2016/09/30】

Google Driveのホスティング機能が終了したため、スクリプトとCSSの公開方法を変更しました。
私のGoogle Driveを使ったスクリプトのホスティングはできなくなりましたので、ご自分でホスト可能な場所を用意してください。その場所にこちらにあるスクリプトとCSSを置いてアクセスしてください。
ホスティング場所の用意に関してはこちらの記事もご参照ください。
Google Driveのホスティングサービスが終了したのでFirebaseへ乗り換えてみる

Threaded Recent Comments

スレッド表示に対応した最近のコメント表示JavaScriptは前回の記事 最近のコメントをスレッドで表示するJavaScriptを jQuery Plugin にした(Threaded Recent Comments jQuery Plugin) でjQuery Plugin化までできました。後は見た目をカスタマイズできるようにスタイル指定の分離をしようと思いました。


スタイルシートを分離したJavaScriptは簡単に書けてしまいます。余計な事を書かなければ良いだけなのでプログラムは見やすくなります。
後はスタイルシートをちゃちゃっと書いて出来上がり!
と簡単に考えていましたが・・・

単独のHTMLページで表示させるならば簡単にできるのですがBloggerのガジェットに組み込むと思った表示ができませ。それはガジェットのwidgetクラスのスタイルで指定されている リスト要素 ul li が優先されこっちのスタイルが有効にならないのです。そしてそれを上書きする方法が判らなかったからです。CSSのセレクターの表記を変えるたびにまったく思っていない表示がされてしまいます。

li 要素のひ孫あたりにトップボーダーラインが指定されていたり、paddingを安易に上書きするとガジェットの領域をはみ出したりします。

なんとか納得のいく形で表示できたので一旦公開してみます。

Threaded Recent Comments jQuery Plugin

基本的にGoogle Blogger用コードです。HTML/JavaScriptガジェット に設置する事を想定しています。jQueryでコメントのRSSを読み込み整形して表示します。

使い方

jQueryを使います。jQueryのバージョンは1.8以上を想定しています。バージョン1の最新をロードすれば良いでしょう。バージョン2でも動くはずです。
Google Hosted Librariesなどからロードするようhtmlを編集します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
上のコードをBloggerのhtml編集画面で追加します。</head>の直前あたりが良いでしょう。

次にコメントを表示するプラグインをロードする必要があります。
ホスティングできるサーバを用意し、そこにこちらにあるスクリプトとCSSを置いてください。
仮にそのURLを"https://YourHostingURL"として説明します。

<!-- Threaded Recent Comments Ver.1.32 -->
<script type="text/javascript" src='https://YourHostingURL/ThreadedRecentCommentsV132.js'></script>
上のコードをjQueryの後に読み込むようにします。
私はレイアウト編集画面で HTML/JavaScriptガジェットを画面の下の方に配置し、そこに書いています。

最近のコメントを設置するにはプラグイン読込みとは別のHTML/JavaScriptガジェットを設置し、以下のコードを入れてください。

<div id="TRC"></div>
<!-- Simplest style 
<link rel="stylesheet" href="https://YourHostingURL/TRC_Simplest.css" type="text/css" />
-->
<!-- SimpleList01 style  -->
<link rel="stylesheet" href="https://YourHostingURL/TRC_SimpleList01.css" type="text/css" />

<!-- Baloon style 
<link rel="stylesheet" href="YourHostingURL/TRC_BaloonV102.css" type="text/css" />
 -->

<script type="text/javascript" charset="UTF-8">
//<![CDATA[
<!--
//============================================================
// Threaded Recent Comments
// Google Blogger用 最近のコメント表示 JQuery Plugin
// 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 ビュレットを三角記号にする
// 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/",
  isMobile: /[?&](m=1)[&]?/g.test(location.href),
//  itemCount: 5,
//  daysNew: 7,
//  timeout: 1500
 });
});
//-->
//]]>
</script>

divセクションを置いてID名TRCを指定します。jQueryでID TRCを選択し ThreadedRecentComments メソッドを呼び出します。するとdivセクション内に最近のコメントが表示されます。もちろん好きなID/クラスなどのセレクタで使えます。

別途用意したスタイルシートを読み込むことで見た目を替えることができます。今回は Simplest SimpleList01 Baloon の3種類用意してみました。上のコードではSimpleList01以外をコメントアウトしています。
スタイルについては後述します。

パラメータ

  • yourURL
    • あなたのブログのURLを指定します。
      フィードのURLではありません。ブログトップのURLで最後に'/'を付けて下さい。
  • itemCount (default: 5 max:500)
    • 表示するコメントの数を指定します。
  • daysNew (default: 7)
    • 投稿日からNEW!を表示する日数を指定します。
  • isMobile (default: false)
    • モバイルからの閲覧かどうかを指定します。
      URLに'&m=1'があるかどうかで判断しています。
  • timeout (default : 15000)
    • feed取得のタイムアウト時間をms単位で指定します。

表示がおかしい時は・・・

  • 何も表示されない
    • jQueryが正しくロードされているか?
    • jQueryのあとにプラグインがロードされているか?
    • ThreadedRecentComments を実行する前にプラグインがロードされているか?
    • 他のガジェットのjQueryと干渉していないか?
    • URLを間違えている
      • yourURLにはブログトップのアドレスを指定してください。フィードアドレスを指定する必要はありません。
      • 404エラーを捕まえられないため何も表示されなくなります
何も表示されない場合はスクリプトの実行でエラーが生じていると思われます。ブラウザでF12キーを押してデバッグ画面でエラーが生じていないか確認しましょう。

プラグインおよびスタイルシートのホスト元へアクセスできなくなっているかもしれません。
jQueryはいろいろなスクリプトで使われます。他と干渉しないような記述を心掛けていますが、jQuery本体のバージョンなど他のガジェットとの干渉について筆者は関知できません。

  • エラーの文字が表示される
    • timeoutしている
RSSの読み込みに失敗しているかもしれません。

  • 表示がおかしい
    • 他のスタイルシートと干渉していないか?
      • スタイル指定の優先順位を確認する

筆者はパソコンではchromeとIE11、モバイルではNexus7 Chromeで表示を見ています。Baloon StyleではIE8以上対応です。

表示されない原因は多すぎます。返信を期待せずコメントしてみてください。

スタイルシート

スタイルシートの例を示しておきます。
スタイルシートは最近のコメントのHTML/JavaScriptガジェット内に書く事もできます。前述の例では私のGoogle Driveのホスト先から読み込みをする記述が入っています。しかし、私のホストアドレスがいつまでも有効とは限りませんし、内容がこの記事と一致している事を保証できません。

DOM

ThreadedRecentComments Pluginが出力するDOMを示します。スタイルシートのセレクタの参考にしてください。
div class:ThreadedRecentComments
 
 
 
 
 
ul:threadList
 
 
li:postTitle
 
 
 
ul class:commentThread
 
 
 
 
li class:parent
 
 
 
 
 
span class:comment
 
 
 
 
 
 
span class:new
 
 
 
 
 
 
New!
 
 
 
 
 
 
span class:commentBaloon
 
 
 
 
 
 
 
span class:commentTxt
 
 
 
 
 
 
 
コメント1
 
 
 
 
 
 
span class:postedby
 
 
 
 
 
 
コメント投稿者 日時
 
 
 
 
 
ul class:children
 
 
 
 
 
 
li class:child clearfloat
 
 
 
 
 
 
 
span class:new
 
 
 
 
 
 
 
New!
 
 
 
 
 
 
 
span class:commentBaloon
 
 
 
 
 
 
 
 
span class:commentTxt
 
 
 
 
 
 
 
 
コメント2
 
 
 
 
 
 
 
span class:postedby
 
 
 
 
 
 
 
コメント投稿者 日時
 
 
 
 
 
 
li class:child clearfloat








 
 
 
 
 
 
 
 
 
 
li:postTitle

Simplest Style

もっともシンプルなスタイルです。必要最小限の設定をしています。
/*
ThreadedRecentComments
Simplest Style 
*/
/* Delete .widget style */
.ThreadedRecentComments ul.threadList,
.ThreadedRecentComments ul.threadList li,
.ThreadedRecentComments ul.threadList li ul,
.ThreadedRecentComments ul.threadList li ul li,
.ThreadedRecentComments ul.threadList li ul li ul,
.ThreadedRecentComments ul.threadList li ul li ul li{
 margin-top: 0;
 margin-bottom: 0;
 padding-top: 0;
 padding-bottom: 0;
    list-style-position: outside;
    list-style-type: none;
    border-style : none;
    line-height: 100%;
}

.ThreadedRecentComments {
    margin: 0.5em 0.5em;
}
.ThreadedRecentComments .powered {
    text-align: right;
    font-size: small;
    margin: 0em;
}
.ThreadedRecentComments .commentTxt:before { content: "\201c" }
.ThreadedRecentComments .commentTxt:after { content: "\201d" }
.ThreadedRecentComments  .new {
    color: red;
}

.ThreadedRecentComments ul.threadList li {
    margin-left: 1em;
}

SimpleList01 Style

インデントされたリストスタイルです。
リストの先頭のマーカー文字に特殊記号を指定しています。
/*
ThreadedRecentComments
SimpleList01 Style 
*/

/* Delete .widget style */
.ThreadedRecentComments ul.threadList,
.ThreadedRecentComments ul.threadList li,
.ThreadedRecentComments ul.threadList li ul,
.ThreadedRecentComments ul.threadList li ul li,
.ThreadedRecentComments ul.threadList li ul li ul,
.ThreadedRecentComments ul.threadList li ul li ul li{
 margin-top: 0;
 margin-bottom: 0;
 padding-top: 0;
 padding-bottom: 0;
    list-style-position: outside;
    list-style-type: none;
    border-style : none;
    line-height: 100%;
}

.ThreadedRecentComments {
    margin: 0.5em 0.5em;
}
.ThreadedRecentComments .powered {
    text-align: right;
    font-size: small;
    margin: 0;
}

/* Comment quote charactors */
.ThreadedRecentComments .commentTxt:before { content: "\201c" }
.ThreadedRecentComments .commentTxt:after { content: "\201d" }

.ThreadedRecentComments  .new {
    color: red;
}

.ThreadedRecentComments ul.threadList li  {
    margin-left: 1em;
    padding-left: 2em;
    text-indent: -2em;
}
    
.ThreadedRecentComments .postTitle:before {
 content: "\0025bc";
}
.ThreadedRecentComments .parent:before {
 content: "\0025bc";
}
.ThreadedRecentComments .child:before {
 content: "\0025b7";
}

Baloon Style

LINE風 吹き出し表示です。
/*
ThreadedRecentComments
Baloon Style 
*/

/* Delete .widget style */
.ThreadedRecentComments ul.threadList li,
.ThreadedRecentComments ul.threadList li ul,
.ThreadedRecentComments ul.threadList li ul li,
.ThreadedRecentComments ul.threadList li ul li ul,
.ThreadedRecentComments ul.threadList li ul li ul li{
 margin: auto;
 padding: 0;
    list-style-position: outside;
    list-style-type: none;
    border-style : none;
    line-height: 100%;
}

.ThreadedRecentComments {
    margin: 0.1em;
    padding: 0;
}

.ThreadedRecentComments .powered {
    text-align: right;
    font-size: small;
    margin: 0em;
}

.ThreadedRecentComments .clearfloat {
    clear: both;
}

.ThreadedRecentComments ul.threadList li.postTitle {
    background-color: honeydew;
    margin: 0 0.5em 0.1em 0.5em ;
    padding: 1em 1em 0.1em 1em;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.ThreadedRecentComments .commentTxt:before { content: "\201c" }
.ThreadedRecentComments .commentTxt:after { content: "\201d" }
.ThreadedRecentComments  .new {
    color: red;
    font-size: large;
    transform: rotate(-20deg);
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
    z-index: 1;
}
.ThreadedRecentComments  .postedby {
    max-width: 20%;
    height: auto;
    padding: 0.2em 0.2em;
    display: inline-block;
    margin: 0.1em;

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.ThreadedRecentComments .threadList  li.parent {
    position: relative; /*newのabsolute指定に必要*/
}
.ThreadedRecentComments .parent .new {
    position: absolute;
    top : -0.5em;
    display: inline-block;
}
.ThreadedRecentComments .comment .postedby {
    display: inline-block;
    float: left;
    background-color: oldlace;
    border: 1px solid gray;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.ThreadedRecentComments .commentBaloon {
    max-width: 60%;
}
.ThreadedRecentComments .parent  .commentBaloon{
    display: inline-block;
    position: relative;
    margin : auto auto 0.1em 10px;
    padding: 0.5em 1em;
    text-align: left;
    background: lemonchiffon;
    border: 2px solid gray;
    z-index: 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.ThreadedRecentComments .parent .commentBaloon:before {
    content: "";
    position: absolute;
    top: 40%;
    bottom: auto;
    left: -8px;
    right: auto;
    margin-top: -7px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 10px 4px 0;
    border-color: transparent lemonchiffon transparent transparent;
    z-index: 0;
}
.ThreadedRecentComments .parent  .commentBaloon:after {
    content: "";
    position: absolute;
    top: 40%;
    bottom: auto;
    left: -12px;
    right: auto;
    margin-top: -7px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 10px 4px 0;
    border-color: transparent gray transparent transparent;
    z-index: -1;
}
.ThreadedRecentComments .threadList .children li {
    text-align: right;
    position: relative; /*newのabsolute指定に必要*/
    border: none;
}
.ThreadedRecentComments  .threadList .child { padding: 0 0em 0 0 }
.ThreadedRecentComments .child .new {
    position: absolute;
    top : -0.5em;
    right: 20%;
}
.ThreadedRecentComments .child  .postedby {
    text-align: left;
    background-color: mistyrose;
    border: 1px solid gray;
}
.ThreadedRecentComments .child .commentBaloon {
    position: relative;
    vertical-align: top;
    margin : 0.3em 10px 0.1em 0em;
    padding: 0.5em 1em;
    text-align: left;
    background: Cornsilk;
    border: 2px solid gray;
    z-index: 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.ThreadedRecentComments .child .commentBaloon:before {
    content: "";
    position: absolute;
    top: 40%;
    left: auto;
    right: -8px;
    margin-top: -7px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 0 4px 10px;
    border-color: transparent  transparent transparent Cornsilk;
    z-index: 0;
}
.ThreadedRecentComments .child .commentBaloon:after {
    display: block;
    content: "";
    position: absolute;
    top: 40%;
    left: auto;
    right: -12px;
    margin-top: -7px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 0 4px 10px;
    border-color: transparent  transparent transparent gray;
    z-index: -1;
}

【2014/09/21 Ver.1.32 エラー処理が正しく行われないのを修正しました。タイムアウト時間を指定できるようにしました。】
【2016/09/30】Google Driveのホスティング終了に伴い設置方法の説明を変更しました。
----

コメント

  1. やっと導入できた!
    一ヶ月エラー出て大変だったけど、htmlをずっとにらんでようやく導入できた!

    返信削除
    返信
    1. (´・ω・`)って思ったら、すぐにエラー出て、何も表示されない状態になった。

      削除
    2. (´・ω・`)表示するコメントの件数が多いと、なぜかエラーが出て表示されないみたい。

      35件の時 → 表示されない
      20件の時 → 表示される。

      削除
    3. 試行・エラー報告ありがとうございます。どんなエラーか判りますでしょうか?
      TIME OUTという訳では無いですよね?RSSの取得は時間がかかるので件数が多いと引っかかる場合があります。他ガジェットとjQueryバージョンのかち合いとかもあるのでエラーの再現や切り分けが難しいんです。

      削除
    4. エラー処理が正しく動いていませんでしたので直しました。Ver.1.32となります。フィード取得にエラーがあれば何か表示されるはずです。様子を見てください。またtimeout時間を指定できるようにしまいた。指定しなければ15秒にしてあります。

      削除
  2. (´・ω・`)すいません、最新コメントが表示されなくなりました。貴サイトと私のサイト含めて、色んなプラウザで試してみたけど、動いていません。

    返信削除
    返信
    1. Google Driveの共有リンクアドレスが無効になるか変更になってしまったようです。原因を調べてリンクの変更先を載せなおしますのでお待ちください。
      Google Driveの挙動を理解していないのです。どういった公開の仕方が良いかも考えてみます。

      削除
    2. すぐに解決できるか判らないため、ご自分でホスティングできる場所があるならコードをそちらに置き直した方が良いかもしれません。
      単にGoogleのメンテ設定忘れ程度の問題だと良いのですけど。

      削除
    3. (´・ω・`)原因を調べてくれてありがとうございます。
      Google側の問題だったんですね。

      削除
    4. 仮にスクリプトとBallonスタイルだけリンクを修正しました。記事中をご確認ください。しばらく様子を見てください。

      削除
    5. (´・ω・`)すいません、3時間ほど、何度か最初からやり治して試行錯誤しましたけど全く表示されませんでした。
      http://suliruku.blogspot.jp/#HTML10

      削除
    6. プラグインのJSへのリンクを変えるだけでいいはずです。次のようになりました。詳細が判明するまでの仮としてください。
      src='https://755aa4a37c9bff5ef38f5d18fcf527eb0550175c.googledrive.com/host/0B_bSun58DCliZ1BlSTM5RXppY0U/ThreadedRecentCommentsV132a.js'

      削除
    7. (´・ω・`)既にjQueryの後に挿入して何度も試してますけど、非表示です。
      もう少しこっちで努力してきます。

      src='https://755aa4a37c9bff5ef38f5d18fcf527eb0550175c.googledrive.com/host/0B_bSun58DCliZ1BlSTM5RXppY0U/ThreadedRecentCommentsV132a.js'

      src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'

      削除
    8. 夜にならないと時間が取れないのでしばらく検証できません。お待ちください。
      リンク先のURLをブラウザで開けるかダウンロードできるかをお試しください。開ければ呼び方の問題、開けなければリンクの問題ですね。

      削除
    9. (´・ω・`)治りました。
      原因は、過去のバージョンの最近のコメントを表示するプラグインが、他のガジェットに入ったままだった事でした。
      それが残っているせいで下記のプラグインに干渉して表示されない事態になっていたようです。


      https://755aa4a37c9bff5ef38f5d18fcf527eb0550175c.googledrive.com/host/0B_bSun58DCliZ1BlSTM5RXppY0U/ThreadedRecentCommentsV132a.j

      削除
    10. (´・ω・`)いや干渉というより

      https://755aa4a37c9bff5ef38f5d18fcf527eb0550175c.googledrive.com/host/0B_bSun58DCliZ1BlSTM5RXppY0U/ThreadedRecentCommentsV132a.js

      (´・ω・`)このコードを含めたガジェットをレイアウトの一番下付近に設置しないと作動しないという事を忘れて、4ヶ月前の苦悩を忘れていた事が原因でした。
      今まで時間を取らせて申し訳ありません。

      削除
    11. JSファイルのリンクが復活していました。アナウンスとか何もないのかなぁ?
      仮のリンクでV132aというファイルを作りましたがaを取ってV132としてください。またいつ使えなくなるか油断できませんのでしばらく両方とも生かしておきますが、一応 aなしでお願いします。

      削除
    12. (´・ω・`)わかりました。

      削除
  3. 気づいた。説明文にタイムアウトの欄があるけど、コードにタイムアウトの欄がない。

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

    返信削除
    返信
    1. あっ! ほんとだ。
      デフォルト値で良ければ書いておく必要は全くないのですが、設定したい人には不安の種をまいてしまいますね。
      コメントアウトして追加しておくのが良さそうです。ちょっと落ち着いて思い出してから追加しておきます。

      削除
    2. (´・ω・`)対処ありがとうございます。

      削除
  4. (´・ω・`)解決したけど、一応バグ報告?

    (´・ω・`)コメントを書き込んだ後に、最新コメントが一切表示されなくなるバグが発生しましたが、新しいURLを読み込ませる事で解決しました。

    A(´・ω・`)大変だー コメント欄に書き込むと最新コメントが表示されないー

    B(´・ω・`)そうだ!
    新しくページを読み込めば、表示されるから!
    最新コメントを表示するボタンを押させて、利用者のページを更新すればいい!

    C(´・ω・`)URL+#(で最新コメント欄の場所を指定して) 解決

    返信削除
    返信
    1. オマケ 重いスクリプトを読み込む時は

      http://myakura.hatenablog.com/entry/2014/10/14/061713

      (´・ω・`)スクリプトにasyncこれを入れて、非同期にすれば、どんなサイトも軽くなりますお

      削除
    2. 情報をありがとうございます。
      しばらくjqueryを触ってないのでロストテクノロジー的になってます。特にcssの指定がさっぱり。表示デザインを一新したいとおもうのですが表示がこわれるばかり...

      他のスクリプトとの競合とか、特に異なるバージョンのjqueryを2つ以上読み込んじゃった時の挙動とかブラウザが新しくなったときに確かめなきゃいけないんですけど。

      3Dプリンタに飽きたらスクリプト関係を見直そうと思ってます。
      picasaがいつ廃止されるのかとか、blogger自体どうなるのかとか根本的に気になる点もありますね。

      削除
    3. パルメさんのブログちょっと覗きに行きました。
      RSSを他にもたくさん使っているようですね。ロード時間が気になるはずですね。

      私のところではコメントを書き込んだ直後に書いたコメントが表示されなくてリロードすると2つ同じコメントが書き込まれた状態になる事が頻発している気がします。同じコメントが2つ並んでるのを見かけます。

      私の今の実装だとコメントの返信は個別にRSSを取りに行くので効率が悪くなります。もちろん非同期で取りに行ってますけど。毎回全部のコメントを取るのはあり得ないし。

      asyncの動作はこちらも参考になります。http://postd.cc/script-injected-async-scripts-considered-harmful/
      ブログ全体で速度を上げるにはいろいろなスクリプトの動作順番を意識しないとならないようです。ブラウザにページ全体のDOMを伝えてからロードを待つ、という状態になる事を意識します。
      半年も経つと忘れて変なスクリプト追加しちゃったりするんですけど。

      削除

コメントを投稿

最近のコメント

Threaded Recent Comments will be here.