HTML5お絵描きアプリ

d0054746_21164399.jpg


アプリはこちらから!

作ってみました・・・!元々わたしはFlex(Flashフレームワーク)使いなので敵情視察も兼ねてw HTML5 Canvasを使ったペイントツールの作り方に関してはあちこちで詳細に書かれていますので、特に語ることもないですし、DOMも良くわかってないのでソースもきっと参考になりません(´ヮ`;

ただ、iPad/iPhoneで動くプログラムがお手軽に作れるのは嬉しいかも、ネイティブアプリは敷居が高すぎるので・・・GPSアプリとかも簡単に作れそう。一方こんな小さなプログラムでもやはりクロスブラウザ問題に何度もぶちあたりました。どんなブラウザでも同じ動きが期待出来るFlashと違い、HTML5 APIはブラウザによって細かな点で微妙に挙動が違います。そしてまだまだ発展途上の規格ゆえ、これからどう仕様が変化していくかも分かりません。そんな点で、やっぱりFlashとは基本的に違うもの、しばらく住み分けが続くんじゃないかなあと思ってます。

あまり参考にならないHTML5/Flashの比較表とか。WebKit率が高いスマートフォン分野ではHTML5が普及しそうな気配があるものの、PCではIEが足を引っ張りそう(またかよ!)なにせXPではIE9が動きません・・・。あとビデオ/オーディオコーデックが未統一なのも問題、どうなることやら!

d0054746_918630.gif


HTML5 Canvas使ってみた印象とかー。

- iPhone/iPad等タッチパネルブラウザではそもそもmouseXXX系イベントが発生しません、代わりにtouchXXXというイベントが発生し、マルチタッチが可能なのでイベントも最大5個まで取れるようです。
- お絵かきはcontext.lineTo(x,y)で実装しているのですが、点を打つためにどうすれば良いか迷いました。Firefoxは同座標に線を引くと点を打ってくれるのですが、他のブラウザはなぜか上手く行きません。結局線を引く最後にブラシサイズの円を描くことで対処。
- Undoは最初canvas.toDataURL()で実装しようとしていたのでタイヘンでした・・・重いしChromeは何故かpngが劣化するしSafariは上手く動かないし。context.getImageData()なんてカンタンなAPIがあったんですね(´ヮ`;
- AjaxはXMLを扱うものなのでどうやらバイナリデータが扱えないらしく、仕方ないのでtwitpicへの投稿は一旦サーバへBASE64エンコードしたデータを送ってCGIでバイナリに戻して投稿しています。なんかスマートじゃないな・・・。

ほんとはiPhoneで撮った写真にラクガキしてTweet!なんてことが出来たら最高だったんですが、File読み込みはまだFirefoxにしか対応してませんでした、残念(TヮT
[PR]
by hatsuyuki0422 | 2010-08-16 21:24 | プログラム
<< 大9州東方祭3参加しますー iPad用 お品書き黒板っぽいアプリ >>