ブログランキング・にほんブログ村へ


iPhone/iPad用潜水艦ゲームアプリ ソナーエコー iTunesにて公開中

2012年12月07日

pc(mac)のChromeで Touch系イベントのエミュレート / FireBug LITE

前の記事とも関連するが、javaScriptっつーかajaxってゆーかを開発ってことになると問題になるのが開発環境。
開発言語というのとはちょっと趣が違うのでこれといった決め手に欠ける。eclipseに統合環境の1つとして存在するみたいだけど、そこまで鈍重なIDE持ってきて大げさに開発ってことになるとjavaScriptの意味がほとんどないというか。

しかもスマホ相手っていうことになると、例の touch系イベント中心に書くことも多くなるのだが、pc(mac)では当然ながらtouch系イベントが発生せずデバッグできない。いちいちスマホに持ち替えてちまちまチェック…は少々面倒なんでなんとかpcでやりたい。

とりあえずtouchStart,touchEndあたりをなんとかpcでエミュレートする方法はないかと調べてみた。
当初考えたのはAndroidエミュレータを使う方法。でもAndroidエミュレータって遅い。ものすごく遅い。Hello worldでもいらつくくらい遅い。
それでAndroid x86エミュレータなら速いんじゃないかと調べてみた。Android SDKから簡単にインストールできるってことらしいんだが…自分のEclipse環境はubuntu上に作ってあって、linuxは対応してないよ、とインストール拒否された。
まぁどうせVmWare起動->Eclipse起動->Android x86エミュレータ起動なんてJavaScriptの開発のためだけにやるのは面倒過ぎたんでもういいや、ってんでこれ諦めた。macだとiPhone(iPad)エミュレータが高速なんで使えるかもしんない。

それで探して見つけたChromeのtouchエミュレート機能。

最近レンチから変わった「三」ボタンを押して、

ツール→デベロッパーツール

なんか下に開くんで右下の設定ボタンを押して、overridesの項目で

Emulate touch eventsをチェック。

これでonTouchStartがくるようになる。いやー便利。
タブをいったん消してまた開くとデベロッパーツールは非表示になっていてtouchイベントも無効になってるんで、そのたびにツール→デベロッパーツールする必要がある。Emulate touch eventsのチェックボックスは記憶してくれてるんで、ツール→デベロッパーツールするだけでOK。逆にtouchイベントエミュレートが有効になったからっていうんでデベロッパーツールを消してしまうとエミュレートも無効になる。中身は使わなくても表示しておくこと。

それからデバッグ。以前は FireFox + FireBugが定番だったが、メインブラウザのChromeと2つ使うのが面倒くさい。しかもFireFoxはこのtouchイベントエミュレートがないんで(拡張プラグインはあったが何故か動かなかった)、そもそもデバッグできない。
それでChromeでもFireBugないの?と調べてみたらあった。FireBug LITEってのが。喜んでインストール。だがこれが使えない。なんつってもブレークポイントが使えないのが致命的。
で、よくよく調べてみると。
Chromeのデベロッパーツールでブレークポイントも変数表示も使えた。デベロッパーツールの"Sources"のタブのとこ。
なんかFireBugより使いやすい気がする。
posted by みこあいさ at 10:32| JavaScript

2012年12月04日

JavaScript jQuery mobile モバイル端末でonClick onMouseDownの応答が遅い & cssの:hover :activeが効かない

JavaScriptでスマホ用のページっつーかプログラムを書く。
jQuery mobile使ったりすると、Eclipseとかxcodeとかあほらしくなるくらい簡単に結構なものが出来て驚くこともしばしば。

で、色々触り始めてみたわけだが、最初に詰まったのがこれ。

cssのhoverが効かないのはまぁわかる。rolloverとかないから。でもactiveが効かないってどうなの?って。

それで見つけた解決方法がこれ。

function setBtnTouch( className ){
var start = "touchstart";
var end = "touchend";

$( "."+className ).bind(start,function(){
$(this).addClass( className+"_hover");
});
$( "."+className ).bind(end,function(){
$(this).removeClass( className+"_hover");
});
}

cssのほうで className+"_hover"のアクティブスタイルを記述しておく。

.cb_white { color: #303030;
background-color: #a6a6a6;
}
.cb_white_hover {
color: #1A1A1A;
background-color: #909090;
}

それで

$(function(){

setBtnTouch( "cb_white" );
});

こんなふうにしてやるとうまくいく。

これで解決…かとおもいきや、pcの時のままonClickでやってるところのタッチの反応が異様に悪い。

<td class="cb_btn cb_white" onClick="doTouch( );">Touch</td>

こういうpcではありきたりの処理。onMouseDownに変えても同じ。
jQueryもスマホには重たいのかな…と思って諦めかけたが、よくよく見てみると上に書いたtouchでスタイルを付けたり外したりする処理はちゃんと応答していることを発見!
ボタンを だだだーと3回連打するとボタンスタイルは3回反応してるのに、onClick,onMouseDownは一回くればいいほうという状態。
え、それじゃonClickをtouchのイベントにすればいいんじゃないの?ということで

<td class="cb_white" ontouchstart="doTouch( );">Touch</td>

こうやってみると、レスポンスは完璧に改善された。
しかしこれってonTouchStartイベントに2つハンドラを付けたみたいになってないかと心配だったけど問題なく両方動くのね。

これで解決…と思ってたら、まだ先があった。
onTouchStartハンドラを書くと、内容に関係なくなんとcssの:activeが有効になるとか。そんな馬鹿な。
ためしにやってみる。

cssを

.cb_white { color: #303030;
background-color: #a6a6a6;
}
.cb_white:active {
color: #1A1A1A;
background-color: #909090;
}

に書き換え。
上のsetBtnTouch関係は削除。

やってみると、確かに動いた!
どうやらこれが最適解のようだ。

試してないけど、onTouchStartのハンドラの中は空でも css :activeが効くようになるとか。どういうこっちゃ。
でもまぁ普通 タッチで反応があるところに何の反応処理もないってことはないので空ハンドラってことはまずないのだけど。
posted by みこあいさ at 22:57| JavaScript

2012年07月31日

JavaScriptでバイナリファイルのMD5ハッシュ値を計算

ファイルのMD5値をちょっと計算したい、と思って調べたら、サイト上でやってくれるところが見つからず、みんな実行ファイルだった。

それだと使用環境が変わるとツールを変えたり面倒なんで、JavaScriptでMD5計算するコードを書いてくれてる人がいたのでそれを使ってブラウザだけでバイナリファイルのMD5ハッシュの値を表示するページを作った。

ちょっと個人的理由でよくあるMD5を16進ダンプした32文字だけじゃなくって、MD5の計算結果16バイトをbase64化したものも表示するようにしてある。需要なさそうだけど。
posted by みこあいさ at 01:52| JavaScript