jCanvas(jQueryプラグイン)でCanvasを使ってお絵かき - 対応ブラウザ確認編

このエントリーをはてなブックマークに追加
ご無沙汰しております、株式会社シャノン、技術統括部プロダクト開発部のHealerです。

前回は大震災の後で技術的な話をしなかったので、実質初投稿です。(笑)

昨今HTML5が微妙に盛り上がってきており、各ブラウザでの対応が進んできました。
ちなみに、微妙に、というのはブラウザ間でのまだレンダリングに差異があるので実用には耐えない、という意味です。

その中でも、手軽にお絵かきのできるCanvasに興味を持ったので今勉強中なのですが、
今回は内容の話ではなくてCanvasに対するブラウザの対応状況についての調査結果を先に書かせていただこうと思います。
実際のお絵かき方法については後日また投稿させていただきます。

Canvasに対するブラウザの対応状況は現在どのようになっているのでしょうか?
ちょっと古いですが、W3C公式、ブラウザHTML5対応状況まとめという記事がありました。
2010年11月時点では各ブラウザにてこんな感じになっていたのですね。
W3C公式のHTML5 Test Suite Conformance Resultsを見ると、最近では対応状況が改善されていることが分かります。
ただ、やはりCanvasの対応状況は他のものと比べると芳しくないです。

stv_tributeさんのHTML5のCanvasで描いた絵で各ブラウザ描画比較なんかでも色々なブラウザで試してみたりしています。
こちらも若干古めの記事なので現在とはちょっと対応状況が違いますが、現行のブラウザで見てみるとブラウザの進化?が実感できます。

さて、本題に入りますが、Canvasは動的に書こうと思ったらJavaScript必須です。
様々な方がチャレンジしてらっしゃいます。
CanvasとJavaScriptの検証については他の方が詳しく説明されていますのでそちらの方を見ていただくとして、私はjCanvas(jQueryプラグイン)を使った書き方でいきたいと思います。
jCanvasのページでは、サンプルコードが多数公開されていたり、サンドボックスがあったりしてすぐに試せるので興味のある方は是非どうぞ。
jCanvasを採用するメリットとしては、
  • jQueryなのでブラウザ間の違いの吸収が出来る
  • せっかくjQueryを使っても、その中でフツーにJavaScriptを書いても楽できない(jQuery使ってるんだから同じ文法で書かせろ!)
という2点が大きいです。
jQueryを使うとJavaScriptを書く際に面倒なブラウザ間の違い(特にIEとか、IEとか、IEとか。。。)をあまり気にしなくていいので、非常に楽です。
でも、せっかくjQueryを使ってるのにその中でフツーにJavaScriptを書いてても面白くないじゃないですか。
しかも、書いてみると分かりますがCanvasはパラメータの設定が多くていちいち書くのが面倒なんですよ。
それをCSSライクな感じで簡単に書けるようにしてくれるのがjCanvasというわけです。

書き方については今回は端折りますが、試しにサッカーのフィールドを書いてみたのがこれです。
4-3-3のフォーメーションを書いてみました。
単純なサンプルです。

Canvasを表示(ExplorerCanvas版)
追記(2011/06/06):Canvasを表示(revuloさんの作ってくださったFlashCanvas版)

書き方が汚くてすいません。。。
ご覧のブラウザではどんな感じに表示されていますか?

ちなみに、手元では
  • WindowsXP Google Chrome(11)

  • WindowsXP Firefox(3.6)

  • WindowsXP Internet Explorer(8) with ExplorerCanvas

  • 追記(2011/06/06):WindowsXP Internet Explorer(8) with FlashCanvas

  • MAC OSX 10.6 Google Chrome(10)
  • MAC OSX 10.6 Firefox(4.0)

  • MAC OSX 10.6 Safari(5.0)



というような感じですね。
jQueryのおかげか、各ブラウザの対応状況が素晴らしいのか、色味に微妙な違いがある以外は大差ないです。

で、IEェ。。。
緑のフィールドを書いてからラインを描いて選手アイコンを乗せる、という順番なのですが、ラインを書いた時点でフィールドが黒くなってしまいます。
おそらく外の白線を書いたときに背景色として黒が入ってしまうんでしょうが。
一応IE対応のためにExplorerCanvasの3を使っているのですがね。
ExplorerCanvasを入れていないとIE8ですらまったく動きません。(笑)
IE9は対応してきているようなのですが、残念ながら業務で使っているWindowsXPにはインストール出来ないのです。
つまり、WindowsのIEでCanvas使いたければVista以降にしろ、と言っているわけですね。
私も開発の一端を担っている弊社の主力製品SHANON MARKETING PLATFORMへのアクセスの大半はIEなので弊社の製品にCanvas及びHTML5を入れられるのにはしばらくかかりそうです。。。
自動的にアップデートされないのでまだまだIE6や7のお客様が多くいらっしゃいますので。

追記(2011/06/06):revuloさんのご指摘によりFlashCanvasを代替手段として利用することにより、IE8以前でもCanvasを使用できることが分かりました。
Canvasの部分をFlashに変換することで表示しています。
これで問題なくIEでも動作させることが出来ますね。

各ブラウザでの挙動確認も済んだところで、次回は実践編として、jCanvasを使ってのお絵かき部分について書かせていただきます。
あのアーケードサッカーシミュレーションゲームでちょっと使える感じのものを作ろうと思っています。

それではまたの機会に。
次の記事
« Prev Post
前の記事
Next Post »

4 コメント

Write コメント
revulo
AUTHOR
2011年6月4日 14:11 delete

こんにちは。
IE 対応についてですが、ExplorerCanvas の代わりに FlashCanvas を使ってみて下さい。
http://flashcanvas.net/
実際に試しましたが、他のブラウザと同じように表示されました。

Reply
avatar
Healer
AUTHOR
2011年6月6日 12:24 delete

ご指摘いただきありがとうございます。
Flashでエミュレーションする、という方法があるんですね。

FlashCanvas Pro1.5及びフリーのFlashCanvas-20110201.zip
をダウンロードして試してみましたが、
手元のWindowsXP Pro+IE8+AFP10,3,181,23だとどちらを使用しても真っ白になってしまいました。
AFP自体は埋めこまれていることは確認できるのですが、中身が出てきませんでした。
jQueryまたはjCanvasとの相性が良くないのでしょうかね。

すべての問題に完全対応とはいかないと思いますがこのようなライブラリがあることで私のような者は大変助かります。
revuloさんはじめライブラリ開発者の方々には感謝の言葉を差し上げると共に、さらなる充実をお願いしたいところです。

Reply
avatar
revulo
AUTHOR
2011年6月6日 14:52 delete

FlashCanvas というか Flash は、Web サーバに置かないとうまく動かないので、それが原因ではないかと思いましたが、どうでしょうか?

こちらに FlashCanvas を組み込んだものを置いてみましたので、試してみて下さい。
http://flashcanvas.net/examples/dl.dropbox.com/u/8393341/canvas_test.html

Reply
avatar
Healer
AUTHOR
2011年6月6日 15:34 delete

仰るとおりです。
恥ずかしながらFlashについての基本的な知識が抜けておりました。

revuloさんのご指摘の内容を追記させていただきました。
ありがとうございました。

次回の投稿の際はサンプル置き場をdropboxからWebサーバに変更してFlashCanvasが動作するようにします。

Reply
avatar
Related Posts Plugin for WordPress, Blogger...