アイコンでかいです。
こんなペースでしかブログを更新できないのか俺は。
忙しくて、、、。
きっとできる人間は忙しいことは言い訳にはしないんだろうな。
と思いつつも別に僕は一般ピーポーなので忙しいことを言い訳にします。
大して忙しくも無いのに。切ない。
そんで、とりあえず何はともあれ何か作ってストアに掲載してみよう。
大体の流れを追う。そこがまずは目標。
とりあえずスピード重視で今回はシンプルメモアプリを作ってみました。
使用したフレームワークはjQueryMobileです。
公開までの流れをつかむのと、スピード重視なのでデザインにはこだわりません！！
シンプルにシンプルに
つくりはごくシンプル。
メインのメモデータ配列を作成して
保存される度にPUSHしていき、
データリストに挿入(prepend)していく。
同時にlocalStorageにもそのメインのメモデータを保存。
起動時はlocalStorageからデータを読み出しリストに書き出す。
はい、単純明快です。
ただこれだけではあまりにも何だったんで、あったらいいかも電卓を付けてみました。
javascriptとCSSで電卓
電卓なんて簡単っしょ。と思ったんですが意外とカンマとか桁数とか
難しい、、、。
あとCとかACとか0.1とか、、
ごちゃごちゃやってるうちにコードもごちゃごちゃ。はずかしい。
そんでデザインはどーすっぺ、、
CSSでがんばる！？で、こんな感じになりました。
0
AC
+/-
÷
×
7
8
9
-
4
5
6
+
1
2
3
=
0
.
Done
若干iPhone風、、とまではいきませんが。
まぁ一応動いたんでこれでよし。
PCはテンキーでも動くはずです。
ここで予想以上の時間をくう。
せめてもの目標
まぁだれも(自分も)求めていないだろうこのメモアプリ。
せめて出来るだけ軽快な動きと見易さ重視したいと思います。
・スタートページはヘッダーメニュー以外をtextareaにしてフォント大き目で。
・アンカーリンクはtouchstartで遷移するよう変更。
・ページ読込み後テキストエリアにフォーカスする。
・余計なことはしない。
こつこつチューニング
・textareaのheight100%
jQueryMobileでdata-role="page"内要素のheight100％がややこしい。。。
おそらくwindow.innerHeightと取って、そこからヘッダー・フッターのpx引いた値を入れる感じになりそう。
更にヘッダーの高さを取得するのは'pageshow'イベントで取らないと値がとれないみたい。
・リンクタップ時の間
$('a:not(.edit, [rel="external"])').bind(touchstart, function(e) {
if(this.href.slice(-1) === '#') return;//ダイアログとかはとりあえず抜ける
e.preventDefault();
$.mobile.changePage(this.href, { transition: this.getAttribute('data-transition'), reverse: this.getAttribute('data-direction') === 'reverse' });
});
いわゆるタップかどうかの判断の「 間 」ですがとりあずこんな感じで
タッチスタートした時点で移動すると。なかなか快適。
・ページ読込み時とか保存後にテキストエリアにfocusする。
iOSのMobile Safari上でのfocus()が妙な件を調べてみた
こちらの記事にもございますが、どーもclickイベントからfocusしないと
カーソルがいっても下からヌルッとキーボードが出てこない。。。
困ったなぁーと思いつつとりあえずfocus()だけセットしておいたら、
なんかわかんないけど、立ち上げ時のpageshowでもfocusされるようなった。なぜ？
ちょっとまたそのうち調べてみます。
・余計なことをしない。
電卓。まぁ少し勉強になったのでよし。
つまづきどころ
listview('refresh')
これです。これ。これに悩まされました。
とりあえずリストページが一度表示(pageinit)された後でないと
listviewメソッドがエラーになり実行できなかった。
そんでおそらくDOMページは最初に一度表示
したときpageinitイベントが呼ばれる。
なので最初の1回目はload時にlistviewしときたかったんだけど
エラーになるので、一発目に表示されてpaginitされたときにrefreshして
その時フラグを立てる。
そんでリスト追加してrefresh呼ぶときはフラグみて呼ぶと。
そんなまどろっこしい流れになってしまいました。
listview('refresh')強敵です。てかいつもちゃんとドキュメント読まないのがダメなんでしょう。
いよいよAndroidの登場です
iPhoneのHTML5ウェブアプリ情報は結構出てくるのですが、
意外とAndroidは少ないんですよね。
HTML5でAndroidアプリ作りましたみたいの。
ある程度は覚悟してましたがここでがっくしです。
まぁ自分のコードの悪い部分は多々ありますが
iPhoneに比べてく反応が悪いんです。
致命的なのはtouchstartの反応。
これは僕のhtcだけなのかもしれませんがtouchstartに登録したリスナが
つまって、あるとき一気に実行されます。
タッチイベント自体は反応するのですがリスナがうまく実行されない。
そりゃ電卓として成り立ちませんわ。
touchendとかckickはその都度呼ばれるのですがかなり体感的に残念になってしまったので、
とりあえずsettimeoutで30くらい遅延してリスナを呼び出す感じが一番マシでした。
タッチイベントは(この端末だけかもしれませんが)touchendで登録したほうが確実なのか？
その他ページ遷移のアニメーションあたりはjQueryMobileさんが処理してくれてますので
これは恐らくこの動きがベストプラクティス！なのかと思うと、、、。
iPhoneに比べてしまうとやはりぎこちない。
これをこのままアプリにしていいのだろうか？
とりあえず今回はあくまでストア掲載が目標なので先に進みたいと思います。
まとめ
今回はとりあえずAndroidのチューニングが課題ということがはっきりしました。
色々今後につなげたいと思います。
ちなみに今回作成したWEBアプリはこちらです→めもる
よかったらいじってみて下さい。
次回はEclipse、PhoneGapなどの環境設定から公開までの流れなどを書きたいと思います。
それとかなり閑散としているのでもっと写真を増やしたい。
では！
