Movable Type や WordPress の記事投稿時間の横に、Twitter のように、その記事を投稿したのが現在時刻から「約時間～前」というのを表示する JavaScript （ jQuery ）です。

経過時間を解析する仕組みは、「一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版」のカスタマイズのときとほぼ同様で、小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」を参考にさせていただきました。

完成したソース

完成したソースは以下のようになります。

function digit (num) {
 if (num < 10) {num = ' ' + num;}
 return num;
}
jQuery(document).ready(function(){
 var currentDate = new Date();
 jQuery('.elapse').each(function(){
 var getEntryDate = jQuery(this).attr('title');
 var time = getEntryDate.split(':');
 var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
 var elapsedTime = (currentDate.getTime() - entryDate.getTime())/1000;
 elapsedTime = Math.ceil(elapsedTime); // 小数点以下切り上げ
 var message = null;
 if (elapsedTime < 60) { // 1 分未満
 message = 'たった今';
 } else if (elapsedTime < 120) { // 2 分未満
 message = '約 1分前';
 } else if (elapsedTime < (60*60)) { // 1 時間未満
 message = '約' + digit(Math.floor(elapsedTime / 60)) + '分前';
 } else if (elapsedTime < (120*60)) { // 2 時間未満
 message = '約 1時間前';
 } else if (elapsedTime < (24*60*60)) { // 1 日未満
 message = '約' + digit(Math.floor(elapsedTime / 3600)) + '時間前';
 } else if (elapsedTime < (7*24*60*60)) { // 1 週間未満
 message = '約' + digit(Math.floor(elapsedTime / 86400)) + '日前';
 } else { // 1 週間以上
 message = '約' + digit(Math.floor(elapsedTime / 604800)) + '週間前';
 }
 jQuery(this).text(jQuery(this).text() + ' ' + message);
 });
});

解説

順番に解説してみます。

function digit (num) {
 if (num < 10) {num = ' ' + num;}
 return num;
}

最初の 4 行で、数字が一桁のときは、その数字の手前に半角スペースを付ける関数を定義しています。

以下、ソースにコメントアウトする形で解説します。

// ドキュメントが読み込まれ次第実行
jQuery(document).ready(function(){

 // 現在の日時を変数 currentDate に代入（現在日時）
 var currentDate = new Date();

 // クラス名 elapse を持つ要素すべてに以下の内容を繰り返す
 jQuery('.elapse').each(function(){

 // その要素をtitle属性の値を変数 getEntryDate に代入
 var getEntryDate = jQuery(this).attr('title');

 // 取得したtitle属性の値を : で区切って変数 time に代入
 var time = getEntryDate.split(':');

 // 変数 time の値を日時として変数 entryDate に代入（記事投稿日時）
 var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);

 // 現在日時から記事投稿日時を引いた値を秒単位で変数 elapsedTime に代入
 var elapsedTime = (currentDate.getTime() - entryDate.getTime())/1000;

 // 変数 elapsedTime の小数点以下を切り上げて整数にする
 elapsedTime = Math.ceil(elapsedTime);

 // 変数 message を定義
 var message = null;

 // これ以下で一定時間未満のごとのメッセージの表示方法を条件分岐
 // 表示する数字が1桁のときは関数 digit で頭に半角スペースを付ける
 if (elapsedTime < 60) { // 1 分未満
 message = 'たった今';
 } else if (elapsedTime < 120) { // 2 分未満
 message = '約 1分前';
 } else if (elapsedTime < (60*60)) { // 1 時間未満
 message = '約' + digit(Math.floor(elapsedTime / 60)) + '分前';
 } else if (elapsedTime < (120*60)) { // 2 時間未満
 message = '約 1時間前';
 } else if (elapsedTime < (24*60*60)) { // 1 日未満
 message = '約' + digit(Math.floor(elapsedTime / 3600)) + '時間前';
 } else if (elapsedTime < (7*24*60*60)) { // 1 週間未満
 message = '約' + digit(Math.floor(elapsedTime / 86400)) + '日前';
 } else { // 1 週間以上
 message = '約' + digit(Math.floor(elapsedTime / 604800)) + '週間前';
 }

 // クラス名 elapse を持つ要素の内部テキストに半角スペースを開けてメッセージを追加して表示
 jQuery(this).text(jQuery(this).text() + ' ' + message);
 });
});

使用方法

ファイルのアップロード

上記の完成したソースをコピーして名前をつけて保存するか、以下のファイルをダウンロードして解凍します。

• jquery_elapse.zip

そのファイルをサーバーにアップロードします。ここでは jquery_elapse.js という名前を付けて、ブログが公開されているディレクトリ以下の js ディレクトリにアップロードしたとします。

• ブログ公開ディレクトリ
  • js
    • jquery_elapse.js

ファイルの読み込み

「約～前」を表示させたい Web ページの head 要素内で、アップロードしたファイルと jQuery を読み込みます。ファイルまでのパスは適宜変更してください。また、ここでは、「AJAX Libraries API - Google Code」を使って jQuery を読み込んでいます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="/js/jquery_elapse.js" charset="UTF-8"></script>

title、class 属性の設定

「約～前」を表示させたいところに、次のような title、class 属性を設定します。

title 属性

「年:月:日:時:分:秒」（例、2008:11:01:06:25:30）という形式でブログ記事の公開日時を指定します。

これは特に id 属性にこだわるわけではなく、title 属性などでも問題はありませんが、変更する場合は、jquery_elapse.js の 8 行目を次のように変更してください。 id 属性は数字から始めることはできないので、title 属性等にする必要があります。

【title 属性にする場合】

var getEntryDate = jQuery(this).attr('title');

class 属性

「elapse」を追加します。

これらの属性を設定する要素は、「約～前」を表示させたいところに空の span 要素を追加しても良いですが、それは文書構造的には好ましくないので、すでにブログ記事の公開日時を表示させている要素に、title、class 属性を追加した方が良いでしょう。

Movable Type で使う場合

Movable Type で使用する場合は、次のように、テンプレートに title、class 属性を追加します。

ここでは、ul、li 要素でウェブページとブログ記事を条件分岐させて、公開日時を表示させている場合です。

<ul class="contentInfo">
<mt:If name="page_template"><mt:Ignore><!-- ウェブページ --></mt:Ignore>
 <li class="contentDate elapse" title="<$mt:PageDate format="%Y:%m:%d:%H:%M:%S"$>"><$mt:PageDate format="%x %X"$></li>
 </mt:If>
<mt:Else><mt:Ignore><!-- ウェブページ以外 --></mt:Ignore>
 <li class="contentDate elapse" title="<$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$>"><$mt:EntryDate format="%x %X"$></li>
</mt:If>
</ul>

WordPress で使う場合

WordPress で使用する場合は、次のように、テンプレートに title、class 属性を追加します。

ここでは、デフォルトのテーマの公開日時を表示させている部分に追加しています。

<small class="elapse" title="<?php the_time('Y:m:d:H:i:s') ?>"><?php the_time(__('F jS, Y', 'kubrick')) ?> <!-- by <?php the_author() ?> --></small>

【2008-11-05 追記】

当初、一定のフォーマットのブログの公開日時を id 属性に指定していましたが、id 属性は数字で始めることはできないので、title 属性に記述するように、ソースと説明を修正しました。非常に初歩的なミスでした。

以上です。