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

今回は記事の更新日の表示について紹介します。

例えば、この記事はいつ書かれたものなのか気になる時ってありませんか？

実は記事の更新日は、記事の内容と同じぐらい重要です。

それでは、さっそくやってみましょう。

更新日の表示は必要？

この記事は年月日に更新されました。

よくブログや記事を扱うサイトでは、必ずと言っていいほど記事の更新日が表示されています。

記事の「公開日」や「更新日」を明記することで、記事の新鮮度を伝えることが出来ます。

ですが、更新する度に日付を手入力で変更するのはとても面倒な作業なので、いらないと思う方もいるかもしれません。

なので、今回は記事を作成または更新した際に、自動で日付を切り替える方法を紹介します。

表示する理由

更新日を表示する理由は、記事の新鮮度をアピールするために表示します。

例えば、調べ物をしている方が新しい情報を探していた場合を考えてみます。

記事の更新日を見て最近のものと分かれば、最後まで読んでくれる可能性を上げることが出来ます。

つまり、新しい情報を求めている方が、記事に興味を持ってもらうきっかけになるように設置します。
設置する場所
- ホーム
- レシピ
記事の更新日を表示する場所は、一番最初に見えるページ上部に設置することが多いです。

本サイトでもページの上に更新日を設置しています。

更新した日付と理解できるように、アイコンなどの推測しやすいものがあるとGOODです。

Index

では、本題の記事の更新日を表示する方法について紹介していきます。

今回は、自動で日付が切り替わるように、JavaScriptを使用します。

慣れてない方は少し難しいかもしれませんが、丁寧に解説していきますね。

更新日の取得と表示

<body>

/* 更新日の取得 */

const last = new Date(document.lastModified);

const year = last.getFullYear();

const month = last.getMonth() + 1;

const date = last.getDate();

/* 日付を書き換える */

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

target.textContent = year + '-' + month + '-' + date;

</script>

</body>

更新日の取得と表示

更新日を表示するには「表示」と「取得」と「書き換え」に分けて考える必要があります。

更新日の「表示」の部分は、HTMLで表示します。

記事の更新日の「取得」と「書き換え」の部分はJavaScriptを使って、ページが開かれる度に処理が行われるようにします。

更新日を表示する部分

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

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

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

この場合、timeタグの中身は空っぽで作成します。
<time id="modify"></time>
更新日を取得する部分

記事の更新日を取得するには、JavaScriptを使用します。

今回はHTMLファイルが最後に編集した日付を取得して更新日として扱います。

HTMLの中に「script」タグを使って処理を記述していきます。
- 日付の取得
  
  new Date()
  
  JavaScriptの関数と呼ばれる便利な機能を使って取得します。
  
  HTMLファイルが最後に編集された日付を「new Date()」という関数で取得します。
  
  "()"の中に「document.lastModified」と記述することで、HTMLファイルの最後に編集した日付が取得出来ます。
  
  また、取得されたデータは上のようなテキスト形式で取得されます。
  
  さらに、取得したデータを一時的に変数と呼ばれるところに保存して、繰り返し使えるようにします。
  
  今回は変数名を「last」にして保存します。
  <script>
  
  const last = new Date(document.lastModified);
  
  変数 last = この記事の最終更新日時(lastModified)を取得;
  
  </script>
- 日付の加工
  
  new Date()
  
  「new Date()」で取得したデータはそのままでは使えません。
  
  必要な情報だけを取り出して、整理された状態で表示する必要があります。
  
  変数lastに保存されてあるデータを使って、年・月・日をそれぞれ抽出して変数に保存します。
  
  年・月・日の抽出は、それぞれ「getFullYear()」「getMonth()」「getDate()」という関数を使います。
  
  さらに、抽出したデータを、それぞれの変数「year」「month」「date」に保存します。
  <script>
  
  const last = new Date(document.lastModified);
  
  const year = last.getFullYear();
  
  const month = last.getMonth() + 1;
  
  const date = last.getDate();
  
  変数 last = この記事の最終更新日時(lastModified)を取得;
  
  変数 year = lastから「年」だけを取得;
  
  変数 month = lastから「月」だけを取得して1を足す;
  
  変数 date = lastから「日にち」だけを取得;
  
  </script>
日付を書き換える

--

抽出したデータを整理して表示します。

まずは、表示先であるID名「modify」が付加されたtimeタグの位置を取得します。

取得したtimeタグの位置を変数名「target」に保存します。

「year」「month」「date」を上のような書式形式にして、timeタグの中身を「textContent」で書き換えます。

<time id="modify"></time>
<script>

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

target.textContent = year + '-' + month + '-' + date;

変数 target = ID名が「modify」のtimeタグを取得;

timeタグ(target)の中を「--」に書き換える;

</script>

はい！これで完成です。

そんなに難しくなかったですよね。

ただ、1つだけ注意点があるので、気をつけてください。

日付取得の注意点

取得される日付と注意点

年月12日

先ほどJavaScriptで作成した内容は、HTMLファイルが開かれた時に毎回処理行われます。

つまり、見るたびに毎回処理が行われて更新日が書き変わることになります。

作成したHTMLファイルを、日付をまたいで確認して見てください。

例えば、HTMLを昨日編集したのであれば、昨日の日付が表示されます。

これは、最後に編集した日付がHTMLファイルに記録されているため、その情報も毎回読み取っているからです。

ここで注意が必要なのは、「月」の値を取得する際にズレが生じてしまうことです。

月の数字はズレている

new Date()

getMonth()

実は、取得した日付から「月」だけを抽出する際に、数字がズレてしまいます。

更新日の取得で「new Date()」で取得したデータは正しく取得が出来ています。

取得したデータから月だけを「getMonth()」で抽出すると、数字が1つズレてしまいます。

これはプログラムのバグではなく、プログラムは「0」から数えるという特徴があるからです。
- 月は0から数える
  
  1月
  
  2月
  
  ・・・
  
  12月
  
  0
  
  1
  
  ・・・
  
  11
  
  JavaScriptで日付を取得する場合は「月」だけ0から数えます。
  
  つまり、1月から12月を取得する場合は「0〜11」の間で取得されます。
  
  なので、正しい数字にするには、取得した「月」に1を足さなければなりません。
- 月の数字を修正する
  
  上の表は「new Date()」で日付を取得して「getMonth ()」で月の数字を抽出した際の対応表です。
  
  例えば、月を「new Date()」で取得した場合は「」が取得されているので正しい値です。
  
  しかし、取得した日時から「getMonth()」で「月」だけの値を抽出する時は、1つ下の「」が取得されます。
  
  そのため、正しく月の値を取得するには「getMonth() + 1」のように「+1」する必要があります。
  <script>
  
  const last = new Date(document.lastModified);
  
  const month = last.getMonth() + 1;
  
  </script>