Hatena::Groupweb

vantguarde

1.31

hgroupが変わるかもしれない

| 22:19

WHATWG Blogで取り上げられたので書いときましょうか。

Various people are unsatisfied with the design of the hgroup element and wish for it to be changed. Some want it to be removed until more research is done. And they may be right. There is some anecdotal evidence that the element is difficult for people to grasp — Bruce Lawson discussed it with developers and Lars Gunther experimented on students. There are a few bugs opened on it and Steve Faulkner is trying to get the HTML WG to do a poll.

そんなに新しい話でもないんですが、hgroupが分かりにくいとか、あまり意味ないよね的な意見が増えているという話です。

hgroupはもともとheaderという要素の一機能で、そのheaderが使いにくかったので分離されたという経緯があります。

そこまで難しいわけではないと思うんですが、hgroupの目的は暗黙的なアウトラインを生成しないように、見出し要素とサブタイトルの見出し要素をひとつにまとめるというものなので、アウトラインの仕組みがなければ特に要らない要素ではあります。なので微妙っちゃ微妙。ただsubheadなんてものを導入するよりはいいと思うんですけどね。基本的には主の見出しがしっかりしてればいいわけであって。

とはいえ、Change Proposalがでても解決までに時間がかかります。あと、すでに結構なコンテンツが出回っていること、そろそろRCが出そうなIE9ですでに(parsingレベルですが)hgroupがサポートされており、仕様側で解決されるころにはリリースされるんじゃないかと思うので、タイミングは全然よくないのですよね。他のブラウザも実装してるわけですし。

header内に複数の見出しがあったら、一番ランクの高いものをexposeするとかにできるといいのかなあ。

9.11

sectionの使い方とセクション三箇条

| 23:13

footerがsectioning contentを内容に持つ事ができるようになったり、“HTML 5”が”HTML5”になって無駄に騒ぐひとがいたりするこの頃ですが、みなさんお元気でしょうか。

で、先ほど素敵な記事がhtml5doctorから公開されました。“The section element”という題のとおり、sectionに関する記事です。

記事では、まずsectionがどんな要素なのか説明しています。じゃあ、ここでもおさらいしましょうか。sectionのキーワードを更新したのでそちらをお読みください。

sectionは便利divじゃない

実は、いつだったか忘れましたが、こんな注釈がつけられました。

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The section element

ざっと訳すと次のようになります。

section要素は汎用的なコンテナ要素ではありません。スタイルシートやスクリプトの都合で要素が必要な場合はsectionではなく、divを使う事が望ましいです。基本的なルールとして、要素の内容が文書のアウトラインにならぶことが明白である場合にのみ、sectionが適切であると考えてください。」

はい、以前「<section id="container">とか書いたやつは悔い改めろ」みたく書いた事があるのですが、そういうことです。

sectionだけがセクションじゃない

なんのこっちゃって話ですが、section以外にもセクションを構成する要素は存在します。article, aside, navです。

以前こんなのを見かけました。

<section>
  <article>
    ...
  </article>
</section>
<section>
  <article>
    ...
  </article>
</section>

ずどーん。正しい場合もあるかもしれませんが、この場合は妙なセクション要素のネストでした。つまり、よく分からないサブセクションができていることになります。article, aside, navもセクションを構成するので、セクションの親子関係がない場合は入れ子にしないようにしましょう。

アウトラインを意識せよ

これも以前言った事があると思うのですが、sectioning contentと見出しはアウトラインを構成します。

ちょっと内容が古いですがご勘弁を。あとで時間をとって修正します。

アウトラインは先行きが不安ではありますが、面白い機能です。確かめたい方はジェフリーくん(誰)作成のアウトライン視覚化ツールを利用しましょう。ちなみに彼は16歳ながらOperaで働くすごいひとです。

セクション三箇条

そして最後に、著者のBruce Lawsonは次のような三箇条を書いています。

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

  • Don’t use it just as hook for styling or scripting; that’s a div
  • Don’t use it if article, aside or nav is more appropriate
  • Don’t use it unless there is naturally a heading at the start of the section
The section element | HTML5 Doctor
  • スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。
  • article, aside, navが適切な場合には、そちらを使こと。
  • セクションの先頭に見出しが自然に存在してない場合には使わないこと。

三つ目がちょっと厳しい気もしますが、これをまもればかなりHTML5に関するマークアップのミスは減るんじゃないかと思います。

アプリケーションやサイトワイドなセクションについては、三つ目が当てはまらない可能性もありますが、それはまた今度。とりあえずみんな読め!

5.31

HTML5でid="header"は何を意味するのか

| 00:54

やる気というのかモチベーションがないので、なんもできてないこの頃。あー

それはそうとですね、今さらなんですが、これ。

なお、idについてはこんなことも書かれています。

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.(HTML5 - 3.3.3.1 The id attribute

簡単にいえば、idは意味を持たない不明瞭な文字列であることが望ましく、これまでのたとえばid="header"のような、特定の意味が導出できるものは好ましくないとしています。

HTML5の特徴(後編) | クリエイティブ・タブロイド withD(ウィズ・ディー)

そう言っているわけではないと思うんですよね。

件の段落を日本語にするならば「識別子は不明瞭*1な文字列となります。特定の意味合いをid属性の値から導くべきではありません。」となります。

識別するための「記号」としてidは使われるので、「id="header"」とあっても、それは「header」という文字列であり、英単語の「header」でも「ヘッダー」でもなんでもないよという意味です。

なので「idは意味を持たない不明瞭な文字列であることが望ましく」とか「たとえばid="header"のような、特定の意味が導出できるものは好ましくない」というわけではありません。

というわけで、これはauthoring conformanceでもなんでもなくて、ただidの値がどのように扱われるべきかを書いてあるだけなのでご注意を。ちょっとミスリーディングなので、ここは修正してほしいところ。

*1:"opaque"ってどう訳せばいいかなあ

noriyo_asanonoriyo_asano2009/05/31 10:58opaque という単語は言語学の用語としても使われていて、その場合は「意味が不透明」と訳されているようです
が、その訳をここで使うのもしっくりこないので、「意味が不定」くらいの感じでどうでしょうか

vantguardevantguarde2009/05/31 15:30おおお!ありがとうございます。(「日本語にするならば」と書いたのもあって「opaqueな文字列」ってぼやかすことも出来なかった)

5.19

microformatsのValue Class Pattern

| 23:02

はいはい。ということで、microformatsに久しぶりに大きな動きがありました。

新しいパターンが追加されて、いろんな問題が解決されるよって話です。

I18n問題

microformatsのいくつかのフォーマットにはi18nに関する問題がありました。要素内容がプロパティの値として使われるものが、ローカライズできないんですね。たとえば tel とか adr のサブプロパティなどがそうです。

<span class="tel">
    <span class="type">Cell</span>:
    <span class="value">090-0000-0000</span>
</span>

この“Cell”の部分をたとえば「ケータイ」とかに変える事ができないわけです。なぜなら「ケータイ」はvCardのサブタイプではないから。とまあ、こういう頭おかしいデザインになっており、i18n的に問題があったわけです。

Value class patternを使うと、次のように書くことができます。

<span class="tel">
    <span class="type">
        <span class="value-title" title="cell"> </span>
        ケータイ
    </span>:
    <span class="value">090-0000-0000</span>
</span>

新たに.value-titletitleを含む要素を入れる事で、値をその要素のtitle属性値から取る事ができるっていうソリューションです。気味悪いですね。

datetime-design-patternも

これを使えば、datetime-design-patternのアクセシビリティに関する問題も回避する事ができるそうです。

<p class='dtstart'>
    <span class='value-title' title='2009-03-14T16:28-0600'> </span>
    March 14th 2009, around half-past four
</p>

.value-titleで”March 14th...”を囲っても構いませんが、BBCなんかはツールチップを問題視してたので、それも回避できることをアピールしたいのでしょう。

マークアップのふしぎ

半角スペースがなぜかある件なのですが、なんかうまく処理してくれない実装があるからとのこと。

ただ、スペースがあってもwhite-spaceとインラインボックスの処理が働いて、このスペースはレンダリングされません。なんというかですが、クレバーですね。。

雑感

telくらいならtel-cellとかでダメなのかなあと前から思っていたりもしますし、これらをまとめて「パターン」で解決するのも、なんとなく手段を間違えているような気がします。あくまで気がするレベルなのでどうでもいいんですが。彼らにとってはabbrの使い方といい、自然なんですかねえ。

「ほぼ空のspanは果たして意味的と言えるのか」っていう問題についてですが、例外なんですかね。まあ、visible metadataというものに固執しなかったのは好かったなあと思います。

ほかにも.valueがあったら、その内容がconcatされるとか、そういう事もいろいろ書いてあります。パターンというにはちょっと複雑かも。

5.14

GoogleのRich Snippets

| 00:42

触れておきますよ。

Today, we're announcing Rich Snippets, a new presentation of snippets that applies Google's algorithms to highlight structured data embedded in web pages.

Rich Snippets give users convenient summary information about their search results at a glance. We are currently supporting data about reviews and people. When searching for a product or service, users can easily see reviews and ratings, and when searching for a person, they'll get help distinguishing between people with the same name.

Official Google Webmaster Central Blog: Introducing Rich Snippets

検索結果にレビューや人の名前があったら、ちょっと違う見た目になるようです。

で、レビューや人についての情報をどうやって判断するかというと、microformatsやRDFaを使うと。書いたら何もしないでも結果に表れるってのは、Yahoo!のSearchMonkeyと違って良いところかなと。

ただ、現在の実装はmicroformats, RDFaともに良くない感じです。結構厳しいマークアップを課すmicroformatsは、それが定義されていないように使われる可能性があります。まあ、コンベンションなのでそこは崩れても良いのかもしれませんが。

RDFaは、自分で好きな語彙を使う事ができず、data-vocabulary.orgで定義されているプロパティのみが対象となるようです。そして公開されているRDFスキーマが良くない感じ。ここは報告しておかないと。

じゃあ、Googleは何も知らないアホ集団か(そしてGoogle叩きへ)みたいな流れになるかというとそうではないです。指揮をとってるのはAppleでMCFをつくって、後にNetscapeでRSSへと発展させたRamanathan V. Guhaですし、ちゃんとしてます。

インタビューも結構面白いですし、今後の向上に期待したいところ。

mCard ― vCard×microdata

| 00:11

HTMLでメタ情報な界隈はよく分からない盛り上がり方をしてますね。

  • HTML5にmicrodataが追加
  • 「セマンティックHTML/XHTML」予約開始
  • microformatsのvalue-class-pattern
  • GoogleのRich Snippets

なんなんでしょうね一体。

さて、microdataですが、“predefined vocabulary”というセクションが追加されました。

数日前にHixieがvCardがどうのこうの言ってたので、なにかやってるんだとは思ったんですが、そうきましたか。

例はないですが、だいたいhCardと同じです。Implied "n" Optimizationも導入されてるので、参考にしたんでしょう。

<section>
  <h2>profile</h2>
  <dl item=vcard>
    <dt>name:
    <dd itemprop="fn nickname">vantguarde
    <dt>weblog:
    <dd><a href="http://web.g.hatena.ne.jp/vantguarde/" itemprop=url>web:g vantguarde</a>
  </dl>
</section>

たぶんこんな感じ。subtypeの書き方とかは、microformatsよりかなり自由に書けそうな感じです(良く読んでないので例は書いてない)。

昨日「reversed DNS labels無しのプロパティは概念の衝突が起こる」って書きましたが、アイテムの型がvcardの場合は特別な処理をさせるようにするんでしょうね。

発展すれば、「itemcom.example.***って書けば、それ以下のラベル無しアイテムはcom.exampleに属する」とかそんな定義も生まれそうな気がします。良いのか悪いのかは解りませんが。

FOAFとDublin Coreあたりが入ってくれると面白いなあ。

Contact: @vant / lepetitcroissant@gmail.com.