デザインテクノロジーの最前線 - 桐山孝司

m.c.t.ホーム > エクスペリエンスマガジン > デザインテクノロジーの最前線 - 桐山孝司 > 次世代HTMLの進化

2009.11.10次世代HTMLの進化

現在のHTMLの次世代となるHTML5の仕様案が確定しつつある。正式な勧告になるには2012年頃までかかる見込みだが、実装は先行していて、すでに主要なブラウザでHTML5が部分的に使えるようになっている。今年6月のGoogle Developer Day 2009 Japanでも基調講演のテーマの一つにHTML5が取り上げられるなど、かなり期待されているようである。

HTML5の特徴の一つはメディアの扱いが増えることである。 これまでビデオや音声のファイルをHTMLに埋め込むことはできたが、再生にはFlash PlayerやQuickTime Playerなどのプラグインを呼び出す必要があった。それに対してHTML5で新しく導入されるvideoタグとaudioタグでは、ブラウザが直接再生するようになる。再生や停止の位置を指定する方法も検討されていて、それを使うとビデオや音声データの特定の部分を切り出せる。ビデオの「この場面」というような指し示し方ができるので、ウェブ上のビデオや音声データとテキストとがこれまでよりも密接につながることになる。

また以前から各ブラウザで導入されていたcanvasタグも今回の仕様に含まれる。従来のHTMLではデータをリアルタイムでグラフにしようとすると、Flashなどのプラグインを使うか、またはサーバ側で画像を作って送信しなければならなかった。それがcanvas要素を使うとブラウザの側で画像を作れるようになる。またマウスで絵を描くようなインタラクティブな操作もできる。その他にも、ベクターグラフィクスを描画するSVGや、数式を表示するMathMLなどの視覚要素もHTML5で使える予定である。

HTML5のもう一つの特徴は、アプリケーションを作るためのプラットホームの役割を意識していることである。menu要素やprogress要素を使うと、デスクトップアプリケーションのようなインタフェースを作ることができる。HTMLのアプリケーションというと心もとなさそうだが、今のアプリケーションは様々なツールやウェブ上のリソースの組み合わせでできているので、ブラウザをインタフェースとしてそれらの機能をうまく組み合わせれば立派なアプリケーションになる。たとえばデータを読み込んで表形式で表示し、メニューから変更を加えてファイルに保存するような作業も、OSとの橋渡しをするフレームワークを使ってブラウザの中で実現できるのである。

また、これまでウェブのセッションではデータを保存するのにクッキーを使うしかなかったが、複数のウィンドウが同じクッキーを共有すると作業が混乱したり、クッキーが毎回送られるので大きなデータは保存できないという問題があった。それに対して、永続的なデータのためのlocalStorageを使うと、ブラウザを開くときに前に保存したデータから再開できるようになる。データ関連の仕様はDOM StorageとしてHTML5から分離されたが、こちらも平行して標準化の作業が進められている。

現在のHTML4.01の勧告は1999年に出されているので、HTML5はそれから実に10年が経っていることになる。W3Cはその間、HTMLをコンピュータで解釈しやすい構造にするための形式化の作業をしてきた。その先にはウェブ文書の意味を機械が理解して賢い検索をするセマンティックウェブの将来像もある。しかし現実にはウェブがクラウドコンピューティングのようなアプリケーションを実行する環境になり、HTMLの役割も文書だけではなくなってきた。W3Cが描いたウェブを現実の世界が追い越していったともいえる。

HTML5の仕様案を作成しているWHATWG (Web Hypertext Application Technology Working Group)には、Safari、Firefox、Opera、Google Chromeといった主要なブラウザのベンダーが参加しており、これまでに現実的なニーズから開発されてきた機能を標準化しようとしている。その中にはどのビデオフォーマットを標準にするかといった点でベンダーの思惑も影響するが、大きくは標準化がこれからのウェブアプリケーションを進歩させる方向に作用するであろう。

これからネットブックのような環境では、ブラウザがOSに取って代わってアプリケーション実行環境となることも起きそうである。モバイル環境という新しいニーズが展開する場もあり、ブラウザを中心にしたアプリケーション開発は活発になっていくだろう。ブラウザがウェブだけでなく様々なアプリケーションにとってのユーザエクスペリエンスに関わってくるという意味でも、今後の動向を見ておきたい分野である。


frames.png

Mozillaが開発しているウェブベースのテキストエディタ・アプリケーションBespin。
Canvas要素を使ってテキストを表示しているが、数万行のテキストでもスムーズにスクロールできる。