年齢を自動計算するJavaScriptのプログラムを作りました。ブログなどに使ってみてください。

年齢を自動計算するスクリプト

このブログでは頻繁にスポーツ選手を紹介する記事を書いているのだが、このように生年月日と年齢を表記することが多い。
その選手が何歳くらいなのかどうか、というのは重要な情報だからな。

しかし年齢というのは当然誕生日を迎える度に更新されていくので、毎年全ての選手の年齢を書き直すのは面倒だ。
そんなわけでこれまで「2016年現在、〜歳」という表記をしていたが、2017年にそれを見たら違和感があるだろう。

それも一つや二つならまだしも、これからどんどん選手の記事を増やしていく予定なので、将来の保守コストを考えると非常に頭が痛かった。

そんなわけで年齢を自動計算するプログラムを作ってみたので、紹介しよう。

導入方法

導入する方法はここでは、はてなブログを前提に紹介したい。
WordPressなど他のサービスを使っている方は多少勝手が変わってくるかもしれないので注意してほしい。

まず自動計算するプログラムはこちら。

<script>
(function () {
var today = new Date();
document.querySelectorAll('[data-birth]').forEach(function (element) {
var birth = element.getAttribute('data-birth');
if (birth.match(/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/)) {
var birthDate = new Date(birth);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
age = Math.max(age, 0);
element.innerHTML = age;
}
});
})();
</script>

ちなみにこれはjQueryを使用しておらず、はてなブログ以外でも動作するので安心してほしい。

これをはてなブログの場合、「フッター」に挿入する。(挿入方法は後ほど紹介)

彼は現在、<span data-birth="1990-01-01"></span>歳
彼女は今、<span data-birth="1990/01/01"></span>才です。

<span data-birth="1990-01-01"></span>

はてなブログでの実装方法

このプログラムは少し取扱い注意なところがあるが、まずは、はてなブログでの実装方法から説明しよう。
はてなブログの場合は、この通りに行ってくれれれば間違いなく動作する。

まず管理画面から「デザイン」を選択して、デザイン画面に進もう。

そうしたら「スパナアイコン」をクリックして、詳細画面を開いたら「フッタ」を選択して、テキストボックスをクリックして、先ほどのJavaScriptのプログラムをそのまま貼り付けて欲しい(一番長ったらしいプログラム)。

最後に「変更を保存」ボタンをクリックすれば、スクリプトの挿入は完了だ。
あとは記事で、先ほど紹介した形式でHTMLを入力してもらえれば、あとは勝手に年齢を計算してくれるようになる。

他のブログなどでの導入注意点

はてなブログの方はここを見ないで、もう離脱してしまっても大丈夫だ。
ここから先は、はてなブログ以外の方への注意点となる。

先ほど紹介したプログラムは、自動計算するタイミングを早くするために、ページのロードが完了する前に計算が走るようになっている。

本来なら、以下のような記述が必要なのだが、これを書くと、ユーザーが記事を読んでいる最中に計算が走って、気持ち悪い挙動になるので意図的に省いている。

<script>
  window.addEventListener('load', function () {
    // ここにプログラムを記述
  });
</script>

「window.addEventListener(‘load’)」という箇所があるかないか、の違いなのだが、これを省いた場合、HTMLが予め全て記述し終わっている必要がある。

はてなブログの場合、「フッター」にこれを挿入したのは、フッターにおけば記事のHTMLが全て読み込まれているので、省略してもちゃんと動作するのだが、ヘッダーなどに置いた場合は「window.addEventListener(‘load’)」というものを挿入しないと動作しなくなる。

プログラミングに馴染みがない人にとっては混乱してしまうが、要は「先ほど紹介したスクリプトはページの末尾におかないとうまく動作しないよ」ということだ。

フッターに設置できる状況ならば、先ほどのプログラムをそのまま挿入すればよいのだが、ヘッダーにしか置けないという事情がある場合は、以下のプログラムに置き換えて欲しい。

<script>
(function () {
window.addEventListener('load', function () {
var today = new Date();
document.querySelectorAll('[data-birth]').forEach(function (element) {
var birth = element.getAttribute('data-birth');
if (birth.match(/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/)) {
var birthDate = new Date(birth);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
age = Math.max(age, 0);
element.innerHTML = age;
}
});
});
})();
</script>

しかしこの場合、ページのロードが完全に終了するまで計算が走らないので、どうも気持ちの悪い挙動になる可能性が高い。
できればこのプログラムではなく、最初のプログラムをフッターに置くのが理想ではある。

質問などはコメント欄まで

導入の際にわからないことがあれば、コメント欄まで書いてもらえれば対応しようと考えている。
ただし、他のブログサービスの事情などは熟知していないので、そのあたりは自分で解決してほしい。

また実現する見込みはそれほどないかもしれないが、「こんなものが欲しい」という要望があれば書き込んでもらえれば、プログラミング勉強がてら取り組むつもりだ。