page_adsence

ラベル Jquery の投稿を表示しています。 すべての投稿を表示
ラベル Jquery の投稿を表示しています。 すべての投稿を表示

2012年3月14日水曜日

JsonpでAjax通信時にネットワーク系のエラーが発生した際のエラーハンドリング

Twitterからタイムラインを取得してきて、表示するという単純な処理を書いていたのですが、
IP別に1時間のリクエスト数が150を超えると400 Bad Requestとなってしまうため、
callback関数が呼ばれずに処理が途中で終了してしまうという現象に遭遇した。

てっきりJSONPの場合もerrorとかの関数も呼ばれていると思っていたのですが、そうではない様子。
試しにerrorとか書いてみても全く反応なし・・・。

調べてみたらどうやらJSONPの場合はsuccessとcomplete以外はコールされないらしい。
とりあえずググってみたら、案の定出てきました。

「jquery.jsonp.js」

これを使えば普通にエラーハンドリングができそうです。

$.jsonp({
    url: "http://hoge.jp/",
    callback: "callback_function_name",
    success: function(json) {
       // This will be called in case of success no matter the callback name
    },
    error: function() {
       // This will be called in case of error no matter the callback name
    }
});

2011年10月27日木曜日

jquery.tmpl.jsがかなり便利

Javascriptでテンプレートエンジンって、今まで使っていなかったんですが、
jquery.tmpl.jsが結構便利な感じ。

配列の中に、連想配列をいれた状態で$.tmplに渡すと、配列の数分のHTMLが生成されて返ってくる。
今までeachでまわしたり、文字列を置換したりしてたのが一気にできる。
これ、結構やばいかも。

2011年5月11日水曜日

jCalendar.jsでは年月日のセレクトボックスが必ずないと挙動がおかしくなる

今までjCalendar使ってましたが、今回初めて年月しかないセレクトボックスを作った際の挙動がおかしかった点。
1ヶ月間の数字の集計をする際に、セレクトボックスで年月を指定するように作ったのだが、
postして次の画面に進んだ後に戻るとHTMLにselectedときちんと書かれているにも関わらず、
別の月が選択されてしまうという現象が起こった。

HTMLの記述は間違ってなさそうだし、そもそも別の部分(年月日)で試した場合は問題ない。
で、Firebugでブレイクポイントを設定してリロードしてみた。
すると、最初はちゃんとした月が選択されているが、

$(要素).jcalendar();

を実行された後に月が当月に変ってしまう状態になっていた。
別のところでは問題なく動いているので、jCalendar自体がバグっているとは考えにくい。
なので、とりあえず日のセレクトボックスを足してみたら、
見事にちゃんとした挙動になりました。

本来ならソース読んでから対応するのが当たり前なのですが、
ちょっと急いで帰りたかったら、とりあえずおk。
後でソース読もう。

2011年3月31日木曜日

CSSを動的に追加したい場合にIE6でうまくいかない件

jqueryのプラグインっぽく作ってるカレンダーのやつでcssとかHTMLにいちいち差し込むの面倒なので、
JS側で後から追加しようと思っていたら、なんかIE6だけうまくいかない現象があった。

通常のブラウザはJqueryでlinkタグをheadに追加する形で問題なかったが、
IE6はそうはいかないらしい。
なので、IE6用に処理を追記する形をとった。

document.createStyleSheet(cssUrl);

この1行を追加するだけでいけました。
意外と楽にいけた。

2011年3月28日月曜日

jCalendar.jsに関して

セレクトボックスと連動型のカレンダーを探していたら、jCalendar.jsというのが見つかったので、
早速使ってみた。
このjCalendar.jsは制約として1ページにつき、1つのカレンダーしか作れないようになっている。
1ページに複数入れたい場合は改造が必要になる。その改造方法に関しては別のエントリーで解説する。

jCalendar.jsのダウンロードはここから可能です。

使い方は以下の通り。
  • 1.Jquery.jsをダウンロードしてくる。
    (対応バージョンは一応1.0.4 or 1.1.2と書かれていますが、今回1.4.3を使ってみましたけど、特に問題無かったです。)
  • 2.jCalendar.jsとjCalendar.cssを上記サイトのuseタブをクリックしたページの
    「Download jCalendar — source or compressed or svn checkout
    からダウンロード。
    今回はデザインや挙動を含め、いろいろと変更することが想定されたので、source版をダウンロードしました。
  • 3.年月日のセレクトボックスにそれぞれ「jcalendar-select-year」、「jcalendar-select-month」、「jcalendar-select-day」のクラスをつける。
  • 4.クラスを付加した年月日のセレクトボックスを<div class="jcalendar-selects">で囲む。
  • 5.それをさらに<fieldset class="jcalendar">で囲む。
  • 6.Jsで以下のコードを実行。
    $(function(){
        $('fieldset.jcalendar').jcalendar();
    });

※注意点
セレクトボックスのvalueで1桁の数字を0詰めしている場合は、カレンダーを操作してもセレクトボックスの値が書き変わらないので、注意が必要。

デフォルト状態での使い方は以上。
一応使用可能状態のHTMLも以下に記述しておく。

<fieldset class="jcalendar">
    <div class="jcalendar-selects">
        <select class="jcalendar-select-year">
            <option value="2011">2011</option>
        </select>
        <select class="jcalendar-select-month">
            <option value="3">3</option>
        </select>
        <select class="jcalendar-select-day">
            <option value="1">1</option>
        </select>
    </div>
</fieldset>

2010年5月26日水曜日

Jqueryの高速化に関して

基本的には以下の通り。

1.常に最新版を使う。
 これは言うまでもなく、Jqueryはアップデートの度に処理が高速化されています。
 プロジェクト発足時には常に最新版を使用するように心がけたほうがいいと思います。
 ただし、開発中やリリース後に変更する場合は開発環境で何度もテストしてからリリースしないと
 思わぬことが起こるかも知れません。

2.Javascriptのファイルはリリース前に1つのファイルにまとめて圧縮するとよい。
 これはサーバに対するリクエストの回数を減らすためというのと、
 ファイル容量を減らすことでレスポンスを早くするためというのがあります。
 YUI Compressorは変数名を短くしたり、動作に影響しないコメントや空白を除去してくれます。
 使い方はStackTraceを参考に。

3.eachよりfor文を使う。
 JqueryよりJavascriptの原文の方が早いってことですね。

4.セレクタにはclass指定ではなくID指定を使用する。
 これはJquryのソースを見ればわかりますが、class指定した場合には全ての HTML ノードを列挙して、それぞれについてクラス名を調べます。
 しかしID指定した場合だとJavascriptに元々あるgetElementByIdで取得できるので早く処理が済みます。

5.セレクタに対象範囲を記述する。
 これは項番4の補足のようなものです。
 Jqueryでセレクタを使用する場合には「IDで取得してから、子ノードに書かれているクラスやタグで絞る」
 これを徹底すべきです。
 IDを与えることによって検索範囲が縮まり、高速化できます。
 マークアップエンジニアとJavascriptエンジニアが異なる人の場合、
 仕様書を元にJavascriptが影響あるであろう範囲に関してはあらかじめ要望を出しておきましょう。
 ただしIDやclass指定を過度にすると、HTML自体が冗長になってしまい、
 後々のメンテナンスにも響いてくるので、Firebugのプロファイルなどを駆使して現在のコードのベンチマークを取ってみてうまくトレードオフしていきましょう。

6.キャッシュやメソッドチェーンを使用する。
 同じセレクタを何度も使用すると毎回無駄に処理が発生してしまいます。
 なるべくキャッシュやメソッドチェーンを使用して記述しましょう。
 個人的にはメソッドチェーンのほうがすっきり書けるので好きです。
よくない例)
$('#test div').css(...);
$('#test div').click(...);
$('#test div').append(...);

よい例:キャッシュを使う)
var tesdiv = $('#test div');
testdiv.css(...);
testdiv.click(...);
testdiv.append(...);

よい例:メソッドチェーンを使う)
$('#test div').css(...).click(...).append(...);


7.DOM操作はなるべくしない
 append()、prepend()、before()、after()などは処理に時間がかかります。
 一度に大量のDOMを操作するとブラウザクラッシュの原因にもなりますので注意しましょう。
 html()のほうが処理ははやいみたいなので、なるべくならこちらを使うようにしましょう。

8.concat()よりjoin()を使う。
 concatとjoinに関してはどうやら違うようです。
 この記事ではベンチマークがとられていて、それを見る限りjoinが早い場合というのはある程度限られた状況におけるものみたいです。
 今まで基本的には配列に入れてjoinしてましたが、Array.join(",") のように、要素間にセパレータを埋め込む場合かIE で沢山(30~?)の要素数がある場合以外は'+'で文字列結合したほうがよいようです。
 ただしコードの可読性とかもあるので、'+'で文字列結合する場合は書き方を気をつけましょう。
 (ある程度長い文字列同士を結合する場合には改行するなど)

9.return falseすること
 「return false;」を忘れると、ページの一番上に戻ってしまうことがあります。
 これは結構煩わしいので、忘れないようにしたいところです。
 
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
原文(英文)です。

http://d.hatena.ne.jp/nitoyon/20081211/jquery_fast_css
問題点や改善方法を手順を踏んで解説してくれています。
Jquery内部でどういった処理が実行されているのかまで書かれているので、
非常にわかりやすいです。

2009年4月24日金曜日

valueの書き換えに関して

Jqueryでinput textに入っている値をkeyupのイベントのタイミングで書き換えを行っていたら、
カーソルが強制的に文末に移動してしまうという現象があった。
発祥したブラウザはIE7のみ

コードは以下の通り。
$('input:text').bind('keyup', function(){
    var input_text = $(this).val();
    $(this).val( parseInt(input_text) );
})

どうもvalueを書き換えると、勝手にフォーカスを移動させるという
おせっかい仕様のせいらしい。

2009年4月21日火曜日

Jqueryのチェックボックス

$(':checkbox').val([1,2,3,4])

でcheckboxを一括で:checkedにできる。

select[multiple="multiple"]

でも同じようにできる。
指定された値以外の項目は

:not(:checked)

になる。

ってさ。
へー、速度が気になる所だけど、これ結構便利かも。

2009年4月20日月曜日

jqueryによる$.ajax通信の終了を取得するには

$.activeを使うと可能。
$.activeにはajaxの通信中の数が格納されており、
0になるタイミングで全ての処理が終わったことなる。

参考ページ
http://hkom.blog1.fc2.com/blog-entry-648.html

http://gihyo.jp/dev/feature/01/jquery/0012?page=3

2008年12月10日水曜日

画像やswfのキャッシュに関して

javascriptのImage Objectを使って画像があるかどうかを判定するコードを書いていると

IE6,IE7でonloadもonerrorもonabortも返ってこないという現象があった。

初回は普通にできるが2回目以降のチェックの際にURL自体はもらってきているのに、

処理が先に進まない・・・。



JqueryのLoad使ってやろうと思ったら、それはシステムエラーでなんかうまく動かない・・・。

なんだろうと思いつつ原因を探ってみると、

どうやらブラウザに残ってるキャッシュにアクセスして判定しようとしていたため、

処理が止まってしまっていたらしい。

キャッシュを残らないように「?~~」(適当なクエリ)をつけて送信すれば、

毎回サーバにアクセスされる。

2008年12月9日火曜日

objectやembedタグに直接display:noneをすると、一部のSafari、chromeで消えない

ジャック中に別のswfは基本非表示にしているが、
objectタグやembedタグに直接display:noneをかけると、Safariやchromeで非表示にならない。
非表示にしたい場合はvisibilityをhideenにする

2008年11月19日水曜日

FireFox3でoverflow:autoがあるとFlashの動作がおかしくなる

いつも通り全画面ジャックのブログパーツを作ってたらへんな現象に遭遇した。

■現象
クリックイベント自体は取れてるが、そのイベントに対してハンドルされているFlashの処理が実行されない。
通常、Flash上で右クリックするとFlash用のメニューがアイコンがある位置に出てくるが、
この場合画面左上のほうに出てくる。
また、アイコンがpointerのはずなのに、defaultになってしまう。

■原因
おそらくblog上にoverflow:autoがかかってるエリア上ではFlashコンテンツがうまく動作しないというブラウザのバグらしい・・・。

■対策
flashのwmodeをwindowにすると普通にいける。
以前IE6で透過するとクリックイベントがうまく取れないという現象があり、
それは透明に近いレイヤーを引くことで解決できた。
同様のことを今回のブログパーツでやってみたがダメだった。
JavaScriptで強制的にCSSを書き換えるにしても、
該当のCSSを検索するのに時間がかかるので現実的ではない。
正直お手上げ。
強行手段としてはいくつか案があるがどれも微妙な気がする。

■案1
CSSを追加することで強制的autoからhiddenにする
*{overflow:hidden !important}


これを全画面ジャック時に適用する。

■案2
wmode="window"のswfをイベントが設定されている位置に浮かせる。
これも相当な力技な上に、複数の場所でイベントが設定されてる場合は大変なことになる。

■参考記事