読者です 読者をやめる 読者になる 読者になる

前提知識なしのmicroformats

microformats

 microformatsの理念や技術的解説いっさい抜きのmicroformats利用例の紹介です。何か間違いがあれば指摘していただければ幸いです。
 こんな感じのタスク管理アプリケーションに、microformatsを埋め込んであります。


microformats1
microformats1 posted by (C) perezvon


 hCalendarを埋め込んである部分のHTMLは、次のようになっています。

<table class="vevent">
<tr>
<th>Summary</th><td class="summary">J1昇格</td>
</tr>

<tr>
<th>Start date</th><td><abbr class="dtstart" title="2007-03-03">2007-03-03</abbr></td>
</tr>

<tr>
<th>End date</th><td>
<abbr class="dtend" title="2008-01-01">2008-01-01</abbr>
</td>
</tr>

<tr>
<th>Assign to</th><td>None</td>
</tr>

<tr>
<th>Description</th><td class="description">
<p>今年こそJ1に昇格する。</p>
</td>
</tr>
</table>

 キモとなるのは要素だけ抜き出すと、

<table class="vevent">
<td class="summary">J1昇格</td>
<abbr class="dtstart" title="2007-03-03">
<abbr class="dtend" title="2008-01-01">

<td class="description">
<p>今年こそJ1に昇格する。</p>
</td>


 HTML要素のclass属性に注目していただければ、だいたいの意味が推測できると思うのですが、まず、親要素となるtableで、このtableの表現している情報がイベント(vevent)であることを宣言し、イベントの要約(class="summary")、開始日時(class="dtsart") 、終了日時(class="dtend")、詳細情報(class="description")を、クライアント(Operator, xfy, あるいはクローラー)に分かるようにマークアップしていきます。詳細は、microformats wikiのhCalendarの項を参照してください。


hCalendar
http://microformats.org/wiki/hcalendar-ja


 情報の発信元が行うべきことは基本的にこれだけ。なので、実際に埋め込むとなると、プログラムで対処するよりは、テンプレートのレベル対処するのが適切なのかなと思います。


 このような属性を埋め込んだ上で、先日言及したOperatorツールバーを使って、Googleカレンダーにイベントを登録すると、見事に次のような登録画面が表示されます。



 microformatsを使って、タグを表現するのはもっと簡単です。上の画面のタグリストに相当する部分のHTMLはこんな感じになっています。

<ul class="tags">
<li><a href="/tags/J2" class="tag" rel="tag">J2</a></li>
<li><a href="/tags/Vegalta%20Sendai" class="tag" rel="tag">Vegalta Sendai</a></li>
<li><a href="/tags/J%E3%83%AA%E3%83%BC%E3%82%B0" class="tag" rel="tag">Jリーグ</a></li>
<li><a href="/tags/Soccer" class="tag" rel="tag">Soccer</a></li>
</ul>


 重要なのは、a要素のhref属性とrel属性です。

<a href="/tags/Soccer" class="tag" rel="tag">Soccer</a>


 microformatsのtag規格では、rel="tag"という属性をもったa要素をタグとみなし、href属性のパスの最後の要素をタグの名称とするように定めています。上の例ですと、soccerというタグがつけられていることになります。詳細はmicroformats wiki rel-tagを参照してください。


rel-tag
http://microformats.org/wiki/rel-tag-ja


 タグ名称が非ASCII文字で構成されている場合、どうすればよいのかよく分からなかったのですが、僕はとりあえず、utf-8文字列をurlエンコードすることにしています。上の例ですとタグ「Jリーグ」に相当する部分がそれです。
 Operatorツールバーにもきちんと認識され、Technorati検索もきちんと行えました。



 他にも、hCard, hReview, geoなど役に立ちそうな規格がたくさんあるのですが、僕が作っているアプリケーションの性格にあわないのと、タグの埋め込み方に自信がもてない(特にhCard)ため、今回は省略します。


 microformatsがどれだけ普及しているのかもよく分からないのですが、とりあえず、ソーシャル・フィード管理サービスfeedpathのブログ・テンプレート機能は、microformatsをもりもり出力してくれるので、自分でmicroformatsを出力する時にも参考になります。


feedpath
http://feedpath.jp/feedpath/index.csp