お子様向けお絵かきアプリcolor↓リニューアルしました↓
iOS、Android?、Chrome、Safari対応
ホーム画面に追加して、そこから立ち上げて使用していただくとフル画面になり使いやすいです。
一応横持ちでの使用を想定しています。
以前なんとなーく本屋入って、なんとなーく買ってしまった
iPhoneアプリケーション開発ガイド
HTML+CSS+JavaScriptによる開発手法
アプリを作る(作れる)気なんて全くなかったんですが、お手軽、簡単だよ!
みたいな雰囲気につい購入。
しかし作りたい(作れそうな)アプリなんてなくしばし放置。。。
とりあえずせっかく買ったんだしなんか1個くらい作りつつ読破しなければと思いつつ、
他にいくらでもありますがお絵かきアプリを作ってみました。
ASCIIjp:HTML5のCanvasで作る、Flash不要のお絵かきツールこちら大変参考かつネタにさせて頂きました。
★ググれば出てくる事ばかりですが、作っててハマッタことなど★
オライリーのこの本分かり易く、丁寧に書かれてるイメージでした。
しかしひとつ残念なことに「HTML5のクライアントサイドデーターベース」
こちらに関して結構細かく記載されているのですが、この度HTML5からこの
データベースが廃止され、今回のiOSからデータベースが使用できなくなってしまったようです。使えるよね?
まぁデーターベースなんてもともと私よくわかりませんが、
もっと簡単便利なローカルストレージで保存は対応。
それとオフラインキャッシュの仕組みは丁寧で非常に分かりやすかったです。
PHPコード使用させて頂きました。
ひとつしょぼんとしてしまったのが、何にも考えずにどんどん進めてしまい、
ユーザーインターフェースのアニメーションをjQueryで作ってしまいました。
PCで見る分には問題ないのですが、iPhoneでみるとそりゃアニメーションがぎこちない。
がっくししながらjQtouchのアニメーションを見てみたらCSS3で対応。
しかし今更jQtouchで作り直す気力も無く、そもそも良く分からなかったので、
とりあえずアニメーション部分だけCSS3の@Keyframes,transformで作り直し。
これのコールバック関数ってゆーんでしょうか?アニメーションの終了後に実行させたい
関数の設定にかなりハマリました。無茶なのわからんがsetTimeoutで対応。
しかしこのCSS3のアニメーション凄く動きが美しいんですね。
まだあまり対応してないようですが。
HTML5のcanvasについてはここ見ればだいたい解決できました。
データの保存、読み出し、その際のimg load後に書き出すなど。
ひとつつまづいたのが円や矩形を描く際一度描いた部分が残るので
指を戻した時に小さくする(指を離すまで大きさを確定しない)ことに悩みました。
それに関してはtouchstarteventが発生した際にcanvasを保存し、
touchmoveeventが発生する毎に一度canvasをクリアし、
保存したデータをcanvasに挿入、円・矩形を描く、という流れで回避できました。
それと保存に関してHTML5のlocalstorageをなんとなく使ってみました。
普通に配列で保存したかったんですが、なんだかオブジェクトとして保存できず、
テキストとしてしか保存できないみたい。
JSON.stringif()、JSON.parse()でいけるよ、みたいな記事が多々ありましたが、
いまいちいい書き方が思い浮かばずかなり非効率な書き方になってしまいました。
だけど一応読み書きできたから良し。
大体できたかなぁ!と思ったところで僕のiPhone3GSなんですわ。
そーいえばと思ってiPhone4ちょっとググッてみたら解像度が倍!
ちょっとiPhone4お借りして見てみたら画像がジャギってる。
がっくし、ま、画像を倍の大きさにして半分で表示すればとりあえず3GS,4共に
OKみたいだったのでムキになって一応対応。
あとこの本の後ろの方にphonegapを使用してネイティブアプリ化、
appstoreへの掲載の仕方、等出ていましたがwindowsだし、
面倒くさそうだしまだ読んでません。
細かいところでは
apple-touch-startup-imageはiPhone4用の画像に対応してない??
apple-touch-iconは3GSが57pxなので114pxでOK。
ちなみにアイコンの自動つやつやを摘要させない為には画像の名前を
precomposed.pngにするのではなくapple-touch-icon-precomposedで
画像の名前はなんでもOK。
あとちょっとわからなかったのですが
meta viewport
これの
user-scalable=no, initial-scale=1.0, minimum-scale=1, maximum-scale=1, width=device-width
これの
minimun-scaleとmximum-scale
これを設定しないと画面にうまくフィットしませんでした。
よくわからん。
イベントの取得など沢山の分かり易いサイトがあり助かりました。
あとiPhoneのスリープボタン押しながらホームボタンでスクリーンショットが
撮れるんですね!ちょっと感動。
ま、とりあえず最初からjQtouch使えば良かったという後悔。
それと簡単・お手軽!!HTML+CSS+javascriptでの開発!というところから考えると、
私にはobjective-cでの開発は不可能と感じました。
一応googlechrome,firefox,safariでも使えないことはないと思います。
オフラインキャッシュとローカルストレージデータを使用しています。
|
Jonathan Stark
オライリージャパン
¥ 1,995
(2010-08-07)
|