JavaScript
ネタ

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


前フリ

こんにちは。

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

こんなのです。

通知なし

スクリーンショット 2019-03-18 15.05.16.png

なんかきた!

スクリーンショット 2019-03-18 15.04.05.png

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


本題

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


スクリプトの作成

以前に使用 した UserScript と Tampermonkey の出番です。

カウントアップ用とリセット用のボタンを作成し通知欄の横に並べる、というスクリプトを作成します。

(@hogefuga さんのコメントを受けて少し修正しました)


UserScript

// ==UserScript==

// @name qiita-notification-count-changer
// @namespace None
// @version 0.1
// @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 = document.querySelector(".st-Header_end");
targetWrapper.insertBefore(resetButton, notifyElem);
targetWrapper.insertBefore(countUpButton, notifyElem);
}

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


2019/04/05 追記

Qiita のトップページだけ header 周辺の HTML の構造が異なっていて前述したスクリプトはうまく動きません。申し訳ありませんが、当面は トップページ以外 でお使いください。折を見て修正したいと思います。