この連載は、ADC（Adobe Developer Connection）にて紹介されているものです。Adobe社製品の最新技術情報は、ADCをご覧ください！
前編では、jQueryの基本を説明するとともに、実際にスクロールと連動したサンプルを作成しました。jQueryには、さらに様々な機能が用意されています。後編では、その中から以下のトピックを取り上げ、サンプルをブラッシュアップさせてみましょう。
- 要素の追加／削除
- イベント処理
- アニメーション
Dreamweaverを使ったjQuery入門 前編はこちら
要素の追加／削除
前回、attr()やcss()などといったメソッドを使用して、要素の状態を変更することができることを紹介しました。jQueryでは変更するだけでなく、要素そのものを新たに作成したり、削除したりすることもできます。
要素を作成するには、$()の引数に(X)HTML形式の文字列を指定します。例えば、div要素を新たに作成するには、以下のように記述します。
// 下記は省略形。$('<div></div>') でも構わない
var div = $('<div/>');
要素を生成すると同時に、属性を指定することも可能です。
// block1というid属性を持つdiv要素を作成
var div = $('<div id="block1"/>');
また、2つ目の引数を指定して、属性を指定することもできます。
// 第2引数にオブジェクトを指定して属性を追加
var div = $('<div/>', {
id: 'block1'
});
こうして作成した要素をDOMツリーに追加するには、append()やappendTo()というメソッドを使用します。例えば、作成した要素をbody要素内の末尾に追加するとしたら、以下のようなコードになります。
var div = $('<div/>');
// append()を使用する場合
$(document.body).append(div);
// appendTo()を使用する場合
div.appendTo(document.body);
また、要素を（DOMツリーから）削除するにはremove()というメソッドを使用します。
div.remove();
イベント処理
プログラムでUIを実装する場合、様々な「イベント」を処理するという形でプログラミングを行うのが一般的です。「マウスを動かした」「クリックした」「スクロールした」などの断続的に発生するユーザ操作の他にも、「Webページの読み込みが終わった」などのタイミングでもイベントは発生します。そうした様々なイベントに対して、イベント発生時の処理を関数の形で登録しておくと、「イベントが発生した時にその関数を呼び出す」という動作が行われます。
jQueryを用いずに、JavaScriptのみでイベント処理を記述する場合、以下のようなコードになります。しかもこのコードは、Internet Explorer 8以前では動作しません（対応するには、違うAPIを用いる必要があります）。
element.addEventListener('click', function(e) {
～クリックイベント発生時の処理～
}, false);
jQueryを用いると、こうした処理をより直感的に短く記述することができます。
$(element).click(function(e) {
～クリックイベント発生時の処理～
});
| メソッド | 内容 |
| click() | クリックイベントの処理、または発生させる |
| change() | 要素の状態が変更したイベントを処理、または発生させる（changeイベントは、主に入力フォーム要素の状態が変化した際に発生する） |
| submit() | フォームの送信イベントを処理、または発生させる |
| on('イベント名', 関数) | 任意のイベントを処理する |
on()の例として、「要素にフォーカスが当たった」というイベントで処理を実行するには、以下のように記述します。
$(element).on('focus', function() {
～フォーカスが当たった時の処理～
});
また、画面の読み込みが完了したイベントを捕捉するには、以下の2つの方法があります。どちらも同じで、特に違いはありません。
$(function() {
～画面の読み込みが完了した際の処理～
});
$(document).ready(function() {
～画面の読み込みが完了した際の処理～
});
アニメーション
昨今のWebサイトでは、ちょっとしたアニメーションを用いることで、使い心地や見た目の美しさを向上させている例がよく見られます。もはやWebページにとって、こうした演出は欠かせないものになったといってよいでしょう。
jQueryを用いると、アニメーションも容易に実現できます。例えば、要素をフェードイン・フェードアウトさせるには、以下のようなコードを使用するだけです。
// フェードイン $(element).fadeIn(); // フェードアウト $(element).fadeOut();
要素をスライドアニメーションさせることもできます。
// 下から上にスライド $(element).slideUp(); // 上から下にスライド $(element).slideDown();
こうしたアニメーション機能の中核となっているのが、animate()メソッドです。このメソッドの基本的な機能は、「CSSプロパティの値を時系列に沿って変更する」というものです。例えば、以下のように記述すると、要素が現在の座標から(100, 100)の座標まで、2秒間かけて移動します。
// 第1引数が変更後のCSSプロパティの値
// 第2引数がアニメーションの時間(単位はミリ秒)
$(element).animate({
top: 100, left: 100
}, 2000);
サンプル作成を通じて、jQueryの機能を理解する
ここまでに解説したjQueryの機能を用いて、前回作成したサンプルを改善してみましょう。以下のように変更します。
ステップ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プログラミングに踏み出すきっかけになれば幸いです。
こちらもおすすめ！Dreamweaver CS5.5 参考情報
- Dreamweaver CS5.5 マスターシリーズ
