新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。
まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。
ページ全体のマークアップの骨格を画像にしてみました。
mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。
microformatsについて知ったのはだいぶ前のWeb Designing誌の特集だったと思います。その頃はほとんど参考資料がありませんでしたが、現在は日本語にも対応しているmicroformats.orgのWikiが充実してきているようです。
まず、microformatsとはなにか。microformats.orgの説明を引用するとこんな感じ。
Microformatsとは、Webサイトで人やイベント、ブログ記事、レビュー、タグのような共通して公開されているものを記述する際に用いるマークアップパターンです。
分かったような分からないようなという感じですが、そのmicroformatsの拠り所となる概念としてさらに「POSH」というものがあるそうです。
POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。
この説明だけではまた分かりにくいですが、「意味的な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を書くことは重要」ということが言いたいのです。より具体的には、単に見出しタグやリストに気をつけるだけじゃなく、「意味的なクラス名」を積極的に付けていこうということです。（続く…）
半年ほどちんたら更新してきた当ブログですが、前回の記事には意外にも反応があってびっくりしています。コメント本当にありがとうございます。
改めて前回の記事を見返してみて、「正しい」という表現が適当じゃなかったかもしれません。別段、定義リストを使ったコーディングにたいして、おまえは間違っていると糾弾するつもりはないんです。個人的に嫌だなと思うだけで。まぁ好みは色々あるでしょうし。
ここで前回「よろしくない」と例に挙げた新着ニュースリリース部分のコーディングを再度ご紹介。
<dl id="news"> <dt>2009.06.02</dt> <dd><a href="~">ニュースのタイトル</a></dd> <dt>2009.06.01</dt> <dd><a href="~">ニュースのタイトル</a></dd> </dl>
制作の現場では複数人数でのコーディングが当たり前、客から突然仕様変更を言い渡されることも当たり前です。たとえば上記のコーディングで突然、ニュースのカテゴリもテキスト表示してくれとなった場合。ddをもう一つ追加するわけですが…
<dl id="news"> <dt>2009.06.02</dt> <dd class="category">製品情報</dd> <dd><a href="~">ニュースのタイトル</a></dd> <dt>2009.06.01</dt> <dd class="category">採用情報</dd> <dd><a href="~">ニュースのタイトル</a></dd> </dl>
CSSには当然ddに対してスタイルが設定されているので、どちらかにクラス名を追加しなきゃならない。場合によっては両方につける羽目になり、CSSも一部書き直し…。それは嫌だからddの中にspanを挿入する？ システムが組みあがってからこういうマークアップ上の変更をするのは結構めんどくさいです。
と言うことを考えると、最初から出来るだけ細かく、各要素には意味のあるクラス名をつけておくのがよい、というわけです。CSSも見やすくなります。
#news dd {
・・・
}
と書かれていたのでは、いったい何に対してスタイルを設定しているのかCSSだけを見ても分かりませんが…（まぁなんとなく分かりますが）
#news .entry-title {
・・・
}
こちらの方がより、自分のあとにCSSを触る人に対しても親切です。
でも「意味のあるクラス名」の付け方にはどういう基準があるのか？ この基準がないと、class名を考えるのに無駄な時間を使ってしまい、かえって効率的ではなくなってしまいます。
そのヒントになりそうなのがMicroformatsというわけなのですが、徹夜の開発中なのでまた次回…
XHTMLのマークアップでどうしても許せないというか、気になるやり方をよく見かける。
企業サイトではトップページに最新ニュースの一覧が表示されていることがよくあるが、その部分がかなりの確率でこのように書かれている。
<dl id="news"> <dt>2009.06.02<dt> <dd><a href="~">ニュースのタイトル</a></dd> <dt>2009.06.01<dt> <dd><a href="~">ニュースのタイトル</a></dd> </dl>
要は定義リストを使っているわけだが、これが「正しいコーディングである」と誰かが提唱しているのだろうか、ほんとによく見るんですが、定義リストの本来の意味からは大きく外れているのが気になるんです。
DTDではdl要素について「definition lists – dt for term, dd for its definition」と注釈があります。この文面通りに受け取れば、上記のコーディングは2006年6月1日についての解説がリンク先にあるということになってしまうが、もちろんそのようなことはないはず。
では、どのようにコーディングすればよいのか。僕がもう少しましだと思うのはこういうマークアップです。
<div id="news"> <span class="updated">2009.06.02</span> <span class="title"><a href="~">ニュースのタイトル</a></span> <span class="updated">2009.06.01</span> <span class="title"><a href="~">ニュースのタイトル</a></span> </div>
数字は更新日時のことで、文字部分はタイトルであるということが明白ですね。
でもまだ問題があります。どこからどこまでがひと固まりであるのかはっきりしません。
さらに修正してみましょう。
<div id="news"> <div class="entry"> <span class="updated">2009.06.02</span> <span class="title"><a href="~">ニュースのタイトル</a></span> </div> <div class="entry"> <span class="updated">2009.06.01</span> <span class="title"><a href="~">ニュースのタイトル</a></span> </div> </div>
最初のコーディングとだいぶ変わりましたね。そして、RSSやAtomのフィードのソースにかなり近づいたと思いませんか？ XHTMLはXMLでもあるので、同じXMLであるRSSと似ているというのは、個人的には「より正しいマークアップである」と思います。
さらにもうひと工夫すれば、機械的にもこの部分が新着記事であると理解できるようになります。そのうちMicroformatsという考え方についてご紹介したいと思ってます！