今回はFirebugの利用とフェード効果を使ったサンプル

前回の第5回では、第1回から第4回までの復習と、Firebugの使い方を主としてみてきました。jQueryについての基本的な使い方に加えて、Firebugの基本的な使い方を押さえていますので、まだ復習をされていない人は、まずはこの先に進むまえに、一度復習をしてから是非読むようにしてください。

さて、今回の内容ですが、今回も前回に引き続きもう少しだけFirebugを使って、jQueryを使ったコードの状態を確認する方法などを見ていく方法と、フェード効果を使った簡易ロールオーバー機能についてをご紹介しようと思います。

コード中のconsole.log()

これまでの回で何度かconsole.log()を使って、Firebugのコンソール上に選択されている要素が何であるかを確認したりしてきたのをおぼえていますでしょうか？前回もconsole.log()の利用方法をいくつか挙げましたが、console.log()を使うと、括弧（）内に指定した値を、Firebugのコンソール上に表示させる(ログとして残しておく)ことができるので、変化の様子を都度追うのに活用することができます。

前回の復習として、一つチェックしてみましょう。

var elements = $('p');
console.log(elements);

この上記のコードを、入れたページを表示してみると下記のような結果になります。

これをFirebugのコンソール上で実行する場合、一度変数の中に入れておき、変数名だけを書いておくことでconsole.log()で指定したのと同じ結果が表示されます。

この変数名だけを書いてコンソールに表示させるのは、あくまでFirebugのコンソール上での指定のみということだけはお忘れずに。

変数の中身を追う

console.log()の便利な点は、コード上のconsole.log()が実行された時点の中身を随時コンソール上に表示してくれるので、コード内での変数の中身の変化なども追うことができます。

コード中の様々な箇所にconsole.log()を入れたサンプルを見てみましょう。

$(function(){
    //elementsにP要素をjQueryオブジェクトを入れる
    var elements = $('p');
    
    //変数elementsをコンソールに表示
    console.log(elements);
    
    //P要素の数をコンソールに表示
    console.log(elements.length);
    
    //変数cをコンソールに表示(この時点ではcの中は空)
    console.log(c);
    
    //変数cに文字を入れる
    var c = 'P要素のテキストを変数に代入';
    
    //変数cをコンソールに表示
    console.log(c);
    
    //P要素の数だけ繰り返す、加算されるiも指定
    elements.each(function(i){
    	
        //each()中のthisはドコを参照しているかコンソールに表示
        console.log($(this));
        
        //変数cにthisのテキストを代入
        c = $(this).text();
        
        //変数cをコンソールに表示
        console.log(c);
        
        //変数iをコンソールに表示
        console.log(i);
    });
});

上記のデモをFirebugで表示すると、コンソール上に以下のような表示がされます。

jQuery(p, p, p, p, p, p, p, p, p, p)
10
undefined
P要素のテキストを変数に代入
jQuery(p)
P要素1番目
0
jQuery(p)
P要素2番目
1
・・・以下略

サンプル8～9行目

変数cの中身が変化していることと、その他の変数やthisの中身はどれを示しているのかなどが表示されるようになります。

結果で2行目「10」となっている部分が下記の表示結果です。

//P要素の数をコンソールに表示
console.log(elements.length);

サンプル11～15行目

結果で3行目で「undefined」となっているのは、そこまでに変数の宣言も何も指定がないので、中身が何もないという結果の「undefined」が表示されます。変数の宣言とそこへの代入を行ったあとは、代入した値が表示されるのも。4行目の結果「P要素のテキストを変数に代入」の表示でわかると思います。

//変数cをコンソールに表示(この時点ではcの中は空)
console.log(c);
    
//変数cに文字を入れる
var c = 'P要素のテキストを変数に代入';

サンプル17～31行目

each()メソッドを使って、P要素それぞれに対して指定しているので、each()内がP要素分繰り返されます。繰り返されている中でそれぞれの値がどのように変化しているのかも、console.log()を入れておくことで毎回の変化を表示してくれます。

span class="comment">//P要素の数だけ繰り返す、加算されるiも指定
elements.each(function(i){
    	
//each()中のthisはドコを参照しているかコンソールに表示
console.log($(this));
        
//変数cにthisのテキストを代入
c = $(this).text();
        
//変数cをコンソールに表示
console.log(c);
        
//変数iをコンソールに表示
console.log(i);
});

「.each(function(i){});」と、eachのfunctionでiなどの変数を入れておくことで、繰り返されている回数が代入されます。（⁠1回目＝0番目）今回のサンプルの場合、P要素が10あるので、each内では10回繰り返し処理が行われます。数値も0スタートなので、最終的にはiの値は9になっています。

このように、console.log()を確認したいところに入れておくことで、変数や要素の確認などをすることができます。自分達も、コードを書くような場合で、うまく動作しないような場合は、このconsole.log()を利用しています。自分が意図した値が入っていないようなこともありますので、自分の書いたコードがうまく動作しないような時に、このconsole.log()を活用してください。

フェードとFirebug

console.log()の話はここまでとして、次はFirebugのHTML上での変化をみたいと思います。

要素のCSSなどをjQueryなどを使って変化(表示非表示やCSSなど)させたとき、その変化の様子をFirebugのHTMLタブの項目にて確認することができます。ここで一つ、またサンプルを用意しましたので、FirebugのHTMLタブ部分を表示した状態で、サンプルを実行してみてください。

$(function(){
    $('dt','#sample3').toggle(function(){
        $(this).next().fadeTo("slow", 0.3);
    },function(){
        $(this).next().fadeTo("slow", 1.0);
    });
});

<dl id="sample3">
    <dt>ここをクリック</dt>
    <dd>ここの透明度が変化します</dd>
</dl>

DT要素をクリックすると、DD要素の透明度がゆっくり目に変化するというサンプルです。Firebugの変化の様子は下図のようになります。

サンプルの実行前から実行後で、HTML上でのstyleが変化しているのがわかると思います。

コンソールだけでなく、HTML上でどのような変化が起こっているのかというのを確認するのも、jQueryを使ったコードの確認などでは重要になってきます。今回はfadeToで透明度を変化させてのサンプルなので、styleの値が変化する状態を確認できます。

HTML上で変化がある箇所は、変化中背景が黄色になります。変化している箇所がわかりやすくなっていますので、変化している箇所が間違っていないのか、変化の値がどのようになっているのかなどのチェックにFirebug上のHTMLをチェックするようにしてください。

FireQueryが入っている場合、jQueryのイベントなどが付いている箇所には「events={ click=Object }」と表示がされるようにもなっています。イベントが付いているかどうかの確認でも利用してみてください。

fadeTo(変化の速さ,透明度)

今回のサンプルは、fadeToメソッドを使い、透明度を変化させています。変化の早さは、'fast'や'slow'のほか、数値（1000ミリセカンド＝1秒）で指定します。透明度はCSSで言うopacityの変化で、1.0が完全に見える状態で、0に値が近づくほど透明になる指定ができます。0の指定で完全に見えなくなりますが、hide()とは違い、要素の範囲はそこに残ったままになっています。（⁠≠display:none;）

toggle(fn1,fn2,[fn3,fn4...])

前回までに利用したtoggleの動作(表示・非表示を切り替える)とは違い、クリックするたびに指定したfnが順に変わるという指定です。今回のサンプルでは、クリックするたびにDD要素が、透ける→元に戻る→透ける…を繰り返すようになります。

クリックする度に呼び出す機能を変えて、それを繰り返させるような場合は、このtoggle()を利用しましょう。

透明度を利用した実践サンプル

それでは今回の最後に、透明度の変化を利用した実践サンプルを一つ紹介いたします。

$(function(){
    $('#sample4').hover(function(){
        $(this).fadeTo(200,0.5);
    },function(){
        $(this).fadeTo(300,1.0);
    });
});

<div id="sample4"><p>ここにマウスを乗せてください</p></div>

透明度を利用した簡易ロールオーバーです。これを利用することで、たとえ画像が1枚であっても、画像でなくてブロック要素やテキストなどでも、あらゆるところでロールオーバーを簡易的に実現することができます。画像の用意が間に合わないようなときや、簡易的にロールオーバーを実装したい場合などで実用的です。

CSSだけで実装するのと違い、変化までの様子も表現されるので、ふわっとした感じのロールオーバーになります。

変化の速度を遅くしたり、もっと早くしたり、透明度を替えるなどをすることで、ロールオーバーを実行した時の印象も変化させることができるので、好みに合ったロールオーバーを簡単に実装できます。

今回はDIV要素に対して指定しましたが、IMG要素でも、P要素でも、好きな箇所を指定して利用してください。

今回の第6回も比較的簡単目なサンプルをご紹介しました。今後さらにコードが複雑になったりもしますので、Firebugを活用するようにしてください。うまく動作しなかったときなどはconsole.log()を利用したり、Firebug上でHTMLをみて、どのような変化が起こっているのかなどを、確認するようにしてください。