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

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

More than 3 years have passed since last update.

概要

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

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

スクリーンショット

スクリーンショット 2016-02-26 18.27.45.png

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

参考

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

動作検証環境

  • 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件以上の場合ははっきりと見えるように設定したほうが良いかもしれません。
  • 背景色を変える場所ですが、記事全体を変えた際にタイトルの文字が見づらくなってしまったため、控えめにしました。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
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
ユーザーは見つかりませんでした