その表現力に驚かされる!「Chrome Experiments」でHTML5を体験する

Chrome Experimentsは、2009年3月に開設されたGoogleによるデモンストレーションサイトである(図1)。当初は、JavaScriptで記述されたツールやビジュアライゼーションなどが公開されていた。当時のGoogle Chromeで、これらを実行することでいかに高速に動作するかを確かめることが目的であったが、それから1年半、Google Chromeもバージョン6がリリースされ、HTML5の実装も行われた。Chrome以外のWebブラウザも、HTML5の実装を進めており、近いうちにはごく普通の環境となることが予想される。

本稿では、Chrome Experimentsで公開されるエクスペリメンツを動作させ、HTML5の世界を体験してみたいと思う。Google Chromeは以下からダウンロードできる。

The Wilderness Downtown

まずは、The Wilderness Downtownを試してみたい(図3)。

3D Canvas、video、audioなどのHTML5の技術が使われ、さらにGoogleマップやストリートビューなどと連携して、非常に高度なWebページを実現している。[Launch Expriment]をクリックすると、The Wilderness Downtownが起動する。まずは起動画面である(図4)。

ブラウザ内に鳥を模した影が現れたり、消えたりする。しかも、マウスの位置に反応し、逃げるように動きが変化する。次いで、画面中央にある入力ボックスに住所を入力する。本稿の例では、東京都庁前を入力した。自宅や勤務先の住所を入力してもおもしろい。音楽とビデオの再生が開始される。ここのでも鳥の影が現れ、音楽に合わせ動く。

Googleマップやストリートビューの映像も同時に再生される(図6、7)。

これらの再生もそのままではなく、エフェクトなどが加えられている。これらの再生が終わると、何も表示されていないウィンドウと小さな3つの映像ウィンドウが表示される。何も書かれていないウィンドウに、マウスで描画を行うことができる。そして、その動きにあわせ、下の3つの映像ウィンドウの動画が再生される(図8)。

Googleの各種機能と連携し、HTML5を使ったエクスペリメンツである。

Refrections

このエクスペリメンツは、3Dオブジェクトをマウスを使って回転させることができる。

先ほど同様に、[Launch Expriment]をクリックする。回転する3Dオブジェクトが現れるので、マウスを使って操作する。オブジェクトやテクスチャーを選択できる(図10)。

他のブラウザでは?

現在、著名なWebブラウザがHTML5の実装を完了、もしくは進めている。Google Chrome以外のWebブラウザで実行可能かを試してみた。ここでは、Firefox 4.0β6で試してみた。

結論からいえば、動作するものもあるが、しないものもあった。ちなみに冒頭のThe Wilderness Downtownはうまく動作しなかった。これは筆者の推察であるが、HTML5の実装というよりもGoogle APIなどの問題に思えた。

さて、Chrome Experimentsを駆け足で紹介したが、いずれも「動き」のあるものがほとんどである。ここに集められたエクスペリメンツはいずれも秀作ぞろいである。できれば実際にGoogel Chromeで実行してみると、よりそのすばらしさが体験できると思う。このように、実際にHTML5で作られたWebページを見ると、その表現力に本当に驚かされる。Webアプリケーションなどもどのようなものが登場するのか、実に楽しみである。