microformats

さてさて今回は第3回目のmicroformats講座です。
前回はリンクを拡張するごく簡単なmicroformatsについて書きました。
今回は同じようにリンクを拡張するけど少し複雑なXFNというものmicroformatsについて書きます。

XFNの起こり

XFNとはXHTML Friends Networkの略語です。
今でこそXFNはマイクロフォーマットと認識されていますが、実はマイクロフォーマットが作られる前からあったのです。もっと言うと、これがマイクロフォーマットの元となったと言ってもいいくらいのものです。
2004年のSXSWiの片隅でWordPressでおなじみのMatt Mullenwegらが考え出したと伝えられています。なので、WordPressのブログロール（ブログリンク集）の編集画面には初期の頃からXFNの設定オプションが備わっていました。

こちらはWP2.7.1のブログロールの編集画面です。
WPでは簡単にXFNを使うことが出来るようになっています。

XFNはなぜ作られたか

元々、ブロガーの間では友人のブログのリンクにアスタリスク（*）を付ける慣わしがありました。それを定型化したのがXFNです。
XFNは自分とリンク先のブログの管理者との関係を表すためのマイクロフォーマットです。

XFNの関係

• 交友関係（Friendship）

  • Friend – 友人
  • Acquaintance – 知人
  • Contact – 連絡先を知っている人物

• 面識（Physical）

  • Met – 実際会ったことがある人物

• 職業的関係（Professsional）

  • Co-Worker – 同僚。共同で働いたり、同じ組織に属している人物。
  • Colleague 仕事仲間や研究・活動仲間

• 地理的関係（Geographical）

  • Co-resident – 同じ住所に居住している人物
  • Neighbor – 近所に居住している近隣住民

• 血縁関係（Family）

  • Child – 実子または養子
  • Parent – 実父母または養父母
  • Sibling – 親が同じ兄弟姉妹
  • Spouse – 配偶者
  • Kin – 親族または上記のどれにも該当しない家族的関係を持つ人物

• 恋愛関係（Romantic）

  • Muse – 恋愛対象として気になる人物
  • Crush – 熱愛している人物
  • Date – 交際している人物
  • Sweetheart – 親密かつ何らかの

• 自分自身（Identity）

  • Me – 自分自身の別サイトへのリンク

XNFの根本的な設計思想は2点あります。
まず、これらの値には敵（enemy）などのネガティブな関係が含まれていません。これらの関係はXNFの設計者たちがわざと省きました。彼らはXNFの使用の中で、「世界にはこれ以上の憎しみはいらない。われわれは憎しみを広めるのではなく、取り除くよう努めるべきだ。」と述べています。
もう1点はこれらの規定値が性別に依存するような表現が含まれていない点です。例えば、brotherやsisterではなくsiblingが用いられています。また、XNFは現在の関係を表す為に設計されているので恋人と結婚したり友達と喧嘩別れした場合はいつでも書き換えられるようにしておきましょう。

この記事はジョン･アルソップ著のMICROFORMATSという書籍を元に記載しています。
第2回microformatsのテーマはリンク（<a>）を拡張するマイクロフォーマットです。

• rel-license
• rel-tag
• rel-nofollow
• VoteLinks

上記4種類があります。
これらのマイクロフォーマットはa要素にrelもしくはrev属性を追加するだけで簡単に出来るマイクロフォーマットです。
続きを読む

昨日、大阪の心斎橋にあるアップルストアで行われましたState of the Web 2009に行ってきました。最近、ようやくmicroformatsを勉強しだしているので今回のスピーカーのジョン・アルソップ氏の公演が聞けるのは非常に楽しみでした。

昨日はさっさと仕事を切り上げ6時20分に会社を出て、6時40分ごろにアップルストアに着きました。CSS Niteのときは結構来場者が多くて座れないことが多いので、今回は絶対に座って聞きたかったので早めに行きました。けど、ふたを開けてみればびっくり。恐らく40人くらいしか来ていなくて、遅れてきた人ですら全員座れていました。ハッキリ申しまして、CSS Niteより興味深い内容で楽しかったです。それには自分がジョン・アルソップ氏のファンであるというのもあったかもしれませんが…何せかっこよかった。英語はわからないけど、話し方が日本人とは違って惹きつけられる感じでした。

肝心の内容ですが、昨年12月に全世界のWebに関わっている人に対して行ったアンケート調査の結果報告とそこから見えてくるWebのこれからを考えるというような内容でした。会社のグループウェアでこの会のことが告知されていたのに結局自分以外は誰も来ませんでした。忙しいというのもあるとは思いますが、ディレクターは行ったほうが良かったんじゃないのって思います。デザイナーよりはマークアップエンジニアとかディレクターが聞いて楽しい話だったかなと思います。

その昨年行われたアンケートの回答者のほとんどは英語圏の方で、日本人は10人ほどが回答しただけだったそうです。そしてその方々の職業と言うか役職と言うか役割はディベロッパーが半数くらいで最多でデザイナーは33%ほどだったと思います。5年前にも同様の質問をしたらデザイナーと答えた人は5割くらいいたそうです。今は逆転して開発者と名乗る人が増えました。
そして、どのような企業に属しているかという問いでは、フリーランス、小企業（10人以下）、中企業（50人以下）、大企業（500人以下）、巨大企業（500人以上）がそれぞれ18％前後で同じくらいの割合に割れていました。

その人たちがどんな文書型を採用し、どのようなOSやブラウザを用いて開発していて、どのOS・ブラウザでチェックしているかとか、どんなJSフレームワークを使っているかなど、半年前の話ではありますが、ちょっと前のトレンドについて言及していました。
やはり、開発用途ではFirefoxが一番多いみたいです。また人気のJSフレームワークはjQueryで実に6割くらいの方が使っているそうです。自分はJS全然できませんが趣味のサイトではmootoolsを採用しています。そのほかにも注目のバックエンド技術やそのフレームワークには何を使っているか、世の中の流れ、トレンドを追うにはいいお話が聞けました。重ね重ねこんな貴重な会で参加者が非常に少なかったことについてなぜか憤りを覚えてしまいます。特にうちの会社のディレクターが来なかったことには怒りを感じてしまいますね。

その中で特に印象に残った話はmicroformatsとprogressive enhancementです。
その二つは言葉自体知っていましたし、ジョン・アルソップ氏が著したmicroformats本も会社経費ではなく個人的に購入して勉強中です。ここでmicroformatsの概念を説明するのはよしますが、5月12日付でGoogleが一部のmicroformatsのインデックス化をしたということを教えてもらい衝撃を受けるとともに興奮しました！コンタクト情報やレビューをしかるべきフォーマットで記載するとGoogleが検索結果に載せてくれるのです！これは開発者にとっても閲覧者にとっても非常にうれしいことです。例えば閲覧者（検索者）はmicroformatsの本のレビューを見たいと思い、Googleで検索。すると、microformatsのレビュー記事だけを抜き出して表示することが可能なので検索効率がかなり上がります。また、開発者（レビュー作成者）にとってもレビュー記事がひとつの場所に集められることはそれだけ自分の書いたレビュー記事が人の目に触れやすくなることを意味しています。
microformatsはGoogleやYahoo!やAppleやmicrosoftなど大企業が積極的に採用していこうとしているものです。今からでも遅くないのでマスターしたほうがいいでしょう。ちなみにブラウザのFirefox3やIE8にはmicroformatsを読む機能は備わっています。FxではUIが決まらずに表には出てきていませんが、Operatorというアドオンを使えばmicroformatsの力を実感することができるでしょう。

もうひとつ、progressive enhancementとは段階的拡充と訳されるもの（microformatsの本ではこう訳されていましたが、お気に召さないようで何か言い訳し方があれば連絡してほしいとのことでした）で対応しているブラウザには積極的に最新技術を取り入れていこうという試みです。（この理解で間違いではないですよね？）というのは、仮にですがネットスケープを使っているユーザーに対してはCSSが反映されないプレーンテキストの状態で表示して、IE6は普通にCSSやJSで装飾されたサイトを表示させ、Firefox3やSafari4（beta）などのモダンブラウザに対してはCSS3やJSを使いインタラクティブなサイトを表示させるということです。
アンケートにもありましたが、全てのブラウザで同じように表示させるのが正しいWeb制作と考えている人が22%ほどいましたがそれはもう古臭い話であって、OSやデバイス、ブラウザなどの環境によって見え方は違うのだからそれは割り切って、新しいものを積極的に採用していくというのが今風の考え方です。自分はクライアントワークで新しいものを取り入れて行ってはないですが、趣味の範囲内など使えるところではCSS3など使って行きたいと思っているタイプでもちろん環境によって表示が違うのは当たり前と思っています。（ジョン -馴れ馴れしい- も同じ考えのようです。）
今回、話には出てきませんでしたがCSS2.1を基準に作り、それへの対応が未熟なブラウザ向けに劣ったデザインをするTranscendent CSSという手法もあります。例えばStuff and Nonsense | Creative web site design specialists based in North Wales, UKというサイト。このサイトをモダンブラウザとIE6で見たときでデザインが違います。ある種Web制作者の自己満足とも言えますが、これを作ろうとした発想と技術力が素晴らしいと思います。このブログの新しいテーマは鋭意構想中なのですが、これらのテクニックを駆使したテーマを制作したいと考えています。

その他、CanvasやSVGなどにも言及していて、自分はその名前は知っていますが、理解まではしていません。これらの技術や他のHTML5とCSS3でFlashを使っていないのにFlashばりのインタラクティブなコンテンツを作れるようになるそうです。まだ、先述しましたが、JSフレームワークではjQueryが圧倒的に多く、これを採用してJSの勉強も進めるべきだと提唱していました。確かに4月のCSS Niteに出演された山田さんもjQueryからJSに入って今では凄いjQueryプラグインを作って楽しい動きのあるサイトを作っていらっしゃるようです。
また、バックエンドではPHPが多いけれど、今からはじめるのはPythonが面白いのではとのことでした。その理由はGoogleが採用しているから。

とにもかくにも非常に刺激を受ける内容でした。
このような刺激を社内でも受けられたら…最悪この公演についてあーだこーだ言える人がいたら良かったのですが…今後の仕事・自分のキャリアについて不安が募るばかりです。
くよくよしていても仕方が無いのでこの刺激を推進力にしてさらに勉強してよりよい環境に身をおけるよう自分の実力をアップさせたいです。
このような機会を設けてくださったジョン・アルソップ氏、通訳してくださったサトシタカシ¹・キクチ氏、オリ氏…本当にありがとうございました。予期していないことで小心者のために懇親会に参加できなかった自分が情けないです。またこの3人のお話を聞きたいと思います。ジョンの大阪大好きという言葉を信じ次の機会を待ちます。（自分の力で機会を作れるようできる限り頑張ります）。皆さん本当にありがとうございました。楽しかったです。

同じ場にいた方々の記事

• デベロッパーとディレクター &laquo; When you were young
• John Allsoppの「State of the Web」を聞いてきた。 – What did coyummy eat?

東京版に参加した方々の記事

• State of the Web 2009 | ヨモツネット
• きゅーり.jp: State of the Web 2009 に行ってきた

1. お名前間違えていました申し訳ございません… [↩]

これから連載形式で更新していこうと思っています。よろしくお願いします。
第1回はmicroformatsの概念のさわりなどを…

microformatsとは

microformatsは2005年ごろに提唱されたもので、HTMLでは意味づけしきれないものをclassやrel、rev属性を用いて既存のHTMLを小さいフォーマットで拡張するというものです。
microformats自体は自由に策定できます。何か良い案がある方はWikiにて提案してみてください。
現在、オープンになっている仕様はコンタクト情報をマークアップするhCard(vCardが元になっています)やイベント情報をマークアップするhCalenderなど9種類（Wikiを参照してください）。その中でもリンク先に重みをつけないためのrel-nofollowをご存知の方も多いのではないでしょうか。
続きを読む