最終更新日時を正規化 #53

Author: faithandbrave

boostjp/templates/content.html

@@ -92,15 +92,39 @@
   {% if latest_commit_info %}
     <p class="text-right"><small>
       最終更新日時:
-      <span itemprop="datePublished" content="{{ latest_commit_info['last_updated'].strftime('%Y-%m-%dT%H:%M:%S%z') }}">
+      <time itemprop="datePublished" class="js-local-time"
+            datetime="{{ latest_commit_info['last_updated'].isoformat() }}">
         {{ latest_commit_info['last_updated'].strftime('%Y年%m月%d日 %H時%M分%S秒') }} (JST)
-      </span>
+      </time>
       <br/>
       <span itemprop="author" itemscope itemtype="http://schema.org/Person">
         <span itemprop="name">{{ latest_commit_info['last_author'] }}</span>
       </span>
       が更新
     </small></p>
+    <script>
+    (function () {
+      // 最終更新日時を閲覧者のローカルタイムゾーンで表示し直す (issue #53 の正規化)。
+      // JS が無効な環境ではサーバ生成の JST 表記がそのまま残る。
+      function pad(n) { return (n < 10 ? '0' : '') + n; }
+      var els = document.querySelectorAll('time.js-local-time[datetime]');
+      for (var i = 0; i < els.length; i++) {
+        var el = els[i];
+        var d = new Date(el.getAttribute('datetime'));
+        if (isNaN(d.getTime())) { continue; }
+        var tz = '';
+        try {
+          var parts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' }).formatToParts(d);
+          for (var j = 0; j < parts.length; j++) {
+            if (parts[j].type === 'timeZoneName') { tz = parts[j].value; break; }
+          }
+        } catch (e) {}
+        el.textContent = d.getFullYear() + '年' + pad(d.getMonth() + 1) + '月' + pad(d.getDate()) + '日 '
+          + pad(d.getHours()) + '時' + pad(d.getMinutes()) + '分' + pad(d.getSeconds()) + '秒'
+          + (tz ? ' (' + tz + ')' : '');
+      }
+    })();
+    </script>
   {% endif %}
 {% endblock %}
 

cpprefjp/templates/content.html

@@ -102,15 +102,39 @@
   {% if latest_commit_info %}
     <p class="text-right"><small>
       最終更新日時:
-      <span itemprop="datePublished" content="{{ latest_commit_info['last_updated'].strftime('%Y-%m-%dT%H:%M:%S%z') }}">
+      <time itemprop="datePublished" class="js-local-time"
+            datetime="{{ latest_commit_info['last_updated'].isoformat() }}">
         {{ latest_commit_info['last_updated'].strftime('%Y年%m月%d日 %H時%M分%S秒') }} (JST)
-      </span>
+      </time>
       <br/>
       <span itemprop="author" itemscope itemtype="http://schema.org/Person">
         <span itemprop="name">{{ latest_commit_info['last_author'] }}</span>
       </span>
       が更新
     </small></p>
+    <script>
+    (function () {
+      // 最終更新日時を閲覧者のローカルタイムゾーンで表示し直す (issue #53 の正規化)。
+      // JS が無効な環境ではサーバ生成の JST 表記がそのまま残る。
+      function pad(n) { return (n < 10 ? '0' : '') + n; }
+      var els = document.querySelectorAll('time.js-local-time[datetime]');
+      for (var i = 0; i < els.length; i++) {
+        var el = els[i];
+        var d = new Date(el.getAttribute('datetime'));
+        if (isNaN(d.getTime())) { continue; }
+        var tz = '';
+        try {
+          var parts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' }).formatToParts(d);
+          for (var j = 0; j < parts.length; j++) {
+            if (parts[j].type === 'timeZoneName') { tz = parts[j].value; break; }
+          }
+        } catch (e) {}
+        el.textContent = d.getFullYear() + '年' + pad(d.getMonth() + 1) + '月' + pad(d.getDate()) + '日 '
+          + pad(d.getHours()) + '時' + pad(d.getMinutes()) + '分' + pad(d.getSeconds()) + '秒'
+          + (tz ? ' (' + tz + ')' : '');
+      }
+    })();
+    </script>
   {% endif %}
 {% endblock %}