”data:post.timestampISO8601”を使って、Bloggerのすべての記事に投稿日付を入れる方法

一日に複数の記事を投稿した場合に発生する問題は、下の記事で解決できます。

Bloggerで投稿日付を全ての記事に入れる方法 (data:post.dateHeader編)

ですが、 他にも<data:post.timestampISO8601/>を使って対処する方法があります。
ちょっと手間はかかりますが、書きようによってはいろんなフォーマットで日付を表示できるようになります。

ちなみに<data:post.timestamp/>でも日付の表示ができますが、こちらは表示形式を変更できてしまうため、Javascriptで処理するのにあまり向きません。<data:post.timestampISO8601/>ならW3CDTF形式なのでパースが楽です。

なお、実装するにあたって、jQueryを使用しています。
jQueryは使用しなくても実装できますが、作業が楽になるのでぜひ使ってみてください。
テンプレートに

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

を追加するだけで、jQueryが使えるようになります。

それでは、実装手順です。

テンプレートを修正する

まず、テンプレートを以下のように変更します。

修正前 (Simpleテンプレートより)

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

修正後

<h2 class='date-header post-timestampISO8601'>
  <span><data:post.timestampISO8601/></span>
</h2> 

これで全投稿にW3CDTF形式の日付フォーマットで日付が表示されるようになります。
このままだと、yyyy-mm-ddThh:mm:ss+hh:mmみたいな日付になり、見にくいので以下のJavascriptで見やすいように処理してあげます。

テンプレートにJavascriptコードを追加する

head要素内の適当な場所に以下のコードを記述します。
このコードは、W3CDTF形式の日付フォーマットからDateオブジェクトを生成して返すメソッドです。

<script type='text/javascript'>
//<![CDATA[
// ------------------------------------------------------------------------
// parseIso8601
// Creates a new Date object from W3CDTF-like date format string.
// 
// iso8601Time: A string, W3CDTF-like format (yyyy-mm-ddThh:mm:ss+hh:mm) only.
// ------------------------------------------------------------------------
function _parseIso8601(iso8601Time){
  var reIso8601 = /(\d{4})-(\d{2})-(\d{2})([T ])(\d{2}):(\d{2}):(\d{2})([+-])(\d{2}):(\d{2})/;
  
  return function(iso8601Time){
    if(iso8601Time != null){
      var r = reIso8601.exec(iso8601Time);
      
      if(!r){
        return new Date(iso8601Time.substring(0, 10));
      }
      
      var dt = new Date();
      dt.setUTCFullYear(Number(r[1]));
      dt.setUTCMonth(Number(r[2] - 1));
      dt.setUTCDate(Number(r[3]));
      dt.setUTCHours(Number(r[5]));
      dt.setUTCMinutes(Number(r[6])); 
      dt.setUTCSeconds(Number(r[7]));
      
      return (new Date(dt.getTime() - ((((Number(r[9]) * 60) + Number(r[10])) * 60) * 1000)));
    }else{
      return null;
    }
  }
}
var parseIso8601 = _parseIso8601(null);
//]]>
</script>

ここまでで準備は終わりました。
次のJavascriptコードで、W3CDTF形式の日付を任意のもの(この場合は、YYYY年MM月DD日 N曜日)に変換できます。こちらのコードもhead要素の適当な場所に記述してください。

ちなみに、この部分でjQueryが使われています。
簡単に部分的な説明すると、$(document).readyがDOM構築時に処理されるメソッドで、$("...").eachが合致する要素に対して繰り返し処理を行うメソッドです。

<script type='text/javascript'>
//<![CDATA[
(function(){
  // --------------------------------------------------------------------------------
  // This function calls necessary events functions to execute 
  // when the DOM object is fully loaded.
  // But those events do not get triggered until all assets such as
  // image have been completely received.
  // --------------------------------------------------------------------------------
  $(document).ready(function() {
    var dateFormat = ["年", "月", "日"];
    var weekFormat = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"];
    
    $(".post-timestampISO8601 span").each(function(i) {
      var timestampIso8601 = $(this).html();
      
      if(timestampIso8601 != null) {
        var dd = parseIso8601(timestampIso8601);
        
        if(dd != null){
            var ds = dd.getFullYear() + dateFormat[0];
                ds += (dd.getMonth() + 1) + dateFormat[1];
                ds += dd.getDate() + dateFormat[2];
            
            $(this).html(ds + " " + weekFormat[dd.getDay()]);
        }
      }
    });
  });
})();
//]]>
</script>

以下の部分が、日付を文字列で作って書き換えている部分となります。

var ds = dd.getFullYear() + dateFormat[0];
    ds += (dd.getMonth() + 1) + dateFormat[1];
    ds += dd.getDate() + dateFormat[2];
    
    $(this).html(ds + " " + weekFormat[dd.getDay()]);

以上で終わりです。