hCardの実装

2006年1月15日 著

先日、いわいさんがお書きになった「profile を hCard でマークアップ」という記事を読みました。勢いだけでmixi内にmicroformatsコミュニティを作成してはみたものの、Wikiの翻訳なんて全然着手できてないし、かろうじて覚え書きトップのリンクでXFNを使っているに過ぎないという自分の不甲斐無さを反省しつつ、僕もhCardを実装してみました（とりあえず覚え書き内に限定してですが）。各ページのフッタ部分を、以下に示すように書き換えています（強調は編集した部位）。

<address class="vcard">
This web page has been produced by <a href="http://kidachi.kazuhi.to/"class="url fn"><span class="given-name">Kazuhito</span> <span class="family-name">Kidachi</span></a>.&nbsp;<a href="/foaf.rdf"><img src="/img/cmn/foaf.gif" alt="FOAF description" width="26" height="14" /></a><br />
All rights reserved. Any questions or comments are greatly appreciated.<br />
Please e-mail to <a href="mailto:kidachi@kazuhi.to" class="email">kidachi@kazuhi.to</a>.<br />
<script type="text/javascript" src="/js/update.js"></script>
</address>

基本的にやっていることはclass属性の追加。address要素に「vcard」、氏名をマークアップしたa要素に「url」「fn」、メールアドレスをマークアップしたa要素に「email」の各class属性値を付与。さらに氏名については、苗字と名前を別個のspan要素としてマークアップのうえ、「family-name」「given-name」をそれぞれ指定。書き方はいろいろ考えられますが、自分の場合はこんな感じで。
hCardを導入したからといって、途端に何かが劇的に便利になったりするわけではありませんけども、suda.co.uk/projects [X2V]で公開されているXSLTを使えば簡単にvCardを生成することができるし、Tantekのサイトで公開されているFavelet / Bookmarkletの「Add hCards to Address Book」を使えば、アドレス帳に簡単に情報をインプットできたりします（多分）。