Tech Drive-in - Technology, Linux, Ubuntu FTW

主要ブラウザの対応が進んでいることもあり、HTML5の技術を活用したデモンストレーションサイトが増えている。現在主流の技術と互換性が高いことから、すでにHTML5を採用すべきという意見もある。ブラウザの更新頻度は早まる傾向にあり、HTML5/CSS3の対応は日進月歩で進んでいくことになるとみられる。

HTML5やCSS3のデモンストレーションサイトやテクニック紹介ブログはこれまで何度も取り上げてきた。15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash - Tech Drive-inにおいて、HTML5デモンストレーションサイトがまとめられており参考になる。中にはこれまでマイコミジャーナルで取り上げたサイトも含められている。紹介されているサイトは次のとおり。リンク先がそのままデモンストレーションページになっている。

  1. HTML5 Demo
  2. HTML5 Ball Pool Demo
  3. SublimeVideo HTML5 Video Player
  4. Interactive Photo manipulation HTML5 Demo
  5. Fireworks
  6. Kaleidoscope
  7. Drag and Drop functionality demo
  8. Particles in Motion
  9. HTML5 Canvas
  10. Video Blow-up
  11. Cloth Animation 3D
  12. Google Images Gift Box
  13. SmallTalk
  14. Breakout
  15. Catch the Square

HTML5 Ball Pool Demo - ボールのシミュレーション。ボールはドラッグ&ドロップが可能で、ほかのボールにあたって相互に動きをみせる

Fireworks - 入力した文字を花火で描いていくデモンストレーション

Particles in Motion - マウスの動きに応じて流れる模様デモ

Kaleidoscope - 万華鏡のシミュレーション

Video Blow-up - マウスでクリックするとその周辺の画像が吹き飛ぶ。しばらくするとパーツが動き出して元に戻る

Cloth Animation 3D - 布のシミュレーション。一部をつかんで移動させることが可能。美しい動きをみせる

15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flashのタイトルにもある通り、Flashの代替えとして使えるHTML5デモという位置づけになっており、どのデモンストレーションもインタラクティブに動作するものになっている。開発版など最新のブラウザを使って閲覧することで、HTML5/CSS3/JavaScirptでどういった機能を実現できるのかを確認できる。