androidとWebアプリケーション

たいそうなタイトルだけどただの前回の記事の追記

ローカルのPCでテストしてから実装してgalaxy tabで確認をするわけだけどうまくいかないこと多数だった。原因がわかったものもあるしわからないままのものもある
大体はまりポイントはPCとandroid(マウスとタッチ)の違いかjQueryの実装の違い。あとはWordPress(自分の知らないhtmlソース)を理解していないあたり

とりあえずマウスとタッチのイベントから
そもそも、Webアプリケーションとしてjavascriptを使うのにタッチパネルの操作に対応するのはどうするのだろうかと思っていたのでjQueryで対応できることがわかったのはかなりの収穫
で、イベントが違うわけだからそれぞれに対応して作る必要あり

マウスイベントとタッチイベント
マウス操作とイベント タッチ操作とイベント
マウスを押したとき mousedown タッチしたとき touchstart
マウスが通過したとき mousemove タッチしながら動かしたとき(フリック) touchmove
マウス通過中のページ左上からのX座標 event.pageX フリック中のページ左上からの座標 event.changedTouches[0].pageX
マウスを上げたとき mouseup タッチを離したとき touchend

大体同じようなイベントが使えるからそれでおっけー。と思ってたら大はまりもしたわけだけど

まず、タッチ操作でもmousedownが発生する。逆はない。mousemoveは発生しない(たぶん)mouseupが発生する。しかもmousedownの直後に(だからmousemoveが発生しない)
今回は関係なかったけど2重に発生するのを回避しないといけない場合もあるかもしれない。
mousemoveとtouchmoveこれ、ぜんぜん違う。はまる。
mousemoveはそのイベントを持つ要素の上でしか発生しない。マウスをすばやく動かしてイベントとして認識するよりも先に要素の外にでると発生しない。実装上は$(document)(画面全体)でmousemoveイベントを捕まえる。
touchmoveはタッチされている要素にしか発生しない。でも、要素の外にでても発生する
関数に渡す引数もなにか違う気がする
マウス関連のイベントのfunction(e)のeはeventだけどタッチ関連にfunction(e)を使ってもeventとして使えなかった

補足changedTouches[0]はマルチタッチ対応の配列

あと、要素をボタンにするとタッチでもclickが発生する。しかもタッチして触っている最中に。そしてなぜかtouchイベントが発生しないことがある

jQueryの謎
ただのバージョン違いなんだろうけど調べてない。だいたい同じの実際に使えたのと使えなかったの

jQueryの○×
×
.prop() .attr()
$(document) $()
.mousedown(function())他 [.touchstart()他]

一番下のは似たような関数がないってことで

元ソースに依存するようなのは・・・
エディタ部分に使われているidがPCとandroidで変わっちゃってたって話。なんで動かないかなーと散々悩んだ
androidでhtmlソース見るのはサクッとは行かないからホントに悩んだ

そんなこんなで完成したわけだけど、textarea部分の対応は並み以下。伸びるだけ。伸縮じゃない。自動的に縮む意味はあまりないから削除した。いざとなればOFF/ONすればいいし

以上、膨れ上がった脱線のまとめ

こんなことより大きな欠陥が発覚してしまった
記事に自動で連番を付ける方法に落とし穴があった

スラッグに(記事数+1)を入れる方法を使っているわけだけどスラッグは更新時にも有効になる。気づかないで前の記事を更新しちゃうともう番号がぐちゃぐちゃ
公開後はスラッグに今の値を入れるようにしないといけないようだ

やり方わかるわけもない。とりあえずは更新時に注意するようにしよう・・・

あとsitemix、ちょくちょくサーバーにつながらなくなる。自分がなにかやらかした結果なのか判断がつかなくて困る

table使ってみたらborderなくてわかりづらすぎ

カテゴリー: 未分類   タグ: , ,   この投稿のパーマリンク

コメントをどうぞ

メールアドレスが公開されることはありません。


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>