JavaScriptの .lastModified プロパティを使用して「そのページが、最後に更新された日時＝最終更新日時」を表示します。
当記事でもサンプルで実装していますが、WordPressで動的にページが生成されています。その為、サンプルの日時は「常に現在日時」で表示されます。ので、静的に作成されたHTMLファイルの更新日時を表示したい場合に使いましょう。
簡単なので、参考にしてみてください。
.lastModified
JavaScriptの .lastModified は、現在の文書が最後に更新された日付と時刻を含む文字列を返すプロパティです。
var day = new Date(document.lastModified);
文字列そのままだと綺麗に表示できないので、少し整形する必要があります。
ページの最終更新日を表示したサンプル
早速サンプルです。
当該ページの「最終更新日」を取得して表示しています。
なんの変哲もないですが、こんな感じに日付を表示させます。
冒頭の解説の通り、動的なページなので、日付は現在のものだと思います。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
まずはじめに、設置したい場所にHTMLのコードを記述します。
<div id="modDay"></div>次に、JavaScriptのコードをページに記述します。これは、Swiperの動き方を指定するオプションです。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// 日付を取得
var day = new Date(document.lastModified);
var y = day.getFullYear();
var m = day.getMonth() + 1;
var d = day.getDate();
// 曜日を指定して出力
var week = new Array("日", "月", "火", "水", "木", "金", "土");
var w = week[day.getDay()];
//日にちの整形
if (m < 10) m = "0" + m;
if (d < 10) d = "0" + d;
// modDayに出力
modDay.innerHTML += "<span>更新日 </span>" + y + "年" + m + "月" + d + "日 (" + w + ")";最後に、CSSを記述して見た目を整えたら完了です。
#modDay {
display: flex;
justify-content: center;
font-size: 1.2rem;
letter-spacing: 0.04rem;
align-items: center;
}
#modDay span {
background: #313131;
line-height: 1;
font-size: 0.9rem;
padding: 5px 10px;
margin-right: 10px;
border-radius: 3px;
color: #eee;
}ざっくりとしたコードの解説
コードはHTML・JavaScript・CSSの3種です。ざっくりですが、順に解説していきます。
HTML
HTMLは「modDay」のid名が付与された div タグ。これだけです。
<div id="modDay"></div>この要素にJavaScriptの .innerHTML プロパティを使って、要素の中身に最終更新日を挿入させます。
JavaScript
JavaScriptは、冒頭に「日付を取得」して、その後任意の形に整形していき出力します。
// 日付を取得
var day = new Date(document.lastModified);
var y = day.getFullYear();
var m = day.getMonth() + 1;
var d = day.getDate();
// 曜日を指定して出力
var week = new Array("日", "月", "火", "水", "木", "金", "土");
var w = week[day.getDay()];
//日にちの整形
if (m < 10) m = "0" + m;
if (d < 10) d = "0" + d;
// modDayに出力
modDay.innerHTML += "<span>更新日 </span>" + y + "年" + m + "月" + d + "日 (" + w + ")";曜日を追加する為、曜日の配列を作り day.getDay() として配列の値を取得します。
getMonth() で取得する「月」は、最初に取得する1月が 0 のため、実際の月より1ヶ月少なく表示されてしまいます。その為、day.getMonth() + 1; と書き、+1 を追加します。
CSS
CSSですが、シンプルな内容で出力した日付を少し整える程度の内容です。
#modDay {
display: flex;
justify-content: center;
font-size: 1.2rem;
letter-spacing: 0.04rem;
align-items: center;
}
#modDay span {
background: #313131;
line-height: 1;
font-size: 0.9rem;
padding: 5px 10px;
margin-right: 10px;
border-radius: 3px;
color: #eee;
}出力された文字列の並びを整えているだけなので、設置場所にあわせてカスタマイズしましょう。
さいごに
頻繁に使うものではないと思いますが、静的なページで使えるケースもあるかと思うので、その時はぜひ使ってみてください。
