スポンサーサイト

2014.01.27 Monday

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

  • -
  • -
  • -

お絵かきアプリ
↓リニューアルしました↓
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がネストしたすっきりしないコードになってしまいました。

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

この前運よく注文できたポケガが届いた!
早速作成!(9割出来てますが、、、)
ポケットガイガー

お借りしたインスペクターと比較!!
ガイガーカウンター

インスペクターはアルファ、ベータ、ガンマの計測が可能なようです。
ポケットガイガーはベータ、ガンマを検出するようです。
ちなみにインスペクターは遮蔽なし、ポケガはベータ遮蔽。
雨どいに近づけるとインスペクターの方が数値があがりました(倍くらい)

なかなかの精度なのでしょうか!?

とりあえず数箇所で比べてみましたがなかなか似たような数値を
だしていました!!

radiation-watchの皆様ご苦労様です。


calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< July 2017 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others