HTML5, きちんと。

HTML5, きちんと。masataka yakura

こんばんは。矢倉といいます。

http://www.mitsue.co.jp/

Web標準Bloghttp://standards.mitsue.co.jp/

OperaWeb標準カリキュラムhttp://dev.opera.com/articles/view/801

Web Designing2009年11月号(10月17日発売)

「HTML5&CSS3でWebは変わるのか？」

監修しました →(11月21日発売)

「プロクリエイターの作例に学ぶ

XHTML+CSS達人テクニック」

本日のテーマ：HTML5

まだまだ情報が少ない。

背景や目的についてもある程度は知ってて欲しい。

HTML5とは？XHTMLはどうなる？もうひとつの目的HTML5の新機能

HTML5のセクション勧告はいつごろ？どう使っていくか

HTML5とは？

「Webプラットフォーム」その中核をなす仕様。

HTML4やXHTML1は「文書」の作成が目的だった。

HTML5では新たに「アプリケーション」が加わる。

これまでのあゆみ

1998年2月

XML 1.0が勧告。

W3CはXMLへの移行を計画。

HTMLは段階を経て

XMLに移行するプランに。

XHTML 1.0 ― HTML4をXML化

XHTML 1.1 ― 機能を細分化

XHTML 2.0 ― 新しく作り直し

2002年～ブログが普及しだす。

「XHTML+CSS」が広まる。

ほとんどが text/htmlXMLとして使われなかった。

Webアプリが台頭し

今のHTMLでは機能不足に。

新しい機能の実現に

XMLの普及を待つ必要がある？

2004年6月

W3Cのワークショップにて

ベンダー「HTMLの拡張を！」

W3C「うちではやりませんがお好きにどうぞ。」

Apple, Mozilla, OperaWHATWGを立ち上げる。

ベンダーによって

HTMLの拡張が始められた。

ベンダーが関わった仕様は開発者から評価を得ていく。

2006年10月

Tim Berners-Leeのブログにて

It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML […] all at once didn’t work.― Tim Berners‐Lee: “Reinventing HTML”

「XMLへの移行はいっせいには進まなかった。」

2007年3月

新HTML WG設立。

WHATWGと協力して

HTML5の策定をスタート。

2009年5月

Google I/Oで大プッシュ。

少しずつ実装も進んでいる。

XHTMLはどうなる？

XHTML2 WGが

2009年末で活動終了と発表。

XHTML 2.0は終了。

でも、XHTMLはなくならない。

HTML5はXMLとして

扱うことも可能（XHTML5）

HTML5のHTML構文でも

「XMLっぽく」書けるように。

<img> ← 今までのHTML<img /> ← こっちもOKに！

※ 混在もできます。

というわけで、ご心配なく。

Misunderstanding Markuphttp://standards.mitsue.co.jp/resources/mm_comic/

もうひとつの目的

「機能の拡張」もあるけれど「互換性」も重要なテーマ。

1. ブラウザーの互換性

Webアプリの開発には

JavaScriptやDOMが不可欠。

クロスブラウザー対応は厄介。互換性に問題がある。

非互換を生む2つの「ない」

実装がない。→ 対応状況が異なる

仕様がない。→ 実装に違いが生まれる

実装はベンダー依存だが仕様は定義して対応できる。

HTML5では詳細な処理規則を定義。

2. 既存の実装との互換性

今のブラウザーやサイトとも互換性をある程度は保つ。

大きな変更はできないが今の環境を捨てずに済む。

互換性を持つことで

Webを段階的に進化させられる。

HTML5の新機能

APIの追加やマークアップの拡張など。

スクリプトから画像を扱う。応用はさまざま。

Bespinhttps://bespin.mozilla.com/

<canvas>で作られたエディタ。

Chrome Experimentshttp://www.chromeexperiments.com/

最新技術のショーケース。

<img> みたく、簡単に動画・音声を扱えるように。

<video src=“intro_html5.vid”><a …> ダウンロード </a>

</video>

プラグインじゃないので

CSSやSVGと組み合わせが可能。

マークアップ

マークアップにも数多くの拡張や変更が。

<canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...

よく使われるclass/idを要素として採用する。

定型句はよりシンプルに。

<!DOCTYPE html>

古いブラウザーでも機能する。

フォームの拡張も。

<input type=email ...><input type=range ...><input type=color ...><input type=datetime ...>...

名前 (必須)：

メール (必須)：

サイト内検索：キーワードを入力

HTML5のセクション

文書構造をより明示的に表せる。

<section>章や節などの、ひとまとまり

<section><h3> section 要素 </h3><p> 章や節などを表す。</p>...

</section>

<section><h3> nav 要素 </h3><p> 主要なナビゲーションを表す。</p>...

</section>

<section><h3> article 要素 </h3><p> 自己完結するセクションを表す。</p>

<section><h4> サンプル </h4>...

</section>

</section>

<nav>主要なナビゲーション

<nav class=“global”><ul><li> <a ...> ホーム </a><li> <a ...> お知らせ </a><li> <a ...> HTML5 Niteって？ </a><li> <a ...> これまでのNite </a><li> <a ...> お問い合わせ </a>

</ul></nav>

UAが<nav>を利用することでアクセシビリティも高まる？

<article>記事など、自己完結するセクション

<article class=“entry” id=“vol40”>

<h2> CSS Nite in Ginza, Vol. 40 </h2><p> 4周年記念となるVol.40では… </p>

<section><h3> 事前登録について </h3>...

</section>...

</article>

フィードの<item>や

<entry>などをイメージ。

<aside>補足的な情報や、サイドバー

<section><h2> nav 要素 </h2><p> 主要なナビゲーションを表します。 </p>

<aside><p> 海外では「navi」よりも

「nav」の方が多いみたいです。</p></aside>

</section>

セクションと見出しからアウトラインができる。

<article><h1> HTML5 のセクション </h1><nav> ... </nav>...<section><h2> nav 要素 </h2>...<aside><h3>「navi」ではなく「nav」</h3>...

</aside>...

</section>...

HTML5 のセクション

(見出しなしの目次)

section 要素

nav 要素

「navi」ではなく「nav」

article 要素

aside 要素

見出しだけでもアウトラインはできる。

<h1> HTML5 のセクション </h1>

<h2> section 要素 </h2>

<h2> nav 要素 </h2>

<h3>「navi」ではなく「nav」</h3>

<h2> article 要素 </h2>

...

HTML5 のセクション

section 要素

nav 要素

「navi」ではなく「nav」

article 要素

aside 要素

注意！

使い方を間違えるとアウトラインが壊れてしまう。

特に<section>は気をつけて。

<article class=“entry”><header><h2> タイトル </h2>

</header>

<section class=“body”><p> 本文 </p><p> テキストテキスト </p>

</section>

<footer> ... </footer></article>

セクションは意味的なもの。アウトラインを意識して。

レイアウト目的なら<div>で。

勧告はいつごろ？

「2010年9月」とある。でも、むりです。

「勧告」とは？

仕様がすべて実装されすぐに使える状態。

実装が終わるのは？

「2022年」と……

「使えないじゃん！」

そんなことはないです。

たとえば、CSS 2.1はまだ「勧告候補」です。

勧告されていませんが広く使われてます。

実装されている機能から使っていけばいい。

実装の本格的なスタートは「勧告候補」になった時。

2012年あたりになる？

実装状況を知るには？

1. 開発者向けサイト

Mozilla Developer Centerhttps://developer.mozilla.org/ja

Safari Dev Centerhttp://developer.apple.com/safari/

2. 仕様書のステータス表示

どう使っていくか

「実装されてる機能から使え」とは言ったものの……

対応しないブラウザーはどう対処すればよいのか？

1. JavaScriptで対処

ExplorerCanvashttp://excanvas.sourceforge.net/

IEに<canvas>を。

Modernizrhttp://www.modernizr.com/

対応状況をチェックする。

classもつけてくれたりする。

2. 対応度合いにあわせて利用

最低限なものは、全ての環境で。できる子には、高機能なものを。

Progressive Enhancementって言われてるやつです。

placeholder属性無くても不都合はない。

難しいことは確か。

HTML5やCSS3は勧告までとても時間がかかる。

今までと異なる考え方で取り組んでいく必要がある。

今は何をすれば？

実装も出てきたけれど仕様はまだまだ策定中。

「<article>と<section>を区別する必要はあるのか。」

「<section>の誤用が多い。いっそのこと削除しては？」

仕様がドラスティックに変更される可能性も……

使う際には、リスクの認識を。

おわりに

「情報が少ない」といいました。

みんなが使っていく仕様情報はみんなで共有したい。

調べたことをまとめて情報を増やしていって欲しい。

ありがとうございました。

Contact:[email protected]

HTML5, きちんと。

Technology

Transcript of HTML5, きちんと。