スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

AnimalPuzzle

以前作ったお絵かきアプリをAndroidアプリにしてやろうとリニューアルを試みたのですが、
Androidがどーにもカオスで保留中。

とりあず良かったら試してみて下さい!!

iPhone・iPad用→Paint!
safariでアクセス>下の真ん中の矢印タップ>ホーム画面に追加で簡単インストール?
よろしくお願いします!

Android用→Paint!

続きを読む >>

お絵かきアプリ
↓リニューアルしました↓
Paint!
iOS、Android?、
Chrome、Safari対応

以前作ったお絵かきアプリをiPadに対応させてみました。

    color
 
 というかリキッド気味に変更。前はまぁむちゃくちゃなCSSで


なんとか形に仕上げてしまっていたので、、。

とりあえずiPhone、iPad、普通のPC(safari,chrome,firefox)では動作しそうです。

Androidはどーでしょう?エミュレーターでもいれてみようかな。

それとスタックとはなんぞや、ということでアンドゥ・リドゥ機能を実装してみました。

しかし今回はCSSに悩まされました。。。なんか隙間が、みたいな。

眠い。。。

 昨年は本当にいろいろなことがありました。

地震はもちろんですが、個人的に本当にいろいろ辛い事がありました。。。

常に学び、心身ともに鍛え、一生懸命がんばろう。
(今年の抱負)

場所メモアプリを作ってみました

はい。jquery mobileを試しに使ってみたいな、と前々から思っていて、


とりあえず何かサクッと作れそうな物を、、、と考えて、


GoogleMaps APIを使った場所メモアプリを作ってみました。


place memo

place memo


★主な機能★

・現在地の住所とメモを保存。

・住所で地図を検索してメモと保存。

・移動ルートをメモと保存。

・重要度を付けて保存データを並び替え。

・メモと場所のURLをメールで送信。

・データのエクスポート・インポート。


★対応機種★

・iPhone、iPad

・Androidも使えるとおもうのですが、、、。

・一応最近のブラウザでしたらPCでもデータの読み書きは可能です。


データは端末に保存されるのみで、サーバにあげてみなんで共有!

みたいなことはありません!見れるのはこの端末からのみ。

個人的にはそのほうがいいような、、、ウソです。スキルがありません。

バグなど修正できるかわかりませんがお気軽にご指摘下さい。

※住所・場所など精密なものではありませんのでご注意下さい。

safariのプライベートブラウズだとデータの読み書きができませんので

ご注意下さい!!


またもありふれた地図アプリ+メモアプリです。いいんです。次に繋げます。

そして案の定サクッとは作れませんでした。

謎のキャラが気持ち悪い仕上がりになってしまいました。


jquery mobileに関して

すごいです。簡単にスマホサイトが作れます。

しかしやっぱり凝ったデザインにするには知識が要りそう。。。

アプリケーションキャッシュなど使えばかなり快適になる!と思いましたが、

あまり勝手にデータを保存するのもなぁ、

それにオフラインでは機能しないアプリだし。というこでキャッシュは止め。

スクリプトから動かした要素をリフレッシュするのに手間取りました。

なんか一度そのページを故意にロードしないとどうもうまくいきませんでした。

それと<input type="range">のスライダーを設定すると左に数値のボックスと

右にスライダーが設置されるはずなのですが、ダイアログ内に設置すると

なぜかsafariだけ両方スライダーになってしまいました。

<input type="number" data-type="range" name=〜 />

と設定することで回避できました。これはそういう仕様なのでしょうか??

それとテーマローラーでICONをBlackのW/Odiscに設定したら、

/* HD/"retina" spriteの部分だけwhiteのアイコンが設定されていて

retinaディスプレーのみアイコンが表示されず悩んでしまいました。

とりあえず使ってみた感じはサクッと作るのには大変便利だけど

オリジナリティを出すにはやはりそれなりの労力が要りそうだなぁ。


GoogleMapsAPI V3に関して

これまた素晴らしい。ゼロからスタートして使ってみたんですが、

動作は軽いし一通りマニュアル目を通せばなんとかなっちゃう感じが素晴らしい。

これに関してもサクッと簡単にできちゃう部分と、奥がそうな部分と

ただただ感心してしまいました。

ただjquery mobileみたいなので使用するとき、

ページを移動(page divを入れ替え)したときdisplay: noneに設定されると、

マップのページに戻り再度表示した際

ページを表示した後にresizeイベントをトリガしないと

マップがずれてしまうことがありました。

というかマップを表示するdivを表示してからマップを表示しないと

マップの位置がずれてしまうようです。

ま、正直細かいことは良くわかりません!


まとめ

jquery mobileのフレームワークに、GooleMapsAPIのスクリプトを

お借りして一体自分はなにを作ったんだ???

こういう素晴らしいものを作る技術、それを使ってビックリするようなものを

作るアイデア、それ以上に見てるだけでも楽しめるデザイン力などなど、

プロフェッショナルな方々は凄いなぁ。

まぁ何をやっても無駄なことはない!はずなのでこつこついろいろがんばろう。


手に入れましたiPhone4s。

そしてついでにのっちゃいました、

アレコレソレキャンペーン!

念願のiPadも入手!!

うれしい。けど正直使い道あんのか。

しかしどーなんでしょう、このキャンペーン。

賛否両論ですがとりあえず自分は主に自宅でwifi用なのでよし。

てか自宅用の時点で基本的に必要ねーんじゃねーかとも。

そしてMacが買えない母体のみwindowsという貧乏人セッティング(て、

どこかの掲示板に書いてありました)に。

そんでとりあえず、今月少し時間があったので、

HTML5、canvas、CSS3の勉強かつ、

スマホを身近にということで、iPhoneウェブアプリを作ってみました。

mosquito
mosquito


アプリってゆーか正直くだらないありふれたゲームです、かなり。

以前にも一応一個作ってみましたが
、、、

まぁ一個時間があるときにとにかく作ってみたかったんです。

それだけ。自己マン。いいんです。

そしてせっかくiPadを手に入れたので対応!

ほんとはもっとデータベースとかPHPとか勉強した方がいいんだろうなぁ。

いやもっと仕事しなきゃ。いやそろそろ楽器をやりたい。いやたまには

実家でゆっくりしたい。ゆっくり酒のみたい。

あ、キャッシュマニフェスト使ってますんでうっかりアクセスして

しまったら設定よりキャッシュデータ削除できますんで。

作ってて思ったことなどなど

得意のスパゲッティーコードに仕上がりました。

初めてコンストラクターを使用!

これ別にHTML5じゃなくてもいいんじゃないか??

Rethinaディスプレーに振り回されました。

イラストが苦手。。。

タイマー関数が不安。

スタイルの切り替えとかjavascriptでやるのと、CSSのメディアクエリでやるの

どっちがいいんでしょう?

などなど。

フォトショップの勉強しよ。


先日iPhoneのタッチイベントで悩まされました。

まずタッチイベントについて様々なサイトにて解説がございます。

各指の情報はevent.touchesに配列で格納されると。

なるほど。

そして5本まで取得可能。

なるほど。

event.touches[0]〜event.touches[4]まで

各指の情報が格納される。

なるほど。わかりやすい。と思ったのですが、、、

思い込みにやられました。

そもそも、タッチした順番にその指の情報が配列にプッシュされると

思い込んでいて、期待通りの結果が得られませんでした。

これタッチした順番どおりに配列にプッシュされる訳ではなく、

タッチするたびにランダムに各指の情報が配列に格納されているようです。(違うかな??)


まず人差し指でタッチ
event.touches[0]に人差し指の情報が格納。

次に人差し指を離さず中指をタッチ
event.touches[0]に人差し指の情報
event.touches[1]に中指の情報

次に人差し指、中指を離さず薬指をタッチ
event.touches[0]に人差し指の情報
event.touches[1]に中指の情報
event.touches[2]に薬指の情報
となると思っていたのですが、
event.touches[0]に薬指情報
event.touches[1]に人差し指の情報
event.touches[2]に中指の情報
となるなど、タッチする度様々な結果となりました。

なので、タッチスタートした指をタッチエンドでまで追うとなると

event.touches[i].identifierというタッチごとのIDを取得する

プロパティを、タッチしたときに取得。

event.changedTouches[i].identifierで、

タッチエンド時にどのIDの指か判定して実行する。

てな感じのforとifがネストしたすっきりしないコードになってしまいました。

根本的に何か間違っているのでしょうか?またはもっと簡単な方法があるのかしら。

iPhone3GS 脱獄

2011.06.10 Friday

 今日はのみに行くのをやめ時間ができたので、久しぶりにsk8してみようかとも思ったんですが、

親指が巻き爪の為、とりあえず脱獄してみました。

JailBreak手順

正直知識もなく、適当にググっていきあたりばったりでやってみましたが、意外とあっさりできるもんで。

step2で Is this newer (fixed) model?みたいなのがでてうっかり「はい」をクリック。

どこみても「いいえ」をクリックして!!と記載されていたのですが、、まぁとりあえず問題なさそうなのでいっか。

なんかBootRomが新しいか古いかを聞かれていたようです。

それでまぁちょっと気になっていたテザリングを試してみた。
※softbankは認めていないので使う気はないです。当然お勧めしません。

MyWi(Fi??)だかはみなさん絶賛だったのですが有料だったため、純正テザリングとやらを試してみました。

macosmovilリポジトリのTetherMeをインスコ。設定画面にインターネット共有が出現。オン。

LANを切って、USBでPC接続。繋がった!おそっ。これまた以外とあっさりできるもんで。

そんでwinterboard(シャレた画面にしてくれるアプリ)とやら適用してみましたがアイコンとかあんま変わらんし。

そもそも別にそんなこだわりないし。



少々いじってみた感想としまして自分にはまだあまり楽しめる自信がないなぁ脱獄。

OS4未対応な物も多いようですし。英語わからんし。ただはまる人にははまりそうな感じがしました。

まぁとりあえずredsn0wにて脱獄 3GS OS4.3.3安定してます。


それとみなさまおっしゃってますが

そもそもグレーな行為ですし、多少セキュリティ面などで不安もあるようなので、

JailBreakは自己責任でご自身の判断でどうぞ。

JailBreak(脱獄)の基礎の基礎



テザリングつながりで

ソフトバンクがテザリング対応したらiPad欲しいかも。って思ってたらこれ→テザリングぽいことをさせるiPhoneアプリ

これでいいんじゃないかしら。

だけど"iPadでリンクをタップするたびに、そのリンクを開いていいかどうかiPhoneの画面で答える必要がある"らしい。

うーんそりゃめんどくさそ。

sk8



お子様向けお絵かきアプリcolor
↓リニューアルしました↓
Paint!
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でも使えないことはないと思います。
オフラインキャッシュとローカルストレージデータを使用しています。


 iPhoneてinput type="file"のボタンが無効になって
ファイル選択できないんですよね。
メールフォームがいまいちなんでしょうがないからmailtoでメールを起動。
でもsubjectとbodyが入らない。。。

どーやらSoftBankの3G端末は
HTML本文がshift-jisでもutf-8にてURLエンコードしないと
日本語が表示されないみたい。

つらかった。

http://imalog.giftarts.net/?eid=34
URLエンコード

1

calendar

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others