peamon.net

ウェブサイト上に更新日(タイムスタンプ)を表示したい

サイト閲覧時にまず確認する情報は…

特に検索結果から閲覧するサイトで、まず最初に自分が確認する情報は、更新日だということに最近気づきました。更新日って自分が思っている以上に重要な情報ですよね。peamon.netはCMSではなくHTMLサイトだけど、表示することはできるんだろうか?

とりあえず、表示するだけならコピペでいけそう。

JavaScriptのお勉強

更新日時を取得できる"document.lastModified"というプロパティが用意されているらしい。

"var"は変数であることの宣言で、"var"の後ろのやつは名前。なんとなく分かったような気がする。

まぁ、HTMLとCSSのときに経験済みなんだけど、情報は勝手につながってくれるので、急がなければ、断片的に知っているだけでも問題はないんですよね。実際に使う必要がある状況下で勉強するほうが、頭に入りやすいし。

HTMLとCSSのソース

JavaScriptの書き方は、月日とともに変化しているみたいで、省略できるものが多い。それにしても、とほほさん懐かしい。15年ぐらい前にお世話になった記憶があるなぁ。

公開日も表示したいけど、これは手動で書くしかないか。とりあえず、このページだけで試験運用してみて、問題がなければ、全ページに最終更新日を表示したい。

表示

  • 公開日：2020年11月15日

HTMLのソース

<div class="time_stamp">
    <ul>
        <li>公開日：2020年11月15日</li>
        <li>
            <script>
                var name1 = new Date(document.lastModified);
                var name2 = name1.getFullYear();
                var name3 = name1.getMonth() + 1
                var name4 = name1.getDate();
            
                document.write("最終更新日：" + name2 + "年" + name3 + "月" + name4 + "日");
            </script>
        </li>
    </ul>
</div>

JavaScriptの変数をこんな風に書いてもらえたら、もう少し早く理解できたと思う。

CSSのソース

.time_stamp  {
  text-align: right;
}

.lastmodified ul li  {
  list-style-type: none;
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
}

text-alignで全体を右寄せ。横並びのリストにしたいので、liにinline-blockを指定。marginとpaddingは、個人の設定が基準になります。状況によっては、liだけではなく、ulのmarginとpaddingも調整する必要があるかもしれません。

最後に

JavaScriptのソースをしっかり調べたのは、今回が初めてでしたけど、思っていたよりも複雑ではない感じでした。直接書けなくても、検索して出てきたソースが読めるレベルまでは頑張りたいと思います。JavaScriptに触れる機会や接点を、多く持つことができればいいけども、これが一番難しい気がするなぁ。まぁ、なんにせよ、ぼちぼちやっていくしかないですね。

サイトも動画もたくさんあります。ただ、実際に必要な状況に身を置かないと、なかなか勉強する気にはなれないっすね…。