Web表現 2010

ガイダンス – この授業の方針

September 29, 2010

Webを記述する言語の標準の現状

昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。

HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1
CSS (文書の体裁・デザインを指定する言語) – CSS 2

しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。

HTML (Webサイトの記述言語) の標準化巡る闘争の歴史

HTML年表 AppleInsider: なぜ Apple は HTML 5 に賭けているのか：ウェブの歴史 [Page 2] より

HTMLを巡る標準化の動きは、様々な組織や企業が、それぞれの思惑を抱えながら覇権争いをくりひろげた闘争の歴史でもあります。Webブラウザの開発者、ソフトウェアメーカー、MicrosoftやAppleなどのOSの開発会社、標準化団体などが、それぞれの立場で標準を主張してきました。その結果、HTMLのバージョンの歴史はとても複雑怪奇なものとなっています。

参考：AppleInsider: なぜ Apple は HTML 5 に賭けているのか：ウェブの歴史

長年にわたる闘争の末、数年前にようやくHTMLの標準は落ちつくかと思われました(XHTML + CSS)。しかしながら、現実は予想に反してXHTML 1.0という当初の規格は思うように普及せず、その後継として計画されてたXHTML 2の標準化も途中で頓挫してしまい、最終的に標準化のためのワーキンググループは解散するという事態になってしまいました。

そのため、標準化を巡る流れはおおきく方向転換を余技なくされ、そこでいままでの標準化団体とは別にブラウザのベンター(Apple, Mozilla, Opera, Google) 達が新たな標準化を押しすすめるようになり、その結果XHTML 2.0に代わるものとして提案された規格が、HTML 5 です。

現在 HTML 5 は2012年の勧告(一般に向けて仕様を公開する)に向けて、標準化の仕様策定の作業が続けられています。その機能は徐々に現状のブラウザにも反映され、一部の機能は既に様々な分野で仕様され始めています。しかしながら、現状ではまだブラウザによってその進度は大きな差があります。現状での HTML 5 の進行状況は、◎Chrome、◎Safari、○Firefox、○Opera、△IE8、(× IE6) といったところです。

HTML 5 とは何なのか?

では、HTML 5とは何なのでしょうか。その機能は多岐にわたります。下記の資料がその全貌をわかりやすく解説しているので、参考にしてみましょう。

参考1：Masataka Yakura, "HTML5 & The Web Platform"
参考2：Google Rocks, "HTML5 – Web Development to the next level"

HTML 5 の特徴を要約すると、だいたい以下のような感じになるでしょう。

Webアプリケーションを実現するための、機能の拡張
HTMLに、新しい要素や属性の導入
ローカルの記憶領域、DBとの連携強化
UIの向上 (ドラッグ&ドロップ、FORMの拡張)
地図情報
オーディオ、ビデオの取り扱い
キャンバス (図形の描画)
CSS (文書の要素のデザイン機能) の大幅な拡張

これらの機能の追加により、今まではHTML文書単体では不可能であった様々なリッチなユーザ体験が可能となることでしょう。

HTML 5 になると、古い記述(XHTML 1.0)が使えなくなるわけではない

では、HTML 5 を導入すると、以前仕様していた古い記述方法を仕様することはできなくなるのでしょうか。実は、そのようなことはありません。HTML 5 はいままで普及していた書式、HTML 4.xや、XHTML 1.0 の書式を包括するより広い範囲での記述の仕様となります。いままでの古い記述の方法もまた、HTML 5 に含まれているというイメージです。下記のマンガがこの概念をわかりやすく解説しています。

参考："Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip", (日本語訳)

今学期のイメージリテラシーでのHTMLの方針

以上の点を踏まえて、この授業では以下のような基準で「正しい」HTMLというものを決定していきます。

基本的な文法は、現状普及している XHTML 1 に準拠する。
ただし、現在でも使用可能な機能に関しては、積極的に HTML 5 と CSS 3 に関するトピックスも扱っていく

現在のWebブラウザに配慮しつつ、将来を見据えた標準についても同時に学んでいこうというのが、この授業での基準となります。

HTML 5 の新要素、レイアウト要素を使用する

HTML 5 の導入として、HTML 5 から導入された数多くの新機能の中から、HTML 5 から加わった新しい要素であるレイアウト要素を使用してみましょう。

これまでのHTMLでは、ヘッダーやフッター、サイドメニューなどのページ全体のレイアウトを画面上で実現しようとした場合、古くはtable要素、CSS2によってある程度レイアウトができるようになるとdiv要素といった本来はレイアウトのために考案されていない要素を「裏技」として使用してきたものが、定番の方法として定着してしまっていました。

しかし、HTTML 5 からは、最初からレイアウトに使用することを前提とした要素を使用してレイアウトできるようになました。また、画面のレイアウトをする際には、tableやdivではなくレイアウト要素の使用が奨励されています。またページ制作者にとってもレイアウト要素を使用することで、非常にシンプルにページ全体のレイアウトを行うことができるようになり、とても便利になりました。

実際にレイアウト要素を使用しながら、HTML 5 の利便性を体感してみましょう。