ファイルの最終更新日を自動的に取得して、
ページに表示する方法をSSI・PHP・JavaScriptで解説

サイト制作をしている際に、ファイルの更新日、いわゆる最終更新日的なものを自動的に表示したいなーということがあったりします。よく使われるのが、

今日の日付や今の時間を示す際には、以前にJavaScriptで今日の日付や時間を表示する解説をしてきましたが、似て異なる、ファイルを更新した日付を表示するという方法もあります。

今回はこのファイルの更新日時を自動的に表示する件について見ていきましょう。

SSIを使って最終更新日時を取得・表示する方法

まずはコードの紹介をしておきます。
実際に使う際は、下記のコードをベースに、日付の表示とどのファイルを対象とするかを変更するくらいになります。

<!--#config timefmt="%Y.%m.%d %H:%M:%S" -->
<!--#flastmod file="./index.html" -->

1行目が、日付や時間の表示の指定
2行目が、対象ファイルの指定
といった形になります。

ほぼ形式はこのままになり、こうすることで、対象としたファイルが最後に更新された日時を取得して、それを日時の表示指定の通りに表示します。
上記では、年月日 時分秒 の表示になっていますが、○月○日だけ表示という事も可能です。

実際のデモは下記の通りで、見ていただけるとわかるように、今の日付とはまた違った最後に更新（アップロード）された日時が表示されるようになっています。

また、SSIを使って表示しているため、ソースを見たり確認してもプログラムのコードが表示されるのではなく、しっかりとその日付がソースにも記載されるため見ただけでプログラムによる自動記入というのもわかりにくくなっています。

デモページ

SSIを使うためには事前の準備が必要

SSIを使ってファイルの更新日を自動取得する方法をまとめていますが、SSIを使うためには、一定のルール・条件が存在しています。

サーバーが許可してるかどうか

としてサーバーがSSIを使える設定にしてくれている必要性があります。ここでSSIが使えない仕様だと、そもそも不可になりますので確認しておきましょう。

とはいえ、今の一般的なサーバー会社では、SSIはPHPなどと同じく使えますよと書いてるところがほとんどのため、よほどの事がない限りは使えるのではないかと思います。

.htaccessにHTMLファイルで使えるように記載する

SSIというのは、厳密に言えば、「.shtml」という拡張子で使われます。
そのため、SSIを使う場合、.shtmlとする必要があるのですが、今の世の中、shtmlで構成されているサイトというのは皆無に等しい状況です。

そのため、SSIをHTMLで使えるようにするために、.htaccessに下記の記述が必要になります。

Options +Includes
AddHandler server-parsed html

簡単に説明すると、
1行目に記載しているOptions +Includesは、SSIを有効にして使えるようにする記述になり、2行目に記載しているAddHandler server-parsed htmlが、SSIをHTMLファイルでも使えるようにするための記述になります。

PHPを使ってファイル更新日を取得/表示する方法

PHPでもまずはコードの紹介をしておきます。
こちらも同様に、実際に使う際は、下記のコードをベースに、日付の表示とどのファイルを対象とするかを変更するくらいになります。

<?php echo date( "Y.m.d H:i:s", filemtime('./index.html')); ?>

ほぼコードは見たままになりますが、Y.m.d H:i:sとなっているところが、日付の表示で、年.月.日 時.分.秒で表示されるようになり、その対象ファイルとしてどのファイルかを指定しています。

実際のデモは下記の通りで、見ていただけるとわかるように、今の日付とはまた違った最後に更新（アップロード）された日時が表示されるようになっています。

デモページ

ファイル更新日を自動取得する際の注意点

とても便利で色々と使い勝手も良かったりで、意外と実務でも小さなワンポイントとして使う機会も多いのですが、やはりこれも注意点があります。

厳密には更新日＝アップロード日

ファイルの更新日とありますが、ファイルはローカルにあったところでWebサイトで見る事ができません。そのため、ファイルの最終更新日というのは、厳密に言えばアップロードをした日という事になります。

そのため、例えばローカルで、2022.01.01 09:00:00 に更新した場合でも
アップロードした日が、2022.01.08 12:00:00　だった場合、後者の日付が反映されることになります。

もっと言えば、更新していなかったとしても、同じファイルを再アップロードして上書きすれば更新したと見なされるので、日時は更新されることになります。

JavaScriptの自動取得は現状使えない事が多い

こういった自動取得のパターンの場合、多くはPHPもしくはJavaScriptというのが主役になりがちです。HTMLというのは自動系は相性が悪く、SSIなどで対応できれば対応できるのですが多くはPHPやJSで対処していくことが多いです。

実際、以前にも紹介していた、フッターのコピーライトの年数を自動更新するというケースでは、SSI、PHP、JavaScriptと3パターンで紹介していました。

今回のファイルの最終更新日の取得・表示に関しても、実はJavaScriptでも同じように用意されているものがあり、lastModifiedというものが用意されています。

<p id="modify"></p>

<script>
  const modify = new Date(document.lastModified);
  const year = modify.getFullYear();
  const month = modify.getMonth() + 1;
  const date = modify.getDate();
  const hour = modify.getHours();
  const minute = modify.getMinutes();
  const second = modify.getSeconds();
  const show = document.getElementById('modify');
  show.textContent = year + '.' + month + '.' + date + ' ' + hour + ':' + minute + ':' + second;
</script>

例えば、このように記載すれば、<p>タグのところに最終更新日を同じように取得し表示するというものが用意されているのですが、実は今の多くのサーバーでは使えない状況になってしまっています。

ほとんどが最終更新日＝今の日時になってしまう

JavaScriptの場合は、ブラウザで実行されるためLast-Modified ヘッダと呼ばれるところに最終更新日が保存されそこの値を表示するという仕組みになっています。

しかしながら、このあたりはサーバーの仕様によるところが大きいようで、サーバーによってはここに記載がないところも多く、その場合、最終更新日が無い＝ブラウザでJavaScriptを実行した今この瞬間ということになり、最終更新日のはずが、ページを開いた時の日時が表示されてしまいます。

デモページ

実際、裏方ワークスで使っているシン・レンタルサーバーでは、これに対応していないのか、JavaScriptでの記載では、常にページを開いた瞬間の時間が表示されてしまいます。

何度か更新するとわかりますが、SSI、PHPを使った日時の取得では変わらずファイルが更新された日時が表示されますが、JavaScriptの分だけは、更新する度に日時が更新され、今の時刻が表示されるようになってしまっています。

JavaScriptでファイルの最終更新日時を取得・表示する際は、サーバーの仕様によるところがあるため使う際には確認してから使うようにしましょう。

まとめ

ファイルの最終更新日時を取得し表示するをテーマにまとめてみました。

使う際にはSSIとPHPの両方がありますが、PHPでサイトを作っている場合はPHPで、HTMLサイトで作っている場合はSSIを使うというのが良いかと思いますし、JavaScriptはサーバーの仕様によっては使えないため注意しましょう。

意外とこれどういう時に使うの？実務で使う機会とかある？ということをたまに聞かれたりするのですが、意外と使い勝手は良かったりします。

自分がよく使う例の1つとしては、お客様の声や事例集などの一覧に使う機会があったりします。各サービスサイトなどで、お客様の声や事例はユーザーが最も見るページの1つでもあるため、ここを最終更新がいつなのかを表示するために使ったりしています。

あとはトップページにも軽く薄いグレーで表示する枠などをどこかに使っておくと、頻繁に更新されてるサイトだなという印象を持たれたりもすることもあるので表示したいというクライアントも多かったりします。

そんな感じでこれら以外にも、意外と思ってる以上に細かなワンポイントで使う機会も多かったりもしますので、ファイルの最終更新日を取得して表示する方法も使えるようになっておいて損はないかと思います！