Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

スクリーンショット

カラーコメント.png

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

動作検証環境

  • Firefox 44
  • greasemonkey

動作ページ

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

コード

GistスクリプトリンクQiita_add_background_color_to_comment.user.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')

ひとりごと

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

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


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

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

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


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

ところで、最近は良い記事を自動で取り上げるところも増えて、
Qaleidospace

【毎日自動更新】Qiitaのデイリーストックランキング!ウィークリーもあるよ - Qiita(ttp://qiita.com/takeharu/items/bb154a4bc198fb102ff3)1
があるので、盛り上がっている記事をフィードで探すのは少し無駄手間かもしれませんね。


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

khsk
週一ぐらいでなにか書いていました。 いろいろお休み中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした