記事投稿時間の横に Twitter みたいな「約~前」を表示する

記事投稿時間の横に Twitter みたいな「約~前」を表示する

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.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 属性に記述するように、ソースと説明を修正しました。非常に初歩的なミスでした。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...