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

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

前フリ

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

こんなのです。

通知なし
スクリーンショット 2019-03-18 15.05.16.png
なんかきた!
スクリーンショット 2019-03-18 15.04.05.png

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

本題

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();
})();

完成

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

opbbb.gif

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

さいごに

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

蛇足

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

tommy_aka_jps
小ネタばかり投稿しているひとです。
https://jpsern.com
giftpad
ギフトカードで幸せを届ける!世界を笑顔にするベンチャー企業
https://giftpad.jp/
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