◆ 設定を有効にした
◆ 独自タグの埋め込みじゃなく自分でコメントフォーム作ってるといろいろ JavaScript の処理が必要

リアクション機能が増えてた

これまで別のライブドアのブログを見てると 返信ができたりハートでいいねができたりして どうやってるんだろうと思ってました
自分で外部サービス連携とかしてるのかな と

最近久々に管理画面の設定を眺めていると コメント設定に 「リアクション機能」 というものが追加されてました
http://help.blogpark.jp/archives/52291455.html

見てみると これを有効にしたらコメントで返信やハートが使えるようです

単純に使うには 独自タグの <$CommentForm2$> と <$CommentsList$> を追加して リアクション機能を有効にすれば良いようです
<$CommentForm2$> はコメントを入力して送信するフォームを自動で挿入してくれるタグで <$CommentsList$> はコメント一覧を挿入してくれるタグです

ただ このブログの場合は <$CommentsList$> の方はコメント一覧を表示するために必要なので入れていますが コメントフォームは使わず自分で作っています
標準のフォームは★とか顔文字とかいろいろ機能はあるのですが それらは特に要らなくて名前と本文だけで良いです
CSS で調整するにもデフォルトのスタイルを解除するのも手間で自作の方が楽だったのでそうしています

しかし 今回の場合は <$CommentForm2$> に入っている JavaScript でいろいろ制御しているので <$CommentForm2$> を使っていないと動きませんでした
リアクション機能を有効にするだけだと リストの表示が変わってボタンが表示されるだけで押しても何も起きません
それらの処理を自分で追加しないといけません

自作フォームで使う

<$CommentForm2$> で出力される JavaScript コードから必要な部分だけ取り出して シンプルな自作フォームで動くようにしました

最終的に追加するものはこれです

<script src="https://parts.blog.livedoor.jp/js/anime.min.js?_v="></script>
<script src="https://parts.blog.livedoor.jp/js/comment2/heart_animation.js?_v="></script>
<script>
var __comment_animation = new Animation.Hover('.comment-like');
if (!window['jQuery']) { document.write('<script src="https://parts.blog.livedoor.jp/js/jquery-1.7.1.min.js"><\/script>'); }
jQuery(window).on('message', function (event) {
if (event.originalEvent.origin !== 'http://comment.blogcms.jp') { return; }
var data = JSON.parse(event.originalEvent.data);
for (var i in data) {
var d = data[i];
var $targetCount = jQuery('#comment-like-count-' + d.no)
$targetCount.html(d.like_count);

if (d.like_count > 0) {
$targetCount.addClass('on');
var $targetIcon = jQuery('.comment-like-icon[data-comment-no="' + d.no + '"]');
$targetIcon.find('.off').css({ opacity: 0, display: 'none' });
$targetIcon.find('.hover').css({ opacity: 1, display: 'block' });
}
}
});
jQuery(document).ready(function () {
var $commentForm = jQuery('.comment-form-body');
var $commentForm2 = $commentForm.clone(true)
var $textarea = $commentForm2.find('[name="body"]');
jQuery(document).on('click', '.toggle-reply-form', function () {
var $this = jQuery(this);
$textarea.val('');
if ($this.attr('data-open')) {
$commentForm2.remove();
$this.attr('data-open', '');
jQuery('.reply-icon.icon-comment-v2-arrow_on').addClass('icon-comment-v2-arrow_off').removeClass('icon-comment-v2-arrow_on');
} else {
var replyNo = $this.attr('data-no');
jQuery('#comment-' + replyNo).append($commentForm2);
var replyText = '>>' + replyNo + "\n";
$textarea.val(replyText);
$textarea.focus();
$this.attr('data-open', 1);
jQuery('.reply-icon.icon-comment-v2-arrow_on').addClass('icon-comment-v2-arrow_off').removeClass('icon-comment-v2-arrow_on');
$this.children('.icon-comment-v2-arrow_off').addClass('icon-comment-v2-arrow_on').removeClass('icon-comment-v2-arrow_off');
}
});
jQuery(document).on('click', '.comment-like-icon', function () {
var $this = jQuery(this);
var $frame = jQuery('#comment-like-frame');
var no = $this.attr('data-comment-no');

$frame[0].contentWindow.postMessage(no, '*');
var $likeCount = jQuery('#comment-like-count-' + no);
$likeCount.html(parseInt($likeCount.html(), 10) + 1).addClass('on');
});
});
</script>
<iframe id="comment-like-frame" width="0" height="0" src="http://comment.blogcms.jp/livedoor/{ブログID}/{記事ID}/like_frame" style="display:none;"></iframe>

場所

これをテンプレートの記事リストとコメントフォームの後に追加します
上 2 つの script タグはアニメーション機能を行うためにロードしているものです
ハートをクリックしたときのアニメーションに使われています

var __comment_animation = new Animation.Hover('.comment-like');

のところで設定しているのでコメントリストより先に書くとアニメーションしません

jQuery

各 DOM 処理で jQuery が使われていて jQuery がロードされていないと 1.7.1 をロードするようになっています
jQuery をグローバルに置きたくないなら jQuery 処理を標準の DOM 操作に置き換えるか noConflict で即解放するように修正することもできます

!function(jQuery){
// jQuery の処理
}(jQuery.noConflict(true))

ハート

ハートの処理は iframe を使って通信しています
URL にはブログ ID と記事 ID が必要です

http://comment.blogcms.jp/livedoor/{ブログID}/{記事ID}/like_frame

記事 ID は <$ArticleId$> で埋め込めますが ブログ ID は専用の独自タグがないみたいです
確認は URL 設定の「サブディレクトリ形式」のところで

http://blog.livedoor.jp/○○○/

のように表示されている○○○の部分です

別オリジンなので window proxy ではなく postMessage で通信しています
一応メッセージが向こうから来ることもあるみたいで message イベントで数値の更新処理も行われています

自分で押したときには発生しないので記事閲覧中に誰かが押したことを定期的に調べてるかもです
そこはページリロード単位で更新しても良さそうですけどね

返信

デフォルトだと 返信アイコンを押すと そのコメント直下にフォームが移動します
もう一度押すと元の場所に戻ります

返信モードになるときはアニメーションで開くのに 戻るときはアニメーションなしだったり 移動なので返信書き込み状態だと通常のフォームが存在しなくなります
それが気に入らなかったので 処理を変えています
通常のフォームは常に存在して 返信用のフォームは追加で増えます
また 無駄なアニメーションはなくしました

返信自体はボタンを押したタイミングで内部に返信用の ID を持ってるわけではなくてコメント文中の 「>>1」 に反応してるようです
なので 特別な処理はなくてクリックしたコメントの番号を文字列でフォームの最初に追加するだけです
返信ボタンを使わずに直接 「>>1」 と書いても同じ結果になります

単純で良いのですけど これってコメントの ID じゃなくて連番なので中間のコメントを消すと整合性取れなくなるんじゃ……という心配もあります
基本消さないですけど こういう処理を見るとなんか気になってしまうのです
これまでスパムとか消しても抜けた番号ってなかった気がするので消したら番号が詰められるのだと思いますし 番号を詰めなくなったなら 間に消したコメントあるのがわかってしまいますし


それと この返信機能は単に返信先コメントへのリンクがあるだけじゃなくて スレッド表示にもなります
連番の昇順降順じゃなくて返信先コメントのすぐ下に来ます
ただ それがどんどんネストしていくわけじゃなくて 返信の返信でも大元のコメントの内側にフラットになります
最初の返信なしコメントがスレッド開始点になって それへの返信や更にそれへの返信はどこまで深くなっても孫にはならず最初の開始点の子という扱いです

ページ内リンクを JavaScript でたどればちゃんとツリー上にもできますが 深くなるほど横幅が狭くなりますし 大手のまとめブログならともかく ここでそんな返信が繰り返されるとも思わないのでそこは何もせずデフォルトのままです