Microformats 話の追記とか

Microformats

前回の Microformats x SwapSkills 個人的まとめで書ききれなかったこととかあったので新たにエントリを書いてみました。

なのでこのエントリは「Microformats x SwapSkills 個人的まとめ」を読んでから読むと良いと思います。

各ブラウザの実装状況は?

最も気になる点の一つにコレがあると思います。

期待されていた Firefox 3 での実装もどうやら先送りされそうですし、まだどのブラウザも標準実装はしていないと言うのが現状です。

しかしながら Firefox には Operator がありますし、Safari には Safari Microformats plugin があります。

IE も 8 で hSlice(WebSlice?)に対応しますし、ブラウザ自身が実装しなくてもプラグイン形式で使えるようになる、というのは増えて行くでしょうね。

どうやって実装させるのか

また先日のセミナーの中で「某ブラウザ開発者の話」として紹介されていたものに、こうのがありました。

我々は microformats を含めたメタデータについて研究している。
しかし UI についていつも揉めている。

(引用者注:この部分うまくメモれていなかったのでニュアンスなどが違う場合があります。指摘などありましたら、頂けるとありがたいです)

確かに一般ユーザにまで、microformats を使わせる UI を作るのは難しい気がします。

microformats はそれだけではあまり活用できるものではなく、その他のアプリケーション(カレンダーやアドレス帳など)やサービスと組み合わせてその本領を発揮するものですし、それらのどれと連携させるのか?と言うところも難しいでしょうね。

その中で自分が面白そうだなと思っているのが Mac OS X Leopard の Mail に実装されているデータ検出機能です。

英語ですが、Apple - Business - Quick Tips - Mail Data Detectors で実際の動画が見られるのでどうぞ。

また Bento のようなアプリケーションの連携して、そのデータを様々に使える、というのも面白そうですね。

オレオレ microformats はありか?

先日のセミナーで質問が出ていたのですが、勝手に microfomats 的なものを作るのはありか?とうもの。

個人的な意見を含めて言えば、勝手に作ってそれを組み込むのはありですが、おそらくそれと連携するサービスなどはほとんど出てこないと思いますよ。(そのデータがあまりに再利用価値のあるものであれば別でしょうが)

それよりも今ある標準的な microfomats に準じた方が、コレから増えるであろう連携サービスなどと容易に連携して行けるのではないでしょうか?

それでも「今ある microformats じゃ足りないんだよ!」と言う方はメーリングリストや IRC にコミットしていただいて、それを標準にして行けば良いのではないでしょうか? :-D

おまけ

何となく先日思い立って hCard Creator の日本語版を作ってみました。

http://microformats.org/ 内にある hCard Creator では日本と住所の向きが逆だったりしてちょっと使いにくいのですが、その辺も含めて直したつもりです。

とは言っても、こういうものを作るのには慣れていないので、苦情などありましたらどんどんどうぞ。もちろんその全てに対応できるわけではありませんが・・・

hCard Creator

セミナーのお知らせ

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


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 はどうなっていくのか,またどのようなサイトを制作すればいいのか、解き明かします。

xFolk って自分のブログに付けるものなのかな?

microformats

最近、Microformats 関係のエントリを色々見かけるんだけど、その中で気になったので1つだけかいておこうかなと。

ちなみに自分はまだまだ分かってないヒヨッコなので「ここはこうだよ!」というのがありましたら遠慮なくコメントなど下さい。

・・・と、逃げ道を作ったところで早速書いてみる。

気になってること

Microformats の中に xfolk ってのがあるんだけど、これを自分のブログのエントリに付けるのはどうなのかな?と思った。

個人的には自分のブログのエントリを Microformats に対応させるのならば、hatom の方が適切な気がするのだけど・・・

xfolk - Microformats ってなに?

詳細は公式 Wiki を参照。

xfolk - Microformats

でこの Wiki の一番最初にこう書いてある。

xFolk is a simple and open format for publishing collections of bookmarks. It better enables services for improving user experience and sharing data in web-based bookmarking software.

適当に意訳するとこんな感じだろうか。

「xFolk は自分のブックマークを公開するためのフォーマット。これを使うと SBM での利便性があがるよ!」

さらに Introduction を読んでもこれはブログのエントリではなくブックマークなどを公開する時に使うものなんだと思うんだけれども・・・

もうちょっと書くと

xfolk のリンク先に使われる Class 名のtaggedlinkはまさに「タグ付けされたリンク」という意味な訳で。

そこから考えても、これは「自分でタグ付けした」というよりも「みんなにタグ付けされた」という意味合いの方が適切に思うんだけどどうなんだろうか?

tails もそうなってる

Firefox なんかを Microformats に対応させる tails っていう拡張があるんだけど、これを入れた状態で xfolk に対応してるサイトを見るとブックマークとして認識される。

xFolk を tails で見るとこうなる

同様に hatom に対応したサイトを見ると、ブログエントリとして認識される。

hatom を tails で見るとこうなる

ということで、やっぱりブログのエントリを Microformats に対応させるのならば hatom の方が適切な気がするのだけど、どうなんだろうか?

xfolk に対応してるサイトは POOKMARK Airlines のトップページで試しました。

Technorati Tags:



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)