Adobe Developer Connection（AD）

Dreamweaverを使ったjQuery入門
後編　～要素の追加・削除、イベント処理、アニメーションを実装

原題：jQuery入門 with Dreamweaver CS5.5　後編

白石俊平（株式会社シーエー・モバイル Web先端技術フェロー）[著]

2012/05/01 14:00

ポスト

ダウンロードサンプルソース (51.3 KB)

Page 1
- 要素の追加／削除
Page 2
- イベント処理
- アニメーション
Page 3

サンプル作成を通じて、jQueryの機能を理解する

　ここまでに解説したjQueryの機能を用いて、前回作成したサンプルを改善してみましょう。以下のように変更します。

図1　情報バーに「閉じる」ボタンをつけます。そのボタンをクリックすると、情報バーがフェードアウトして消え、それ以降は表示されないようにします（ページをリロードすると、また表示されるようになります）

図2　前回のサンプルでは、情報バーは一瞬で現れたり消えたりしていましたが、横方向のスライドアニメーションで表示／非表示が切り替わるようにします

ステップ1　閉じるボタンのマークアップを追加する

　情報バーにid属性「closeButton」を持つdiv要素を追加します。さらにCSSを用いて、ボタン風のUIにしています。

<section id="infobar">
    <h1>情報ウィンドウ</h1>
    <div id="closeButton">×</div>
    <p>
    この本文は<a href="http://www.aozora.gr.jp/" target="_blank">青空文庫</a>から借用した、宮沢賢治の「銀河鉄道の夜」です。<br>
    全文を読みたければ<a href="http://www.aozora.gr.jp/cards/000081/files/456_15050.html" target="_blank">こちら</a>からどうぞ。
</section>

ステップ2　閉じるボタンの処理を追加する

　閉じるボタンに関する処理は以下の通りです。このたった4行に今回解説した事柄が詰め込まれています。

// (1) 閉じるボタンをクリックされた時 
$('#closeButton').click(function() { 
    // (2) 情報バーをフェードアウトし、 
    infobar.fadeOut(function() { 
        // (3) アニメーションが完了したら、情報バーの要素を削除 
        infobar.remove(); 
    }); 
});

jQueryオブジェクトのclick()メソッドを使用して、クリック時の処理を記述しています。
fadeOut()メソッドを使用して、情報バーをフェードアウトさせます。fadeOut()やanimate()をはじめとしたアニメーション系のメソッドでは、引数に関数を指定すると、アニメーションが終了した際にその関数が呼び出されます。
remove()メソッドを使用して、情報バーをDOMツリーから削除しています。これにより、リロードするまでは情報バーが表示されることはなくなります。

ステップ3　情報バーの表示／非表示をアニメーションさせる

　情報バーを表示する方法として、前回はrightプロパティに値を直接指定していました。

infobar.css('right', 0);

　今回は情報バーが右から左にスライドして現れるよう、以下のようにanimate()メソッドを使用してrightプロパティの値を変更しています。

// 500msかけてrightの値を0まで変化させる
infobar.animate({
   right: 0 
}, 500);

　情報バーを隠す処理も同様です。animate()メソッドを以下のように指定しています。

infobar.animate({
   right: -infobar.outerWidth() 
}, 500);

　たったこれだけで、非常に心地よいアニメーションを実現することができます。

コラム：CSS3を使用したアニメーション

　CSSには「CSS3 Transition」や「CSS3 Animation」といった新たなアニメーション関連の機能が追加されており、これらを利用すればJavaScriptを使わずともアニメーションを実現できます。

　サンプルの情報バーを表示／非表示にする処理は、rightプロパティを500ミリ秒かけて操作しているのみです。このように、「あるプロパティの数値を一定時間かけて変化させる」という処理は、CSS3 Transitionを用いれば簡単に実現できます。例えば、情報バーのCSSに以下のようなプロパティを追加します。

#infobar { 
    position: fixed; 
    bottom: 10px; 
    right: -414px; 
    
    ...中略... 
    
    /* CSS3 Transition */ 
    transition: right 500ms; 
    -webkit-transition: right 500ms; 
    -moz-transition: right 500ms; 
    -o-transition: right 500ms; 
    -ms-transition: right 500ms; 
}

　いくつかのプロパティを記述していますが、本来はtransitionプロパティだけですむべきです。しかし、CSS3 Transitionの仕様がまだ固まっていない現在では、各ブラウザーはドラフト版の仕様にもとづいた独自実装を行なっているため、「-webkit-」や「-moz-」などの接頭辞を持つ特別なプロパティも同時に記述する必要があります。

　そして、情報バーが表示された状態のCSSも追加しておきます。

#infobar.visible { right: 0; }

　そして、このvisibleクラスをJavaScriptで付けたり外したりするだけで、自然なアニメーションが実装されます。jQueryのaddClass()、removeClass()というメソッドを用いればclass属性を操作できます。

if (scrollBottom < 200) { 
    if (infobarHidden) { 
        infobarHidden = false; 
        // 情報バーを表示 
        infobar.addClass('visible');
    } 
} else if (!infobarHidden) { 
    infobarHidden = true; 
    // 情報バーを画面の右に隠す 
    infobar.removeClass('visible'); 
}

　こうしたCSS3のアニメーション機能を使用すれば、アニメーションの処理にJavaScriptを用いる必要がなくなるため、コードがシンプルになるだけではなく、アニメーションの処理をブラウザーに任せることができ、処理負荷が低くてスムーズなアニメーションが期待できます。

　ただ、CSS3のアニメーション機能は、ブラウザーによってサポート状況が異なります。そのため当分の間は、JavaScriptによるアニメーション処理も使われ続けると思われます。

おわりに

　これまで2回にわたって、具体的なサンプルとともにjQueryの使い方を学んできました。jQueryを使用すると、実現したいUI処理を非常に短いコードで実現できるようになります。また、Dreamweaverを使用することで、JavaScriptやjQueryのコーディングをより高速に行えるようになります。

　この記事が、みなさんがjQueryプログラミングに踏み出すきっかけになれば幸いです。