Qiitaのフィードのコメント数ごとに背景色を追加するユーザースクリプト

# <i class="fa fa-cubes"></i> 概要

フィードに現れる記事ごとのコメント数を取得し、好きにします。
今回はコメント数箇所の背景をコメント数ごとに色分けし、視認性を良くします。

# <i class="fa fa-camera"></i> スクリーンショット

![カラーコメント.png](https://qiita-image-store.s3.amazonaws.com/0/62354/ceed6327-1dd0-04d2-508a-edf6dd672333.png)

いい感じに全色そろわなかった…

# <i class="fa fa-cogs"></i> 動作検証環境

* Firefox 44
* greasemonkey

# <i class="fa fa-cog"></i> 動作ページ

* フィード
* すべての投稿
* ストック
* 自分の投稿

# <i class="fa fa-code"></i> コード

Gistスクリプトリンク<i class="fa fa-external-link"></i>[Qiita_add_background_color_to_comment.user.js]

```js:Qiita_add_background_color_to_comment.user.js

// ==UserScript==
// @name        Qiita add background color to comment
// @namespace   khsk
// @description フィードの投稿にコメントが付いているならば、背景色を追加する
// @include     http://qiita.com/
// @include     https://qiita.com/
// @include     http://qiita.com/items
// @include     https://qiita.com/items
// @include     http://qiita.com/stock
// @include     https://qiita.com/stock
// @include     http://qiita.com/mine
// @include     https://qiita.com/mine
// @version     1
// @grant       none
// ==/UserScript==

console.time('commentcolor')

// bootstrap3からやらわかめの色を
var HEAT_MAP = {
  NO_COMMENT    : '',
  COMMENT       : '#d9edf7', // 青
  DIALOGUE      : '#dff0d8', // 緑
  CONVERSASTION : '#fcf8e3', // 黄色
  DISCUSSION    : '#f2dede'  // 赤
}

// コメント数(テキスト)によって背景色を追加する
var changeCommentsBackGround = node => {
  var commentsNum = parseInt(node.text.trim())
  var bgcolor
  switch (true) {
    case commentsNum == 0:
      bgcolor = HEAT_MAP.NO_COMMENT
      break;
    case commentsNum == 1:
      bgcolor = HEAT_MAP.COMMENT
      break;
    case 2 <= commentsNum && commentsNum <= 5:
      bgcolor = HEAT_MAP.DIALOGUE
      break;
    case 6 <= commentsNum && commentsNum <= 9:
      bgcolor = HEAT_MAP.CONVERSASTION
      break;
    case 10 <= commentsNum:
      bgcolor = HEAT_MAP.DISCUSSION
      break;
    default:
      alert("想定外のコメント数です:" + commentsNum)
      break;
  }
  node.style.backgroundColor = bgcolor
}

// 変更を監視する。追加分だけには対応しておらず、毎回全チェック。
var mo = new MutationObserver((data1, data2) => {
  
  // フィードは.unstyled、すべての投稿は.list-unstyled。ただし、タグリストも.list-unstyledなので、notで弾かないと2個めのタグも変わってしまう
  var comments = document.querySelectorAll('ul.unstyled > li:nth-child(2) > a:nth-child(1), ul.list-unstyled:not(.item-box_tagList) > li:nth-child(2) > a:nth-child(1)')
  
  Array.prototype.forEach.call(comments, comment => {
    changeCommentsBackGround(comment)
  })
})

var items = document.getElementsByClassName('col-sm-9')[0]
var options = {childList: true, subtree:true}
mo.observe(items, options)

console.timeEnd('commentcolor')

```

# <i class="fa fa-twitter"></i> ひとりごと

コメントが好きです。
長い記事でもより簡単な方法を簡潔に書いてあったり、
間違いを訂正していたり、
熱い議論がかわされていたり、
応援やアドバイスがあったり、
(勧められませんが)質問記事にさっと回答があったり。

コメントに価値があり、コメントされる記事に価値があります。
興味が無い記事でもコメントだけなんとなく眺めています。
なので、フィードでフォロータグの新着コメントとかあればいいなと思いました。

***

実装面では、記事全体の背景色を変えてもいいなと思いました。
ストック数にも使えるはずなので、合わせて盛り上がりを簡単に表せたらいいかもしれません。

色付けは変更を検知して行っていますが、増分に対してではないので、読み込みすぎると重くなると思います。
また、Qiitaでは、タブを切り替えるとURLも代わりますが、元々のページ扱いで、リロードするとその時開いていたページ扱いになります。
なので、ストック→フィードではストックページのURLでスクリプトが動かなければ、ストックからタブ切り替えしたフィードページで色付けできません。
なので、動作対象を全タブページにした結果、フィード以外のコメントも色付けされました。怪我の功名ですね。
フィードの読み込みが非同期だったので、監視要素を最初からある親の大きなdivにしたことも幸いしました。

CSSの`:contains`は実装見込みが無いので(取り下げられたし)、毎回探すのはやめよう。
そろそろ`1 < hoge < 10`のように書いてしまうことから卒業しよう。

***

そもそもコメント数に背景色をつけた理由は、0コメントが表示されるからなんですよね。
フィード以外は0コメントは表示されないので、コメントがある記事は右側がガタッとなって目立つのですが、フィードは0コメントも表示するので、コメントがあることが目立たないです。
レイアウトの不統一感もあるし、フィードも0コメントは非表示でいいんじゃないかなぁ。

ところで、最近は良い記事を自動で取り上げるところも増えて、
<i class="fa fa-external-link"></i>[Qaleidospace]
や
<i class="fa fa-external-link"></i>【毎日自動更新】Qiitaのデイリーストックランキング！ウィークリーもあるよ - Qiita(ttp://qiita.com/takeharu/items/bb154a4bc198fb102ff3)[^1]
があるので、盛り上がっている記事をフィードで探すのは少し無駄手間かもしれませんね。

[Qiita_add_background_color_to_comment.user.js]:https://gist.github.com/khsk/cd2b86fc0c629a0569ea/raw/4c9ee022303ec27f297b05877b3ec17e01552770/Qiita_add_background_color_to_comment.user.js

[Qaleidospace]:http://qaleido.space/

[^1]: 参照リンクで記事が重くなるので古きよきh抜き