フッターの "コピーライト" を自動更新＝PHP / JavaScript / jQuery スニペット
2021年、明けましておめでとうございます。
Web サイトやブログを運営してい読者のなかには、フッター部分のコピーライト（Copyright）の西暦表記の更新を "年初めの恒例行事" とされている方もいらっしゃるかもしれない。
私の結論を先に申し上げると、特殊なケースを除いて、通常のサイトであればコピーライトの年数表記は必要無いということになる。ただ、多くのサイトは年数を表示しており、クライアントの要望などを聞く限り、企業などではアップデートを必要とするケースが多いようだ。
もちろん、個人ブログなどであれば手動更新するのもいいと思うが、自動更新が可能な要素のため、簡単なコードを設置しておくと良いだろう。
WordPress のように PHP のスニペットが許されるのであれば、サーバサイドでダイナミックに処理することが望ましい。以下のような記述によって現在の西暦表記が動的に得られる。
<?php echo date("Y"); ?>
一方、対象ドキュメントが .html などの理由で PHP での記述が不可であれば、JavaScript を使うことでクライアントサイド（ユーザ側のブラウザ処理）で対応することができる。
非常によく利用されるコードは以下のようなスニペットで、多くの個人ブログやホームページ作成会社によって紹介されている。
<script>document.write(new Date().getFullYear())</script>
実際にこのスニペットが使われる頻度は高いようだが、いくつかの問題点が存在する。
document.write (DW) の記述は、 XHTML では使えないという問題点のほかにも、ページの読み込み速度が極めて遅くなる可能性が生じるといった見過ごせない欠点があるのだ。
実際、Google では、「document.write() を使用すると接続速度が遅いユーザの場合、ページの読み込みが数十秒遅れる可能性がある」としており、「document.write の使用を避けるように」とデベロッパに向けて注意喚起を行っている。
個人的には、document.write を使用することも時としてあるし、コピーライトの西暦表記の更新ではかなり有効だと思うため、必ずしも「使用不可」とはしたくないが、万が一のリスクを避けるのであれば、下記のような簡単なコードを用意するのは有効かもしれない。
<script>document.getElementById("year").innerHTML = new Date().getFullYear();</script>
特に通信回線が貧弱なエリア・国からのアクセスが見込まれるグローバル企業や多言語で運営しているサイトなどでは、上記のようなピュアな JavaScript を記述した方が無難だろう。
以下に、実際のブラウザ表示と使用したコードを記載しておく。
今回、3つのソースコードを用意（＜Updated＞ 4つ目の HTML をページ下部に追加）したが、いずれを使用しても Web ブラウザに表示される結果は同じになる。また、どれを使用しても構文のバリデータにおいて問題無くバリッドするはずだ。
ご自身の環境や条件などに合わせて、どのスニペットを利用するかを検討して欲しい。
（1）document.write() を使用する場合
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>document.write を使用する場合</title>
</head>
<body>
<main>
<p>Hello 2021</p>
</main>
<footer>
<p>© 2007 – <script>document.write(new Date().getFullYear())</script> Your Company</p>
</footer>
</body>
</html>
（2）getElementById() を使用する場合
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>getElementById を使用する場合</title>
</head>
<body>
<main>
<p>Hello 2021</p>
</main>
<footer>
<p>© 2007 – <span id="year"></span> Your Company</p>
</footer>
<script>document.getElementById("year").innerHTML = new Date().getFullYear();</script>
</body>
</html>
（3）PHP を使用する場合
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>PHP を使用する場合</title>
</head>
<body>
<main>
<p>Hello 2021</p>
</main>
<footer>
<p>© 2007 – <?php echo date('Y'); ?> Your Company</p>
</footer>
</body>
</html>
他にも記述の仕方はあるが、大きく分けてこの３つを抑えておけば、どのような条件や環境であってもほぼ対応可能だろう。PHP であれば（3）、JavaScript であれば（2）をそれぞれ推奨。なお、（2）の場合、スクリプト部分を外部の JS ファイルに収めるとベターになる。（１）は先述の通り、Web ページの読み込み速度に問題が生じる可能性があるため、避けた方が良いだろう。
新しい年を迎えるにあたり、コピーライトの西暦表記の更新について考察してみた。
2021年もどうぞよろしくお願いいたします。
First posted on 2021年1月1日
Author: IT Memo TV - Tsugawa.TV 代表 對川 徹（Toru Tsugawa）
＜Updated on 2021年1月3日＞
読者から jQuery で使用したいとの声があったため追記する。
（4）jQuery を使用する場合
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery を使用する場合</title>
</head>
<body>
<main>
<p>Hello 2021</p>
</main>
<footer>
<p>© 2007 – <span id="year"></span> Your Company</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>$(function(){var date=new Date();$('#year').text(date.getFullYear());});</script>
</body>
</html>
jQuery を読み込んだ後、スクリプト部分を上記サンプルのように記述するか、または、外部の JS ファイルに格納すると良い。
もちろん、コピーライトの年数更新のためだけに jQuery を使用すのは避けるべきだが、すでに他の用途で jQuery を読み込んでいるのであれば、それほど悪くはない選択肢になるだろうか。
このような作業をしておくことで、新年のタスクを減らすことができる。ぜひ、トライして欲しい。
<Link>
コメント
コメントを投稿