Silverlight で HTML5::Canvas を実現できないか

JavaScript Silverlight

IE限定になりますが、Silverlight で描画のためのフロントエンド(描画API)を組めないか考えてました。
excanvas.js を最終手段としておいて、使える環境なら Silverlight を使ってしまおうかと。

HTML5::Canvas と Silverlight

  • Silverlight は、MS 発の Flash 対抗技術で、ベクターベースの描画を行うブラウザプラグインです。Flashと違いXMLベース(XAML)でコーディングできます。
  • HTML5::Canvasは、Firefox2+ Opera9.5+, Safari1.3+, Chrome で使えるベクターベースの描画機能です。標準化されています。
  • excanvas.js は、IE で HTML5::Canvas をエミュレーションするライブラリです。機能は限定されており、描画速度にも多少問題があります。excanvas.js は VML をバックエンドとして利用します。

Silverlight の普及率

インストールベースで見ると Flash が99%なのに対し、Silverlightは10〜50%(※)です。
※ プレス発表では50%台らしい。

そうこうしているうちに、Windows Update で Silverlight は、ほぼ強制的に PUSH 配信されているようです。知らない間にランタイムがインストールされている人も多いのではないでしょうか?

Silverlightの動作環境

Silverlight は 1.0系と2.0系があります。2.0系では、Windows 2000 + IE6の組み合わせでも動作します。

version OS Browser
1.0 Windows XP IE6, IE7, IE8
1.0 Windows VISTA IE7, IE8
2.0 Windows 2000 IE6
2.0 Windows XP IE6, IE7, IE8
2.0 Windows VISTA IE7, IE8

excanvas.js じゃだめな理由

IE で HTML5::Canvas を使おうとすると、excanvas.js(VML)で、できること/できないことを考える必要があります。
VML には以下の制限があります

  • 個々のドットにアクセスできない
  • パターンブラシが使えない
  • グラデーションに制限がある
  • マスクが使えない
  • 描画オブジェクトが100を超えると、もっさりどころの騒ぎじゃなくなる(描画されなくなる)
  • Textの描画はできる

Silverlight でやれそうな理由

ざっと眺めてもらえると分かると思いますが、HTML::CanvasのAPIそっくりだったりします。
http://motohisa.members.winisp.net/silverlight/quickstart/about-frames.html

  • SilverlightのCanvasとJavaScriptは対話できる。動的に要素を追加/削除できる
  • Path が使える。QuadraticCurve と BezierCurve もつかえるはず(要確認)。
  • Line が使える
  • Fill, Strokeブラシが使える
  • LinearGradientBrush と RadialGradientBrush が使える
  • Opacity が使える
  • Clip が使える
  • Transform が使える(変形,伸縮,回転,移動)
  • Image が使える。GIFは使えない。
  • Text が使える
  • タイムラインアニメーションが使える(Flash≠TIME2≠Silverlight)
  • マウスイベントが使える

JavaScriptから動的に Silverlight のオブジェクトにアクセスする方法

色々はしょりますが、createFromXaml() を使うと、動的に図形を追加できるようです。
また、getElementById を通じてアクセスできるようなこともSDKに書いてあったりなかったり。

function createEllipse(sender, args) {
    var e = sender.getHost().content.createFromXaml(
            '<Ellipse Height="300" Width="300" Fill="Red" />'
    );
    sender.children.Add(e);
}

懸案事項

  • Silverlight のコンテナ(objectタグ)の上に普通のdivタグやiframeは設置できるのか? (できないとまずいことになる)
    • できた。

反省会

  • ちょっと前に、Mozilla の中の人が FlashActiveX で HTML5::Canvas を実装しているとニュースになったけど、どうなったんだろう。
  • Silverlight の普及率が9割を超えないかぎり、商業ベースで成立するわけも無く。
  • Silverlight は、現時点でだれからも必要とされてないかわいそうな子みたい。
    • Web開発現場は常に忙しいはずだから、飯の種になるかどうか分からない未知のテクノロジーを勉強する時間が取れるはずも無く。
    • MSの独占や技術を嫌がる開発者はかなり多いと思われるので、普及しないのはそういう側面もあるのかも。リスクヘッジ(リスク回避,分散)も考えるとちょっとね。IEと同じ開発方針(法則?)が Silverlight でも発動されたら、たまらん。
      • (∩ ﾟдﾟ)ァーァーァーきこえなーい
      • 「IEなんて死ねば良いのに」とか思ってるWeb屋さんは SilverLight なんて見たくも無いだろうし。
  • あくまで Silverlight の描画 API や Sound API に限定して上手く活用できないか? と。
    • 一週間ぐらい Silverlight 叩いて何ができるか見てみる。