MicrosoftがWeb開発者向けカンファレンスのMIX2011で「HTML5ネイティブ宣言」を行なった基調講演。Internet Explorer 9(IE9)の完成度の高さと、幅広いハードウェアアクセラレーション対応をデモする中で、ひときわ大きな歓声を得たコンテンツがある。それが「SVG Girl(日本名：SVG女子)」だった。

　開発したのは日本のKAYAC(カヤック)。カヤックはブラウザ上でJavaScript、HTML5、CSSを開発・共有するWebサービス「js do.it」を提供しているが、そのデモンストレーションの一環としてSVG女子を開発したという。

　SVG女子はベクターグラフィックデータだけで作ったセルアニメ風のコンピュータアニメーション。ベクターグラフィックのため、どのような大きさで描画させても、滑らかな高画質でレンダリングされる。

特設ページのスクリーンショット

　特設ページですでに公開済みだが、日本語環境からアクセスすると4月26日に公開されると表示される。これは東日本大震災の影響で日本語版IE9の公開が遅れたための配慮で、他言語向けにはすでに公開されている。英語版のIE9をインストールするか、あるいは手元の任意のブラウザ(ChromeやSafariでも表示可能)の言語設定で、優先言語の最上位を日本語以外にして該当ページをリロードすれば楽しむ事ができる。

　完全にベクターグラフィックだけのスケーラブルなアニメーションは、他では見たことがないもので高解像度の画面で見ると、なかなか感動的だ。

　カヤック技術部のクリエイター、吾郷 協氏によると「セルをスライドさせるように、JavaScriptで絵を移動させている部分はあるが、基本的に2Dトランスフォーム(変形)機能などは一切用いず、すべてSVG(Scalable Vector Graphics)データのみでアニメーションをさせている」という。

　アニメーションの各コマは、すべて個別のSVGになっており、セルアニメと同様にパラパラとコマを切り替えて表示する仕組みになっている。このためフレームレートは固定で、毎秒10コマのSVGデータを切り替えている。SVGであるため、絵のカスタマイズや動きパターンを変更する事も容易だ。

　SVG女子を1度再生し終えると「Edit Animation」というボタンが現れ、Simple modeとHard Core and Fanatic modeという2つの手法でアニメの内容を変更することができるようになる。Simple modeでは任意のカラーパレットを別の色にできるだけだが、Hard Core and Fanatic modeを選ぶと、js do.itを用いて中のコードを編集し、SVG女子を好きなように変更可能だ。サンプルコードとして、カラーパレットがランダムで変化するコートが入っている。

　日本語版公開の折には、コードをカスタマイズしてアニメの“オチ”を変える「SVG大喜利」やSVG女子のコードを書き換えてオリジナルSVG女子を作る「SVG神モード」という、2つのコンテストを実施予定。前者の賞品は5,000円分のAmazon商品券、後者の賞品はXbox 360＋Kinectのセットだ。

　ほとんどSVGだけで構成されるアニメーションとは随分ユニークだが、きっかけは2010年の7月に日本マイクロソフトから、IE9の進化を体現できるショーケース用コンテンツを作ってほしいという依頼から始まったという。ちなみに、他のいくつかの作品はIE9のβ版が発表されたときに、beauty of the webで公開された。

　このときに日本マイクロソフトから、HTML5/CSS3/SVGを活用することや、新しいJavaScriptエンジンのパフォーマンス活かしたものであること。また、他ブラウザとの互換性と相互運用性を訴求できるものをということで、“世界を驚かす日本らしいコンテンツ”ということで、このような破天荒(?)なデモコンテンツが作られたそうだ。

　カヤックの演出部(通常の会社で言う広報だそうだ)クリエイターの前田良二氏によると「カヤックの行動指針の1つは「漫画」。そこにCool Japanといわれる分野であるジャパニメーションをIE9の機能をフルにいかして表現した企画」という。

　話をググッと開発サイドに引き戻そう。

　セルアニメ風に多数のSVGを順に表示させる手法は、開発にとても手間がかかるのではないか? と感じるが、吾郷氏によると、特にキャラクターデザイナーとの共同作業は、とてもやりやすかったという。SVG女子の開発は7カ月に渡ったそうだが、それは細かな改良を途中で加えていったからだという。

　デザイナーからイラストレーターからAIファイルで保存した絵を受け取れば、それをインポートしてSVGに変換して利用できる。絵の細かな修正が何度入っても、プログラマ側が絵の変更に対しては何も行なう必要がなく「分業はとてもうまくいった(吾郷氏)」そうだ。

　ビットマップデータを使う場合や、3Dグラフィックスで構成する場合、ちょっとしたデザインの変更でプログラム側も調整が必要になる場合も少なくないが、SVGをうまく使えば日本的なアニメ調の映像効果を用いながら、スケーラブルで分業しやすいコンテンツ/アプリケーション開発が行なえそうだ。