Big Sky

前回はmicroformatsを簡単に説明する事で、microformatsとは何か？、microformatsで何が出来るのか？を説明しました。
今回は、microformatsを利用して実際にWebページにメタデータを埋め込む手順を示して行きます。
microformatsのメタデータ構造はXHTMLで記述され、microformatsを利用するアプリケーションはDOMを使用する事で簡単にメタデータを扱う事が出来る様になります。

前回の記事を書く時点で、この記事を記述する前に、以下のmicroformatsをこのサイトに埋め込みました。

• hCard
• rel-tag
• XFN

今回はその作った過程を説明していきます。

hCard

hCardの作成にはhCard Creatorや、hCard生成ツールでベースを作成し、自分のサイトのスタイルに合わせ修正するのが手っ取り早いです。
class属性には「class="fn"」といった単独の記述も出来れば、「class="url fn"」のように記述して <a class="url fn" href="http://example.com/">ExAmPlE</a>
と組み合わせで記述する事も出来ます。

rel-tag

rel-tagは、そのサイトドキュメントが関連するタグを指し、ブログであれば各ブログツールによって生成されるものと思われます。利用するアプリケーション側は、このタグ情報を自身のサイトで抽出させたり、del.icio.usで検索させたりする事が出来ます。
このサイトでは、blosxomというブログツールのプラグインを使用してでタグを生成しており、本サイトの右側に表示されているタグ表示に使っています。
ただ、前回ご紹介したmicroformats Operatorでは、URLの最終部分をタグとして扱う仕様(technorati仕様)になっている為、例えば <a href="http://example.com/weblog.cgi?tag=microformats" rel="tag">microformats</a>
等といったURLでOperatorを使うと、タグには「webblog.cgi」が表示されてしまいます。
これを回避するには <a href="http://example.com/weblog.cgi?tag=microformats&-technorati-hack=/microformats" rel="tag">microformats</a>
という風に、無効なパラメータ(-technorati-hack)を使用して無理矢理フォルダ階層を作るの事でOperatorに扱わせる事が出来ます。(バッドノウハウ?)
このサイトでもblosxom.cgiというCGIがそのまま表示されますので、同様の修正で対応しています。

XFN

実は前回の記事には少し宜しくない部分があり、実際にはブログのエントリタイトルに対して「rel="bookmark"」を付けるべきだったと後で気づいた為、現在は修正してあります。
これから前回の記事を読む方は、記事本文を読み替えて下さい。

さて、今回は前回作成したmicroformatsに加え、「rel-license」を埋め込みました。
rel-licenseは、その文書の免責情報が記述されている文書へ、リンクを生成する際にrel属性に対して設定する値で、本記事のHTMLを参照して頂くと最下部あたりに <a rel="license" href="http://example.com" title="...">rights reserved</a>
と書かれた部分が見当たるかと思います。
このリンクは、本サイトがCreative Commonsの指定の文書に従ってコピーライトされている事を意味しています。
例えば、皆さんが訪れたサイトがどんなライセンスなのかを見るには、このrel-license属性を見る事で確認する事が出来ます。
Creative Commons限定ですが、cc licenseというブックマークレットを使用すると、そのサイトがCreative Commonsライセンスなのかを確認する事が出来ます。
本サイトも、本記事をポストするにあたり、rel-licenseを追加したので、「cc license」でCreative Commonsライセンスである事が確認出来るようになっています。(bookmarklet)

microformatsには色んな拡張があり、現在も尚Draftへ新しい拡張が追加されていっています。

その中でも私が興味深いと思ったのは、「hPlaylist Profile」というXMDP(XHTML Meta Data Profiles)形式のmicroformatsを利用したプレイリスト公開フォーマットで、曲の

• タイトル
• 作者
• 注釈
• 情報
• 情報元URL
• 画像(おそらくジャケ写真?)
• プレイリスト公開日
• 属性
• その他トラック情報...

を格納する事が出来ます。例えばもしAmazonがこれに対応すると、CDの曲情報をmicroformatsで配信する事が出来るのでは？と思いました。
また、再生した曲目リストを公開する事で人と繋がりあうSNS、PLAYLOGもこれに対応する事で、現在のようなアルバム名、曲名、作者だけでなく、上記の補足情報(SONYに関連したものだけしか公開出来ないかもしれませんが...)を公開する事が出来るようになるかと思います。
未だ、私はhPlaylistを本格的に使ったサービス、アプリケーションを見つけられていませんが、AmazonでCDの紹介ページを閲覧した際にオフィシャルサイトへのリンクが表示されたり、ブログに現在再生曲情報を付加する「Now Playing」等で利用出来るのはないかと思います。

可能性が広がり、夢がありますね。

正直、microformatsは勉強してませんでした。
twitterでotsune氏がよく「microformats」についてコメントさえておられたのを聞いて、私もmicroformatsについて勉強しなきゃと少しだけですが勉強してみました。

microformatsとは？

microformatsとは、Web上にメタデータを付与し、言わば添付データとして二次利用可能なデータを指しています。
最近ではTechnoratiが盛んに注目しており、検索しようとしている人に対するマッチングに利用しようとしているみたいです。

microformatsを扱う上で何か覚えなくてはならないのか？

いえ、microformatsは現存のHTMLに対するクラス名、リンク属性の指定方法を特定の決まりに従い設定する事でそれをmicroformatsとして扱わせるものです。
ですから、現状の既に書いていたHTMLが実はmicroformatsに対応していた...なんて事もあるかもしれません。

microformatsで何が出来るのか？

詳しくはmicroformatsのオフィシャルサイトで確認して頂きたいのですがmicroformatsとして添付出来るデータの種別は以下の通りです。

• hCalendar
• hCard
• rel-license
• rel-nofollow
• rel-tag
• VoteLinks
• XFN
• XMDP
• XOXO

と多種に渡ります。例えばhCalendarにはイベント等を添付する事ができ、Webサイトを閲覧したユーザにイベント告知をする事も出来ます。
また、hCardはブログ等の記者、もしくはレビューワの身元情報を添付する事ができ、Webサイトを閲覧したユーザに連絡先を教える事が出来ます。

microformatsて実際どんなの？

このサイトのHTMLを見て下さい。
(HTML Validatorでエラーがいっぱい出るのは無視して下さい)
HTMLの中で「<!-- microformats」を検索してみて下さい。
コメントの「start」から「end」までがmicroformatsとなります。 <!-- microformats 'hCard' start -->
<div id="hcard-Yasuhiro-Matsumoto" class="vcard" style="display: none;">
  <img style="float:left; margin-right:4px" src="http://mattn.kaoriya.net/images/logo.png" alt="photo" class="photo"/>
 <span class="nickname">mattn</span>,
 <a class="url fn" href="http://mattn.kaoriya.net">MATSUMOTO Yasuhiro</a>

 <a class="email" href="mailto:mattn.jp[at]gmail.com">mattn.jp[at]gmail.com</a>
 <div class="adr">
  <span class="country-name">japan</span>
 </div>
</div>
<!-- microformats 'hCard' end -->
これがhCard情報になります。
Microformats Bookmarkletで確認すると



とこのサイトの作者情報が表示されます。(bookmarklet)
追記：名前を少し書き換えました。
また記事1件に対して1個ずつ以下のmicroformatsも追加してあります。 <!-- microformats 'xFolk' start -->
<div class="xfolkentry" id="xfolkentry-20070801190741" style="display: none;">
  <a class="taggedlink" href="http://mattn.kaoriya.net/software/linux/vim/20070801190741.htm">意外と知られていないvimのtips(calendar.vimの日記機能をGoogle Calendarと同期させる)</a>
</div>
<!-- microformats 'xFolk' end -->
これにより、記事1件に対してxFolk形式のmicroformatsが埋め込まれます。
こちらは、上記Microformats Bookmarkletでは確認出来ませんが、以下に示すmicroformats Operatorで確認出来ます。

microformatsを体験するにはどうしたらよい？

まず、Firefoxブラウザをお使いならばmicroformats Operatorを入れてOperatorツールバーでPermaLink一覧が表示されます。



このmicroformats Operatorでは各種microformatsが閲覧できたり、それに対するActionを設定出来ます。
例えばPermaLinkに対してSBMへ登録するメニューを設定したり、hCardをvCardファイルへ保存する事も出来ます。

まとめ

microformatsの可能性として、今後上記スキーマを利用したサードパーティアプリケーションが増えて来る事が想像出来ます。microformatsはHTMLに特化したものではなく、Feedに適応する事も出来ます。
言わばデジタル放送のサブストリームのようなイメージですね。デジタル放送でも本放送のサブストリームとしてニュースや番組情報を流したりしています。
スキーマも拡張可能なようですから、拡張次第ではCGI側ではてなブックマークコメントを流したりする事も出来るでしょう。

おまけ

今回microformats OperatorのActionとして、はてなブックマークActionを作成してみました。

ダウンロード：
注意：microformats Operator version 0.8b上で動作します。

これをmicroformats Operatorの「Options」画面の「User Scripts」タブから読み込み、「Actions」タブで「New」をクリックすると「Bookmark with Hatena Bookmark」が選択出来るようになります。



これでxFolkメニューから表示されるようになります。



後はそこに出てくる「Bookmark with Hatena Bookmark」を選択すると



とはてなブックマーク登録画面に遷移します。
よかったらmicroformatsの勉強にお役立て下さい。

また、個人的なまとめなので間違ってたらご指摘下さい。

リンク

microformats.org
Technorati Kitchen
microformats Operator

mattn the micromagick!

先日、golangに3件不具合修正を行った。
その際、golangにはpatchを提供する際に、コードレビューをしてもらうのだけど、それに使用しているrietveldが素晴らしく良かった。
rietveldはGoogle App Engineのサーバ上で動作し、クライアントから使うにはmercurialが必須となる。hgrcファイルに以下の修正を追加する。
[extensions]
codereview = YOUR_GO_ROOT/lib/codereview/codereview.py
次にcodereview.appspot.comへログインする。 # hg code-login
Email (login for uploading to codereview.appspot.com): rsc@golang.org
Password for rsc@golang.org:

Saving authentication cookies to
/Users/rsc/.codereview_upload_cookies_codereview.appspot.com
これで準備完了。
golangのリポジトリ上で最新を得て、修正を行った。ここでcommitはしなくて良い。 # hg changes
するとエディタが起動して以下の入力を求められる。
# Change list.
# Lines beginning with # are ignored.
# Multi-line values should be indented.

Reviewer:
CC:

Description:
    <enter description here>

Files:
    src/pkg/math/sin.go
    src/pkg/math/tan.go
    src/pkg/regexp/regexp.go

内容を記入して保存終了する。これでcodereview.appspot.comにissueとして登録される。
放っておくと、レビューワが修正を確認してくれる。
ダメ出しを貰った際には、再度修正し以下のコマンドを実行。
# hg mail レビュー受付番号
これだけ。
次に修正しても同じコマンドを実行するだけ。ちなみに別の修正対象ファイルで複数のレビューをお願いする場合は、「hg changes」の引数に変更したファイルを指定すれば良い。あとは個別に「hg mail」の受付番号を指定すれば良い。
ちなみにmailとあるが、メールを送る訳ではなくcodereviewシステムに送られるだけなので、http/httpsポートが開いていれば使える。

結構便利。

ちなみに3件送った修正の内、2つは取り込まれそうです。
取り込まれると、ココに名前が載せてもらえるらしいので少しワクワク。

あと、rietveld自身は以下のサイトからダウンロード出来る。

rietveld - Project Hosting on Google Code

This project shows how to create a somewhat substantial web application using Django on Google App Engine.

http://code.google.com/p/rietveld/

Google App Engineはpythonのバージョンが2.5だし、rietveld自身はDjango1.0でしか動かないので、virtualenvを使うのが良いと思う。