jQuery プラグイン livestamp.js を使ってみました。

・・・なにそれ?ってこれです。

※記事が気になる方は本家へどうぞ → Gizmodo Japan

丸で囲んだ部分、これを再現してみたいと思います。
これは記事が更新されてから「○分前」という感じで開いているとずっと更新し続けてくれています。

基本的には jquery.js, moment.js, livestamp.js で出来ています。
そこに moment.js の英語表記部分を書き換える moment.lang_ja.js をかませるようにしました。

2012年8月3日 00:29:22 からの経過時間 → 

このページを見たのは 

いいね!・コメントする・シェア・♪14・・地球


2020年まで 

この部分、ソースはこれ↓↓
2012年8月3日 00:29:22 からの経過時間 → <span data-livestamp="2012-08-03T00:29:22+09:00"></span><br /> <br />
このページを見たのは <span data-livestamp="<?php echo date(DATE_ISO8601); ?>"></span><br /> <br />
いいね!・コメントする・シェア・♪14・<span data-livestamp="<?php echo date(DATE_ISO8601); ?>"></span>・地球</p> </div>

livestamp.jsは <span />タグの「data-livestamp」プロパティに入っている日付からの経過時間を随時書き換えています。
「2012年8月3日00:29:22からの経過時間」の方は固定で
〜 data-livestamp="2012-08-03T00:29:22+09:00" と入っています。

そして、「このページを見たのは〜」と「いいね!〜」の方は
PHPでその瞬間の時刻をソースに入れちゃっているんですね。
〜 data-livestamp="<?php echo date(DATE_ISO8601); ?>" と入れています。
※yyyy-MM-ddTHH:mm:ss+09:00 形式で出力されます。 そこからの時間を計算してくれるようになっています。

仕込みはすごく簡単です!

1.まずは moment.js をダウンロード → momentjs.com
※ProductionでもDevelopmentでも可です。Productionのほうが容量少ないです。

2.livestamp.js もダウンロード → livestamp.js github
※こちらも同様にProductionでもDevelopmentでも可です。

3.日本語でなければ上記2つで可能です!が、日本語表示のためのjs作ったのでぜひ使ってやってください。
  moment.lang_ja.js をダウンロード

そして次のようにソースを組みます。(jQuery本体はgoogle様に使用させていただきます。)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="moment.lang_ja.js"></script>
<script src="livestamp.min.js"></script>
</head>
<body>
<div class="waku">
2012年8月3日 00:29:22 からの経過時間 → <span data-livestamp="2012-08-03T00:29:22+09:00"></span>
</div>
</body>
</html>

※↑このソースであればPHPは必要ないため、「index.html」で保存すれば動きます。

超テキトーな感じですがサンプルをダウンロードできます・・・↓↓
ファイル形式が「.js」のため、ZIP形式に圧縮しております。
ダウンロードへ

※Facebookにログインして「いいね!」を押していただいた方に限ります。ご協力のほど、よろしくお願いします。