・・・なにそれ?ってこれです。
※記事が気になる方は本家へどうぞ → Gizmodo Japan
丸で囲んだ部分、これを再現してみたいと思います。
これは記事が更新されてから「○分前」という感じで開いているとずっと更新し続けてくれています。
基本的には jquery.js, moment.js, livestamp.js で出来ています。
そこに moment.js の英語表記部分を書き換える moment.lang_ja.js をかませるようにしました。
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>
超テキトーな感じですがサンプルをダウンロードできます・・・↓↓
ファイル形式が「.js」のため、ZIP形式に圧縮しております。
ダウンロードへ
※Facebookにログインして「いいね!」を押していただいた方に限ります。ご協力のほど、よろしくお願いします。