なぜ
無意識に無視するようになってきたからです。(ぼくは)
Qiita には古い記事を警告する機能があり、僕はありがたく思っています。
現非推奨や古い記法などを含む記事は早めに気づきたいです。
もうこの機能は実装されてからかなり時間が立ちます。
最初はすぐに警告を認知していて、古い記事は慎重に読んでいました。
しかし、それを繰り返すうちにこのメッセージを無視するようになってしまいました。
そして今日悲劇が再臨しました。古い内容だとあとから気づいて30分ほど手戻りが発生してしまいました。
そこで警告メッセージにちょっと手を加えてみました。
警告メッセージのパワーアップ
![動的に表示したいコンテンツをスプレッドシートで管理する楽なモデル_-_Qiita_and_1__enzyme-tutorial__node__node_.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F40717%2F3c081c4e-b941-e8a0-b433-377e7cb95cd5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=53eb5c432192ae3621b7d461a25a2711)
アラートを大きくしました。
経過によってペナルティを変える
ここが重要なポイントです。
大きくするだけでは同じ見た目なので、また慣れてしまうのが心配です。
なのでペナルティを動的にしました。
↓さらに古い記事です。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F40717%2F99329847-8c08-f035-fe1d-4715fc324502.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=be0f35ec9c0276a3b83b43d312e1a13a)
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 コード