weavin'

 | 

2005-07-180103

[][] More on "NagesenID" in HTML

ページにはてなIDを埋め込むにて、head要素内にIDリンク埋め込むという手法の欠点が挙げられていました。

ただ、metaはhead内なので、やっぱりウェブログサービスだと厳しそう。

ほんとだ。確かにそういうことを考えるとmeta要素を使うのも、僕が考えたものも使えなくなってしまいます。うーん。

さてさて、エントリにはmicroformats的手法と称して、class属性を用いてaddress要素にはてなIDを記述する例がありました。

<address>
<div class="mailto">mailto:altair@...</div>
<div class="hatena">id:aql</div>
</address>

なかなか面白そうです、ただ構造に問題があったり。address要素にはブロック要素を含むことができないので、span要素を使うことになります(address要素を使わなければOK)。というわけで、ブラウザでの表示を意識してマークアップしなおしてみます。

<address>
<span class="hatena">id:aql</span>
 (<span class="mailto">mailto:altair@...</span>)
</address>

こんな感じかしら。

さて、これを見てhCardを思い出しました。vCardの情報をHTMLで表現するためのmicroformatなんですが、ここら辺と組み合わせ、足りないものは定義してみると面白いかも。というわけで、tipjarというmicroformatを考えてみます。

<address class="tipjar">
  <a class="userID" rel="tipjarURL"
    href="http://www.hatena.ne.jp/user?userid=kotastyle">hatena:id:kotastyle</a>
</address>

tipjarというclass属性をもつコンテナを用意し、rel属性にtipjarURLという投げ銭に関するリンク(またはユーザ情報のページ)、class属性にはuserIDという二つの値により、URLとIDを結びつけます。

そうそう、address要素にこだわらなくても、たとえば管理者のプロフィールが書いてあるdiv要素なんかに組みこめば問題ありません。はてなダイアリーにはprofileモジュールがあるので、それに組みこんでしまうとか。

tipjarフォーマットができたので、hCardと組み合わせてみます。

<address class="vcard tipjar">
  <a class="url n" href="http://webweaver.g.hatena.ne.jp/kotastyle/">kota</a>
  (<a class="userID" rel=&quo;tipjarURL"
    href="http://www.hatena.ne.jp/user?userid=kotastyle">hatena:id:kotastyle</a>)
</address>

こんな感じだと、microformatとして成立可能で、はてな外にもオープンにできるんじゃないかしら。

追記追記。rel属性の存在をすっかり忘れていました。tipjarURLはrel属性の値として書き換えてみました。

class属性値の併記はちょっと意味をぼかしてしまうので、rel属性をうまく使える場合はこちらの方が望ましいかと。

aqlaql2005/07/19 13:12確かに、中にblock書けませんでした。うっかり。

ren-bookmarkren-bookmark2007/12/17 09:36はじめまして。
素直に、

<address class="vcard">
<a class="url n" href="http://webweaver.g.hatena.ne.jp/kotastyle/">kota</a>
(<a class="userID" rel="tipjar" href="http://www.hatena.ne.jp/user?userid=kotastyle">hatena:id:kotastyle</a>)
</address>

でいいような気がしました(rel-tipjar語彙を作成して組み合わせるイメージ)が如何でしょうか?

 | 
© 2004 kota.