記事に更新日を付ける

業務外

Google先生で調べものをしているとき、役に立つ情報とそうでない情報があります。
大事なのは情報の鮮度です。書かれた時点では有意義な情報でも、時間の経過により環境の変化やより良いモノに置き換えられ、使えない情報になってしまいます。
このため、検索でヒットした情報が書かれた日付を注意しています。ネット系のコンテンツで2～3年以上古い情報は使いえないと思った方が良い。

ただし、何年も前に公開された記事でも更新日が最近の日付なら、公開後も内容を更新し続けてメンテナンスしていることが判ります。こういう情報は使えます。

井戸掘りブログも『使いえる井戸掘り情報サイト』を目指してメンテナンスを心掛けています。このメンテナンス状況が判るように各記事のヘッダーの『投稿日』の横に『更新日』を追加しました。

投稿日はブログの投稿ガジェットで表示していますが、ウェブバージョンとモバイルバージョンで <b:includable id='main' var='top'>～</b:includable> と <b:includable id='mobile-post' var='post'>～</b:includable> の2ヶ所の改修が必要です。

ブログの投稿ガジェットのウェブバージョンのヘッダー部のソースコードです。3行目の投稿日を消して、5～6行目に新たに投稿日と更新日を表示しています。1行目のand条件以降は『インデックスページのモバイル化』のカストマイズです。

        <b:if cond='data:post.dateHeader and data:blog.pageType == &quot;item&quot;'>
<!-
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
-->
<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
<span class='updated-info' style='display:none; margin-left:1em;'>更新日&amp;nbsp;<span class='date' expr:data-publishd='data:post.timestampISO8601' expr:data-updated='data:post.lastUpdatedISO8601'/></span>
        </b:if>

ブログの投稿ガジェットのモバイルバージョンのヘッダー部のソースコードです。3行目の投稿日を消して、5～6行目に新たに投稿日と更新日を表示しています。

    <b:if cond='data:post.dateHeader'>
<!--
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
-->
<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
<span class='updated-info' style='display:none; margin-left:1em;'>更新日&amp;nbsp;<span class='date' expr:data-publishd='data:post.timestampISO8601' expr:data-updated='data:post.lastUpdatedISO8601'/></span>
    </b:if>

記事の更新日は<data:post.lastUpdatedISO8601/>から取得していますが、形式は”yyyy-mm-ddTtt:mm:ssZ”固定です。例："2020-02-02T10:13:49Z"
フォーマットは変更できないので、これをJSで形式変換します。
記事の投稿日は<data:post.timestampISO8601'/> から取得しています。形式は”yyyy-mm-ddTtt:-mm-dd+9:00”。+9:00はグリニッジ標準時との時差です。例："2020-01-22T20:00:00+09:00"

日付の形式変換のJSです。投稿日と更新日が同一の場合、更新日は表示しません。

<script>
//<![CDATA[
(function() {
  var weekday_list = [ '日', '月', '火', '水', '木', '金', '土' ] ;
  let updates = document.querySelectorAll('.updated-info .date');
  for (let i=0; i<updates.length; i++) {
    let u = updates[i];
    let tp = new Date(u.dataset.publishd);
    let tu = new Date(u.dataset.updated);
    if (Math.floor(tp.getTime()/86400000) != Math.floor(tu.getTime()/86400000)) {
      var weekday = weekday_list[ tu.getDay() ] + '曜日';
      u.textContent = tu.getFullYear()+'年'+(''+(tu.getMonth()+1)).slice(-2)+'月'+(''+tu.getDate()).slice(-2)+'日'+weekday;
      u.parentElement.style.display = 'inline';
    }
  }
})();
//]]>
</script>

追加した投稿日と更新日のスタイルを追加しました。

<style>
.published-info,
.updated-info {
  font: normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
</style>

これで投稿した記事に更新日が表示されます。

記事に更新日を表示しました

これではパンチが足らないのでアイコンを付けることにしました。
SVG形式のアイコンを追加します。SVGファイルをまともに扱うのは今回初めてです。
勝負勝負。

投稿日と更新日にアイコンを
追加しました

SVG形式のアイコンの定義です。

<svg class='svg-clock-icon' height='32' version='1.1' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'>
<path d='M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z'/>
</svg>

<svg class='svg-update-icon' height='32' version='1.1' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'>
<path d='M27.802 5.197c-2.925-3.194-7.13-5.197-11.803-5.197-8.837 0-16 7.163-16 16h3c0-7.18 5.82-13 13-13 3.844 0 7.298 1.669 9.678 4.322l-4.678 4.678h11v-11l-4.198 4.197z'/>
<path d='M29 16c0 7.18-5.82 13-13 13-3.844 0-7.298-1.669-9.678-4.322l4.678-4.678h-11v11l4.197-4.197c2.925 3.194 7.13 5.197 11.803 5.197 8.837 0 16-7.163 16-16h-3z'/>
</svg>

アイコンのスタイルを追加しました。

<style>
.svg-clock-icon,
.svg-update-icon {
  width:1.3em;
  height:1.3em;
  vertical-align: sub;
  background-repeat: no-repeat;
}
/* IE11 */
_:lang(x)::-ms-backdrop,
.svg-clock-icon,
.svg-update-icon {
  padding-left: 30px;
  vertical-align: sub;
}
</style>

感想と構想

記事に更新日を付けるには、以下の記事を参考にさせていただきました。

Bloggerに更新日を表示する
https://www.bugbugnow.net/2018/01/blogger.html

SVGアイコンの設定は、以下の記事を参考にさせていただきました。

BloggerでSVG画像を表示させる方法あれこれ
https://www.cottpic.com/2018/10/embed-svg-to-blogspot.html

アイコン素材は、以下のサイトを利用させていただきました。
使いたいアイコンを選んで、『Generate SVC &More』ボタンをクリックしてダウンロードすると色々な形式のアイコンが使えます。この中のSVGファイルの中身をテーマに貼り付ければ表示されます。

IcoMoon
https://icomoon.io/app/#/select