記事の新鮮度をアピールWebページの最終更新日を自動で表示する

更新日の表示は、HTMLで表示をします。

そして、時間は日付をHTMLで表示する場合は「time」タグで表示します。

time

HTMLのtimeタグは、時間や日時を表す際に使います。

また、timeタグは「画面に表示される部分」と「機械が読み取り可能な部分」と分けて記述をします。

検索エンジンは、特定の文字から正確に日付を取得することが難しい事があるため、機械が読み取れるデータとして「datetime属性」を付与する必要があります。

今回の例では、画面表示の部分は「」を記載して、機械の読み取り部分は「datetime=""」を設定します。

<time datetime=""></time>

更新日を自動で上書きして表示するには「表示」部分のHTMLと「取得と書き換え」部分のJavaScriptに分けて考える必要があります。

自動で更新日を上書きする仕組みは、JavaScriptでファイルの最終更新日時を取得した後、日時のデータを加工してHTMLを書き換えるような処理を行います。

更新日を表示する部分

HTMLで更新日を表示する部分を作成します。

時間や日付を意味する「time」タグにID属性を付加して設置します。

ID名を「modified_date」に設定して、IDを目印に日付を書き換えて表示します。

timeタグの中身は空っぽで、datetime属性がない状態で作成しましょう。

<time id="modified_date"></time>

更新日を取得する部分

更新日を取得して上書きするには、JavaScriptを使用します。

今回は作成する処理内容を、5つのステップに分けて解説します。

1. 日付の取得
   new Date()

   JavaScriptには、日付を取得できる便利な関数があります。

   HTMLファイルが最後に編集された日付を「new Date()」という関数で取得します。

   また、関数の"()"の中に「document.lastModified」と記述することで、HTMLファイルの最後に編集された日付が取得可能です。

   取得したデータは、上のような日付や時間がテキスト形式で取得されます。

   そして、取得したデータはそのままだと消えてしまうので、変数と呼ばれるところに一時保存をして繰り返し使えるようにしましょう。

   今回は、その変数名を「last」にして一時的に保存しておきます。

   <script>

   const last = new Date(document.lastModified);

   変数名「last」に、このHTMLファイルの最終更新日時を取得して格納する。

   </script>
2. 日付データを分ける
   new Date()

   取得した日付データはそのままでは使えないので、必要な情報だけを取り出していきます。

   今回必要になるのは「年」「月」「日」の値なので、変数名「last」からそれぞれの値を抽出します。

   日付データから「年」「月」「日」を抽出する際は、それぞれ「getFullYear()」「getMonth()」「getDate()」の関数を使って取得します。

   その後、抽出したデータは、それぞれ変数名「year」「month」「date」に一時的に保存しておきます。

   <script>

   const year = last.getFullYear();

   const month = last.getMonth() + 1;

   const date = last.getDate();

   変数名「year」に、変数名「last」から最終更新日時の「年」を取得して格納する。

   変数名「month」に、変数名「last」から最終更新日時の「月」を取得した後に1を足して格納する。

   変数名「date」に、変数名「last」から最終更新日時の「日」を取得して格納する。

   </script>
3. 月・日の値の修正
   -04-08

   先ほど取得した最終更新日の「月」と「日」の値が1桁の場合は、先頭に数字の「0」を追加して2桁になるように修正します。

   後でtimeタグの「datetimeの値」上書きする際の事前準備のために行います。

   最終更新日の「月」と「日」の値が1桁と判断する基準は、その値が「10より小さい数字」の場合は1桁と判断します。

   もし値が1桁の場合は、その値を2桁の表記に修正する必要があるので、先頭に数字の「0」を追加する処理を行います。

   修正した値は、それぞれ変数名「fixedMonth」「fixedDate」に一時的に保存しておきます。

   <script>

   // 月・日の値を修正した後に格納する変数を用意する

   let fixedMonth = month;
   let fixedDate = date;

   // 月の値が10より小さい場合は先頭に「0」を追加

   if (month < 10) {

   fixedMonth = "0" + month;

   }

   // 日の値が10より小さい場合は先頭に「0」を追加

   if (date < 10) {

   fixedDate = "0" + date;

   }

   変数名「fixedMonth」に、変数名「month」を複製して格納する。

   変数名「fixedDate」に、変数名「date」を複製して格納する。

   もし、変数名「month」の値が10よりも小さい場合は、先頭に「0」を追加して変数名「fixedMonth」に上書き保存する。

   もし、変数名「date」の値が10よりも小さい場合は、先頭に「0」を追加して変数名「fixedDate」に上書き保存する。

   </script>
4. 日付のテキストを作成

   最終更新日の上書き用のテキストを2つ作成します。

   今回は、表示部分の「2024年2月8日」とdatetimeの値の「2024-02-08」のテキストを作成します。

   作成したテキストは、それぞれ変数名「viewDateText」「datetimeText」に一時的に保存しておきます。

   <script>

   // 表示用のテキストを作成 例: 2024年2月8日

   const viewDateText = year + "年" + month + "月" + date + "日";

   // データ用の文字列を作成 例: 2024-02-08

   const datetimeText = year + "-" + fixedMonth + "-" + fixedDate;

   変数名「viewDateText」に"year年month月date日"のテキストを作成して格納する。

   変数名「datetimeText」に"year-fixedMonth-fixedDate"のテキストを作成して格納する。

   </script>
5. HTMLの要素に値を上書き

   作成した最終更新日のテキストをHTMLの要素に上書きをします。

   まずは、HTMLの要素を操作できるように、timeタグをID名「modified_date」で取得して変数名「target」に保存します。

   その後、下記のようなコードで「表示用のテキスト」と「datetime属性の値」の2つを書き換えます。

   <p>更新日: <time id="modified_date"></time></p>

   <script>

   // 更新日の表示先のHTML要素「time」タグを取得

   const target = document.getElementById('modified_date');

   // timeタグの内容を上書きする 例: 2024年2月8日

   target.textContent = viewDateText;

   // timeタグのdatetime属性を追加する 例: 2024-02-08

   target.setAttribute("datetime", datetimeText);

   変数名「target」に、timeタグのID名「modified_date」で要素を取得して格納する。

   変数名「target」のtimeタグの内容を、変数名「viewDateText」の内容に上書きする。

   変数名「target」のtimeタグのdatatime属性の値を、変数名「datetimeText」の値に設定する。

   </script>

更新日の表示

正常に更新日の上書きが完了すると、下記のようにtimeタグの内容に変化します。

datetime属性の値や表示内容が、目的の通りに反映されているか確認してみてください。

<time id="modified_date" datetime="2024-02-08">2024年2月8日</time>

先ほど作成した、更新日の自動変更のプログラムは、利用者がページを開くタイミングで毎回行われます。

ページを開いた直後は更新日の部分は空っぽの状態ですが、プログラムが実行された後は、更新日のテキストが挿入されて画面に表示されます。

更新日の基準はHTMLファイル

Web学習フォルダ/

├index.html
├profile.html
└css/

└style.css

JavaScriptで取得している日付は、HTMLファイルの最後に編集した日時を取得しています。

それぞれのHTMLファイルごとに最後に編集した日時を取得して、それぞれのページごとに表示するように動作します。

また、HTMLファイル以外の編集した日時は取得できないので、CSSファイル等の更新日を取得する事は出来ません。

日付の「月」の取得

new Date()

getMonth()

JavaScriptて最終更新日を「new Date()」で取得すると上のような長い英数字のテキストが取得されます。

そして、そのデータから月を抽出する際は「getMonth()」で取得が可能です。

月の値を取得した際に、本来は月の「」が取得されるはずですが、その結果は「」が取得されています。

これはプログラムの不具合ではなく、プログラムは「0」から数えるという特徴があるからです。

月は「0」から数える

1月

2月

・・・

12月

0

1

・・・

11

JavaScriptで日付を取得する場合は、月だけ「0」から数えます。

つまり、1月から12月を取得する場合は「0〜11」の間で取得されます。

なので、正しい数字にするには、取得した月の値に1を足す必要があります。

月の値を修正する

	new Date()	getMonth()
1月	Jan	0
2月	Feb	1
3月	Mar	2
4月	Apr	3
5月	May	4
6月	Jun	5
7月	Jul	6
8月	Aug	7
9月	Sep	8
10月	Oct	9
11月	Nov	10
12月	Dec	11

上の表はnew Date()で日付を取得してgetMonth()で月の値を抽出した際の対応表です。

例えば、月をnew Date()で取得した場合は「」が取得されているので正しい値です。

しかし、取得した日時からgetMonth()で月の値を抽出する際は、その値の1つ下「」が取得されます。

そのため、正しく月の値を取得するには「getMonth() + 1」のように、取得後に「1」を足す必要があります。

<script>

const last = new Date(document.lastModified);

const month = last.getMonth() + 1;

</script>