Lesson 02 HTML5の新技術（前編） - HTML5＋CSS3 次世代Webコーディングの超・最新動向・HTML5編

2011.10.17 MON

HTML5＋CSS3
次世代Webコーディングの
超・最新動向

HTML5編

	Lesson 2			HTML5の新技術（前編）
	制作・文			羽田野太巳（有限会社futomi）

HTML5仕様を含めたオープンWebの新テクノロジーは非常に範囲が広い。ここではHTML5を中心とした新しいテクノロジーについて簡単に紹介していこう。

マークアップ

HTML5では、Webページを制作する上で基本となるマークアップがHTML5で大きく拡張された。また旧来から使われてきた要素に加え、近年のWebの用途に合わせて必要とされる要素も数多く追加されている。たとえば、文書構造を決定するための要素、ビデオやオーディオを再生する要素、その他、Webアプリケーションに役立つ要素などだ。

フォーム関連の機能も拡張された。これまで使われてきたテキスト入力フィールドやラジオボタンなどの基本的なコントロールに加え、数値を選択するためのスライダーや、日時を選択するデート・ピッカー【1】、特定の範囲の数値を選択するスライダー【2】、色を選択するカラー・ピッカー【3】など、数多くのフォーム・コントロールが追加され、JavaScriptやプラグインを使わずとも、リッチなユーザー体験を提供できるようになった。

【1】

【1】

【2】

【3】

スタイリング

WebページのスタイリングにはCSSが不可欠だ。そのCSSも最新版であるCSS3 がブラウザに実装されつつあり、多彩な表現が可能となった。

ブロックの角を丸くしたり、背景にグラデーションを入れたり、文字などにシャドウを入れるなどの表現が簡単にできる。さらに、CSS3では変形やアニメーションといった動きも加わった。それは、CSS3Transitions とCSS3 Animations と呼ばれる機能だ。これまでは、コンテンツに動きを与えるためにはJavaScriptやプラグインが必要だった。しかし、CSSによってある程度のアニメーションが実現できるようになった。

【4】はおなじみのSF 映画Star WarsEpisode IVのオープニングをWebで再現したデモだ。音楽とともにテキストが上へスライドしていく。

ここに表示されている文字はビットマップ画像ではない。マウスを使ってテキストを選択することができる。この文字の変形とアニメーションはJavaScriptではなく、CSS3で導入された機能を使って実現している。

このように、CSS3によってWeb 表現というものが大きく変わっていくことは間違いないだろう。なお、CSS3についてはLesson2で詳しく解説していくので、乞うご期待！

【4】Star Wars Episode IV: A NEWHOPE１：http://www.gesteves.com/experiments/starwars.html

マルチメディア

HTML5にはビデオを再生するvideo要素とオーディオを再生するaudio 要素が新たに導入された。マークアップについては後述するが、この要素はただ単にマルチメディア・コンテンツを再生するだけにとどまらない。

これらの要素にはAPIが規定されている。つまりJavaScriptからこれらの要素に組み込まれたメディアを自由に操ることができるのだ。再生や停止はもちろんのこと、早送りや巻き戻し、シークといったあらゆる操作がAPIを通して実現できる。このAPIを活用することで、オリジナルデザインのビデオプレーヤーを作ることすら可能だ。実際、すでにプレーヤーを独自に作り込んだJavaScriptライブラリーが数多く存在する【5】。自ら APIを利用せずとも、こういったJavaScriptライブラリーを通して恩恵を受けることができる。

【5】VideoJS:http://videojs.com/

2D／3Dグラフィックス

Webページに図を描画するにあたって、これまではFlashなどのプラグインに頼らざるを得なかった。しかし、HTML5ではCanvasが導入され、JavaScriptから動的に図を描画できるようになった。もちろん、アニメーションも可能だ。

描画に関してはHTML5 が策定される以前からSVGと呼ばれるテクノロジーが存在している。これはXML形式のマークアップによる描画テクノロジーだ。

SVGはかなり古いテクノロジーにもかかわらず、Internet Explorerに実装されなかったこともあり、これまではWebにおいてはあまり注目されてこなかった。しかし、Internet Explorer 9にSVGが実装されたことにより、今後SVGはCanvasと同様にWebにとって重要なテクノロジーとなるだろう。

CanvasやSVGは基本的に2次元グラフィックス向けのテクノロジーだ。しかし、3 次元グラフィックスを扱うテクノロジーもある。それが OpenGLだ。すでにいくつかのブラウザで実装されている注目のテクノロジーだ。各テクノロジーについて特徴を挙げよう。

Canvas

Canvasが扱うのはビットマップ・グラフィックスだ。わかりやすくいえば、Canvasによって描かれた図は、img要素で表示させる画像となんら変わりはない。Canvasでボタンを描いたとしても、それはボタンとして認識されることはないし、テキストを描いたとしても、それがテキストとして利用できるわけでもない。

しかし、ブラウザ側ではCanvas によって描かれた絵のビットマップ情報を維持するだけでよいため、SVGやHTMLのレンダリングと比べて描画そのものは早い。アニメーションに使うと効果的なので、特にゲームの分野で大きく活躍するだろう【6】。

SVG

SVGは2次元のベクター・グラフィックスを表現するための仕様で、XML形式のマークアップによりさまざまな図を表現する。

SVG はXML 形式であるがゆえに、HTMLと同様に、ブラウザ内部ではDOMツリーが構成される。そのため、描画された個々の要素を操作することが可能だ。これはCanvasとの大きな相違点である。

さらにSVGは拡大縮小に強いのが特徴だ。Canvasはビットマップであるゆえに、描いたものを拡大することはできない。ブラウザの機能で拡大表示しようとすると一般的な画像と同様に粗くなる。

JavaScriptから制御するとしたら、サイズを変えて再描画するしかない。一方、SVGはベクター・グラフィックスであるため、一度描いた図形を自由にサイズを変えて表示させることが可能だ。ベクター・グラフィックスは、描画されている個々の情報を常に保持しているため、ブラウザ側でサイズに合わせてきれいに表示できる。

SVGはグラフや地図などの描画に便利といえるだろう。

【7】のチャートはズーム表示も可能だ。どれだけ拡大表示をしても、文字や図がぼけることなくはっきりと表示されていることがわかる【8】。

OpenGL

OpenGLはCanvasの3D版といってもよいだろう。Canvasは2Dしか扱えないが、OpenGLは3Dグラフィックスに必要な機能が盛り込まれている【9】。

【6】Torus:http://www.benjoffe.com/code/games/torus/

【7】Internet Explorer Test DriveSpider Chart:http://ie.microsoft.com/testdrive/Graphics/BusinessCharts/SpiderChart.xhtml

【8】

【8】

【9】Chrome Experiments WebGL Aquarium:
http://www.chromeexperiments.com/detail/webgl-aquarium/?f=webgl

ネットッワーク

Webアプリケーションにおいては、通信系のAPIは重要だ。すでにAjaxでおなじみではあるが、HTTP通信を非同期で行うXMLHttpRequestは、いまとなってはなくてはならない存在だ。

そして新たに、これまでのWebテクノロジーだけでは難しかった通信技術が導入された。それらについても簡単に説明しよう。

Server-Sent Events

Cサーバ・プッシュという用語を聞いたことがあるだろうか。通常、HTTPはクライアントからサーバに対してリクエストを送り、サーバからレスポンスを受ける仕組みだ。つまり、通信のトリガーはクライアントが引くことになる。しかし、何かしらのイベントをサーバがクライアントに送信し、クライアントはそれを待ち受けるような用途も数多く存在する。これをサーバ・プッシュと呼ぶ。

Server-Sent Eventsは、このサーバ・プッシュを実現するためのAPIだ。

Server-Sent Eventsでは、クライアントからサーバに対して接続を行い、あとは待機する。その後は、サーバが逐次所定のフォーマットでデータをクライアントに送信する。クライアント側では、JavaScriptを使ってそのデータを受信する。

Server-Sent Eventsはこれまで使われてきたHTTPプロトコルを使うため、サーバ側は一般的なHTTPサーバを利用できる。そして、ブラウザがServer- SentEventsのAPIさえ実装すればサーバ・プッシュを実現することができる。これはすでに、Opera、Safari、Chromeの最新版であれば利用可能だ。

WebSocket

WebSocketはクライアントとサーバの間の双方向全二重通信を実現するテクノロジーだ。

HTTPはオーバーヘッドが大きいプロトコルである。そのため、細かいデータを頻繁に送受信させたいシーンにおいては非常に不効率といえる。

WebSocketは、一度クライアントがサーバとコネクションを確立すれば、それ以降のデータ送受信にかかるオーバーヘッドは最小限に抑えられるよう設計されている。データ受信の遅延が最小限に抑えられることから、通信ゲームなどでの利用が期待されている。

WebSocket は、Server-Sent Events とは異なり、新たに専用のプロトコルが規定されている。そのため、既存のWebサーバですぐに利用することはできないが、すでにさまざまな WebSocketサーバが公開されている。クライアントとなるブラウザも実装が始まっており、Firefox、Opera、Safari、 Chromeがサポートしている。とはいえ、WebSocketプロトコルはまだ仕様が安定していないこともあり、 2011 年2 月現在、Firefox と Opera はWebSocketのAPIがデフォルトで利用できない設定で出荷されている。

プロトコルの規定さえ安定すれば、サポートが再開されるだろう。

オフライン

Webを語る場においてオフラインという言葉はふさわしくないと思われるだろう。ところが、HTML5にはオフライン、つまりネットに接続できない状況でもWebアプリケーションを動作させる仕組みが導入されている。

Application cache API

HTML5で導入されたApplication cache APIとは、オフライン時にも動作するために必要なファイルをキャッシュさせる仕組みだ。このAPIを使ってキャッシュされたファイルは、ネット接続が切れた状態でも、あたかもオンラインであるかのようにブラウザからアクセスできる。

オフライン機能は、ネット接続が切れたときのためだけではなく、Webページのパフォーマンス向上にも役立つ。たとえば、iPhone などのスマートフォンでGoogleの各種サービスにアクセスしてみるとよくわかるだろう。

一度アクセスしたことがあれば、ページのファイルがキャッシュされるため、その後は瞬時にページが表示される。地下鉄などで試してみるとわかるが、ネットが接続できない状況だとしても、ページが表示されるのだ【10】。

HTML5のオフライン機能は、利便性向上に役に立つ機能といえるだろう。