小粋空間  -  a cheap joke and a play on words site

Movable Typeの日付カスタムフィールドを使って現在時刻と比較する方法

Movable Typeの日付カスタムフィールドを使って現在時刻と比較する方法を紹介します。

下のスクリーンショットは「最近のブログ記事」の右側に状況を表示させてみたものです。

このエントリーはMTQの「本日のＤＡＴＥ（日付）を取得するＭＴタグはありませんか？」に対する回答です。

jQueryを使ってリアルタイムに判定するので、ページをダイナミックパブリッシングなどに変更する必要はありません。

１．事前準備

次のようなカスタムフィールドを事前に作成してください。

• システムオブジェクト：ブログ記事
• 名前：（任意の名称）
• 種類：日付と時刻
• オプション：日付と時刻
• ベースネーム：（任意の名称）
• テンプレートタグ：EntryCFDate

テンプレートタグは以降に示すサンプルコードとあわせるためのものですので、実際の名称は何でもかまいません。

作成後、ブログ記事作成時にこのカスタムフィールドを設定してください。

２．秒単位で現在時刻と比較して状況を表示する

カスタムフィールドで設定した時刻と現在時刻を比較して、現在時刻に達していない場合はブログ記事タイトルの右側に「Future!!」、時刻を過ぎている場合は「End!!」を表示させてみます。

まず、メインページやブログ記事アーカイブのMTEntriesタグ内のMTEntryTitleタグの右側に、１項で作成したカスタムフィールドタグ「MTEntryCFDate」を記述します（赤色部分）。

<mt:Entries>
  <$mt:EntryTitle$> <span class="icon" style="display:none"><$mt:EntryCFDate format="%Y:%m:%d:%H:%M:%S"$></span>
</mt:Entries>

MTEntryCFDateタグにはformatモディファイアを使って、

YYYY:MM:DD:HH:MM:SS

と表示するようにします。これはあとでJavaScript（jQuery）で処理しやすいようにするためです。

また、この部分はstyle属性「display:none」で非表示にしているので、JavaScriptが有効になっていない場合でも表示されることはありません。

続いて次のコードを同じテンプレートに埋め込みます。埋め込み位置は、head要素内かbody終了タグの直前です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
// 過去の場合に表示させたい内容
var old_content = 'End!!';
 
// 未来の場合に表示させたい内容
var future_content = 'Future!!';
 
var currentDate = new Date(); 
jQuery(function(){
    jQuery('.icon').each(function(){
        time = (jQuery(this).text()).split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = entryDate.getTime() - currentDate.getTime(); 
        if(now > 0){
            jQuery(this).html(future_content);
            jQuery(this).css('display', 'inline');
        } else {
            jQuery(this).html(old_content);
            jQuery(this).css('display', 'inline');
        }
    });
});
</script>

赤色の「End!!」や「Future!!」は好きな内容に変更してください。

次のようにimg要素を記述すれば、画像を表示させることもできます。

// 過去の場合に表示させたい内容
var old_content = '<img src="http://user-domain/end.jpg" />';
 
// 未来の場合に表示させたい内容
var future_content = '<img src="http://user-domain/future.jpg" />';

３．日単位で判定し「予定」「本日」「終了」を表示する

もう少し実践的なサンプルとして、日単位で判定し、冒頭のスクリーンショットのように、当日より未来日であれば「予定」、当日であれば「本日」、当日を過ぎた場合は「終了」を表示します。

この場合、日付カスタムフィールドの時分秒は必ず「00:00:00」と設定してください。

そして、２項のjQueryの部分を以下の内容と差し替えればOKです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
// 本日の場合に表示させたい内容
var today_content = '本日';
 
// 過去の場合に表示させたい内容
var old_content = '終了';
 
// 未来の場合に表示させたい内容
var future_content = '予定';
 
var currentDate = new Date(); 
jQuery(function(){
    jQuery('.icon').each(function(){
        time = (jQuery(this).text()).split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime()/(24*60*60*1000)) - (currentDate.getTime()/(24*60*60*1000)); 
        now = Math.ceil(now);
        if (now == 0) {
            jQuery(this).html(today_content);
            jQuery(this).css('display', 'inline');
        } else if (now > 0) {
            jQuery(this).html(future_content);
            jQuery(this).css('display', 'inline');
        } else {
            jQuery(this).html(old_content);
            jQuery(this).css('display', 'inline');
        }
    });
});
//-->
</script>

赤色部分は２項と同様、好きな内容に変更してください。