HTML5 ウェブブラウジングの未来？

 ウェブブラウジングの未来？HTML5の高機能ぶりを実感できるデモ9つ

 

これまで、ブラウザ上でリッチな映像コンテンツを表示するためには、アドビ社の「Flash（フラッシュ）」やマイクロソフト社の 「Silverlight（シルバーライト）」といった外部プラグインをブラウザとは別にインストールする必要がありました。
しかし、 HTML言語の最新バージョンである “HTML5″ を使用すると、前述したようなベンダー製ソフトウェアを使わずに、ブラウザのみで多様な映像表現を実現することが可能となっています。
この 度、多機能ブラウザ “Firefox” などで有名なモジラ社のエバンジェリスト・David Walsh氏は、ブログ上でそうしたHTML 5のデモアプリを挙げています。以下、それらの高機能なデモについて、簡単に紹介してゆきたいと思います。

端末やブラ ウザなどを変えて色々なパターンを試しましたが、モバイル環境からはデモの再生が出来ませんでした。それぞれのデモを視聴する際は、PCからの再生を推奨 致します。

 

1. Zen Photon Garden

デモエリア内に描画すると、中央の光源から発生する光束を遮断・もしくは反射する「シールド」 を作ることができます。拡散・反射・透過のパラメー ターを変更することで、様々な光の広がり方を設定することが可能になっています。

 

デモの再生はこ ちらから。

2. Tear-able Cloth

非常に軽い感触のメッシュ状オブジェクト上でマウスを左クリックすると三次元状的に形状を変化させ ることができ、右クリックで穴を開けることが可能 です。メッシュのたわみ方は、穴の大きさや位置によって動的に変化します。

デモの再生はこちらからどうぞ。

3. Particles

相互に結合された、カラフルに明滅する無数のオブジェクトがエリア内をランダムに移動します。通常ならばかなり 負荷のかかりそうな映像ですが、非常 にスムーズに再生されている印象を受けます。

デモの再生はこちらからどうぞ。

 

4. Motion Graphic Typeface

非常に微細なドットを、これまた非常に細いラインで相互に結合したオブジェクト。 言葉では説明しづらいので、実際にご覧になってみてください。

 

デモの再生はこちらからどうぞ。

 

5. Motion Graphic Typeface Ⅱ

4のものと同種のモデルですが、こちらでは基本素子が三角形となっており、よ りデジタルな効果を出しています。こちらも、実際にご覧になられるとイメージがよく伝わるかと思います。

デモの再生はこちらからどうぞ。

 

6. Gestures + Reveal.JS

Kinectと同様の ジェスチャー操作機能を、ウェブカメラからの映像認識により実現してい ます。

7. Canvas Rider

ライダーをキーボード操作でゴールまで 導くブラウザゲームです。組み込みの物理エンジンによ り、非常にリアルな動きを実現しています。（私も実際にやってみましたが、結構ハマるかもしれません…）

デモの再生はこちらからどうぞ。

 

8. 30,000 Particles

マウスカーソルが置かれた位置を中心として微粒子が円状に排除されます。マウスが移動すると、 サークル状の空乏エリアが微粒子をかき分けながら移動します。

デモの再生はこちらからどうぞ。

 

9. HTML5 Video Destruction

再生中の動画を左クリックすると、その場所を基点に映像がブロック上にはじけ飛ぶ 仕掛けになっています。はじけ飛んだブロックピース上でも映像の再 生は続いており、しばらく放っておくと元の形に戻ります。

 

デモの再生はこちらか らどうぞ。



以上、お仕事などで役立ちそうな機能はありましたでしょう か？HTML 5をベースとした「Firefox OS」や「Tizen」などのモバイル向けOSを搭載した製品が年内にも発売されると噂されていますが、こうした映像表現をモバイル環境からスムーズに動 作させることが出来るようになった暁には、スマートフォンの勢力図も変わってくる可能性があるかもしれませんね。


[The David Walsh Blog via THE VERGE]