読者です 読者をやめる 読者になる 読者になる

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

広告

どうも、ゴトーだ。

f:id:hogehoge223:20170208081817j:plain

俺は三度の飯よりプログラミングが好きでな。
はてなブログで使えるスクリプトを組むのが最近の趣味だ。

これまでスポーツ選手の記事などを書いていて、年齢を表記するところがあったが、年齢は毎年変わってしまうので、今後の保守が大変だと感じていた。
その悩みを解決するために、JavaScriptで自動計算するスクリプトを組んだので紹介したい。

f:id:hogehoge223:20161208123045j:plain

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

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

しかし年齢というのは当然誕生日を迎える度に更新されていくので、毎年全ての選手の年齢を書き直すのは面倒だ。
そんなわけでこれまで「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を使用しておらず、はてなブログ以外でも動作するので安心してほしい。

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

HTMLを記述

そしてこのプログラムをいずれかに挿入した段階で、以下のようなHTMLを記述する。

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

HTMLで必要になるのは以下の箇所だ。

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

この「span」タグの中身が現在の年齢に置き換わることになる。

かならず「data-birth」という属性を付けて、その値を「YYYY-MM-DD」または「YYYY/MM/DD」のいずれかの形式にする。この二つ以外の形式では動作しないので注意。

月・日も必ず2桁に揃えて欲しい。例えば「2000年8月1日」なら「2000-08-01」という表記になる。

この形式さえ守ってくれれば、先ほど挿入したJavaScriptが検知して、年齢を自動計算してくれる原理になっている。

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

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

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

f:id:hogehoge223:20161208121611p:plain

そうしたら「スパナアイコン」をクリックして、詳細画面を開いたら「フッタ」を選択して、テキストボックスをクリックして、先ほどの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>

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

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

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

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