$ \DeclareMathOperator{\arccosh}{arccosh} \DeclareMathOperator{\arcsinh}{arcsinh} \DeclareMathOperator{\rank}{rank} \DeclareMathOperator{\rot}{rot} \DeclareMathOperator{\grad}{grad} \DeclareMathOperator{\diver}{div} $

HTML5 (canvas, video) デモ

web 上の文書を記述する標準的なフォーマットである HTML(HyperText Markup Language) ですが、その新規格である HTML5 が W3C(World Wide Web Consortium) によって作成されています。
現在 (2010/04) はまだ Working Draft(草稿) の段階ですが、 2010/09 にも正式なものが勧告されるそうです。
HTML5 の目玉は、巷でも噂されているように、Adobe Flash などでしか実現できなかった"リッチな"コンテンツを JavaScript を用いて簡単に記述することができるということです[1]
本記事では HTML5 の新機能を使った、いくつかのサンプルプログラムを紹介したいと思います。
なお HTML5 はまだ草稿の段階の新しい規格であり、すべてのブラウザが対応しているわけではありません。 対応状況については様々なブログやウェブサイトで検証が行われているので、詳しくはそちらを参照してください。
私が検証した中で最も優れていたブラウザは、
◎ Google Chrome
です。 もちろん Chromium (browser) もほぼ同じです[2]。 サポート状況もいいですし、動作速度も他のブラウザと比べると軽いです[3]
一方ダメダメなのは、
× Internet Explorer
です。 おそらくここのサンプルは全部動かないでしょう。 そもそも Internet Explorer(以下IE) は W3C の勧告にあまり従っておらず、他のブラウザならきちんと表示されるのに IE だけダメなことが多々あります。 だからといって見捨てていいほどシェアが少ないわけではないので、多くのサイトが通常のブラウザ用のコードの他に IE 特化のコードを書いているようです。
他のブラウザ (Firefox や Opera など) も比較的対応状況はいいようです。 もしだめだったら Google Chrome でためしてみてください。

[1]ただし現状ではブラウザの対応状況が悪いなど、完全に置き換えることはできていません
[2]…同じなのですが、 video 要素は Chrome は両方 OK だったのに Chromium は Ogg+Theora+Vorbis の方しか表示されませんでした…。 Ubuntu Lucid のリポジトリにあったものを使ったのですが、ここら辺の細かい挙動はビルドオプションによって変わるのかもしれません
→ (2010/05/01追記) chromium-codecs-ffmpeg-extra パッケージをインストールしたら両方とも表示されるようになりました。 free なコーデックのみのパッケージと、 free でないコーデックを含むパッケージに分けて配布しているみたいです…
[3]所詮はスクリプトなので絶対的に見れば遅いですが…

1Canvas element

HTML5 の canvas 要素を用いたサンプルです。
キャンバスエリアをダブルクリックすると PNG 化した画像が新しいウィンドウで開きます。
なお、ソースコードはここにまとめておいてあるので適宜参照してください。

1.1Life Game

Conway のライフゲームというやつです。 初期配置はランダムに決定します。
Generation:
Lifes:
[ START | STOP ]

1.2Graph Plot

グラフを描きます。 数式は JavaScript が認識する形で入力してください。
EXPRESSION:
X-RANGE: -
Y-RANGE: -
Color:
[ DRAW | CLEAR ]

1.3Metaball

注意: 処理が非常に重いため、ブラウザが反応しなくなることがあります。 自己責任でお願いします m(__)m
[ START | STOP ]

1.4Same Game

さめがめ、または鮫亀とよばれているパズルゲームです。 ルールを知らない人は Wikipedia でも参照してください。
POINT: 0
[ NEW GAME ]

1.5Fifteen Puzzle

いわゆる 15 パズルです。 問題を適当に作ってしまうと二分の一の確率で解けない問題ができてしまうので、そのような場合ははじいている *つもり* です。
また 画像は「ウィキペたん」といって、ウィキペディアの非公式な萌え擬人化キャラクタです。 画像の詳細はこちら
なお、ギャラリーから敢えて猫耳少女版を選んだことに関して深く詮索することを禁止します。
STEPS: 0
[ NEW GAME ]

2Video element

2011/02/25 追記:
WebM 形式の動画を追加しました。 WebM は Google の開発しているオープンな動画フォーマットであり、 HTML5 の標準フォーマットを目指しているとされる規格です。 正確には WebM はコンテナフォーマットであり、動画部分のコーデックには VP8 を、 音声部分には Vorbis を利用しています。 VP8 がオープンソース化されることがアナウンスされたのが 2010/05/19 であるなど、 比較的最近注目されるようになったフォーマットとのことで、早速サンプル動画を作成してみました。
なお作成元の画像を紛失してしまったので、他形式の動画も再作成しました。 またそれに伴いファイル名の変更および下記文章の修正を行いましたのでご注意ください。
HTML5 の video 要素を用いたサンプルです。
上のメタボールのサンプルがとても動くレベルではなかったので動画化してみました。
720p の HD 動画としてエンコードしてあるのでファイルサイズが大きく(40-60MiB 程度)、 回線が細い人は読み込みに時間がかかるかもしれません。 また低スペックな PC ではコマ落ちする可能性があります。
動画ファイルへの直リンク: 順番にコンテナフォーマット、動画コーデック、音声コーデックをあらわしています。
また音楽についてはファルコム音楽フリー宣言に基づき使用させていただいております。
ちなみにすべての動画フォーマットに対応しているのは Google Chrome くらいで、他のブラウザはこれらのうちどれかひとつだけだったりします。 その理由として、H.264 や AAC は free な技術ではなくライセンスに関して問題がある、 WebM は比較的新しい技術なので未対応、 Theora は圧縮率や品質などが劣る、 などの理由が考えられますが、将来的にどう落ち着くのかは今のところ何ともいえません。

2.1Ogg, Theora, Vorbis


音楽提供: 浮遊島 《イルバード》 / ZWEI 2 ORIGINAL SOUNDTRACK / Copyright © Nihon Falcom Corporation

2.2MP4, H.264, (F)AAC


音楽提供: 浮遊島 《イルバード》 / ZWEI 2 ORIGINAL SOUNDTRACK / Copyright © Nihon Falcom Corporation

2.3WebM, VP8, Vorbis


音楽提供: 浮遊島 《イルバード》 / ZWEI 2 ORIGINAL SOUNDTRACK / Copyright © Nihon Falcom Corporation