Qiita
tampermonkey

Qiita の「最終更新日から1年以上が経過しています。」を強化する

More than 1 year has passed since last update.


なぜ

無意識に無視するようになってきたからです。(ぼくは)

Qiita には古い記事を警告する機能があり、僕はありがたく思っています。

現非推奨や古い記法などを含む記事は早めに気づきたいです。

もうこの機能は実装されてからかなり時間が立ちます。

最初はすぐに警告を認知していて、古い記事は慎重に読んでいました。

しかし、それを繰り返すうちにこのメッセージを無視するようになってしまいました。

そして今日悲劇が再臨しました。古い内容だとあとから気づいて30分ほど手戻りが発生してしまいました。

そこで警告メッセージにちょっと手を加えてみました。


警告メッセージのパワーアップ

動的に表示したいコンテンツをスプレッドシートで管理する楽なモデル_-_Qiita_and_1__enzyme-tutorial__node__node_.png

アラートを大きくしました。


経過によってペナルティを変える

ここが重要なポイントです。

大きくするだけでは同じ見た目なので、また慣れてしまうのが心配です。

なのでペナルティを動的にしました。

↓さらに古い記事です。

paddingTop paddingBottom を 経過日数 x 1px にしてます。

例えば↑の画像は執筆日2017/10/17にスクショした、2014-12-16の記事です。

671(+365)日が経過しているので、上下に671px広がっています。

これによって記事が古いほどスクロールするストレスが発生します。そして記事の古さへの認知をあがることを期待します。


実装内容

Tampermonkey を使っています。

// ==UserScript==

// @name Powerup Qiita warning
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://qiita.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
const alertElem = document.querySelector('.alert-warning > .fa-warning').parentElement;
const timeElem = document.querySelector('time');
const articleTime = Date.parse(timeElem.getAttribute('datetime'));
const overDay = (Date.now() - articleTime) / (1000 * 60 * 60 * 24);
const penaltyDay = overDay - 365;
if (penaltyDay <= 0) {
return;
}
console.log(penaltyDay);
alertElem.style.paddingTop = `${penaltyDay}px`;
alertElem.style.paddingBottom = `${penaltyDay}px`;
})();

しばらく使ってみたいと思います。ストレスが過ぎたら色やアニメーションなど他の策も試してみます。


その他考察


  • そもそもこの機能は間違いに注意するきっかけでしかない。

  • 無視するようになってしまったのは、警告が役に立ったと実感することが少ないから?

  • 古い内容があったら執筆者に記事更新(本文で非推奨をいれるなど)してもらうなどが一番いいと思う。

  • が、編集リクエストやコメントで教えるところまで気が回ってない。

  • 検索からたどり着く場合、Google 検索結果の画面で知っておきたい。

追記 2017-11-03

徐々に、伸びる+赤くなる+点滅が早くなるものも作ってみました。

Gist コード

war1.gif

war2.gif