HTMLの将来、パート1:WHATWG

WHATWG(Web Hypertext Application Technology Working Group)のHTML改良への取り組み

2つのパートからなるこのシリーズでは、今後のHTMLに関してWeb制作者、ブラウザ開発者や標準化団体が提案しているさまざまな方法をEdd Dumbillが論じます。このシリーズでは、WHATWG仕様で実現される漸進的なアプローチと、W3Cにより提案された急進的なXHTMLのクリーンナップについて扱います。さらに、W3Cの新たなRich Client Activityについても概要を述べます。このパート1ではEddは、WHATWGが開発中であるWeb Applications 1.0(HTML5)とWeb Forms 2.0との2種類の仕様に主に重点を置いて説明します。

Edd Dumbill (edd@xml.com), Editor and publisher, xmlhack.com

Edd Dumbill氏はXML.com の編集長であり、XMLデベロッパーのためのニュース・サイトXMLhack の編集者兼発行者でもあります。Programming Web Services with XML-RPC (O'Reilly) の著者の1人であり、生命科学の知的財産を交換するPharmalicensing の共同設立者兼アドバイザーです。EddはXML Europe コンファレンスのプログラム司会者でもあります。



2005年 12月 06日

HTMLはWebページの制作に必ずしも向いている言語というわけではありません。しかしこれまでは、Webを作るにはとても便利な言語でした。

HTMLは習得し易く、ブラウザ用のview source機能があるため、Web普及の立役者となりました。W3C(World Wide Web Consortium)がHTMLの標準化に関わったことにより、どのWebブラウザもおおよそ同じ方言を実装することが保証されてきました。CSSが現れ、それに応じて標準に基づいたWebデザインが最良の方法として発達したことにより、HTMLの混乱が回避され、ユーザーにとっても開発者にとってもより良いWebの方向性をもたらしました。

これについてはあなたもきっと良くご存知だと思います。その成果であるWebのおかげで、おそらく私達の生活や仕事に良い影響をもたらしてくれたことでしょう。それでもなお、HTMLは必ずしも良い言語ではないという事実は残ります。たとえば、なぜHTMLにはH1からH6の見出しがあるのでしょうか? この6段階の深さの見出し階層を真剣に使った人がいるでしょうか? さらに言うなら、3Dグラフィックスアクセラレータカードと高度なユーザーインターフェイスのこの時代に、Webページのユーザー用入力手段は貧相なテキストボックスとラジオボタンしかないのでしょうか?

そのため、さまざまなグループが、最新のユーザーインターフェイスで用いられているテクノロジーをWebパブリッシングとWebアプリケーションにもっと採り入れてHTMLを再び改良しようと試みているのは当然であります。それは誰のことでしょうか? 広い意味で言って、彼らは3つのグループに分けられます。まず、今日のテクノロジーを使って改良しようとしている人達のグループがあります。今話題のAjax(非同期JavaScriptとXML)では、JavaScriptとブラウザのXMLHttpRequestオブジェクトを使って、動的なユーザーインターフェイスを創造できます。その効果は素晴らしいものですが、今後の標準となるものではありません。

他の2つのグループは将来の改良に向けて的を絞っています。W3Cは、単にデスクトップブラウザのメーカーではなく、広くベンダーの要求に基づいてXHTML 2.0を推進しています。XHTML 2.0は急進的な対策に思えます。それに対して、WHATWG(Web Hypertext Application Technology Working Group)は漸進的な仕様を推進しています。この仕様ではHTMLを発展させて、ブラウザに今最も必要とされている機能を追加します。WHATWGの機能のいくつかはAppleのブラウザSafariとMozillaのFirefox 1.5ですでに実装されています(W3CとWHATWGの詳細については「参考文献」を参照してください)。

この記事では後者の2つのグループ、W3CとWHATWGの取り組みについて論じます。AjaxについてはdeveloperWorksの他の記事で扱っています(「参考文献」を参照)。当初W3CがHTMLを採用したときほどの規模の標準化競争には至っていませんが、これら2つの団体は、HTMLの将来に関しては常に考え方が合っていたわけではありません。両者のアプローチについて説明し、評価しましょう。

WHATWG、HTML 5、およびWeb Forms 2.0

WHATWGのWebページで述べられているように、WHATWGとは「Webブラウザメーカーと関連グループとのゆるやかで非公式な共同作業を目的とし、制作者がWorld Wide Web上のアプリケーションを作成そして展開することを可能にする新しいテクノロジーの開発を目指しているグループ」です。ここで、次の2つの語に関心を引かれます。WHATWGの主力はMozilla、Operaなどのブラウザを作成します。彼らの改良が目指すのは、Webアプリケーションの作成です。

WHATWGの表向きの仕様はコードネーム化したHTML5ですが、より正確にはWeb Applications 1.0として知られています(「参考文献」を参照)。HTML5の目的は現在のHTML標準であるHTML 4.01との後方互換性を保ち、さらにHTMLのXMLバージョンであるXHTML 1.0とも互換性を保つことです。仕様ではW3C HTMLのHTML要素とXHTML要素との両方を保持していますが、実装時は保持しない可能性もあると注記されています。

HTML5に加えて、Web Forms 2.0の仕様(「参考文献」を参照)では、開発者が現状のHTMLフォームについて抱えている不満に対応しようとしています。現状のフォームでは、普通のデスクトップアプリケーションが持つ検証や機能豊富なウィジェットなどの基本的な機能がたくさん省略されています。

では、HTML5には何があるのでしょうか? 手短に言えば、「たくさん」あります。Web Applications 1.0の仕様は進化する獣のようなものです。仕様に述べられている機能のうちいくつかは完全に近いところまで開発されています。新機能までわずか30,000フィートです。

  • レイアウトの新要素。カレンダーの制御、アドレスカード、順応性の高いデータグリッド、ゲージとプログレスメーター、ドラッグ&ドロップ、メニューなど。
  • DOM(Document Object Model)に対応するプログラミング拡張機能。DOMイベントのサーバー送信など。
  • デファクトスタンダードであるXMLHttpRequestオブジェクトの公式化。これはAjaxによる通信の主眼となるものです。
  • キャンバスの要素を使用した動的ビットマップ画像。

これらの機能の多くに、過去から引き継いだものが、現在Web上で使用されているJavaScriptを使って独自のものとして実装されていることがおわかりでしょう。実際、最近人気を博しているAjaxツールキットは、ゲージやカレンダーなどのウィジェットの普及をもたらしました。


キャンバス

HTML5の機能の従来どおりの実装(つまりWebブラウザの一部として)は、今日では上に述べたテクノロジーのほんのいくつかに限られています。その中で最もよく知られているのは、キャンバスの要素です。Firefox 1.5とAppleのSafariブラウザにもキャンバスが実装されています。

W3CのSVG(Scalable Vector Graphics)言語にはブラウザ内に画像を提供する機能がすでにありますが、キャンバスのアプローチはそれとは違います。SVGのように宣言型の文書を実装するのではなく、キャンバスはJavaScriptで描画できる空白面を提供します。命令によるグラフィックのこのモデルは、宣言型のWebよりもOpenGLスタイルの描画方法に負うところがあります。

図1はキャンバスの簡単なデモからのスクリーンショットです(「参考文献」を参照。AppleのSafariブラウザまたはFirefox 1. 5のプレリリース版で見ることができます)。ユーザーが図形の上にマウスを移動すると、図形はゆっくりと大きくなります。このデモでは何よりも、描画、ユーザーの入力イベント、タイマーなど、ユーザーインターフェイスの実装に必要な要素のすべてが適切な場所にあることを示しています。

図1.キャンバスの対話式デモのスクリーンショット
図1.キャンバスの対話式デモのスクリーンショット

キャンバスアプリケーションはその明らかな目標(ゲーム)の一歩近くにすでに進んでいます。単純な3D迷路に応用した例を図2に示します(実際の迷路へのリンクは「参考文献」を参照してください)。

図2.単純な迷路ゲームのスクリーンショット
図2.単純な迷路ゲームのスクリーンショット

単純なコードの例でキャンバスプログラミングをちょっと味わってみましょう。リスト1に示すのは自己完結型のプログラムの例です。その最終結果を図3に示します。

リスト1.キャンバスの単純なプログラム例
<html>
<head>
<title>Canvas demo</title>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById ('hello');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect (25, 25, 50, 50);
}
}
</script>
<style type="text/css">
canvas { border: 2px solid red; }
</style>
</head>
<body onload="draw ();">
<canvas id="hello" width="100" height="100"></canvas>
</body>
</html>
図3.リスト1の出力
図3.リスト1の出力

キャンバスは宣言セマンティクスを提供しないので、アプリケーションの応用分野は他のどこよりもユーザーインターフェイス実装エリアになるでしょう。キャンバスの目的として魅力的なのは、ブラウザの新しいインターフェイス要素と機能の雛型としての応用です。この最良の例は、Antoine Quintによるキャンバスを使ったSVGの部分的実装です(「参考文献」を参照)。Quintの手法を使って、SVGを埋め込んだHTMLファイルを表示するには、彼のJavaScript SVGレンダラーをインポートする数行を追加すれば良いのです。図4は彼の手法を使って表示したお馴染みの虎の画像です。

図4.JavaScriptとキャンバスの要素を使って表示した虎のSVG画像
図4.JavaScriptとキャンバスの要素を使って表示した虎のSVG画像

キャンバスがWeb設定の主流において有用であることは時間が証明してくれるでしょう。その機能はJavaアプレットの機能にいくらか似ていますが、JavaScriptインターフェイスのおかげでキャンバスの方がはるかに他のブラウザ要素を使い易く、インターフェイスも容易になっています。


Web Forms 2.0

WHATWGフォームの仕様のバージョン番号は、それがHTML4のフォームの仕様に基づいて作られていることを示しています。Web Applications(HTML5)仕様とは対照的に、成熟期に入っています。Web Forms 2.0の視野はより限られていて、何よりもブラウザで使えるフォームウィジェットの改良を目指しています。

この改訂された新フォームに追加された機能のうち、特に次のようなものが挙げられます。

  • フォームの送信前にブラウザによるチェックを可能にする検証構文。新たな属性にはrequired、min、maxなどがあります。
  • 検証に対するDOMのサポート。フォーム要素に対する検証属性および新たな無効イベントを含む。
  • フォーム要素のオートコンプリートの制御。ブラウザがフィールド値を記憶してオートコンプリートするかを文書制作者が示すことが可能になります。リスト属性を使い、事前定義値を渡すことができます。
  • 自動フォーカス属性。文書を読み込んだときにどのフォーム要素が入力フォーカスを受け取るかを示します。
  • 入力モード属性。テキストを保持するフォーム要素に適切な言語入力モードを示唆します。
  • ファイルのアップロード制御の改良。予想したファイルタイプとファイルサイズ制限の指定など。
  • テンプレート化したフォーム要素の反復使用
  • 新タイプの入力制御。日時、番号、範囲、Eメール、URLなど。入力値制限パターンの追加。

Web FormsはHTML5に比べて一貫性の高い仕様で、すでに次のような実装例があります。

  • Opera 9のベータ版はWeb Forms 2.0をサポートしています。
  • Web Formsのオープンソースプロジェクトは、Internet ExplorerにDHTML+Behaviorsを実装しています。

W3Cが次世代のフォームとして挙げているのはXformsです(「参考文献」を参照)。XformsがWeb Forms 2.0と異なるのは、ブラウザとサーバーとの対話の新たなモデルをXML文書の受け渡しに基づいて開発した点です。これに対してWeb Forms 2.0は、現在のブラウザのフォームをより使い易くする目的で、既存のフォームモデルを漸進的に更新したものです。これら2種類の仕様はそれぞれ異なるニーズに対応していますが、明らかな共通点もあります。Web Formsの仕様には次のように述べられています。

この仕様で試みているのは、広く実装されている既存のフォームモデルへの影響を最小限に抑えながらXformsの機能のいくつかを追加することです。論理的に純粋であることよりも、後方互換性、容易なオーサリング、容易な実装を必要に応じて優先しました。

その他の実装

キャンバスはブラウザに実装可能なWHATWGの主要な機能です。HTML5のその他の機能はまだ初期段階にあり、その全体が実装されることはないかも知れません。

しかし、Web ApplicationsとWeb Formsの仕様は、それらが最初に現れたときにはおそらく予想されなかった重要な意義を帯びるようになっています。この数ヶ月の間に、Webアプリケーション用のユーザーインターフェイスツールキットを開発するフル機能のプロジェクトがいくつか発足しています。こうした実装ではHTMLに加えてJavaScriptのテクノロジー、またはFlashを使っています。彼らの多くが、最初から作り直すのは無駄なこととみなし、たとえばフォームの実装など、WHATWG仕様の標準化の面に目を向けているのは当然と言えるでしょう。


結論

Web Forms 2.0仕様は、ニーズが目に見えて多く、また仕様が完全であるという理由で、実装される可能性が高く、標準として承認される方向に進んでいます。実際Web Forms 2.0はW3Cのコメントを得るべく提出されました。その効果は、その占める位置を示すとともに、WHATWG共同製作者に対する防壁を築くことにもなります。

しかし、WHATWG仕様のみからHTMLの一貫した将来像を描くのは困難です。各部分のいくつかは単にXMLHttpRequest、キャンバスなど、現在の技術革新について記述しているだけですし、他の部分はあいまいで実装者からの同様の推進力を欠いているように見受けます。さらに、HTML5の目標は主にアプリケーションを中心にしたデスクトップの用途です。今やPC以外の装置にもとても多くのHTMLが見られます。そこにも進み行く方向を示す必要があるのです。

HTML5に規定されたより高度なアイデアのいくつかは、Ajaxベースのブラウザインターフェイスツールキットの普及に伴い、もはや過去のものとなってしまったように思えます。拡張性の高いツールを使えるのに、文書に指定されたウィジェットに限定されて満足する開発者がいるでしょうか? より高度なWebインターフェイスを標準化するのは委員会ではなく市場であることは当然の成り行きでしょう。

キャンバス、XMLHttpRequestなど、広く実装されながらまだ標準化に至っていないテクノロジーについて書くに際して、進歩が見られたことを嬉しく思います。この記事が、こうした重要な機能の相互運用性に寄与することを願っています。ブラウザのテクノロジーを前に進めるためには、HTML5をもっと明瞭なものにする必要があります。3つの仕様に分けられ、今利用できる機能、間もなく利用できる機能、まだ構想段階の機能をもらさずカバーすれば、HTML5は発展していくでしょう。

参考文献

学ぶために

製品や技術を入手するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Web development
ArticleID=243233
ArticleTitle=HTMLの将来、パート1:WHATWG
publish-date=12062005