HTML、5度目の大改訂

google

Google Waveがプレビュー公開される直前に、「Google Chrome Frame」というプラグインがリリースされています。これは、MicrosoftのブラウザIE向けのプラグインで、IEをGoogleのブラウザChromeに変えてしまうというものです。おおまかに言うと、その理屈は、IEの中にフレームを作ってそこでChromeを動かすというもの。おもな利点は、高速なJavaScriptエンジンとHTML 5の機能がいくつか利用できるようになると言う。ブラウザの中でもう一つブラウザを動かすことを考えると、不思議に思われるかもしれませんが、使ってみると速くなるというレポートもあります。

プレビュー公開が発表されたGoogle Waveでは、IEを使ってログインすると、Chrome Frameをインストールするか、またはIEではなくGoogle ChromeやFirefoxなどを使うよう促すウィンドウが表示されることからも、Google Chrome FrameのリリースはGoogle Wave普及への布石のひとつと言えそうです。

さて、今回注目したいのはHTML 5です。

Webの要となるHTML(ハイパーテキスト・マークアップ・ランゲージ)については、皆さん一度は耳にしたことがあると思います。インターネット・ブームの初期にバズワードにもなっていた「ハイパーテキスト」を思い出す人もいるかもしれません。

HTMLは、通称W3C(World Wide Web Consortium)と呼ばれる標準化団体によってその規格が勧告されています。HTML 5は、文字通りその5度目にあたる大幅な改定版です(現行のHTMLはHTML 4です)。

HTMLには文書の構造を定義するために作られたというルーツがありますが、一方で進化するWebコンテンツに対応する必要にも迫られています。このため、HTMLをXMLで定義しなおしたXHTML(エクステンシブル・ハイパーテキスト・マークアップ・ランゲージ)を挟んで、標準化団体に政変があったりしながら、昨年(2008)の1月22日にHTML 5のドラフト(草案)が発表されたのでした。

その次世代HTML 5では、マルチメディア向けの<audio>や<video>、また2D画像を描画する<canvas>などの新しいタグ(Google I/Oでの印象的なプレゼン)に加えて、API(アプリケーション・プログラミング・インタフェース)も追加されています。たとえば、Webアプリケーションやデータをキャッシュ(PCなどの機器に保存)してオフラインでもコンテンツを稼働させることができるようになるとか。こうなると、Webアプリケーションとデスクトップ・アプリケーションを区別する意味がますますなくなりそうです。HTML 5によって、Webコンテンツで表現できることが広がるのはもとより、Webアプリケーションはより柔軟で身近なものになっていくのかもしれません。(HTML 5 – HTML 4からの変更点

HTML 5は今日現在まだドラフトの状態ですが、すでにFirefox 3.5、Google Chrome 3、Safari 4、Opera 10などでサポートされています。まだ不安定な部分もありますが、例にもれず、すべては進行しながら、部分的に完成しつつ、そして発展しています。今後の動向にwktkです。

追記:上の画像は、この記事のcanvas.htmlを参考に、Googleのロゴの鏡像を下記のHTMLで表示したものです。

<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript”>
function init() {
// img要素を作成
var image = document.createElement(“img”);
// 画像の読み込みが完了したら
image.onload = function() {
var canvas = document.getElementById(“canvas1”);
// 描画コンテキストを取得
var ctx = canvas.getContext(“2d”);
// 画像を描画
ctx.drawImage(image, 0, 0);
// 画像を半透明にし、画像を反転させて描画
ctx.globalAlpha = .4;
ctx.transform(1, 0, 0, -1, 0, image.height * 2);
ctx.drawImage(image, 0, 0);
};
// Googleのロゴ画像のURLをセットし、読み込み開始
image.src = “http://www.google.co.jp/intl/ja_jp/images/logo.gif”;
}
</script>
</head>
<body onload=”init()”>
<canvas id=”canvas1″ width=”300″ height=”300″>
</canvas>
</body>
</html>