CSS Nite Vol.40

/web/seminar

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

CSS Nite Vol.40 見てきました。タイトルは「HTML5、きちんと。」 by 矢倉さんです。やはりNiteは初心者向けということで、ブラウザ実装や仕様の根幹に関わるコアな話題はできなかったようですが、落ち着いた進行でありながら良く練られた構成であり、何故か今さらガンガン盛り上がっているHTML5の背景と、仕様策定の方向性みたいなものが感覚的に理解できる、とても有意義なセッションでした。

いや本当にすっきりしました。今まで何となく集めていた情報と併せて、全体の雰囲気みたいなのが掴めたように思うので、個人的には大満足です。

感想としては、やはり仕様の策定にベンダーが力を持つようになってきたということ。実装が加速しているメリットと、仕様が固まらないうちに矢継ぎ早に導入していく危うさというか、それらが事実上の標準と化してしまったときに、どう対応されるのか？ 興味がつきないですね。HTML 5 WG というものが、そもそもXMLへと向かう仕様と実装の乖離を受けて立ち上げられたというお話だったので、それはそれで「こういうのが受け入れられた！」と巧く取り入れるのかもしれませんが。

以下、まとめというか議事録。

歴史的背景

もちろんHTML5の仕様は昔から考え続けられてきた訳ですが、実際、今年の６月まで殆ど誰も知らなかった。それが急にホットな話題に転じたのは、Google I/Oが火種ということ。

そもそも HTML 5 はどうしてできたのか。どういう背景の下にできたのか。
だいたい10年前、XML1.0の勧告まで遡ります。

  1. XML1.0 勧告
  2. XHTML1.0 HTML4をXML化
  3. XHTML1.1 機能を細分化
  4. XHTML2.0 新しく作り直し（XMLを前提とした仕様）

これが当初の予定。Web上の文書として広まったHTMLを、XMLへ移行させよう！ というプロジェクト。ただ、これが巧くいかなかった。XHTMLそのものはブログの普及によって広まったが、殆どがtext/htmlとしての利用であり、XMLとしては使用されなかったということ。

memo: IEが「application/xhtml+xml」を解釈しなかったからかなー、と個人的には思う。XMLとして扱いたがった制作者そのものは多かった。

memo: ちなみに僕がWeb業界に入ったのは、WaSPとXHTML+CSSネタが最高に熱かった時期。良いタイミングだった。これは第2世代？

特にある種の分水嶺であったのが、2004年に登場したGmail。これはUIにAjaxを多用したサービスで、この辺からいよいよWebサイト（というかWebサービス）が単なる文書の集合というより、アプリ/プラットフォームと化してきた現実が強く出てくる。「読むサイト」から「使うサービス」が台頭してきたわけだ。

で、Webがいろいろな使われ方をされていく。制作者が実装に求める要望は多くなっていく。なのでXHTML1.0のままでは機能が足りなくなっていく訳だけど、仕様の方向としてXHTMLはXMLへの過渡期であるから、XMLの普及を待たないことには新機能の拡張は行われないという、アカデミックな壁にぶち当たる。

そこにきて一向に反映されない制作者のニーズに業を煮やした（？）Apple/Opera/Mozilla連合はWHATWGを立ち上げ、この辺りからベンダーがHTMLを拡張していくようになる。こうして実現していった幾つかの仕様は、ユーザのニーズを反映しているだけに確かに使いやすく、多くの制作者に受け入れられていく。

そうして暫くたった後、Webの創設者 Sir Timがボソッと呟く。

XMLへの移行は、すぐには成功しなかった（意訳）

というわけで発足した新HTMLWG は WHATWGと協調。文書としてのXHTMLから、プラットフォームとしてのHTML5へ。アプリ向けのAPIや詳細な実装用件も定義し、既存の実装を巧く活かす形での仕様の策定を始める → Google I/Oで大プッシュ → 現在に至る。

いっぽうXHTMLは

XHTML2.0は終了しました。

しかしXHTMLという枠組みは残ります。HTML5として。どういうことかというとHTML5はXMLとしても書けるので、HTML5をXMLとして書いた場合は「XHTML5」と呼ぼうと、そういうことらしい。

  • 今までのHTMLは<img ...>と書かなくてはいけなかった
  • これからは<img />という書き方もできるようになる

参考: “Misunderstanding Markup” 日本語訳

memo: HTML5を「application/xhtml+xml」で公開すれば自動的にXHTML5になるし、既存のXHTMLのDOCTYPEを「<!DOCTYPE html>」と変えればHTML5になるよと、そういう話らしい。

JavaScriptやDOMの話

実装がない
対応状況が異なる
仕様がない or 仕様はあるが中身がない
実装に違いが生まれる

これが現状。
HTML5では、処理規則をきっちり決めて仕様を作っている。 前方互換を考えて注意深く仕様を決めていく。

memo: 特にDOMに関して、HTML5では言語の基礎として全ての要素/属性に対してガッチリ定義しているので、とても良いと言う話を良く聞きます。JavaScriptでの要素へのアクセスに対して、ブラウザ互換に悩まされることが無いわけです。

HTML5の新機能

疲れたので以下てきとー。気が向いたら直す。

まずAPIの追加

<canvas>
JavaScriptを介して画像を動かす。
<video> <audio>
<img>みたいなノリで動画や音声を扱えるようになる

んで、マークアップの拡張について

直感的なマークアップを対応
<div id=“header”> → <header>, <section>
定型句は簡潔に
  • <!DOCTYPE html>
  • <meta charset="UTF8">
  • 「古いブラウザでも動作する」実装から採用
フォームの拡張
  • type=email/range/color/datetime (Operaで実装されている？)
  • input type="text" ... required />
  • input type="search" placeholder="キーワードを入寮" /> (Webkitで実装)

HTML5のセクション

<section>
章や節などの、ひとまとまり
入れ子にするとサブセクション
<nav>
主要なナビゲーション
UAが<nav>を解釈することでアクセシビリティが向上する可能性
見出しはなくても良い (「ナビゲーション」て見出しは不自然)
<article>
自己完結型
フィードの<item>や<entry>などをイメージ
<aside>
補足的な説明
本筋ではない内容。ヤッターマンで言うところの「説明しよう！」
<section>の使い方は特に注意
アウトラインを重視する。レイアウト目的ならdiv使おう
  • ×: エントリの本文部分だけsection (見出しが必要)
  • ×: <header>直で<section> (無駄なサブセクション)
2010年9月に「勧告」
無理です
勧告 = 仕様がすべて実装されて、「すぐに使える」状態
実装が終わるのは？
2022年だと...
CSS2.1
勧告候補
勧告されていないのに広く使われている
開発者向けのサイト
仕様書に「進行状況のステータス表示」が付くようになった
対応していないブラウザに対処するには？
Progressive Enhancement という考え方
placeholder属性 → 無くても不都合はない
仕様がドラスティックに変更される可能性
使う際にはちょっとリスクを意識してほしいです

どうでも良いけど、矢倉さん的「Last call for comments」な発音がめちゃ格好良かった。リスペクトしたい。

Follow‐up

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。