「Chrome Experiments」でHTML5を体験するという記事が公開されています。
http://journal.mycom.co.jp/articles/2010/10/07/chromeexperiments/
以下、上記URLから本文を引用して紹介します。
Chrome Experimentsは、2009年3月に開設されたGoogleによるデモンストレーションサイトである(図1)。当初は、JavaScriptで記述されたツールやビジュアライゼーションなどが公開されていた。当時のGoogle Chromeで、これらを実行することでいかに高速に動作するかを確かめることが目的であったが、それから1年半、Google Chromeもバージョン6がリリースされ、HTML5の実装も行われた。Chrome以外のWebブラウザも、HTML5の実装を進めており、近いうちにはごく普通の環境となることが予想される。
本稿では、Chrome Experimentsで公開されるエクスペリメンツを動作させ、HTML5の世界を体験してみたいと思う。Google Chromeは以下からダウンロードできる。
図2 Google Chromeのダウンロード
The Wilderness Downtown
まずは、The Wilderness Downtownを試してみたい(図3)。
図3 The Wilderness Downtown
3D Canvas、video、audioなどのHTML5の技術が使われ、さらにGoogleマップやストリートビューなどと連携して、非常に高度なWebページを実現している。[Launch Expriment]をクリックすると、The Wilderness Downtownが起動する。まずは起動画面である(図4)。
図4 The Wilderness Downtownの起動画面
ブラウザ内に鳥を模した影が現れたり、消えたりする。しかも、マウスの位置に反応し、逃げるように動きが変化する。次いで、画面中央にある入力ボックスに住所を入力する。本稿の例では、東京都庁前を入力した。自宅や勤務先の住所を入力してもおもしろい。音楽とビデオの再生が開始される。ここのでも鳥の影が現れ、音楽に合わせ動く。
図5 音楽に合わせ動く鳥
Googleマップやストリートビューの映像も同時に再生される(図6、7)。
図6 ランナーの動きに同期するかのようにGoogleマップも移動、ここでも鳥の影が合成されている
図7 ランナーの回転に合わせ、Googleマップやストリートビューも回転する
これらの再生もそのままではなく、エフェクトなどが加えられている。これらの再生が終わると、何も表示されていないウィンドウと小さな3つの映像ウィンドウが表示される。何も書かれていないウィンドウに、マウスで描画を行うことができる。そして、その動きにあわせ、下の3つの映像ウィンドウの動画が再生される(図8)。
図8 マウスの動きに合わせて動画が再生
Googleの各種機能と連携し、HTML5を使ったエクスペリメンツである。
Refrections
このエクスペリメンツは、3Dオブジェクトをマウスを使って回転させることができる。
図9 Refrections
先ほど同様に、[Launch Expriment]をクリックする。回転する3Dオブジェクトが現れるので、マウスを使って操作する。オブジェクトやテクスチャーを選択できる(図10)。
図10 3Dオブジェクトをマウスで操作
他のブラウザでは?
現在、著名なWebブラウザがHTML5の実装を完了、もしくは進めている。Google Chrome以外のWebブラウザで実行可能かを試してみた。ここでは、Firefox 4.0β6で試してみた。
図11 Firefox 4.0β6でNoise Fieldを実行テスト、正しく動作している
結論からいえば、動作するものもあるが、しないものもあった。ちなみに冒頭のThe Wilderness Downtownはうまく動作しなかった。これは筆者の推察であるが、HTML5の実装というよりもGoogle APIなどの問題に思えた。
さて、Chrome Experimentsを駆け足で紹介したが、いずれも「動き」のあるものがほとんどである。ここに集められたエクスペリメンツはいずれも秀作ぞろいである。できれば実際にGoogel Chromeで実行してみると、よりそのすばらしさが体験できると思う。このように、実際にHTML5で作られたWebページを見ると、その表現力に本当に驚かされる。Webアプリケーションなどもどのようなものが登場するのか、実に楽しみである。
