JavaScriptでNEWマークを自動的に追加する

JavaScriptでNEWマークを自動的に追加する

個人的にはNEWマークなんていらないでしょと思うのですが、まだまだ更新したらNEWマークつけてよなんて事はよく言われるのでは無いでしょうか?しかもいつまでNEWマークつけてんの?3日たったら消してよなんて言われることも多いのでは無いでしょうか(苦)?
JavaScriptのDateオブジェクトを使えば簡単に自動化出来ます。

この記事で使うイベントやメソッドなど

.next();
.append();
.text();
.split();
$('.foo').each(function() { Do Something });
.getTime()

Dateオブジェクト

new Date()で現在の日付、時刻のオブジェクトを生成することが出来ます。よく使うDateオブジェクトのメソッドを紹介しておきます。

var today = new Date(); // 現在の日付、時刻のオブジェクト生成
var yy = today.getFullYear(); // 現在の年号を4桁で取得
var mm = today.getMonth(); // 現在の月を取得(0〜11)
var dd = today.getDate(); // 現在の日を取得
var day = today.getDay(); // 現在の曜日を取得(0〜6)

Dateオブジェクトに年月日のパラメータを与えると、その年月日のDateオブジェクトが生成されます。注意する点は、Dateオブジェクトでの月は0〜11と言う点です。0が1月、1が2月なので、getMonthで取得した値に1を足すと正確な月になります。なのでnew Date()のパラメータに月を与える時は1を引いた数にします。

var setDay = new Date(2014, 3, 1); // 2014年4月1日のDateオブジェクト生成

JavaScriptの日時は1970年1月1日0時からのミリ秒数として計られています(それ以前はマイナスの数値)。1日は86,400,000ミリ秒で計算されます。
Dateオブジェクトを生成した後、.getTime()メソッドを利用すると、指定した年月日の経過ミリ秒数が求まります。

var today = new Date(); // 現在の日付、時刻のオブジェクト生成
var sec = today.getTime(); // 現在の年月日を経過ミリ秒数で取得

以上の知識があれば、今回のJavaScriptで自動的にNEWマークを追加する事が出来ます。

仕様

  1. 更新情報のHTMLはdl>dt+ddの形式でマークアップします。
  2. dtには更新年月日を、ddには更新内容が入ります。
  3. 更新した日から3日間NEWマークを付けます。

実装する考え方ですが、

  • 今日の日付と更新日の差分を取る
  • 3日経っていなければNEWマークを付加
  • 3日経っていれば何もしない

以上で実装出来ます。

HTML Code

<dl class="box__info">
    <dt>2014-03-29</dt>
    <dd><a href="javascript:;">○○○を更新しました</a></dd>
<dl>

JavaScript(&jQuery)

それではJavaScriptのコードを作っていきます。
まずはNEWマークを付ける日数をミリ秒数に変換、現在の年月日のDateオブジェクトを生成してミリ秒数に変換します。

JavaScript Code

$(function() {
    var distance = 3 * 86400000; // 3日間のミリ秒数で求める
    var today = new Date(); // 現在の年月日のDateオブジェクトを生成
    var baseTime = today.getTime(); // 現在の年月日のミリ秒数を求める
}); 

次にdtに記述された日数をフックにするため.text()を利用して取得します。今回は年月日の区切り記号にハイフンを利用しているので、.split('-')で分割し、配列に入れます。これらはdtの数だけ繰り返さなければならないのでeachメソッドを利用して繰り返します。

JavaScript Code

$(function() {
    var distance = 3 * 86400000; // 3日間のミリ秒数で求める
    var today = new Date(); // 現在の年月日のDateオブジェクトを生成
    var baseTime = today.getTime(); // 現在の年月日のミリ秒数を求める
    $('dl.box__info dt').each(function() {
        var textVal = $(this).text(); // dtに記述された年月日を取得
        var dateArr = textVal.split('-'); // 年月日に分けて配列に入れる
    });
}); 

所得した年月日を利用してDateオブジェクトを生成し、ミリ秒数を求めます。そして、現在の日時との差分を取って3日経っているかを調べ、条件と一致していればNEWマークを付けます。

JavaScript Code

$(function() {
    var distance = 3 * 86400000; // 3日間のミリ秒数で求める
    var today = new Date(); // 現在の年月日のDateオブジェクトを生成
    var baseTime = today.getTime(); // 現在の年月日のミリ秒数を求める
    $('dl.box__info dt').each(function() {
        var textVal = $(this).text(); // dtに記述された年月日を取得
        var dateArr = textVal.split('-'); // 年月日に分けて配列に入れる
        var entryDay = new Date(dateArr[0], dateArr[1]-1, dateArr[2]); // dtに記述された年月日のDateオブジェクトを生成
        var entryTime = entryDay.getTime(); // ミリ秒数を求める
        var dist = baseTime - entryTime; // 現在の年月日(ミリ秒数)との差分
        // 3日経っていなければNEWマークを付ける
        if(dist <= distance) {
            $(this).next('dd').append('<i class="icon__new">NEW</i>');
        }
    });
}); 

以上です。非常に簡単に実装出来ますね。応用すればいろいろなパターンに利用出来ると思います。
それにしてもNEWマークいらねー。

View Demo

プラグイン版はGithubに置いてあります。

Download

Graphic:Web Design Hot