Qiitaの通知の分類をした…かったユーザースクリプト

私のような末端メモ投稿者は、Qiitaの右上の通知欄が赤く輝くことはまれです。
さらにその中の数字が二桁になるなんてとてもとても…

朝PCを付けて灰色の通知を見ることが日常ですが、ある日20～30の数字が燦然と現れることがあります。

「バズったか？」とは思いません。「うっかりパスワードとかヤベーこと書いてしまったか」と焦ります。
そして恐る恐るクリックして通知を開くと…


**🎄アドベントカレンダーへの投稿通知なのです！ヾ(｡>﹏<｡)ﾉﾞ🎄**

はい今年も始まりました。
[「Qiita Advent Calendar 2017」の募集が始まりました🎄 - Qiita Blog]
毎年[^1]11月に購読して忘れたころに始まり通知に震えます。
そしていいねが埋まってないか[^2]と念のため(投稿見ながら)通知を遡って、やっぱりなくて落胆します。

昨年に、びっくりからカレンダーならカレンダーと先に言ってよ！といきり立ち、それとなく通知欄を分解するスクリプトを書いてました。

# スクリーンショット

![nuka.png](https://qiita-image-store.s3.amazonaws.com/0/62354/45ccb0cd-15e2-5941-f109-db1ff34d8b04.png)

(2種類の通知得るのも大変:japanese_ogre:)

# 動作環境


* Firefox 55
* greasemonkey 3.17


# コード

[Qiita_Notification_classification.user.js]

```js:Qiita_Notification_classification.user.js
// ==UserScript==
// @name        Qiita Notification classification
// @namespace   khsk
// @description 新規通知を分類分けして表示する
// @include     http://qiita.com/*
// @include     https://qiita.com/*
// @version     1
// @grant       none
// ==/UserScript==

console.time('Qiita Notification classification');

// 初期色相
const INIT_HUE = 180;
// 色相増分
const INCREMENTAL_HUE = 30;

var deferred = $.ajax({
  url:'https://qiita.com/api/notifications?locale=ja'
})

deferred.done(function(data) {
  var nocheckNotices = data.filter(function(notice) {
    return !notice.seen
  });



  // 分類
  var classifications = {};
  nocheckNotices.forEach(function(notice) {
    classifications[notice.action] = classifications[notice.action] || 0; 
    classifications[notice.action] = ++(classifications[notice.action]);
  });
  
  var originalNotifications = document.getElementsByClassName('sharedHeader_notifications')[0];
  var parentNode = document.getElementsByClassName('sharedHeader_right')[0];
  
  var i = 0;
  for(action in classifications) {
    // 色は取得順で何の種類かはツールチップで。アクション種類一覧が特定できたら色と日本語訳を固定したい
    var classification = originalNotifications.cloneNode(true);
    classification.setAttribute('data-toggle','tooltip');
    classification.setAttribute('data-placement','bottom');
    classification.setAttribute('title',action);
    // デフォルトだと並べてすかすかなので
    classification.style.paddingLeft  = '1px';
    classification.style.paddingRight = '1px';
    classification.firstChild.firstChild.firstChild.innerHTML = classifications[action];
    classification.firstChild.firstChild.firstChild.style.backgroundColor = 'hsl(' + (INIT_HUE + (INCREMENTAL_HUE * i)) + ' , 100%, 50%)';
    parentNode.insertBefore(classification, originalNotifications);
    ++i;
  }
  $('[data-toggle="tooltip"]').tooltip();
})

deferred.fail(function(data) {
  console.error(data)
})

console.timeEnd('Qiita Notification classification');
```

通知の取得URLを調べて、JSONなのでseenで確認済みか見て、actionで分類してるだけです。
(去年のコードなのでひどいです！と書こうと思いましたが、今と全然汚いところが変わってなかったです)

# が、

通知欄をクリックして表示される件数が最新10件しかない。(per_pageも効かなかったです)
これでは30前後くるアドベントカレンダーに対応できない…
むしろ二桁行かない普段使いに有効…
ということで書いたものの投稿しなかったのですが、1年進展がなかったので放出。
1種類ならストック記事のアップデートの可能性大ですが、2種類ならいいねの可能性UPで開くより心構えができる…かも。

# 色づくり参考

[配色を考えるのが面倒ならhsl()を使おう - Qiita]

[配色を考えるのが面倒ならhsl()を使おう - Qiita]:https://qiita.com/karore/items/5edd2a67340770a8ca44

[「Qiita Advent Calendar 2017」の募集が始まりました🎄 - Qiita Blog]:http://blog.qiita.com/post/166982506834/adcal-2017

[Qiita_Notification_classification.user.js]:https://gist.github.com/khsk/d68ef861fa4ef7af0ed0e7f8d60c8cca/raw/8889a2828d7aafea66a6d87a3c7affb988253474/Qiita_Notification_classification.user.js

[^1]: といっても2年ですが
[^2]: 編集リクエスト出しているとContribution増加≠いいねなのが悩み