時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

jQueryのkeydown, keyup, keypressのイベント時におかしな値がくるー! Android Chrome

まぁ基本的にここのブログに詳しく書いてました。

 

JavaScript : 日本語入力時のキーイベント。 - freefielder.jp

 

keydown, keyup, keypressでイベントを取っているとAndroidChromeで挙動が何かおかしい。。。

 

上記のブログにあるここで確かめたけど・・・あれ?

 

おかしい値は来てないな~・・・

 

こうなったら全部吐き出してやろう!

って、自分で上記のkeyCode表示jsみたいな感じのを作ってみました。

 

その結果わかったことは

 

なんかkeyCode undefinedが来てやがる・・・

 

は?

 

ってことで

 

if(event.keyCode === undefined){

    return;

}

 

を一番上に入れてやりました。

 

これってバグじゃね?とか思いながら

 

jQuery 1.9使用時なのでそれ意外はわかりません。

jQuery Mobile のpopupが移動してしまうのを防ぐ

jQuery mobile (1.3) のpopupで場所を指定して開いたのにWindowサイズを変更したり、Android端末でスクロールしようとしたりするとpopupが中央に移動してしまいます。

 

今回の記事ではそれを防ごうってわけです。

 

まず、Windowサイズを変更した際になぜ中央に移動してしまうのか

知りません。・・・

なんででしょうね。

座標を再計算しないと何かしらの不都合があるのでしょう。

 

それなのにpopupの後ろに表示しているあいつ(モーダル時)はサイズそのままなんですよね・・・

 

ま、移動されてしまうわけです。

なので、移動後のイベントが取れるのでそいつを利用します。

popupbeforepositionイベント

 

ポップアップの要素にイベント追加

$("#myPopup").on("popupbeforeposition", function( e, data ) {
  delete data.x;
  delete data.y;
  data.positionTo = "#myLink";
});

dataに座標が入っているようです。
data.xはx軸座標
data.yはy軸座標
data.positionTo はwindowだとかoriginだとかの情報が入っています。

初めはdata.positionTo = "origin";でいけるんじゃね?と思ったのですがダメでした。
originだとここではどいつを指してるのかわからないですもんねw

で、結果としては
data.xを削除
data.yを削除
data.positionToに要素のセレクタを指定してやるとうまくいきました。

座標で表示したい場合は・・・
たぶんdata.xとdata.yを指定してやれば・・・
やってないのでわかりませんw

暇があればやっておきますね(←やらないパターン

それではあなたも楽しいpopup生活を!

参考

Popup doesn't take into account positionTo on resize? · Issue #4905 · jquery/jquery-mobile · GitHub

システム開発時に考慮すべき点 その1 外部コンポーネントなどを使う時

最近、自分の書いたところと違うところでバグが発生します。

この箇所が同じ会社、パートナー会社ならまだよいのですが、外部のコンポーネントをしようして、そのコンポーネント内でバグが発生する際は本当に厄介。

 

せっかく、無駄な処理をコンポーネントにより排除したのに、余計な手間がかかってしまいます。

簡単なバグならコンポーネントをラップしてやればいいかもしれません。

今後のことも考えると、コンポーネントはできる限りいじらない方法がいいでしょう。

 

ですが、コンポーネントのコア部分など、どうしてもラップだけでは解決できないようなバグが出てきた場合。

大変です。

本当に。

 

 

・原因箇所がわかりにくい

・原因箇所を変えると他の場所も変更しなければならない

(・原因箇所がコア付近に近づくにつれ、影響範囲が大きい)

 

 

こいつらは本当に

 

「簡単だ!」「軽量だ!」「こいつ使えばこれだけのコーディングでこんなリッチなものができる!」

安易に導入するのはよくないですね。

 

javascriptを扱っている人なら聞いたことはあるであろうjQuery

もしかしたら、javascript=jQueryって思ってる人も・・・思っていなくても、jQuery無しではなかなかコーディングが。。。って人もいるのではないでしょうか?

 

ですがjQueryでさえバグは潜んでいます。

そんなjQueryを使ったコンポーネントたち。。。さらにバグは増えます。

そして、多機能、高性能っぽいものは中身が複雑なのでどうしてもある程度のバグが・・・

 

私も、どんどんいろいろなコンポーネントを使用したいです。

なにせ、ゆとり教育真っただ中だったので・・・

 

まずは、システムの仕様を固めましょう。

本当に細かく、細かく。

そして、コンポーネントを使う際は、

システムの仕様に合ったコンポーネントを複数あげ、1つずつ仕様で決めたことが確実に動くことを確かめてからコンポーネントを選択しましょう。

さらに、そのコンポーネントで使う機能が簡単な処理であれば自作し、コンポーネントの使用を避けましょう。

 

できる限りバグを避け、期待通りの動作をするシステムを心がけるましょう!www

 

ってか、おめーtry chatchしてねーからしろよ!

 

ってのは冗談でまとまりがなくなってきました。

 

最後に

 

外部コンポーネントは便利な反面、見えないバグが隠れ潜んでいることを念頭にして、選定してください。

 

 

※仕様はシステムの心臓です

jQuery.upload.js でずっと応答が返ってこないときの対応

この前こんなのを書きました。

IE8も対応? jquery.upload.js(jQueryプラグイン)でのエラー対策

 

これだけではダメだったようで、javascriptを取得した後にネットワークが切断された際。

jquery.upload.jsに渡しているCallBackが実行されません。ずっと・・・

 

なぜかというとjquery.upload.js内でjQueryの.load()をやっているためでした。

こいつはtimeoutがなくて、値が取得できるまで一生(!?)待ち続けます。

 

そこで対策としては

jquery.upload.jsの

iframe.load(function()

っていう行の上に

 

var loadTimeout = setTimeout(function(){

}, timeout);

 

こいつを追加します。(timeout はタイムアウト時間、適当に設定してやって)

 

そして、こいつの中にエラー処理を追加してやります。

また、先ほどの

iframe.load(function(){

    clearTimeout(loadTimeout);

    /*省略*/

});

って感じで1行追加しておいてやるのを忘れずに!

 

私は、

var loadTimeout = setTimeout(function(){

    var data = null;

 

    form.after(self).remove();

    checkbox.removeAttr('checked');

    checked.attr('checked', true);

    if (inputs) {

        inputs.remove();

    }

 

    setTimeout(function() {

        iframe.remove();

        if (callback) {

            callback.call(self, data);

        }

    }, 0);

}, timeout);

ってな感じで書いて、上位のCallBack内でエラー処理をしています。

ホントはdataになにかしらのデータを突っ込んだ方がよいのでしょうかね。

 

なにげに.remove()は重要な気がします。

ちなみに.remove()はその用を削除すると同時にイベントも消すという素晴らしい機能を持っているようです。

 

今回はjquery.upload.jsってよりも、「jQueryの.load()にtimeout処理を追加する」って言った方がいいかもしれませんね。

jQuery flot IE8でのバグか!?

flotは基本canvasを使用しています。

 

しかし、excanvas.jsを読込むことによりIE8でも表示が可能になります。

 

excanvas.jsを読込む、ただそれだけ。だった気がする

 

ですが、古いバージョンではうまく動いてくれないようです。

なんかtrankから読込むといけるよ!ってかいてるけど・・・それって・・・

って感じですね。

 

今のバージョン(0.8くらい)だと普通に動きます。

 

ですが、やっぱり完ぺきではないようです。

 

所々で動作が意図したものと違う

 

こちらのQAサイトでも見つけました。

jquery - JqueryFlot inconsistent issue IE8 - Stack Overflow

 

いくつかのポイントでホバーイベントが(Chromeでは動くのにIE8では)動かないようです。

 

今回は報告まで

PHPのやっかいな比較 0 と null は同じ!? 0 は empty !?

①$hikaku = null;

②$hikaku = 0;

③$hikaku = "0";

 

if($hikaku == 0) {

    echo "0だよな?";

} else {

    echo "0じゃないよな?";

}

 

 

ってものを作ります。

結果は①②③ともに

 

0だよな?

 

になります。

はぁ?

 

私は②と③だけが"0だよな?"になると思っていましたがそうではないようです。

 

もちろんphpには== と===の演算子があることも知っています。

でもさ・・・

 

詳細はこちら

PHP: PHP 型の比較表 - Manual

 

ってことで

if($hikaku == "0")

とすることで

0と"0"だけが通る場所を作れそうです。

 

あ~ややこしい。

 

他にも

empty(0)

は true だったりとややこしいもんです。

IE8も対応? jquery.upload.js(jQueryプラグイン)でのエラー対策

ajax通信でファイルをアップロード!

HTML5が使えればいいんですけど、IE8とかあれ何で・・・こいつを使用していました。

最近いろんなサイトのリンクが切れてるみたいです。

(サイトがなくなったのかな?2013年11月とかの記事のリンク切れてたりしてたな) 

 

jQuery.upload | jQuery Plugin Registry

 

ここから見るとまだあるようですね。。。

ってか、人気ないねw

jQueryプラグイン - uploadでの検索結果

 

ちなみに私は1.0.2を使っていたのですが、返信形式をjsonにして、timeoutなどの時どうなるのか実験してみました。

 

そしたら、IEでエラー・・・・(他のブラウザもだったかな?)

おい!

 

私の場合は 116行目でエラーが発生しましました。("()" syntax error みたいなの)

jsonじゃないデータが返ってきたときにうまく処理できてないようですね。

jQueryなどをいじるのは面倒なのでjquery.uploadをいじります。

 

原因

jQueryajaxでは、sessionが成功時、errorがエラー時といったように分かれていますが、jquery.uploadではわかれていません。

全てが同じところで処理されます。

そのため、jquery.upload内でエラーが発生しているようです。

 

対策

110行目あたりのswichすべてをtry{}とかで囲んでやって

catch{}内でreturn data;してやればok

ただ、返ってくるところで自分なりに処理をしないといけないですけどね。

 

ま、jquery.uploadが単純なので自分なりにカスタマイズするのもありかもしれません。

 

※カスタマイズによるあれやこれやはライセンスを見てくださいね

 

 

※追記

上記のことをやっても他の箇所で解決にはならないようで・・・

追加でこんなの書きました。

jQuery.upload.js でずっと応答が返ってこないときの対応