ホームページ作成時刻/netkansai

2017/05/30

ホームページ作成時刻で検索をいただいているようですのでJavaScriptでlastmodifiedを使った方法をご紹介します。

技術系のサイトでしたら、その情報が公開された日付は気になるのではないでしょうか。HTML要素を調べるときなどはページにHTML5について書かれているのか、HTML4.01についてなのかstrictなのかどうかなど、明記しておいてほしいものです。

そのあたりの情報がない場合は、そのページがいつアップされたのかの日時が明記してあれば、判断の基準になると思います。

JavaScriptのlastModifiedを利用すればよく似たことができると思います。ただし、正確にはアップされた日ではなくそのファイルが更新されたになります。（誤字脱字などの修正を行ったらその日が更新日になります。）

以下の図はこのサイトのサーバのあるファイルの一部ですがchangedの日付を取得して表示させます。changedは、ローカルでファイルを保存した日です。

lastmodified,htmlをクリックして開いていただいたらchangedの日付が表示されています。

では、まずchangedの値を取得します。

<script>
  const lm=document.lastModified;
</script>

これでファイルの最終の保存日時が取得されました。変数lmは05/30/2017 12:20:25のようなごつごつした文字列です。ここから必要なデータを引っ張り出すのはちょっと面倒なことになります。曜日も欲しいかもしれません。 2020東京オリンピックカウントダウンにも少し書きましたが、この文字列でDateオブジェトを作成していろいろなプロパティで必要なものを取得すればいいでしょう。

<script>
"use strict";
function koushinbi(){
  const lm=document.lastModified;
  const ldt = new Date(lm);
  const ldtY=ldt.getFullYear();
  const ldtM=ldt.getMonth()+1;//0から11なので1+
  const ldtD=ldt.getDate();
  const ldtYou=ldt.getDay();
  const youbi= new Array("日","月","火","水","木","金","土");
  const koushinbi=ldtY+"年"+ldtM+"月"+ldtD+"日"+"("+youbi[ldtYou]+")";
  document.getElementById('lastmodified').innerHTML = koushinbi;
  }
</script>

取得したchangedの値である変数lmをldt = new Date(lm)としてあげるとldtがDateオブジェクトになります。ldtから西暦や月、日などを取得します。

西暦はldt.getFullYear()で取得できます。月はldt.getMonth()+1となります。1月が0で12月11なので1をかさんしておきます。日付はldt.getDate()、曜日は ldtYou=ldt.getDay()となります。曜日は日曜が0で月曜が1土曜が6という数値で帰ってきますのでそのまま表示しても意味が分かりませんので対応する配列を作っておきます。

それ以外にも時、分、秒が必要でしたら、

getHours   時刻　0-23
getMinutes   分　0-59
getSeconds()   秒 0-59

を使って取得してください。詳しくはMDNのDateをご覧ください。

HTML

<p id="lastmodified">最終更新日</p>
<p><script>koushinbi();</script></p>

当たり前ですが、id名と関数名はそれぞれ対応するようにしておいてください。

追記

JavaScriptを外部ファイルにしておけばもっと便利になるでしょう。

lastmodified.js

"use strict";
function koushinbi(){
  const lm=document.lastModified;
  const ldt = new Date(lm);
  const ldtY=ldt.getFullYear();
  const ldtM=ldt.getMonth()+1;//0から11なので1+
  const ldtD=ldt.getDate();
  const ldtYou=ldt.getDay();
  const youbi= new Array("日","月","火","水","木","金","土");
  const koushinbi=ldtY+"年"+ldtM+"月"+ldtD+"日"+"("+youbi[ldtYou]+")";
  document.getElementById('lastmodified').innerHTML = koushinbi;
}

HTML

<head>

  <script src="lastmodified.js"></script>
</head>
<body>

  <p id="lastmodified">最終更新日</p>
  <p><script>koushinbi();</script></p>

</body>

srcのパスは、ファイルごとに設定しなおしてください。

お名前
コメント