五年日記の作り方

初めに

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

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

私の場合、ホームページ上の日記を2004年まで続けてきた。 2005年から2018年までは、seesaa という業者が提供しているブログを使った まりんきょの別荘 (marinkyo.seesaa.net) を日記がわりに使っていた。 2019年以降は、seesaa での更新を停止し、 まりんきょの音楽室 (marinkyo.asablo.jp) を日記がわりに使っている。 実際のページはこれら混在で表示できるのだが、 ここでの説明は簡単のため、seesaa のみで作っているものとして進める。

前提

前提として、１日の日記は１ファイルで完結しているとする。 まりんきょの別荘のブログでは、 yyyy年mm月dd日の日記を次の URI で得ることができる。

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

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

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

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

５ファイルの同時表示

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

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

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

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

枠の配置は、html の table 要素, tr 要素、td 要素を使えばよいが、CSS を使う方法もある。ここでは、 table 要素を使う方法を説明する。 td 要素では、幅を明示すべきである。

次に、各面の HTML を引用する。HTML 4.01 では iframe 要素は非推奨要素で代わりに object 要素が推奨されていたが、 Internet Explorer (以下 IE)では object 要素がうまく使えなかった。 そのため、IE では iframe 要素を、他のブラウザでは object 要素を使うという複雑な実装になっていた。

HTML5 では iframe 要素が非推奨ではなくなったので、IE だけでなくすべてのブラウザで iframe を使うことにする。

iframe 要素を使う方法はつぎのとおりである。

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

参考までに、object 要素を使う方法も下記に示す。

URL の動的生成

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

まず、現在の年月日を得る。 JavaScript では Date オブジェクトを生成する。 第 1 の方法は次の通りである。

  const d = new Date();
  const year = Date.getFullYear();
  const month = ('0' + (Date.getMonth() + 1)).slice(-2);
  const day  = ('0' +  Date.getDate() ).slice(-2);

第 2 の方法は次の通りである。

  const d = new Data();
  const yyyymmdd = d.toISOString().substring(0,10);
  const year = yyyymmdd.substring(0,4);
  const month= yyyymmdd.substring(5,2);
  const day  = yyyymmdd.substring(8,2);

toISOString は ISO 形式の年月日および時刻を表示する。最初の 10 文字で区切ると yyyy-mm-dd のような表示が得られるので、 これを yyyymmdd に入れ、さらに配列化する。ここでは第２の方法をとる。

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

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

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

iframe を書き出すページ全体の URL について、 ? 以降の query 部がなければ表示している現在の日付を、 ISO 形式で強制的に書き出している。

任意の日の表示

次に欲張って、表示している日を今日だけでなく、任意の日にしてそこから５年間遡ることができないか、考えてみた。 紙の日記ならページをめくればよいが、 Web では苦労する。 ここでは私なりに工夫した方法を紹介する。

前後関係の表示

当初は、表示しているその日（つまり今日）の前日や翌日の概念を指定するために、 今日を基準とした相対的な日を URI で指定していたが、この実装には苦労した。 というのも、対象となるページは現在の日付を意識せず、単にその日付にしたがって URL が作られているからだ。 そこで発想を転換し（というより難しく考えることをやめ）、 2020 年 3 月 11 日からは、絶対日を次のように指定することとした。

ここで ? のあとの yyyy-mm-dd は query 部と呼ばれ、 パラメータとして変化させることができる。ここでは、 yyyy-mm-dd は意味をもつ値であるとする。

指定日の取得と年を変えた月の生成

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

let q = location.search.replace(/^.*\?/, ''); // query 部を取得

query 部は yyyy-mm-dd の形だから、前年（１年前）、２年前、などの URL を得るのは容易である。

指定日の取得のインターフェースは、<input type="date"> で与えられる日付選択インターフェースを用いた。 ただし、いくつかのブラウザでは日付を選択するインターフェースを持たないものもある（SeeMonkey など）。 この場合でも代替手段をとなる日付選択インターフェースを提供した。

スクリプト

以下、スクリプト（概略）を掲げる。非推奨の document.write が使われているが、 まだ書き直していない。

<script>
  const uri = document.URL;

  const loc = location.search; 
  const q   = location.search.replace(/^.*\?/, '');   
  let year = parseInt(q.substring(0,4));
  let month = parseInt(q.substring(5,2));
  let day = parseInt(q.substring(8,2));

  document.write('<table>');
  document.write('<tr>');
  for(let i=0;i < 5;i++){
    if(i===3){
      document.write('</tr><tr>');
    }
    const seesaa_filename=(year-i)+month+day+".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+ day+ '<br />');
  document.write('</td></tr></table>');

</script>

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