HTML5 Examples

HTML5は、2008年にW3C草案が発表されましたが、最近になってようやく、各種ブラウザの対応が実用的水準に追いついてきました。そこでこのサブサイトでは、HTML5の各種の技術を利用したExampleを展開し、HTML5の全体像を把握して頂けるように試みます。グラフィックス関係から出発し、順次、内容を追加していきます。

参考:HTML5とは何か

Example 1 – CSSアニメーション

PCの時代では、Flashがリッチな音響・映像コンテンツの唯一の解でした。ところが、スマートデバイスの時代になると、Flashは主役ではなくなりました。iOSでは、そもそもFlash基盤がありませんし、Androidでも、v4.1以降Flash Playerが供給されなくなりました。

状況から推測するに、AdobeはFlashの将来性を見きっているようです。といっても、この状況がFlash技術者の失業を意味するのではありません。Flashグラフィックスの開発技術は、HTML5グラフィックスの開発技術とかなり重なっています。Adobeとしては、Flash技術者をHTML5技術者に移行させようと考えているようです。

HTML5では、いくつもの画像モーション技術が利用できます。それらを組み合わせると、Flashに代わるノンプロプライエタリなWebグラフィックスが実現できます。

トップページに表示しているモーション画像(夜空の星)では、次にあげる2種類のアニメーションを使っています。

  • Canvasアニメーション
  • CSS3アニメーション

Example 1では、このうちCSS3アニメーションについて解説します。

Example 2 – Canvasアニメーションの基礎

Example 2では、Canvasアニメーションの簡単な例を紹介しながら、Canvasについて解説します。

Example 3 – 分子動力学アニメーション

Example 3では、分子動力学法を使ったアニメーションを解説します。分子動力学法は、物理シミュレーションのために開発されたんものですが、コンピュータゲームを含む様々なアニメーションに応用されています。

Example 4 – 擬似的3Dグラフィックス

Canvas規格は、現在のところ、3次元に対応していません。そのため、2D上で擬似的に3D描画を行う様々なテクニックが開発されています。ここでは、回転体の性質を使った擬似的3Dグラフィックスについて解説します。

PCやスマートデバイスに搭載されているGPUは3次元に対応しているのですが、まだCanvasの3D対応はまだ実験的レベルです。

Canvas規格とは別に(といってもCanvas要素は使いますが)、「WebGL」が3Dグラフィックスでは先行しています。WebGLはW3Cの規格ではありませんが、W3CはWebGLもHTML5技術のひとつと考えているようです