2xup.org

microformatsによるイベントのマークアップフォーマットhCalendar

先日、microformatsに含まれるXFNに興味を持って色々と書いてみましたが、今度はhCalendarについて書いてみようと思います。このフォーマットもWikiによる仕様の限りでは特別新しい技術を習得しなければならないというわけでもなく非常に簡単です。

例えば僕が楽しみにしている7月4日から始まるドラマと、7月24日に行く予定になっている坂本龍一JAPAN TOUR 2005を明示する時には以下のように書きます（2種類のサンプル）。

スローダンス 第一回: July 04, 2005 21:00-22:09
久々の深津絵里主演ドラマ。楽しみ過ぎ

ソースは以下のようになります。

<dl class="vevent">
  <dt><a class="url" href="http://www.fujitv.co.jp/sd/index2.html" title="フジテレビ - スローダンス"><span class="summary">スローダンス 第一回</span>: <abbr class="dtstart" title="20050704T2100+0900">July 04, 2005 21:00</abbr>-<abbr class="dtend" title="20050704T2209+0900">22:09</abbr></a></dt>
  <dd class="description">久々の深津絵里主演ドラマ。楽しみ過ぎ</dd>
</dl>

hCalendarのフォーマット

つまるところ、class属性の値がveventを持つブロック要素（もしくはインライン要素。しかしそれに内包される要素が文法上正しい場合）に含まれる各要素に含まれるclass属性の値がポイントになっています。

class="url"

イベントのタイトルの内容等を参照するウェブサイトのURLへのアンカータグに設定（参照するURLが無い場合は省略可能）

class="summary"

内包するコンテンツにイベントのタイトルを持つ要素に設定

class="dtstart"

コンテンツにイベントの開始日時を持つabbr要素に設定（abbrに設定するtitle属性にはiCalendar形式で利用される日付フォーマットを入力することを推奨されています）

class="dtend"

コンテンツにイベントの修了日時を持つabbr要素に設定（abbrに設定するtitle属性にはiCalendar形式で利用される日付フォーマットを入力することを推奨されています）

class="location"

コンテンツにイベントの場所を示すテキストを持つ要素に設定

class="description"

コンテンツにイベントの概要を持つ要素に設定

XHTMLの文法に沿い、各コンテンツを含む要素にクラス名をつければいいわけなのでとても簡単ですね。スタイルを当てて見た目を調整するのもステキだと思います。

このhCalendarを主要Weblogツールで簡単にマークアップするGreaseMonkey用スクリプトが公開されています（もちろんMovable Typeにも対応してます）。

次のエントリではこのエントリを利用してhCalendarをiCalendarに書き出し、iCalに取り込んでみたいと思います。