カレンダーの基本手続きが完成したので、これをHTML表示してみましょう。

完成イメージは上記の通りです。ここではまず以下の操作が出来るようにしてみます。

1. ←と→をクリックすると前の月、次の月のカレンダーを表示
2. 日付をクリックするとその日のスケジュールを表示

まず、←をクリックすると前の月、→をクリックすると次の月に移動できるようにしておきます。

CGIパラメータyに年、mに月が与えられたときその月のカレンダーを表示するようにしておき、←と→をこのパラメータつきのURIにリンクしておくことにしましょう。

(define (month->link date content)
  (html:a :href #`"?y=,(date-year date)&m=,(date-month date)" content ))

「文字列の中で式を使う」で見たように、文字列補間を使うと文字列に式の値を埋め込むことができます。ここではdate-year手続きとdate-month手続きを使う式の値を文字列に埋め込み、CGIパラメータに与える値を実行時に生成しています。

日付をクリックするとその日のスケジュールを入力できるようにしておきましょう。

CGIパラメータのyに年、mに月、dに日が与えられたときその日のスケジュールを表示するようにします。

(define (date-cell year month date)
  (if date
    (html:a :href #`"?y=,|year|&m=,|month|&d=,|date|" date)
    ""))

ここではyear、month、dateの3つの引数をとるdate-cell手続きを書いてCGIパラメータy, m, dの値を実行時に生成しています。

前項で書いてきたカレンダーの基本手続きを呼び出してHTMLテーブルを生成するcalendar手続きは以下の通りです。

(define (calendar date)
  (html:table
   (html:tr (html:td (month->link (prev-month date) "←"))
            (html:td :colspan 5 :align "center"
                     #`",(date-year date)/,(date-month date)")
            (html:td (month->link (next-month date) "→")))
   (html:tr (map html:td "日月火水木金土"))
   (map (lambda (w)
          (html:tr
           (map (lambda (d)
                  (html:td (date-cell (date-year date) (date-month date) d)))
                w)))
        (date-slices-of-month date))))

date-slices-of-month手続きで生成された「“要素数7のリスト”のリスト」をHTML表示しています。「文字列にmapを適用する」で見たように、曜日を示す文字列"日月火水木金土"の文字それぞれにhtml:tdをmap手続きを使って適用し、HTMLのtd要素をまとめて生成しています。

(map html:td "日月火水木金土")
↓
<td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td>

カレンダーの各日付にはdate-cell手続きで生成したリンクを埋め込みます。

「手軽にHTMLを生成する」で見たように、text.treeライブラリのwrite-tree手続きを使って、calendar手続きがどんなHTMLを生成するか見てみましょう。

 gosh> (use text.tree)
 #<undef>
 
 gosh> (write-tree (calendar (current-date)))
 <table><tr><td><a href="?y=2007&amp;m=1"><-</a
 ></td
 ><td colspan="5" align="center">2007/2</td
 ><td><a href="?y=2007&amp;m=3">-></a
 ></td
 ></tr
 ><tr><td>日</td
 ><td>月</td
 ><td>火</td
 ><td>水</td
 ><td>木</td
 ><td>金</td
 ><td>土</td
 ></tr
 ><tr><td></td
 ><td></td
 ><td></td
 ><td></td
 ><td><a href="?y=2007&amp;m=2&amp;d=1">1</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=2">2</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=3">3</a
 ></td
 ></tr
 ><tr><td><a href="?y=2007&amp;m=2&amp;d=4">4</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=5">5</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=6">6</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=7">7</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=8">8</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=9">9</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=10">10</a
 ></td
 ></tr
 ><tr><td><a href="?y=2007&amp;m=2&amp;d=11">11</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=12">12</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=13">13</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=14">14</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=15">15</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=16">16</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=17">17</a
 ></td
 ></tr
 ><tr><td><a href="?y=2007&amp;m=2&amp;d=18">18</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=19">19</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=20">20</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=21">21</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=22">22</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=23">23</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=24">24</a
 ></td
 ></tr
 ><tr><td><a href="?y=2007&amp;m=2&amp;d=25">25</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=26">26</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=27">27</a
 ></td
 ><td><a href="?y=2007&amp;m=2&amp;d=28">28</a
 ></td
 ><td></td
 ><td></td
 ><td></td
 ></tr
 ></table
 >#t

カレンダーをHTMLテーブルとして表示することができました。次はこれをCGIにしてみましょう。

---

by えんどうやすゆき | Permalink | Comments(0) | Trackbacks(0)