HTMLのテンプレート処理（解説）
(2003.11.24)
Otherの所でテーブルを使っていますが、
タグの量が多くて、どのタグがどの欄なのか、わからなくなります。
そこで、テーブルの記述をテンプレートとデータに分離しておき、
Perlで作成したプリプロセッサを通すことで、
データをテンプレートに従って展開できるようにしてみました。
できあがりの例
2002年 自転車通勤の記録
| 月 | 走行距離 | 往路所要時間 |
通勤日数 |
|---|
| 積算 | 月間 | 最短 | 最長 | 自転車 | 地下鉄 | 計 |
|---|
| 3 | 142.8 | 142.8 | 00:58:15 | 01:13:34 |
3.0 | 22.0 | 25.0 |
| 4 | 208.3 | 65.5 | 01:02:22 | 01:11:09 |
2.0 | 0.0 | 2.0 |
| 5 | | | | |
| | |
| 6 | | | | |
| | |
| 7 | | | | |
| | |
| 8 | | | | |
| | |
| 9 | | | | |
| | |
| 10 | | | | |
| | |
| 11 | | | | |
| | |
普通にテーブルを作成した場合（HTMLを見えるようにしてあります）
<TABLE BORDER="1">
<CAPTION>2002年 自転車通勤の記録</CAPTION>
<TR><TH ALIGN="center" ROWSPAN="2">月</TH><TH COLSPAN="2">走行距離</TH><TH COLSPAN="2">往路所要時間</TH>
<TH COLSPAN="3">通勤日数</TH></TR>
<TR><TH>積算</TH><TH>月間</TH><TH>最短</TH><TH>最長</TH><TH>自転車</TH><TH>地下鉄</TH><TH>計</TH></TR>
<TR><TD ALIGN="center">3</TD><TD ALIGN="right">142.8</TD><TD ALIGN="right">142.8</TD><TD>00:58:15</TD><TD>01:13:34</TD>
<TD ALIGN="right">3.0</TD><TD ALIGN="right">22.0</TD><TD ALIGN="right">25.0</TD></TR>
<TR><TD ALIGN="center">4</TD><TD ALIGN="right">208.3</TD><TD ALIGN="right">65.5</TD><TD>01:02:22</TD><TD>01:11:09</TD>
<TD ALIGN="right">2.0</TD><TD ALIGN="right">0.0</TD><TD ALIGN="right">2.0</TD></TR>
<TR><TD ALIGN="center">5</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
<TR><TD ALIGN="center">6</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
<TR><TD ALIGN="center">7</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
<TR><TD ALIGN="center">8</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
<TR><TD ALIGN="center">9</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
<TR><TD ALIGN="center">10</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
<TR><TD ALIGN="center">11</TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD></TD><TD></TD>
<TD ALIGN="right"></TD><TD ALIGN="right"></TD><TD ALIGN="right"></TD></TR>
</TABLE>
テンプレートを使った場合（HTMLを見えるようにしてあります）
<TABLE BORDER="1">
<CAPTION>2002年 自転車通勤の記録</CAPTION>
<TR><TH ALIGN="center" ROWSPAN="2">月</TH><TH COLSPAN="2">走行距離</TH><TH COLSPAN="2">往路所要時間</TH>
<TH COLSPAN="3">通勤日数</TH></TR>
<TR><TH>積算</TH><TH>月間</TH><TH>最短</TH><TH>最長</TH><TH>自転車</TH><TH>地下鉄</TH><TH>計</TH></TR>
<!-- pphtml template
<TR><TD ALIGN="center">%s</TD><TD ALIGN="right">%s</TD><TD ALIGN="right">%s</TD><TD>%s</TD><TD>%s</TD>
<TD ALIGN="right">%s</TD><TD ALIGN="right">%s</TD><TD ALIGN="right">%s</TD></TR>
3 142.8 142.8 00:58:15 01:13:34 3.0 22.0 25.0
4 208.3 65.5 01:02:22 01:11:09 2.0 0.0 2.0
5
6
7
8
9
10
11
-->
</TABLE>
解説
テンプレートの定義が
「<!-- pphtml template」の次の行から始まり、空行で終わります。
続いて、データの行が始まり、「-->」で終わります。
データ１行をスペースで分離し、テンプレートの「%s」をデータに置換えます。
ご覧の通りテーブルの作成が簡単になります。
このテンプレート処理を行なうPerlスクリプトを
HTMLのテンプレート処理（ダウンロード）に入れてあります。
興味がありましたら、お試しください。
おまけ
このホームページ全体もPerlのプリプロセッサに通してあります。
たとえば、このページ（３５）を追加した際に、
ここへのリンクを他のページ全部（１〜３４）に
追加する手間を考えてみてください。
プリプロセッサがどれほど便利なものか、
わかっていただけると思います。
