「microformats」タグアーカイブ

[Microformats] クラスデザインパターン

前回の記事に引き続き、Microformatsについて勉強中ですが、
クラスデザインパターンというのがあるようです。

参考:
class-design-pattern · Microformats Wiki

一言で言ってしまえば、HTML中において、その部分が何であるかという意味を示すのにclass属性を使おうという考え方です。

基本的な使い方

まず、HTML要素として提供されている意味的な要素があればそれを使う。
一般的なところでは<hx>タグや<ul>/<li>その他諸々。ここは最低限押さえましょう。

で、適切な意味的な要素がない場合。この場合は<span><div>を使います。
「適切」のラインは別の議論が必要になると思いますが。。。

次に、「意味的なclass名」をつけます。代表例として「hCard」の記述例が挙げられています。

<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>,
<span class="org">Technorati</span>
</div>

クラス名「vcard」がMicroformatsの規格を使用していることを表しています。
fnは名前、urlはURL、orgは所属。分かりやすいですし、電子名刺の標準的なフォーマットであるvcardの規格に基づいているので、機械でも理解できるデータと言えます。

このように、インライン要素では<a><span>、ブロック要素では<div>を使うようにします。
ほとんどの場合、CSSをいじらずとも既存のページにも簡単に導入することができるというわけです。

ところで連絡先という意味では<address>属性もありますが、文書の作成者の意味合いが強いので使い方を選びますし、中身の書き方は特に決まっていません。HTML要素とMicroformatsのどちらを使うかという問題ではなく、適切にマークアップされたHTMLを拡張するのがMicroformatsと言えるかもしれません。

次回はいよいよ実践、新着記事のコーディングについて改めて考えてみようと思います!

microformats入門 – 意味的なHTMLとは。

microformatsについて知ったのはだいぶ前のWeb Designing誌の特集だったと思います。その頃はほとんど参考資料がありませんでしたが、現在は日本語にも対応しているmicroformats.orgのWikiが充実してきているようです。

まず、microformatsとはなにか。microformats.orgの説明を引用するとこんな感じ。

Microformatsとは、Webサイトで人やイベント、ブログ記事、レビュー、タグのような共通して公開されているものを記述する際に用いるマークアップパターンです。

http://microformats.org/wiki/Main_Page-ja

分かったような分からないようなという感じですが、そのmicroformatsの拠り所となる概念としてさらに「POSH」というものがあるそうです。

POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。

http://microformats.org/wiki/posh-ja

この説明だけではまた分かりにくいですが、「意味的なHTML」というところがポイントです。実際のタグで言うと、見出しならなるべく<hx>タグ、段落ならなるべく<p>タグ、一覧性のある項目ならなるべく<ul>/<li>タグなどを使う、ということです。

反対に「表現的なHTML」という言葉もあります。こちらの代表的なタグは太字の<b>や文字サイズを変える<small>などです。また、表組みとして情報を整理しているのではない、レイアウトのためだけの<table>タグも含まれます。

ただし、現在主流のXHTML1.0などに用意されている意味的な属性は、本当に最低限のものです。Webで公開する情報としてよくある「連絡先」や「タグ」、「イベント情報」などを表す属性はありません。で、乱暴に言ってしまえば、無いなら作っちまおうぜというのがmicroformatsなのです!(たぶん)

実際のWebの現場では、そんなこと言われなくても各々ローカルルールを決めてコーディングしていることと思います。大きめのサイトを複数人数でコーディングする場合、画像のファイル名の付け方まで最初に細かく決めてしまうのが普通です。そうしないと、「この人の担当ページが遅れているから、他の人がヘルプに入る」というようなリソース配分がスムーズに出来ないからです。

じゃあ、なぜわざわざ作らなきゃいけないかという理由ですが…
「機械でも読めるようにするため」というのが一番じゃないかと思います。

見出しタグ<hx>やページタイトル<title>では、せいぜいその部分がそのページの内容を表す重要な部分であろうという程度のことしか分かりません。しかし、「連絡先」や「タグ」、「イベント情報」などがマークアップによってページのどの部分に記述されているのかが分かると、サイト内のイベント情報だけをピンポイントで検索することが可能になると考えられます。

他にも、ブラウザがmicroformatsに対応することで、ただ閲覧するだけではない情報の活用の仕方が広がります。ページ内の連絡先をワンクリックでアドレスブックに保存したり、ページ内のイベント情報をワンクリックでカレンダーに保存したり。これは便利ですよね。
詳しくは古い記事ですが下記に分かりやすくまとまっています。

【Web 2.0 Expo】「データ形式Microformatsがブラウザを進化させる」,Mozillaがアピール:ITPro

しかししかし、世の中ユーザーに便利なだけでは動かない。僕がMicroformatsに期待しているのは、HTMLコーディングをより楽にしてくれるのではないかという点です。マークアップとCSSの書き方の組み合わせはいくらでもあります。しかし、標準的な書き方が確立されれば、その部分はどんどん自動化できるようになっていく。
ユーザーにとって便利で、しかも開発が楽になれば、世の中変わるんじゃないか。

と、華々しい想像も広がるところなのですが、まずは「意味的なHTMLを書くことは重要」ということが言いたいのです。より具体的には、単に見出しタグやリストに気をつけるだけじゃなく、「意味的なクラス名」を積極的に付けていこうということです。(続く…)