HTML5 でウェブはアプリケーションプラットフォームに（その3）

上野学

2009年8月10日

HTML5 とは

最近 HTML5 という言葉を技術系のメディアなどで盛んに見かけるようになりました。HTML5 とはその名のとおり、W3C が仕様策定を進めている HTML の次世代バージョンです。しかし一般的に HTML5 と言った場合には、単なる HTML のバージョンというよりも、周辺技術仕様を含めた「次世代ウェブ標準」といった広い意味で捉えられるようです。

この10年ほどで現れた様々なウェブの（主にクライアントサイドの）技術、あるいは標準化候補として作られたいくつかの草案をとりまとめるような方向で、HTML5 および周辺技術の標準化策定が進んでいるのです。

次世代ウェブ標準の内容

次世代ウェブ標準技術では、新たに次のようなことが可能になります。

1. HTML

新たにいくつかの文書構造を表現するマークアップ要素が追加され、よりセマンティックに HTML ドキュメントを記述できるようになります。

また、video タグや audio タグによってマルチメディア要素を扱うことができるようになります。ただし何を標準のオーディオ／ビデオコーデックにするかについては、主要ベンダー間での調整が進まず、特定しないことになりそうです。

フォーム関連では input 要素の type 属性が増えたり入力値を制限するための属性が増えるなど、これまで自前で実装しなければならなかったデータ整形やバリデーションの手間が減ることになります。

2. JavaScript

HTML5 で用意される canvas タグと組み合わせて、JavaScript で自由に描画ができるようになります。グラフなどのインフォメーショングラフィックスをクライアントサイドで生成できるようになる他、規定の GUI コントロールを置き換えるような独自のUIフレームワークが実現可能になるかもしれません。

また、位置情報（Geolocation）を扱えるようになったり、クライアントサイドのストレージ（Web Storage）によって柔軟なキャッシュ機能やDBによるローカル環境でのデータ入出力が可能になります。

さらに、JavaScript の並列処理（Web Workers）が可能になったり、ソケットによる通信（Web Sockets）も可能になり、重くなりがちな JavaScript の処理が効率化されます。

3. CSS

次期 CSS については、HTML5 とは切り離して語られることが多いようですが、ウェブのフロントエンドを実現する重要な要素として、これも次世代ウェブ標準の一環といえるのではないかと思います。

次世代 CSS では、フロー式によるレイアウト方法と絶対指定式によるレイアウト方法の中間といえるような「テンプレートレイアウト」によって、より思い通りのレイアウトができるようになります。またボックスモデルのサイズ計算方法を変更するオプションが用意されたり、「マルチカラム」を使うことで float で無理矢理段組みを実現しなくてもよくなります。つまり、読み物としてドキュメントをスタイリングするだけでなく、ユーザーインターフェースとしての各要素を「かっちり」とスタイリングできるようになります。

また「Webフォント」を使えば指定のフォントデータを自動的にサーバーから取得してくれますし、「角丸ボックス」といったこれまで実現に苦労していた（しかし GUI においては頻繁に用いられる）表現も CSS だけで可能になります。

（次世代 CSS のプロパティは、実はすでに多くのブラウザでサポートされています。が、IE の対応が遅れているために、一般にはまだ使うことができない状況といえます。）

一方、ブラウザの独自拡張ではあるものの、CSS Transform の存在も見逃せません。これは CSS を使って簡単なアニメーションやインタラクティブな振る舞いを実現するもので、若干記述方法の違いはあるものの、Safari、Chrome、Firefox といったブラウザでのサポートがはじまっています。これが将来標準化されれば、現在複雑な DOM スクリプティングで実現しているようなイフェクト類が CSS だけで可能になりますので、期待したいところです。

ウェブはアプリケーションプラットフォームに

これらの次世代ウェブ標準を見て分かるのは、ウェブがドキュメントプラットフォームからアプリケーションプラットフォームに変化しようとしていることです。マークアップ言語としての HTML は、そもそもハイパーテキストの世界で文書構造をシンプルに表現するためのものでしたが、次第に高度なサービスやそのための複雑なユーザーインターフェースを実現する技術が求められるようになり、クライアントサイドの標準仕様としてそれらを定義する必要が出てきたと言えます。

新しいウェブ標準では、「HTML」「CSS」「JavaScript」が三位一体となってユーザーインターフェースを構成するというモデルが明確になっていると思います。これらが DOM を介して連携し、ダイナミックなプレゼンテーションと振る舞いを実現します。ですからウェブデザイナーと呼ばれる人々は、HTML と CSS だけでなく、JavaScript（DOM スクリプティング）についても理解を深めておく必要があるでしょう。

一方、次世代ウェブ標準によって直接的に恩恵を受けるのは、ウェブアプリケーションの開発者と、そのアプリケーションを利用するユーザーです。開発者は標準に準拠したコードをひとつ書くだけで、クロスブラウザーで高度なインタラクションを実現できますし、ユーザーはそういった利便性の高いアプリケーションを低コストで使えるようになります。

しかし業務アプリケーション等の開発を請け負う多くの SIer では、現在でも、ウェブ標準（正しい HTML、CSS によるスタイリング、DOM スクリプティング）への対応が遅れていると感じます。次世代ウェブ標準の普及には、それに対応したブラウザの普及が前提となりますが、ウェブベースのアプリケーションを進化させるためには、従来の開発方法に固執するのではなく、可能なところからでも新しい標準を取り入れていくことが望まれます。つまりエンジニアの側でも、「JavaScript」についてはもちろん、「HTML」「CSS」についても理解を深める必要があるのです。

次世代ウェブのユーザーインターフェース

次世代ウェブ標準によって高度なウェブアプリケーションが実現可能になったとしても、我々デザイナーおよびエンジニアは、単にデスクトップアプリケーションと同じ見た目や操作性をウェブブラウザの中に持ち込めばよいというものではありません。HTML はあくまでもドキュメントですから、そこにどうやって JavaScript や CSS といった技術を組み合わせてアプリケーションとしての機能性を組み込むべきなのかという課題について考えていく必要があります。ダイナミックなインタラクションとアクセシビリティをどのように両立するのかという点についても、ノウハウがまだ蓄積されていません。

「次世代ウェブのユーザーインターフェース」の理想像は、様々な試行錯誤の上に、これから形作られていくものです。私たちは新しい技術を習得すると同時に、これまでの表現形式にとらわれない、シンプルかつ合目的性の高い新しいユーザーインターフェースを模索して行かなければならないと考えています。