Qiita記事一覧にストック数に応じた背景色を塗るユーザースクリプト

概要

記事一覧のストック数に応じて背景色を追加します。

2,3日分のすべての記事を確認する際に、流しで確認するとタイトルのみで判断してしまいます。注目されている記事も合わせて確認したいと考え、ストック数に背景色を塗ることで気づきやすいようにします。

スクリーンショット

ストック数に応じた濃さのオレンジ色になっています。

参考

• Qiitaのフィードのコメント数ごとに背景色を追加するユーザースクリプト
• Tampermonkey（またはGreasemonkey）を使ったJavaScriptプログラミング
• 配色を考えるのが面倒ならhsl()を使おう

既にありそうだなと検索したところ、コメント数で同様のことをしている方がいましたので、ストック数に適用しました。(ほぼ写経です)

動作検証環境

• Google Chrome バージョン 48.0.2564.109 (64-bit)
• Tampermonkey 3.12.58

動作ページ

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

参考と同様です。

コード

// ==UserScript==
// @name        Qiita add background color to stock
// @namespace   snonaka
// @description 記事のストック数に合わせて背景色を変更する
// @include     http://qiita.com/
// @include     http://qiita.com/items
// @include     http://qiita.com/stock
// @include     http://qiita.com/mine
// @version     1
// @grant       none
/* load jQuery */  
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js  
// ==/UserScript==

  console.time('stock color');
  // 変更を監視する。追加分だけには対応しておらず、毎回全チェック。
  var mo = new MutationObserver((data1, data2) => {
    // ストック数によって背景色を追加する
    $('.js-stock-count').each( function() {
      var stock = parseInt(($(this).text()));
      if(stock > 100) { 
        stock = 100;
      }
      $(this).css('background-color','hsl(30, 100%, ' + (100 - stock/2) + '%)');
    });
  });

  var options = {childList: true, subtree:true};
  mo.observe($('.streamContainer')[0], options);
  console.timeEnd('stock color');

• 参考元ではjQueryを使用していませんが、Tampermonkeyでは @require で簡単に利用可能だったので利用しています。
• 背景色はhsl()を利用することでストック数に応じた濃淡に変化させています。

コメント

• ストック数0で白、100件でオレンジとしたのですが数件では色が付いて見えないため、1件以上の場合ははっきりと見えるように設定したほうが良いかもしれません。
• 背景色を変える場所ですが、記事全体を変えた際にタイトルの文字が見づらくなってしまったため、控えめにしました。