ianime.js: iPhoneのCanvasにVector 描画させてみる
アメリカの大学の典型的な授業風景

canvas 対 SVG

 先日のエントリーで少し触れたが、アップルがSafariに導入してから、Webkitは当然ながら、Firefox、Operaにも標準採用されて一気に業界標準になりつつあるcanvas。iPhone上のSafariでも使えるし、Googleが先日発表したandroid上のブラウザーでも使えるとなれば、私としては色々とやってみたくなるのは当然。

 問題は、同じく「ブラウザーにベクター・グラフィックスを追加する」という役目を果たすはずだったSVGの存在がこれで怪しくなってきたこと。そもそもが、FlashキラーとしてAdobeが全面的に押していたSVGの戦略的な価値が、AdobeによるMacromediaの買収でなくなってしまったところに合わせた様に来たcanvasの対等。一気に形成が逆転だ。

 SVG派の人たちに言わせると、「SVGは既に業界標準だし、記述型でないcanvasはJavascriptとの親和性が悪い」ということになるのだろうが、そういう正論が必ずしも通用しないのがこの業界。このままの勢いだと、canvasがSVGを押しのけてデファクトになってしまう可能性すら十分にある(あいかわらずIEは蚊帳の外だが、それはひとまず置いておく)。

 とりあえずiPhoneで色々と遊びたい私としては、canvasを使うしか選択肢はないのだが、少しプログラムをしてみた分かったことは、HTML+DOM+Javascriptとは大きく違うパラダイムでのプログラミングを強いられること。HTML+JavascriptのようにDOMを操作してエレメントを「置く」のではなく、WindowsのGDIでのプログラミングのように、関数を呼んで絵を「描く」必要がある。

 「これがSVG派の人たちの批判のまとなんだな」と思いつつ、「それならエレメントを『置く』ことを可能にするライブラリを作れば良いじゃないか」と考えてしまうのが私。まだまだ未完成だが、とりあえず作りかけのデモを下に貼付けておく(Safari/Firefoxjだけで動作確認済み、IEは未サポート)。

Comments

dhrname

SVG派はむしろ、Canvasに関して好意を抱いてますよ。プログラミングが楽になりますし。http://www.w3.org/TR/SVGMobile12/svgudom.html#svg__SVGPath

さらに、FlashもSVGに好意を抱いているようです。
http://www.adobe.com/jp/devnet/devices/articles/msvg_t.html
>インタラクティブマルチメディアのプレゼンテーションエンジンである
>Macromedia Flash Lite 1.1 は、ネイティブでサポートする Flash コンテンツ以外に、
>モバイル SVG-T (Tiny) の再生もサポートしています。

SVG+canvas(SVG+Flash)が代替手段をもつことできるといった点で、HTML+canvas(Flash)にはない「相乗効果」を期待しています。
というわけで、SVGをサポートしたSafari3以降に注目ですね。

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)