ホーム » QooQ »

[Blogger] 2022年版最終更新日を表示する [widget version1用]

2022年01月20日更新

2022年01月05日公開

当サイトはアフィリエイト広告を使用しています

Blogger QooQ

最終更新日を表示させるJavaScriptです。（以前に書いたこれとかこれの2022年版です。やってみたこと

日付部分のHTMLはtime要素を使用

datetime属性の値を日本標準時（JST）で追加

更新日と公開日が同じ場合は出力しない

更新日のデータは<data:post.lastUpdatedISO8601/>で取得できます。しかし、<data:post.lastUpdatedISO8601/>で取得できるデータは協定世界時（UTC）のようです。【みんなの知識ちょっと便利帳】協定世界時（UTC）と日本標準時（JST）の比較対照と変換 - 協定世界時（UTC）・日本標準時（JST）対照表~~このままだと実際の更新日とは異なる可能性があるので、日本標準時（JST）に変換してから表示をさせたいと思います。~~勘違いがありました。new Date("<data:post.lastUpdatedISO8601/>");でもブラウザ（Chromeのconsole）上は日本標準時に変換されていました。同じ結果が出力されました const updated = new Date("<data:post.lastUpdatedISO8601/>"); Wed Jan 05 2022 20:00:24 GMT+0900 (日本標準時) const updated = new Date(jstISO); Wed Jan 05 2022 20:00:24 GMT+0900 (日本標準時)

したがってこのコードの主な機能はdatetime属性の値を日本標準時（JST）で追加することになります。注：ウィジェットバージョン1用のコードです。ウィジェットバージョンの確認方法は、[テーマ] > [カスタマイズ] > [HTMLの編集]の画面でhtmlタグのなかにb:defaultwidgetversion='2'とあったらバージョン2。または、ブログ上で右クリック、「ページのソースを表示」などをクリック。Blog1でページ内検索すると確認できます。バージョン1 <div class='widget Blog' data-version='1' id='Blog1'> バージョン2 <div class='widget Blog' data-version='2' id='Blog1'>未確認ですがウィジェットバージョン2では<data:post.lastUpdated/>(<data:post.lastUpdated.iso8601/>)で日本標準時（JST）が取得できるっぽいです。data:posts[i].lastUpdated (Blog|FeaturedPost|PopularPosts) - Blogger Data Documentation - Blogger Code PE最終更新日を表示HTMLとJavaScriptです。JavaScriptは2種類書いてみました。更新日と公開日を比べる部分が違います。以前のコードを踏襲したものと、getTimeを使って判定するものを書いてみました。共通のHTML <span class='published-date-info'>公開日<time expr:datetime='data:post.timestampISO8601'><data:post.date/></time></span>  <span class='updated-date-info' style='display:none;'>更新日<time id='for-display'/></span>判定に以前のコードを踏襲したもの）

クリックすると開きます

<script>
/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/

const utc = new Date("<data:post.lastUpdatedISO8601/>");

// 協定世界時(UTC)に9時間加算して日本標準時(JST)に変換
const jst = new Date(utc.getTime() + 9 * 60 * 60 * 1000);

// ISO形式に変換

// ISO形式に変換のみ
// const jstISO = jst.toISOString();
// ISO形式に変換 + タイムゾーンを置き換え
// const jstISO = jst.toISOString().split('Z')[0] + '+09:00';
// ISO形式に変換 + タイムゾーンを置き換え ミリ秒なし
const jstISO = jst.toISOString().replace(".000Z", "+09:00");

/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/

// 更新日のデータ
const update = new Date(jstISO);

// 公開日のデータ
const published = new Date("<data:post.timestampISO8601/>");

// 公開日の桁処理(年月日) 更新日との比較に使う
const published_YEAR = published.getFullYear();
const published_MONTH = ("" + (published.getMonth() + 1)).slice(-2);
const published_DAY = ("" + published.getDate()).slice(-2);

// 更新日の桁処理(年月日) 公開日との比較に使う + 表示用
const update_YEAR = update.getFullYear();
const update_MONTH = ("" + (update.getMonth() + 1)).slice(-2);
const update_DAY = ("" + update.getDate()).slice(-2);

// 公開日と更新日が同じかどうか判定
//<![CDATA[
if (
  published_YEAR == update_YEAR &&
  published_MONTH == update_MONTH &&
  published_DAY == update_DAY
) {
  //]]>
  // 公開日と更新日が同じときは出力しない
} else {
  // 公開日と違うときは更新日を表示

  // 更新日を表示させる場所を取得
  const forDisplayDate = document.getElementById("for-display");

  // datetime属性と値を付与
  forDisplayDate.setAttribute("datetime", jstISO);

  // 更新日を出力
  forDisplayDate.textContent =
    update_YEAR + "年" + update_MONTH + "月" + update_DAY + "日";

  // 親要素の'display:none;'を'display:inline'に変更
  forDisplayDate.parentElement.style.display = "inline";
}
</script>

判定にgetTimeを使ったもの

クリックすると開きます

/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/

const utc = new Date("<data:post.lastUpdatedISO8601/>");

// 協定世界時(UTC)に9時間加算して日本標準時(JST)に変換
const jst = new Date(utc.getTime() + 9 * 60 * 60 * 1000);

// ISO形式に変換

// ISO形式に変換のみ
// const jstISO = jst.toISOString();
// ISO形式に変換 + タイムゾーンを置き換え
// const jstISO = jst.toISOString().split('Z')[0] + '+09:00';
// ISO形式に変換 + タイムゾーンを置き換え ミリ秒なし
const jstISO = jst.toISOString().replace(".000Z", "+09:00");

/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/

// 更新日のデータ
const updated = new Date(jstISO);

// 公開日のデータ
const published = new Date("<data:post.timestampISO8601/>");

// 公開日より1日(24 * 60 * 60 * 1000 = 86400000ミリ秒)以上経過していたら更新日を出力
// &gt;は 不等号大なり の実体参照 -XMLにおける文字参照と実体参照: https://www.javadrive.jp/xml/ini/index6.html
if (updated.getTime() &gt;= published.getTime() + 24 * 60 * 60 * 1000) {
  
    // 更新日を表示させる場所を取得
  const forDisplayDate = document.getElementById("for-display");

  // 更新日を出力
  forDisplayDate.textContent =
    updated.getFullYear() +
    "年" +
    ("" + (updated.getMonth() + 1)).slice(-2) +
    "月" +
    ("" + updated.getDate()).slice(-2) +
    "日";

  // datetime属性と値を付与
  forDisplayDate.setAttribute("datetime", jstISO);

  // 親要素の'display:none;'を'display:inline;'に変更
  forDisplayDate.parentElement.style.display = "inline";
}

07月02日のように0の付いた日付がよければ// 公開日の桁処理(年月日) 更新日との比較に使う const published_YEAR = published.getFullYear(); const published_MONTH = ("0" + (published.getMonth() + 1)).slice(-2); const published_DAY = ("0" + published.getDate()).slice(-2); // 更新日の桁処理(年月日) 公開日との比較に使う + 表示用 const updated_YEAR = updated.getFullYear(); const updated_MONTH = ("0" + (updated.getMonth() + 1)).slice(-2); const updated_DAY = ("0" + updated.getDate()).slice(-2);// 更新日を出力 forDisplayDate.textContent = updated.getFullYear() + "年" + ("0" + (updated.getMonth() + 1)).slice(-2) + "月" + ("0" + updated.getDate()).slice(-2) + "日";タイムゾーン、ミリ秒の要否はお好みで// ISO形式に変換のみ const jstISO = jst.toISOString(); // ISO形式に変換 + タイムゾーンを置き換え const jstISO = jst.toISOString().split('Z')[0] + '+09:00'; // ISO形式に変換 + タイムゾーンを置き換えミリ秒なし const jstISO = jst.toISOString().replace(".000Z", "+09:00");