[ネタ]Qiitaの通知カウント欄をいじって遊んでみる

前フリ

こんにちは。
みなさまは Qiita を開いた際に赤い通知の表示があるとなんかわくわくしませんか？僕はします。

こんなのです。

通知なし

なんかきた！

通知が赤くなるとテンション上がりますね。消すのがもったいなくなります(だいたいがまんできなくてすぐ見ますが)

本題

HTMLを少し調べてみたら、クラス属性の付け外しだけで切り替えられそうだったので、スクリプトで簡単に再現できるようにしてみました。

スクリプトの作成

以前に使用 した UserScript と Tampermonkey の出番です。
カウントアップ用とリセット用のボタンを作成し通知欄の横に並べる、というスクリプトを作成します。

UserScript

// ==UserScript==
// @name         qiita-notification-count-changer
// @namespace    None
// @version      0.2
// @description  通知カウント欄の表示を変える
// @author       tommy_aka_jps
// @match        https://qiita.com/*
// ==/UserScript==

(() => {
  //通知カウント表示エレメント
  const notifyElem = document.querySelector(".st-Header_notifications");

  const main = () => {
    //カウントアップ用ボタン
    const countUpButton = createButton();
    countUpButton.textContent = "+";
    countUpButton.addEventListener("click", countUp);

    //リセット用ボタン
    const resetButton = createButton();
    resetButton.textContent = "C";
    resetButton.addEventListener("click", reset);

    //作ったボタンを設置
    const targetWrapper = notifyElem.parentNode;
    targetWrapper.insertBefore(resetButton, notifyElem);
    targetWrapper.insertBefore(countUpButton, notifyElem);
    targetWrapper.style.display = "flex";
  }

  const createButton = () => {
    const button = document.createElement("button");

    //margin, padding 調整用クラスを流用
    button.classList.add("px-2", "mr-2");

    //スタイル定義
    button.style.display = "flex";
    button.style.alignItems = "center";
    button.style.justifyContent = "center";
    button.style.width = "32px";
    button.style.height = "32px";
    button.style.backgroundColor = "#3f9200";
    button.style.color = "#fff";
    button.style.borderRadius = "4px";
    button.style.fontSize = "1.2rem";
    button.style.position = "relative";
    button.style.cursor = "pointer";

    return button;
  }

  const countUp = () => {
    notifyElem.classList.add("st-Header_notifications-active");
    notifyElem.innerText = parseInt(notifyElem.innerText, 10) + 1;
  }

  const reset = () => {
    notifyElem.classList.remove("st-Header_notifications-active");
    notifyElem.innerText = 0;
  }

  main();
})();

完成

• ＋ を押すとカウントが増えます。
• Ｃ を押すとクリアされます。

気持ちええっすね。一瞬だけバズった気分になれます。(錯覚)
バカですね＼(^o^)／

さいごに

箸にも棒にもかからない薄い記事ですが、最後までお読みいただきありがとうございました。
所詮はリロードでリセットされてしまう紛い物なので、本物の赤い通知欄を見るためにがんばっていい記事を書こうとおもいました。まる。

蛇足

ちなみに Advent Calendar の時期だったら、いろんなカレンダーを購読設定しておくと毎日たくさん赤い通知が見れますｗ