<   2010年 08月 ( 2 )   > この月の画像一覧

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 | プログラム

iPad用 お品書き黒板っぽいアプリ

お久しぶりですー!(いつもこればっかり。
今年前半は体調悪くて大9州東方祭出れませんでした・・・次回こそは(涙。

今回はiPad用にお品書き&試聴が出来るアプリを作ってみましたので、紹介ですー。SJV-SCさんにこんなのどう?って言われて作ってみたんですが、せっかくなので他の音楽サークルさんでも欲しい方おられたらと思いまして(´ヮ`;

お洒落なカフェやバーの店先に立ってるアレっぽいのを目指しました。

d0054746_2242315.jpg


アルバム名タッチで・・・

d0054746_22432362.jpg


ジャケットが表示され試聴が出来ます。

d0054746_22435927.jpg


ちなみに甲斐性なしなのでネイティブアプリじゃありません!強引にHTML5WebアプリをiPadローカルで動かしているので別途GoodReader for iPad(¥115)が必要です、あとフォントが英数字にしか対応していません、スミマセン~;

アプリのダウンロードはこちらからー。詳細は中に入っているReadme.txtをご参照くださいマセ。
(追記:2010/9/3 バージョンアップ)

-----

以下戯言。ホントはiPadのアルバムやiPodから読み込みが出来ればグレイト!だったのですが、iOSのHTML5 APIではローカルファイルへのアクセスをサポートしてなかとです、哀しか・・・!
[PR]
by hatsuyuki0422 | 2010-08-10 22:45 | プログラム