Andrew Hoyer's Blog

How I Learned to Walk - experiment!においてCSS3とHTMLを使って制作されたデモが公開されている。ChromeまたはSafariなどのWebKit系ブラウザで動作するデモページで、対応するブラウザでアクセスすると歩く男がレンダリングされる。歩く男の下にある「Show」というリンクをクリックするとワイヤーフレームでのレンダリングになる。対応していないブラウザでアクセスすると、直立している男性が表示されるだけで、歩き出したりはしない。

How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - Chrome 8 / Windows XP

How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - Chrome 8 / Windows XP

このデモはWebKitのCSS3トランスフォーム(-webkit-transform)とアニメーション(-webkit-animation-*)を活用して開発されている。当初はJavaScriptも併用することになるだろうと考えていたと説明があるが、最終的にはCSS3とHTMLのみで構築できたと説明されている。実装の詳細はHow I Learned to Walkで説明されている。基本となるアイディアは次のとおり。

  • 体の各パーツをツリー構造のdivで表現する。
  • 画像はそれぞれのdivの背景画像として指定する。
  • divツリーの順序を工夫することで重なりを表現する。
  • パーツ以外にも制御用のdivを加えることでいくつかの問題に対処する。

How I Learned to Walk - experiment!でレンダリングされる「歩く男」は若干動作に不自然さがあるものの、それなりに自然に歩いているようにみえる。この鍵は、CSSトランスフォームが要素に対して適用されること、そしてその子要素に対しても同じように適用されるところにポイントがあると説明がある。

How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - iPhone 3GS

How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - iPhone 3GS

How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - iPad

How I Learned to Walk - Andrew Hoyer's Blog デモの閲覧例 - iPad

How I Learned to Walk - experiment!はiPhoneやiPadから閲覧した場合にも表示される。これはCSS3やHTML5を適用する事例として興味深い。HTML5やCSS3の機能は魅力的だが、PCのブラウザは多種多様で、これら機能を実装していないブラウザを使っているユーザが大半を占めている。時間とともに対応ブラウザを利用するユーザが増えるものの、長年に渡って対応しているユーザとしていないユーザの双方をサポートする必要があるという煩わしさがある。

しかしこれはiPhoneやiPadとなると事情が違ってくる。これらデバイスのOSはPCのブラウザよりもアップデートが迅速に実施される傾向にある。Netcraftは現時点におけるHTML5の普及率を1%ほどと報告しているが、iOSなどを搭載した特定のデバイスに対してはこれよりも高い比率でCSS3やHTML5などの機能の適用が進んでいく可能性がある。