2008.01.31

カレンダーの概念構造と見栄え

イメージ：カレンダーの概念構造と見栄え

一歩先のWeb標準 ♯10
ゆう（我的春秋）

みなさん、新年おめでとうございます。

年末年始にかけて、ひどく身体を壊してしまい、２週間以上も寝込んでしまいました。（去年の今頃も似たような状態だったような..…。）実はまだ静養していて、イマイチ頭もうまく働いてないので、今月は少し軽めの話題を。

先日、コリスさんのところで紹介されていた、カレンダーを table 要素ではなくlist 要素でマークアップしている事例、反響が大きかったですね。僕自身も元ネタのTableless Calendar In Use（pixelspread）を、その反響と共にとても興味深く拝見しました。

list要素 + floatプロパティでカレンダー表示

ごく簡単に説明すれば、pixelspreadのサンプルは、以下のような HTMLに対し、CSSのfloatとwidth（横幅、文字サイズは固定）を利用してカレンダーとして表示できるようにしています（style_2.css）。

<h1>January 2008</h1>
<ul>
<li class="day">sun</li>
<li class="day">mon</li>
<li class="day">tues</li>
<li class="day">wed</li>
<li class="day">thurs</li>
<li class="day">fri</li>
<li class="day">sat</li>
<li> </li>
<li> </li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4
<span>event</span></li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

また、さらに別途、日付を縦一列のリストとして表示する CSS ファイル（style_1.css）を用意して、JavaScript で適用するスタイルファイルを切り替えられるようにしています。要するに、カレンダービューで表示するかリストビューで表示するか、ユーザーが選べるようになっているわけですね。時間情報の運用の面で、興味深い事例です。

反響には、サンプルページのマークアップにおかしい点があるという指摘や、なんでも脱テーブルでリスト化すればいいってもんじゃないといった意見があって、それはそれでもっともなんですが、ただ、それだけでこの事例を切り捨ててしまうのは、少し惜しい気がします。

というのもこの事例は、情報の概念構造と、その表現方法の棲み分けを考える格好の素材になっているからです。ましてカレンダー（日時）という、「5W1H」の一角を担う重要なテーマです。折角の機会なので、もう少し掘り下げてみようと思います。

時間の概念構造は不変、見せ方は可変

ご承知の通り、現在のカレンダーには年月日と曜日という概念があります。これは不変です。なのに、ちまたにある紙媒体のカレンダーには、表形式、リスト形式、年表形式、日めくり式など、さまざまなデザインがありますよね？　逆にいえば、見た目のデザインは全然違うのに、背景にある時間概念は同じです。

これは同じ年月日と曜日を表すのにも、どの要素を重視するかでデザインが変わってくるということを意味しています。年月や時間の論理構造や意味は、不変（普遍）。でも見せ方は、目的に応じて可変。

試しに、年月日と曜日をXML風にマークアップしてみると、次のような感じになります。時間は「年/月/日/時」という構造を持ちつつ、常に過去から未来に向かって一直線に流れます。

<年>2008
　<月>1
　　<日 曜日="火">1</日>
　　:
　　<日 曜日="水">30</日>
　　<日 曜日="木">31</日>
　</月>
　<月>2
　　<日 曜日="金">1</日>
　　<日 曜日="土">2</日>
　　:
　</月>
</年>

これを、このまま日付けのリストとして見せたり、ある月や日だけを抽出して見せたりしているのが、巷のカレンダーです。いわゆる曜日ベースの表形式カレンダーは、現代人の日常生活のリズムが、曜日を基軸としたサイクルになっていることが多いことから、曜日と週という概念を重視したデザインになっているにすぎません。つまり、見せ方のひとつということです。

これって、まさに構造（structure）と見栄え（presentation）の違いですよね。

次ページで、もう少し突っ込んでみましょう。