Archive for the ‘JavaScript’ Category

このページの目次

jQuery UI の effect と hover を組み合わせて使う時のコツ

木曜日, 1月 30th, 2014

こんにちは、なかわけです。

jQuery UI の effect の shake (または bounce)とhover (または mouseover)を組み合わせて使う時のコツです。

要素をマウスオーバーした時に、その要素をプルプル震わせる時の表現として使えます(あんまり使う時ないと思いますが)。

出来上がったものは以下です。

普通にhover とeffect shake を使用するとFirefox でずっとプルプル動いてしまいます。おそらくFirefox のバグです。震えているときにマウスオーバーした要素をラップする要素が生成されるのですが、Firefox がその瞬間をマウスアウトしたと勘違いしているようです。しかし、マウスは実際には最初にマウスオーバーした要素の上にあるので、再度マウスオーバーのイベントが発生する。すると、またラップ要素が生成されて・・・と繰り返されてずっとプルプル震えてしまうみたいです。

コツとしては、マウスオーバーした時にshake アニメーションをしているかどうかを判別するためのクラス animated を追加してあげれば解決できます。マウスオーバーした要素に対して hasClass(‘animated’) で判定してあげて、false であれば animated を追加してshake エフェクトを再生、true であれば何も処理しないという分岐です。

この hasClass(‘animated’) は今回に限らず、そのほかにも応用が利くので便利に使えますね。

Flash のクリックを Google Analytics で追跡する方法

木曜日, 2月 28th, 2013

こんにちは。なかわけです。

Google Analytics でクリックを解析する方法があるんですね。今回初めて知りました。設定の方法は以下のサイトに分かりやすくまとめてあったので詳しくは以下のページを参考にしてください。

Google Analyticsで外部リンク先のクリック数を追跡する方法(2012年1月時点)

で、今回はコレをFlashに適応したいという話。具体的には以下の部分をFlashに適応したいわけです。

<a href="リンク先URL" onclick="javascript:_gaq.push(&#91;'_trackPageview', '仮想URL'&#93;);" target="_blank">テキストリンク</a>

たぶんこんな感じだろうなと思って実装してみたら実際動いて、でももうちょっと確信がほしかったので調べてみたら、Googleグループの英語ページにもありました。
ボタンを押したあとの処理内容に以下のコードを追加すればトラックされます。

ExternalInterface.call("_gaq.push", ['_trackPageview', '仮想URL']);

この件について日本語のページが見当たらなかったので、メモしました。

Lightbox2 の画像サイズの制限をしてみた

金曜日, 6月 29th, 2012

こんにちは。なかわけです。

みんな大好きLightboxの画像の大きさを制限するカスタマイズをしてみました。標準ではないんですね、この機能。
jsとちょこっとcssを変更します。縮小画像を生成する方法ではなく、width, height を指定して表示上縮小する方法です。
今回仕様したバージョンはLightbox v2.51です。元々のコードはこんな感じでした。

    Lightbox.prototype.changeImage = function(imageNumber) {
      var $image, $lightbox, preloader,
        _this = this;
      this.disableKeyboardNav();
      $lightbox = $('#lightbox');
      $image = $lightbox.find('.lb-image');
      this.sizeOverlay();
      $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
      $('.loader').fadeIn('slow');
      $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
      $lightbox.find('.lb-outerContainer').addClass('animating');
      preloader = new Image;
      preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
        $image.width = preloader.width;
        $image.height = preloader.height;
        return _this.sizeContainer(preloader.width, preloader.height);
      };
      preloader.src = this.album[imageNumber].link;
      this.currentImageIndex = imageNumber;
    };

これを以下のように変更しました。


Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader,
_this = this;
var widthRetio, heightRetio, retio;
var maxWidth = 800, maxHeight = 800;
this.disableKeyboardNav();
$lightbox = $(‘#lightbox’);
$image = $lightbox.find(‘.lb-image’);
this.sizeOverlay();
$(‘#lightboxOverlay’).fadeIn(this.options.fadeDuration);
$(‘.loader’).fadeIn(‘slow’);
$lightbox.find(‘.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption’).hide();
$lightbox.find(‘.lb-outerContainer’).addClass(‘animating’);
preloader = new Image;
preloader.onload = function() {
$image.attr(‘src’, _this.album[imageNumber].link);
if(preloader.width > maxWidth){
widthRetio = maxWidth / preloader.width;
}else {
widthRetio = 1;
}
if(preloader.height > maxHeight){
heightRetio = maxHeight / preloader.height;
}else {
heightRetio = 1;
}
if(widthRetio > heightRetio){
retio = heightRetio;
}else{
retio = widthRetio;
}
$image.width = Math.round(preloader.width * retio);
$image.height = Math.round(preloader.height * retio);
if(retio < 1){ $(‘.lb-image’).attr(‘width’, $image.width); $(‘.lb-image’).attr(‘height’, $image.height); }else{ $(‘.lb-image’).removeAttr(‘width’); $(‘.lb-image’).removeAttr(‘height’); } return _this.sizeContainer($image.width, $image.height); }; preloader.src = this.album[imageNumber].link; this.currentImageIndex = imageNumber; };[/javascript] ざっくり説明すると、194行目で制限する大きさを設定しています。幅800px, 高さ800pxに。ここの数字を変えれば好きな大きさに変更できます。 206から220行目までで縮小する比率を求める処理をしています。 221,222行目で画像を縮小しています。 223から229行目では縮小する場合はwidth, height属性を追加して、縮小しない場合はwidth, height属性を削除する処理をしています。 あと、cssも少し変更しました。 [css num=24 highlight_lines="26,27"] /* line 24, ../sass/lightbox.sass */ #lightbox img { /*width: auto;*/ /*height: auto;*/ } [/css] 26,27行目をコメントアウトするだけ。 大抵はこれだけで事足りるんじゃないでしょうか。

jQueryの.load()がブラウザによって挙動がまちまち

金曜日, 5月 28th, 2010

こんにちは、なかわけです。

jQueryの.load()の挙動がブラウザによってまちまちです。
実際、どんな感じか。

index.html

<html>
<body>
<div>
    <a href="hoge.html">hoge</a>
    <a href="fuga.html">fuga</a>
    <a href="piyo.html">piyo</a>
</div>
</body>
</html>

deploy.html

<html>
<hed>
<script src="jquery.js"></script>
<script>
$(function(){
    $('div').load('index.html div a', function(){
        alert('ヾ(*´∀`*)ノロードできた~');
    });
});
</script>
</head>
<body>
<div></div>
</body>
</html>

で、主なブラウザ挙動は以下のような感じ。
Firefox
hoge、fuga、piyoのリンクが出力されて、アラートが2回

Chrome
なにも出力されずに、アラートが1回

Safari
hoge、fuga、piyoのリンクが出力されて、アラートが1回

この結果からみるとSafariの挙動が正しいっぽいけど、
なんでこうもまちまちなのかね~。
jQueryには珍しくブラウザ間の差が吸収されていないのでしょうか。
詳しい方、コメントくださいな!(いつもすいません・・・。)

ロード直後にラジオボタンを選択するjs(jQuery)

木曜日, 5月 27th, 2010

こんにちは、なかわけです。

タイトルのことをしようとすると以下のようなコードになると思います。

HTML

<input type="radio" name="sweets" value="1"/> チョコレート
<input type="radio" name="sweets" value="2"/> チョコラーテ
<input type="radio" name="sweets" value="3"/> ショコラ

Java Script

$(function(){
    //ラジオボタンにchangeイベントを結びつける
    $('input').change(function(){
        console.log('Buono!');
    });
    //ラジオボタンのひとつ目をクリック    
    $('input:first').click();
});

このままでもラジオボタンのひとつ目は選択されますが、
Buono!は出力されません。

これを以下のように変更するとBuono!も出力されてラジオボタンのひとつ目も選択されます。

Java Script

$(function(){
    //ラジオボタンにchangeイベントを結びつける
    $('input').change(function(){
        console.log('Buono!');
    });
    //ラジオボタンのひとつ目をクリック :ここを変更!   
    $('input').get(0).click();
});

はい、これで期待した挙動にはなりましたが、なぜでしょう?
なぜなぜ?
:firstとget(0)の挙動の違いなんでしょうけど、私にはわかりません・・・。
理由がわかる方コメントいただけると助かります。

jQueryの.is(expr)にはめられた

月曜日, 11月 9th, 2009

こんにちは、なかわけです。

今日はjQueryの.is(expr)にはめられました。
実装したかったのはoption要素にselected=”selected”があれば、
ある処理をするというもの。

$(function(){
    if($('select option').is('[selected="selected"]')){
        console.log('exist');
    }else{
        console.log('not found');
    }
});
<select>
    <option value="0">Chocolate</option>
    <option value="1" selected="selected">Donut</option>
    <option value="2">Ice cream</option>
</select>

これを実行するとコンソールに’not found’が表示されます・・。
悩んだ挙句、後輩に相談。

どうやら、.is()はoption要素3つに対して判別を行っていたらしく、
false, true, falseが戻っていたらしく、
3番目のfalseがif()にかけられて’not found’が表示されていたようです。

ちくしょー。

で、とりあえず今回は selected=”selected”があるかないかだけ知りたかったので、
以下のように書いて対応しました。

$(function(){
    if($('select[name="nationality"] option[selected="selected"]').length){
        console.log('exist');
    }else{
        console.log('not found');
    }
});

自分が未熟なのがいけないんだけど、よくこういう問題にはめられる気がする・・・。
頼りない先輩ですまん・・・(´・ω・`)

Javascriptって2次元の連想配列できないの?

金曜日, 11月 6th, 2009

こんにちは、なかわけです。

今日仕事中にJavascriptにハメられたことをメモ。
メモしておけば同じ過ちをしないと思ったので。

2次元の連想配列が作りたくで以下のように書きました。

//TypeA
TypeA = {};
TypeA['hoge']['fuga'] = 'piyo';
alert(TypeA['hoge']['fuga']);

こうすると、alertはでないし、なかわけの環境ではスクリプトエラーも出ませんでした。
おかしいなあと思って、その時はとりあえず1次元の連想配列でやり過ごしました。

お家帰って思いつきました。
TypeA = {};
はObjectであっても、
TypeA['hoge']
はObjectではないのでfugaプロパティが追加できない(配列的に扱えない)!

てことで、以下

//TypeB
TypeB = {};
TypeB['hoge'] = {fuga : 'piyo'};
alert(TypeB['hoge']['fuga']);

のように書くか、もしくは

//typeC
TypeC = {};
TypeC['hoge'] = {};
TypeC['hoge']['fuga'] = 'piyo'
alert(TypeC['hoge']['fuga']);

のように書く必要があったのですね。
あーしょうもないことに時間費やした・・・。
でも、ここにメモしたので一生忘れない!

PHPでPOSTしつつページを移動する

木曜日, 7月 2nd, 2009

こんにちは、なかわけです。

今日はPHPの話。また仕事中にした作業のメモです。

AページからBページ(別サイト)にPOSTしたいのだけど、

  1. Aページの文字コードはUTF-8で、BページにはShift-JISでPOSTしなければいけない。
  2. またAページの文字コードをUTF-8からShift-JISに変更することができない。
  3. さらにBページのウィンドウをJavascriptで開かないといけないという環境でした。

エンジニアに相談したらcURLを使ったら?とアドバイスをもらったんだけど、cURLはPOST先のhtmlを取得することはできるんだけど、ページ自体を遷移(移動)することができなかったので、ボツでした。

考えた挙句、1ページはさんでそのページではJavascriptで自動的にFormをBページへPOSTするようにしました。つまり、

Aページ → A’ページ →Bページ

という流れです。A’ページの文字コードはShift-JISです。

具体的にはこんな感じでした。本当はもっと複雑な処理してますが、わかりやすく簡単にまとめます。

Aページ(UTF-8)

<form action="A'ページ" method="post" target="aDashPage">
    <input type="input" name="chocolate" value="ビターが好き" />
    <input type="submit" value="A'ページへ" onclick="window.open('', 'aDashPage')" />
</form>

送信ボタンのJavascriptではウィンドウ名を「aDashPage」とurlを指定しないで空白のページを開きます。そして、そのウィンドウに対してFormをPOSTするようにします。

A’ページ(Shift-JIS)

<script type="text/javascript">
    window.onload = function(){
        document.postForm.submit();
    }
</script>

<form action="Bページ" method="POST" name="postForm">
    <input type="hidden" name="chocolate" value="<?=mb_convert_encoding($_POST&#91;'chocolate'&#93;, 'SJIS', 'UTF-8')?>" />
</form>

A’ページではメンドクサイですけど、もう一度フォームを作っていますが、type=”hidden”にして表示しないようにしています。また、window.onloadでページの読み込みが完了したらFormをPOSTするようになっていますので、環境によりますが1秒くらいでBページに自動POSTされBページが表示されます。

PHPの言語仕様としてPOSTしてリダイレクトすることはできないようですね。なんかいろいろ問題あるみたい。調べてた記事がどこいったかわからなくなっちゃった・・・。

jQueryの.children()と書き方

水曜日, 7月 1st, 2009

こんにちは、なかわけです。

仕事中にjQueryの書き方がわからなくて後輩に聞いてみた。すぐ返答が来た。

$('ul').each(function(){
    $(this)
        .children('li:odd')
        .addClass('colored');
});

.children()に引数を渡して要素を指定できたんですね。知らなかった。

あと、$(this)のあとにチェーンする場合は、メソッドごとに改行した方が処理が早いんだって。
納得いかない。なんで?

Javascriptのクロージャについて

火曜日, 6月 23rd, 2009

こんにちは、なかわけです。

仕事でプログラムをよく書くんですが、よく書くわりにあまり詳しくなくて困ります。

これではいかんと思って、毎回調べながら書いているわけですが、

よく見る書き方で「なんでこうやって書くんだろう」というものも多々あります。

今日はクロージャについて。

といってもなかわけがまとめるよりもっと頭のいいまとめのうまい人がいるので、

その方のページを貼っておきます。

■builder

http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/story/0,3800083428,20378258,00.htm

とてもよくわかる解説です(変わった気がします、たぶん)。

最近、Javascriptでもオブジェクト指向っぽく書くことが多いので身につけておかないとな~。