公開されているwebページ、ファイル、画像の更新日を確認する簡単な方法

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

この記事では、インターネットで公開されているWebページや、画像ファイルなどの最終更新日(タイムスタンプ)を確認する簡単な手段を紹介しています。

Web上で公開されているページ、ファイル、画像などの更新日を確認する方法

インターネット上に公開されているhtmlページや画像などのファイルは、いずれもWebサーバー上に保存されたものであり、そこにはローカルPCのファイルと同じように更新日の情報=タイムスタンプが記録されています。

これを確認するには、通常FTPやSSHといったサーバーファイルへアクセスする設定を知っている必要がありますが、それらのツールを使わなくても比較的簡単に閲覧する方法があります。

なお、この方法で更新日を確認できる条件として

  • Webブラウザで閲覧できる公開されているページや、ファイル
  • Webページの場合、静的htmlファイルである
    ※PHPなどで動的に表示されるページでは現在日時が表示される(WordPressで管理しているページなども同様)

といった所が前提となります。

Chrome系Webブラウザでサーバー上のタイムスタンプを確認する方法

おおまか手順は下記の通り。

  1. Webブラウザで該当ページ(またはファイル)にアクセス
  2. 開発者ツールを起動
  3. ConsoleにJavaScriptを記述する

以下に解説していきます。

Chrome系Webブラウザで該当ページ(ファイル)にアクセス

まずはWebブラウザで該当ページやファイルにアクセスします。 Chrome系としたのは次項の『開発者ツール』を利用する必要があるからであり、厳密にはFirefoxやEdgeでも同様の事が出来るのを知っている人は、適宜ご自身で置き換えてお試しください。

今回の例では http://example.com にアクセスします。

 スクリーンショット
http://example.com スクリーンショット

開発者ツールを起動

表示した状態で [ツール]>[開発者ツール] と操作し、開発者ツールを起動します。 Ctrl + Shft + I のキーボードショートカットを使っても良いでしょう。

Chromeの開発者ツールを表示
Chromeの開発者ツールを表示

ConsoleにJavaScriptを記述する

開発者ツールのConsole(コンソール)にファイルの最終更新日(lastModified)表示させるコードを記載します。コードは下記のとおり。

javascript:alert(document.lastModified);

上記をコピー&ペーストして貼り付けるのが確実です。

開発者ツールのConsole(コンソール)にコードをペースト
1.開発者ツールのConsoleに
2.コードをペースト

すると画面にアラートでファイル(この場合はhtmlファイル)の最終更新日が表示されます。

アラートで最終更新日が表示された
アラートで最終更新日が表示された

この記事掲載時点でのexample.comのトップページ『10/17/2019 16:18:262019年10月17日 16時18分26秒』にアップロードされたものであることが確認できました。

画像やJavaScriptファイル、Cssファイルなども確認できる

上記例では、htmlページを表示させて実行しましたが、Webブラウザで表示できるものであれば画像ファイルやCSSファイル、JavaScriptファイルなどでも同様にタイムスタンプを表示させる事ができます。

uzurea.net ロゴ画像の更新日付をチェック。2022年2月14日に更新されたファイルという事が確認できた
uzurea.net ロゴ画像の更新日付をチェック
2022年2月14日に更新されたファイルという事が確認できた

これも少し利用価値がありそうですね。

Web制作に従事する人であればまだサーバーへのアクセス諸情報を知る前……リニューアルの提案時などに「御社のWebページは2014年5月以降更新されていない事が確認できました(キリッ)」なんてお伝えすると、「こいつデキるな!」と思ってもらえるかもしれません。

他にも、キャッシュも削除したはずなのになぜか反映されない? なんて時に表示しているファイルがアップロードしたものと同一の物であるか……なんて確認にも活用できるかも。

補足 開発者ツールにConsoleが見あたらない場合

本題とは反れますが、上記解説のようにConsoleが見当たらない場合は、開発者ツールを表示した状態で、キーボードの[Esc]と操作するか、メニューから表示させればOKです。

開発者ツールのメニューでShow console drawerと操作
開発者ツールのメニューでShow console drawerと操作

まとめ

以上、Webサーバー上にあるファイルのタイムスタンプを確認する方法を解説しました。

特に難しい点は無いと思いますが、もしわかりにくい部分などがあればコメント欄などでお気軽にご質問ください。

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

UZUREA.NET 編集部アカウント。 webデザイン会社altstackのメンバー、及び契約ライターによる匿名寄稿を含みます。

コメント

  1. 匿名 より:

    助かりました。
    ありがとうございました。


page top