Microformats x SwapSkills 個人的まとめ

Microformats

SwapSkills: 『Microformats x SwapSkills』アップルストア銀座 に行ってきました。

最近、またなんか Microformats が盛り上がっていたりもするらしいのですが、なかなか日本ではこれと行った情報源がほとんど無いのが現状です。

今回は、microformats.biz の中の人がお話をされるということで(時間的に結構ギリギリだったのですが)楽しみにしながら行ってきました。

そのまままとめてもつまらないので、ちょこっと自分の知ってる情報も加えつつまとめます。

  • hCard の fn の件を追記
  • Microformats のリストで日本語版があるものに関しては追記

Microformats は新しい言語?

違うよ。全然違うよ。もちろん合法だよ。

例えば名前をマークアップする時は普通に<p>でマークアップをしたりすると思うんだけど、そうするとこうなる。

<p>forestk</p>

でもこれだと何の情報か分からないただの文字列になってしまう。じゃぁ新しく名前を記述する<name>というタグを作る?そうするとこうなる。

<name>forestk</name>

でもこれをやりだすと色々な情報にあわせたタグが必要になってきて、それらを全部覚えなきゃいけなくてそんなの面倒くさい!

んじゃ、どうすんの?ってことになるんだけど、そこで Microformats の出番です。

上の名前だったらこうやってマークアップできる。

<p class="vcard fn">forestk</p>

これで新しいタグを覚えずに「名前」という情報をマークアップする事ができました。

つまり各要素に class などを与えることでその情報にもっと意味を持たせようというのが Microformats です。

まぁ厳密には<p class="vcard"><span class="fn">forestk</span></p>ってマークアップした方が良いんだけど・・・

本当は fn の代わりに nickname が適切ではあるんですが、そうすると必須の fn が無くなってしまったりするので、ココは便宜上 fn としています。

Microformats で記述できるのは名前だけ?

そんなこと無いよ!今でもたくさんのものが作られてるよ!
ざっとあげるとこんな感じ。

とかとか・・・これでも全部書けてるのかどうか不安ですw

日本語版があるものに関しては追記いたしました。

で、例えばこの中で曲の情報なんかを記述する hAudio だとこんな感じになる。

<div class="haudio">
	<h3 class="title">まめことネコゼのどたばた会議 第8回 ペパボだよ!全員集合!(後編)</h3>
	<p><abbr class="published" title="20080325">2008年03月25日</abbr>公開 <a rel="enclosure" href="http://woopsdez.jp/podcast/dotabatakaigi_008.mp3">Download MP3</a></p>
	<ul class="contributor">
		<li class="vcard"><a href="http://twitter.com/woopsdez" class="url fn" rel="friend met">まめこ(id:woopsdez)</a></li>
		<li class="vcard"><a href="http://twitter.com/necoze" class="url fn" rel="friend met">ネコゼ(id:necoze)</a></li>
	</ul>
</div>

で、実際に書くとこんな感じ。

まめことネコゼのどたばた会議 第8回 ペパボだよ!全員集合!(後編)

2008年03月25日公開 Download MP3

簡単に中身を説明すると

haudio
このブロックは hAudio ですよー
title
この曲(今回はポッドキャスト)のタイトル
published
公開日は2008年03月25日ですです
rel="enclosure"
ダウンロード先(ファイルがある場所)はここですよー
contributor
この曲(今回はポッドキャスト)の提供者

という感じです。

contributor の中は hCard で記述していて、今回は何となく XFN も追加してみました。

でもそれって面倒くさいだけじゃ・・・

そうだよね。なにかしらそれによってメリットが無いと導入しづらいよね。

ということで対応してるサービスやらアプリやらをいくつか。

Yahoo Open Search

米Yahoo! が発表したコレです。

Microformats などのメタデータを検索結果に出すそうです。

つまり・・・
Yahoo Open Search Before
これが
Yahoo Open Search After
こうなる。

下の方がクリックしたくなるよね!

Google Social Graph API

Google が発表したコレです。

XFN なんかを使ってリンク上の繋がり追っていくという感じですね。

今回のセミナーではこれをリンクの重み付けに使うんじゃないか?という話しが出ていました。
つまり何の繋がりも無い人同士のリンクよりも、友達や恋人といった繋がりのある人からのリンクの方が重みがある、といった感じですね。

自分自身はまだこれがどうなっていくのかは分かりませんが、Social Graph API Demo - My Connections なんかを見ても面白い事ができそうな気はしますね。

Google Maps

Google マップ は以前から hCard に対応してますね。

例えば、こういうページなんかが対応しています。アップルストア loc: 銀座 - Google マップ

Twitter

TwitterhCard, XFN, hAtom に対応してます。

Jaiku

Jaiku では hCardXFN に対応してますね。

livedoor Blog

livedoor Blog第4世代 HTML が hAtom と hCard に対応していますね。

Operator

Firefox を microformats に対応させる Add-on に Operator というのがあります。

これを使うと microformats に反応するだけでなく、そこから別のアクションを起こす事ができます。

例えば、hCard であればそのコンタクト情報をアドレス帳なんかに書き出せたり、その住所を Google Maps で検索することも出来ます。

Safari Microformats plugin

Safari にも microformats に対応させるプラグインがあって、Safari Microformats plugin がそうです。

この拡張自体が Leopard 以上対応なので,未だに Tiger を使ってる自分は試せないのですが、hCalendar を iCal に hCard をアドレスブックに書き出したりできるみたいですね。

使ったことある人は感想など聞かせてもらえるとありがたいです!

NetNewsWire

NetNewsWire microformats
Mac 用の RSS Reader である NetNewsWirehCalendar を iCal に hCard をアドレスブックに書き出したりできます。

IE8 の hSlice ってどうなの?

IE8 で hSlice(WebSlice?)というのが発表されました。

出来ること自体は面白いのですが「それ hAtom で出来るよ、きっと」と思ってしまいますね。

hAtom 0.1 では必須だった author と updated が 0.2 でオプション扱いになったおかげで使える場面も増えますしね。

hSlice が hAtom にそのまま対応してくれれば色々と便利だとは思うんですけどねー。

Firefox で hSlice

これは知りませんでした。Firefox で hSlice を使える Add-on がありました。

Firefox Activities

えーと・・・誰か試して感想聞かせてくださいwww

どうやって勉強すれば良いのか

Microformats に関しては日本語のリソースが非常に少ないのでどうやって勉強すれば良いのか、非常に悩ましいところです。

今回話されていたのでは、やはりよくできたマークアップを見て勉強するというものでした。

Microformats.org に非常に優れたサンプルがたくさんありますので、本文は英語ですが、サンプル自体は見られると思いますので、その辺を参考にされると良いのではないでしょうか?

このようなチートシートも公開されています。

また hCalendarhCard に関しては Creator があるのでまずはそれを利用してみるのも良いのではないでしょうか?

また XFN の生成ツールに関してはWeb標準Blogの木達さんが日本語版を作ってくださってます :-)

そういえば hReview Creator が全く動かないのですが,見てみると hreview.js が 404 Not Found になってる様子。どなたか行方をご存じないですか?w

本が出るよ!

上記の「どうやって勉強すれば良いのか」にも絡んでくるのですが、海外では既に「Microformats: Empowering Your Markup for Web 2.0」という本が出ています。

その本が IA Spectrum の浅野紀予さん翻訳、木達さん監修により「マイクロフォーマット Webページをより便利にする最新マークアップテクニック(仮題)」として毎日コミュニケーションズさんから発売予定とのことです。

まだ詳しい発売時期などはアナウンスできないとのことですが、遅くとも夏頃には皆さんのお手元にお届けしたいと話されていました。

また Microformats 自身がとても変化のスピードが速いものなので、日々新しいフォーマットが提案されたり改訂されたしていますが、その辺の情報に関してはできる限り補足として記述して行くとのことでした。

その他にも、例えば日付を記述する際の<abbr>なんかに title 属性で ISO 形式で記述するのですが、それを音声ブラウザなどではただの文字列として読み上げてしまう、などのアクセシビリティ上の問題も指摘されていますので、その辺の情報もできる限り記述して行くとのことでした。

Tシャツを頂きました><

その後に Microformats Tシャツプレゼントのジャンケン大会があったのですが、なんと勝って Microformats Tシャツを頂いてしまいました!><

本当にありがとうございます><

セミナーのお知らせ

上記の「Microformats: Empowering Your Markup for Web 2.0」の執筆者でもあり、また The Web Standards Project の初期メンバーでもある John Allsopp 氏が来日し6月にセミナーを行うということです。

CSS3 の本当の使い方

John Allsoppイベント

2008.06.14 19:0020:00 銀座アップルストア3Fにて開催。

今後,主流になるであろう CSS3 を先取りし,旧ブラウザに対応したままどのように組み込んでいくのか?概念では終らない実践的テクニックを、彼の開発したエディタ StyleMaster を使い、ハンズオンでコーディングしていきます。

Where's your WEB at?

2008.06.15 10:0016:00 お茶の水 VISION CENTER Hall A+Bにて開催。

Web の世界は Wifi の普及や,PSP や iPodtouch などさまざまな機器からもアクセスできるようになりました。その中で、これからの Web はどうなっていくのか,またどのようなサイトを制作すればいいのか、解き明かします。

ads by LinkShare



About Author
trackfeed
feed meter
人気ブログランキング - Forest.Kの徒然日記
track word
あわせて読みたい
あわせて読みたい
解析
Firefox meter Chrome Counter Firefox3 Meter



特集 & 限定アルバム
iTunes Store Top Songs
iTunes Store Top Albums
  •  iTunes Store(Japan)