スレッド対応最近のコメントを 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) でｊQuery 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以上を想定しています。バージョン１の最新をロードすれば良いでしょう。バージョン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のホスティング終了に伴い設置方法の説明を変更しました。
----