グラフィカルウェブ
もはや多くの方がご存知ですが、HTML5ではグラフィック系の機能が大きく進化しました。
例えば Canvasという機能を利用すれば、2Dのビットマップグラフィックを自由自在に制御できます。動的なグラフ、ゲーム、アニメーション、画像の加工など、Canvasの応用範囲は実に広大です。さらにWebGLという技術を使用すれば、Canvas上で3Dグラフィックを実現することもできます。
一方SVG(Scalable Vector Graphics)は、ベクターグラフィックを扱うことのできる技術です。ベクターグラフィックですので、ズームしても画質が劣化しないだけではなく、Canvasに比べてインタラクティブなUIを作りやすいという特性があります(内部的にDOMを持つため)。
また、CSSの表現力も一昔前とはケタ違いです。割と複雑なアニメーションなども、プログラミング(JavaScript)なしで実現出来るだけではなく、描画処理をブラウザ任せにできることから、高速なアニメーションが期待出来ます。
グラフィカルウェブの例は、枚挙に暇がありません。
Canvasを使用したデモは、「 canvasdemos」というサイトが海外にあり、数多くのサンプルやゲームが公開されています。 ほかには例えば、エキスパートNo.23の高橋登史郎さんが作ったccchartというライブラリは、Canvasを使用したグラフ描画ライブラリです。
ccchart
WebGLを使用したデモは、「 Chrome Experiments」というサイトに「WebGL Experiments」というコーナーがあり、そこで多数のデモが公開されています。 一つ例を挙げるなら、Pitts Special Demoなどは、驚くような完成度を持つ3Dフライトシミュレーションです。
Pitts Special Demo
さらに、SVG(Scalable Vector Graphics)というテクノロジーを利用すると、ベクターグラフィックを扱うことができます。 本サイトの運営を手伝ってくださっている面白法人カヤックさんが、以前手がけた「SVG女子」は、SVGをふんだんに使用したアニメーション作品となっています。
SVG女子
CSS3を使用したすごいデモは、こちらのまとめが役に立ちました。スーパーマリオなんかも、JavaScriptを使わずにCSSのみで表現できちゃう。
CSSのみで作られたマリオ
マルチメディアウェブ
HTML5では、videoやaudioと言った要素を使用して、動画や音声の再生をプラグイン無しで行えるようになりました。 その後もマルチメディア系の機能は進化し続けていて、「動画の字幕を表示する」(
例えば、YouTubeはすでにHTML5を用いた動画再生に対応しています。youtube.com/html5 にアクセスし、「HTML5仕様版を有効にする」をクリックすると、以降はYouTubeの動画がHTML5を用いて再生されるようになります。
YouTube HTML5 動画プレーヤー
Appleが公開している、HTML5ビデオを用いたデモ。Appleさんも、昔はHTML5に物凄く肩入れしていたんですけどね・・・
AppleによるHTML5ビデオのデモ
JavaScriptで音声操作を実現する、「「Web Audio API」のデモを集めたページ。例えば以下のJAM with Chromeは、友人とドラムセッションを行えるというデモアプリです。
JAM with Chrome