この連載は、ADC（Adobe Developer Connection）にて紹介されているものです。Adobe社製品の最新技術情報は、ADCをご覧ください！
jQueryは、非常に人気と歴史のあるJavaScriptライブラリです。jQueryを利用すれば、直感的なコードで、思い通りのUI処理を容易に実現できます。この記事では2回にわたり、jQueryの基本を説明するとともに、実際にサンプルを作成しながらjQueryプログラミングの要諦を紹介します。
jQueryを利用する際の開発環境ですが、jQueryではコードを非常にコンパクトにできるため、普通のテキストエディタでもプログラミングを行うのはそれほど難しいことではありません。しかし、Dreamweaver CS5.5にはjQuery開発を支援する様々な機能が用意されており、Dreamweaver CS5.5を使えば、開発に必要な時間をさらに短縮することができます。現在、Adobeサイトにて、最新のDreamweaver CS6 体験版をダウンロードできます。
jQueryのメリット
jQueryは、手軽に「DOM（Document Object Model）」を操作できるようにするライブラリです。DOMというのは、HTMLやXMLのドキュメントをメモリ上に展開し、プログラムから扱えるようにしたものです。HTML／XMLの構造とほぼ同じく、ツリー（木）構造を取ります。
以下のように、html／head／body要素などを省略して記述したHTMLも、ブラウザに読み込まれた後は、html要素をルート（根）としたツリー構造に展開されます。これがDOMです。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>タイトル</title>
<header>
<h1>見出し</h1>
</header>
<div>
コンテンツ
</div>
<footer>
ここはフッター
</footer>
DOMの操作が容易になるということは、つまり「Webページの見た目を動的に変更するのが楽になる」ということです。jQueryが登場する前は、DOMを操作するコードを記述するのは非常に面倒で、そのためWebページの多くが静的でした。しかし、jQueryがDOM操作のハードルを大幅に下げてくれたおかげで、動的に変化するWebサイトを作成するのが一般的になりました。
また、jQueryはWebブラウザ間の差異を埋めるという役割も果たします。jQueryは、モダンブラウザだけでなく、古いブラウザ（例えば、Internet Explorer 6）でも動作するように設計されています。クロスブラウザで動作するUI処理を実現することができます。
つまり、jQueryを使用すれば、クロスブラウザで動作するインタラクティブなWebサイトを、初心者でも容易に作成できるというわけです。
jQueryのコーディングの基本
次に、jQueryのコーディングに関する基本を押さえておきましょう。jQueryをインストールするのは簡単です。script要素を使用して、jQueryのソースコードを読み込むだけです。最もシンプルな方法は、以下のコードをHTMLに含めることです。
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
これにより、http://code.jquery.comからJavaScriptファイルがダウンロードされ、ユーザーのブラウザ上でjQueryが動作するようになります。また、上記のコードでsrc属性に指定しているURLからファイルをダウンロードして、自分のサーバでホスティングすることも可能です。インストールが完了すると、以下の2つの関数を使用できるようになります。
jQuery() $()
これらは全く同じ意味を示す関数ですが、コードを短く書けるので、通常は「$()」が用いられます。この関数の引数には、window／document／DOM要素／文字列など、様々なものを指定することができます。
// windowオブジェクトを「jQuery化」する var $win = $(window); // documentオブジェクト var $doc = $(document); // DOM要素（ここではbody要素） var $body = $(document.body);
また、引数にCSSセレクタの文字列を指定することもできます。これがjQueryの非常に強力な特徴の1つで、操作対象となるDOM要素の範囲・種類を自由自在に指定することができます。
// ページ内のdiv要素を全て取得
var divs = $('div');
// id属性を指定
var logoImg = $('#logoImg');
// 複雑なCSSセレクタもOK
var checkboxes =
$('table.list > tbody > tr:odd > td:nth-child(1) input[type=checkbox]');
$()にこうした様々な種類のオブジェクトを“放り込む"と、元のオブジェクトを“強化"した「jQueryオブジェクト」が返ってます。このjQueryオブジェクトは、元のオブジェクトにはない様々な機能を持っており、それらを使用することでWebページを動的に変更させることができるわけです。
例えば以下のように、1つまたは複数の要素を内包したjQueryオブジェクトに対し、様々なメソッドを用いて要素の属性やスタイルを変更することができます。
// alt属性を持たないimg要素に赤いボーダーを表示する
$('img:not([alt])').css('border', '1px solid red');
// alt属性を持たないが、title属性を持つimg要素に対し、
// titleの値をaltにコピーする
// each()は、jQueryオブジェクト内の要素を1件ずつ処理する仕組み
$('img:not([alt])[title]').each(function() {
var img = $(this);
// alt属性にtitle属性の値を代入
var title = img.attr('title');
img.attr('alt', title);
});
css()やattr()はメソッドといい、要素の状態を変更するためのものです。これらのメソッドでは、「css('borderWidth', '2px')」のように引数を2つ与えると「値を変更する」ことができ、「attr('title')」のように引数を1つだけ与えると「値を取得する」ことができます。
jQueryのコーディングに関する基本的な解説は以上です。それでは、具体的なサンプルコードを参照しながら、これらの基礎知識を身につけていきましょう。
サンプル作成を通じて、jQueryの基本を理解する
今回作成するサンプルは、「画面下までスクロールすると、タイミングよく情報バーが表示される」というものです。ユーザーが行う自然な操作に対応したこうしたインタラクティブなUIは、最近色々なサイトで見かけます。
このサンプルを、Dreamweaver CS5.5を用いて作成する過程を説明していきます。
ステップ1 コンテンツと情報バーのマークアップ
今回、サンプルのコンテンツはある程度のスクロール量が確保できれば何でもよいので、青空文庫から、宮沢賢治の「銀河鉄道の夜」を拝借しました。
肝心なのは情報バーのマークアップです。以下のようにsection要素を用いて作成しました。
<section id="infobar">
<h1>情報ウィンドウ</h1>
<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>
この「infobar」というid属性を持つ要素に対して、以下のスタイルを適用しています。positionとrightの使い方がポイントです。
#infobar {
/* 画面の固定位置に表示される */
position: fixed;
bottom: 10px;
/*
* rightにwidthを超えるマイナス値を指定することで、
* 画面外右側に隠れた状態となる。
*/
right: -414px;
border: 1px solid gray;
border-top: 4px solid red;
width: 400px;
height: 80px;
background-color: white;
font-size: 12px;
padding: 4px;
}
ステップ2 jQueryのインストール
先に述べたように、jQueryのインストールは、jQueryのJavaScriptファイルをscript要素で読み込むだけです。
<script src="jquery-1.7.1.min.js"></script>
ステップ3 JavaScriptコードを記述する
以下は、サンプルのJavaScriptコードです（抜粋）。非常にコンパクトなので、JavaScriptに不慣れな方でもご理解いただけると思います。
// (1) 画面の読み込みが完了すると呼び出される
$(function() {
// 情報バーが隠れているかどうか
var infobarHidden = true;
// (2) 情報バーのjQueryオブジェクト
var infobar = $('#infobar');
// (3) 画面がスクロールすると呼び出される
$(document).scroll(function(e) {
// (4) スクロール位置を取得
var scrollBottom = getScrollBottom();
// (5) 画面最下部から200ピクセル以内だったら
// 情報バーを表示する
if (scrollBottom < 200) {
if (infobarHidden) {
infobarHidden = false;
// (6) 情報バーを表示
infobar.css('right', 0);
}
} else if (!infobarHidden) {
infobarHidden = true;
// (7) 情報バーを画面の右に隠す
infobar.css('right', -infobar.outerWidth());
}
});
...
});
ポイントをみていきましょう。
- 「$(function() { ... })」のように、$()に関数を与えると、画面の読み込みが完了してから実行する処理を記述できます。この機能については次回さらに詳しく説明しますので、ここでは「この関数の処理は、画面の読み込みが終わった後に実行される」と理解しておくだけで問題ありません。
- CSSセレクタでid属性を指定して（'#infobar'）、情報バーのDOM要素をjQueryオブジェクトとして取得し、それを変数infobarに格納しています。
-
画面がスクロールすると呼び出される処理を定義しています。
$(document).scroll(function() { ... スクロール時に呼び出される処理 ... }); -
現在のスクロール位置が、画面最下部からどれくらい離れているかをピクセル単位で取得しています。この値を取得するために使用しているgetScrollBottom()関数は筆者が自作した関数で、ブラウザごとの差異を考慮しつつ、非標準のAPIを使用しているため、多少わかりにくいコードになっています。以下にコードを掲載しますが、完全に理解する必要はありません。
function getScrollBottom() { // スクロールバーの上端のY座標 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // スクロール可能な範囲も含めた全体の高さ var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // ユーザに表示されている領域の高さ var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // WebKit系のブラウザは、scrollHeightとclientHeightが同じ値になるため、 // window.innerHeightを代わりに参照する if(scrollHeight === clientHeight) { clientHeight = window.innerHeight; //for webkit } // 以下の計算式で、残りのスクロール範囲を取得できる return scrollHeight - scrollTop - clientHeight; } -
スクロール位置が画面最下部から200ピクセル以上離れているかどうかで、処理を切り替えます。ここで使用している条件分岐の構造は以下のようになっています。
if (scrollBottom < 200) { if (infobarHidden) { ... } } else if (!infobarHidden) { ... } -
スクロール位置が画面最下部から200ピクセル以内で、かつ情報バーが隠れている場合は情報バーを表示します。初期状態では情報バーはCSSで「right: -414px;」となっていました、そのrightプロパティを「0」にすることで、情報バーが右端に表示された状態にします。css()メソッドを用いると、スタイルのプロパティを変更することができます。
infobar.css('right', 0); -
スクロール位置が画面最下部から200ピクセル以上離れており、情報バーが表示されている場合はそれを隠します。画面の右外側に情報バーを追い出すため、(6)と同様に情報バーのrightプロパティを変更します。単純にコーディングすると、以下のようになるでしょう。
infobar.css('right', -414);ただしこれだと、もし情報バーの横幅を変更することになった場合、CSSだけではなくここのコードも修正する必要が生じてしまいます。そうした手間を避けるため、ここでは情報バーの横幅を動的に取得するようにしましょう。jQueryが持つ「outerWidth()」というメソッドを使用すれば、要素の横幅（要素のボーダーの太さも含む）を簡単に取得することができます。
infobar.css('right', -infobar.outerWidth());
サンプルの説明は以上です。ブラウザで表示し、スクロールして確認してみてください。
Dreamweaver CS5.5におけるjQuery開発を支援する機能
jQueryを用いたJavaScriptプログラムを記述するにあたり、Dreamweaver CS5.5を使用すると、以下に示すようなメリットがあります。
強力なシンタックスハイライト機能
DreamweaverはCSSやJavaScriptの文法を深く理解しており、予約語や文字列、コメントなどをわかりやすく色分けしてくれます。また、構文エラーがあるとすぐに示唆してくれます。一般的なエディタとは異なり、HTMLファイル内にscript要素やstyle要素を用いて記述したJavaScriptやCSSについても、問題なくシンタックスハイライトや文法チェックが行われます。
jQueryにも対応したコードヒント機能
Dreamweaverは強力なコードヒント機能を備えており、JavaScriptのコーディングを手助けしてくれます。JavaScriptの基本的なオブジェクト（window／document／文字列など）に対応しているだけではなく、jQueryにも対応しているのがポイントです。例えば、$()にCSSセレクタを与えようとすると、ページ内のid属性やclass属性の値を補完候補として表示します。
また、jQueryオブジェクトに続けてピリオドを入力すると、利用できるメソッドの一覧が表示されます。なお、Dreamweaver CS5.5が対応しているjQueryのバージョンは1.5相当です（この原稿執筆時点での最新版は1.7.1ですので、少し古いバージョンです）。
おわりに
今回は、jQueryの基礎知識とDreamweaverを用いたコーディングについて紹介しました。後編では今回のサンプルを改善しながら、jQueryを使用したアニメーションの実現やイベント処理など、より高度なトピックについて紹介します。
こちらもおすすめ！Dreamweaver CS5.5 参考情報
- Dreamweaver CS5.5 マスターシリーズ
