ホームページ作成/文字や画像の動的変更 (HTML,CSS,JavaScript)

JavaScriptでページ最終更新日を自動表示

各ページの最終更新日を表示しておくと、いつ更新された情報なのかが分かって便利ですね。しかし、手動で書き換えるのは面倒です。そこで、ページの最終更新日を、JavaScriptを使って自動で更新させてみましょう!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ページの最終更新日を自動で表示!

各ページの最終更新日を表示しておくと、いつ更新された情報なのかが分かって便利ですね。 しかし、ページの内容を更新するたびに「最終更新日」を手動で入力するのは面倒です。 書き換えを忘れてしまう可能性もあります。

そこで、ページの最終更新日(更新日時)を、JavaScriptを使って自動で更新させてみましょう。記述するJavaScriptは、たったの1行です。 非常にお手軽ですので、ぜひ使ってみて下さい。

JavaScriptを使って更新日時を取得

JavaScriptを使うと、そのHTMLページの更新日時(日付と時刻)を取得できます。
更新日時を取得するために記述するのは、以下の通りたったの1行です。

document.lastModified

documentオブジェクトの lastModifiedプロパティを見れば、そのページの最終更新日を取得できます。
これを、表示すれば良いわけです。

表示させるには、HTMLファイル中に、次のように記述します。

<script type="text/javascript"><!--
   document.write('最終更新日:' + document.lastModified);
// --></script>

すると、これは次のように表示されます。
※日付がどのような書式で表示されるかは、お使いのブラウザによって異なります。

これで、常に最新の更新日時を表示させておけます。

ここでは、「最終更新日:」という文字も、JavaScriptで書き出しています。
これは、JavaScriptがOFFに設定されているブラウザで閲覧されたときに、「最終更新日:」という文字だけが表示され、肝心の更新日が表示されていない…ということにならないようにするためです。
※JavaScriptがOFFなら、「最終更新日」という文字列も含めて、一切表示されません。

日付の後にも文字を加えたければ、次のように記述すればよいでしょう。

<script type="text/javascript"><!--
   document.write('最終更新日は、' + document.lastModified + 'です。');
// --></script>

さらに、JavaScriptで生成する文字列の中には、HTMLタグを含めることも可能です。

<script type="text/javascript"><!--
   document.write('最終更新日は、<em>' + document.lastModified + '</em> です。');
// --></script>

これを表示すると、次のようになります。

JavaScriptを使わずに最終更新日を自動表示するには?

JavaScriptを使わなくても、SSI(Server Side Include)を使うことで、ページの最終更新日を自動的に表示させることも可能です。
その方法は、記事「巡回ロボットがいつ来たかを知る(3ページ目)」に書いていますので、ご参照下さい。

終わりに

今回は、JavaScriptを使って、ページの最終更新日を自動的に表示させる方法をご紹介致しました。 ぜひ、ご活用下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます