五年日記の作り方

初めに

私は、ホームページ上で五年日記を公開している。 その作り方をまとめる。

五年日記とは、ある１日の日記を、 ５年間にわたり同時に表示する日記である。 コンピュータで五年日記を表示するには、 １日の日記を一つの html ファイルとして作成し、 これを同時に表示することにする。

私の場合、ホームページ上の日記を2004年まで続けてきた。 2005年からは、seesaa という業者の Blog を使っている。 実際のページは両者混在で表示できるのだが、 ここでの説明は簡単のため、seesaa のみで作っているものとして進める。

前提

前提として、１日の日記は１ファイルで完結しているとする。 marinkyo.seesaa.net 配下の Blog では、 yyyy年mm月dd日の日記は、次の URI で得られる。

  http://marinkyo.seesaa.net/archives/yyyymmdd.html

なお、月と日はゼロ詰めである。たとえば、2008 年の 3 月 9 日であれば、
http://marinkyo.seesaa.net/archives/20080309.html
となる。

日記を表示する土台の URI は次の通りである。

ちょっと変わっているが、taglibroj はエスペラントで日記の複数形、 hodiaux は同じくエスペラントで「今日」という意味、kvin は同じくエスペラントで 5 の意味である。

５面の同字表示

複数の html ファイルを同時に表示するには、次の方法が考えられる。

1. フレーム機能を使う
2. object 要素を使う
3. CGI で複数ファイルを読み取り、同時に表示する CGI を作る

1. は従来から使われている方法であるが、 フレーム機能は将来使えなくなる機能であることがわかっている。 2. は 1 とは逆で、ブラウザの制約で以前は使えなかったが、 今は使えるようになっている。 3. は自由度が高いのが長所だが、それだけに手間がかかる。 これから説明するのは、2. による方法である。

まず、縦３列、横２行で、計６マスの領域を作る。 配置は、左上に最新年、右へいくほど前年に遡る。 左下も同様。ただし、右下は日付を変更する制御画面とする。 図式化すると、下のようになる。

枠の配置は、html の table 要素, tr 要素、td 要素を使えばよい。 td 要素では、幅を明示すべきである。 実際にHTMLを表示する object要素は次のように使う。 data="URI" とするところに注意。

この記述を、それぞれの表のマスに書き込めばよい。 例えば左上なら、次のようになるだろう。

URL の動的生成

ここから JavaScript の出番である。単に５面を表示するだけでなく、 見たその日の日記を表示させる必要がある。 しかも、それを５年間にわたって該当する URI を作ることが求められる。 これには次のようにする。

まず、現在の年月日を得る。 JavaScript では Date オブジェクトを生成する。

  var d = new Date();
  var year = Date.getFullYear();
  var month = Date.getMonth() + 1;
  var date = Date.getDate();
  if (month < 10) month = '0' + month;
  if (date < 10)  date = '0' + date;

最後の２行はゼロ埋めのための操作である。

これをもとに、５年連続での URI を生成する。

  for (var i = 0; i < 5; i++) {
    var uri = 'http://marinkyo.seesaa.net/archives/' + (year - i) + month + date;
  }

このuriを、document.write(uri)のようにして、htmlコードとして出力する。 もちろん実際には、表組に必要なコードも document.write の引数として、 出力する。

前の日と次の日の表示

次に欲張って、表示している日の前の日や次の日の日記を表示させよう。 紙の日記ならページをめくればよいが、 Web では苦労する。 ここでは私なりの方法を紹介する。

前後関係の表示

前や次の概念を指定するために、 日記を表示する土台となる URI を次のように拡張する。

ここで ? のあとの n は query 部と呼ばれ、 パラメータとして変化させることができる。ここでは、 n を整数に限定し、0 が今日、1 は翌日、2は翌々日、...、 -1 が前日、-2 が前前日、... のように扱う。

前後関係の取得と生成

今表示されている URI の query 部を取得するには、 JavaScript の location.search を使う。 最初は document.URL の ? 部分以降を切り出すことを考えたが、 IE では query 部が削除される仕様となっている。 そのため、location.search を使う。 この要素は、query部(?を含む)を取り出す。 IE だけでなく、他のブラウザでも使える。 location.search から整数部分を取り出すには、最初の ? を削除して、 parseInt関数で整数化する。

var d_n = parseInt(loc.replace(/\?/, ''));

従って、現在表示されている日の uri から、 前の日の uri である uri_p と次の日の uri である uri_n は、次のように生成できる。

  var uri = document.URL; 
  var uri_p = uri.replace(/\?.*$/, '') + '?' + (d_n - 1);
  var uri_n = uri.replace(/\?.*$/, '') + '?' + (d_n + 1);
  

前の日と次の日の URI の生成

前の日と次の日の、本日からの相対的な日数差がわかったので、 これを表現する。 2008年1月1日の前の日は2007年12月31日である。このことからも、 ある日付の年月日から、 その前あるいは次の年月日を場合分けにより決めるのは繁雑だ。

そこで通常は次の方法をとる。基準となる年月日（エポック）から、 その日に至るまで経過した秒数を求め、 その前の日または次の日に至る秒数を加減する。次の日であれば、 １日は 86400 秒であるから、この数を加える。 そして、その経過した秒数から年月日を求める関数を適用する。

JavaScript の場合は、エポックが 1970 年 1 月 1 日であり、 秒数ではなく、ミリ秒数で計算する。 現在のエポックからのミリ秒数は、Date オブジェクトを作り、 getTime() メソッドで得られる。 エポックからのミリ秒から年月日を得るには、 Dateオブジェクトのコンストラウタの引数にそのミリ秒を指定し、 年月日それぞれ、 getFullYear(), getMonth() + 1, getDate() のメソッドを使う。

スクリプト

以下、スクリプトを掲げる。

<script type="text/javascript">
  var uri = document.URL;

  var loc = location.search; 
  var d_n = parseInt(loc.replace(/\?/, ''));  
  
  var p = '?' + (d_n - 1) ;
  var n = '?' + (d_n + 1) ;
  var uri_p = uri.replace(/\?.*$/, '') + p;
  var uri_n = uri.replace(/\?.*$/, '') + n;

  var d_now = new Date();
  var d = new Date(d_now.getTime()+d_n*86400*1000);
  var year =  d.getFullYear();
  var month =  d.getMonth()+1;
  var date =  d.getDate();
  if (month <10){ month='0'+ month;}
  if (date <10){ date='0'+ date;}

  document.write('<table>');
  document.write('<tr>');
  for(i=0;i<5;i++){
    if(i==3){
      document.write('</tr><tr>');
    }
    var seesaa_filename=(year-i)+month+date+".html";   

    document.write('<td width="280"><object data="http://marinkyo.seesaa.net/archives/'+seesaa_filename+'" type="text/html" height="280" width="280"></object></td>');
    
  }

  document.write('<td valign="top" align="center">');
  document.write('基準年月日：' + year + month+ date+ '<br />');

  document.write('<a href="' + uri_p + '">前の日' + '</a>  ');
  document.write('<a href="' + uri_n + '">後の日' + '</a><br />');

  document.write('</td></tr></table>');

</script>

まりんきょ学問所 ＞ JavaScript 手習い ＞ 五年日記の作り方