ITツールの使い方

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

ステップ１　閉じるボタンのマークアップ

情報バーにid属性「closeButton」を持つdiv要素を追加します。
＜HTML＞

<section id="infobar">
<h1>情報ウィンドウ</h1>
<div id="closeButton">×</div>
 この資料の出典はXXXXです。

 全文を読みたければ
<a href="&quot;出典のURL”">こちら</a>からどうぞ。</section>

＜ｊQuesry＞
閉じるボタンの処理を追加する

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

fadeOut()やanimate()などアニメーション系のメソッドは、引数に関数を指定すると、アニメーションが終了した際にその関数が呼び出されます。

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

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

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

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

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

出典：jQuery入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html

画面下までスクロールすると、タイミングよく情報バーが表示される、という操作に対応したインタラクティブなUIを作成します。

ステップ1　コンテンツと情報バーのマークアップ

＜HTML＞

section id="infobar"></pre>
<h1>情報ウィンドウ</h1>
<pre>
    この資料の出典はXXXXです。

    全文を読みたければ
<a href="&quot;出典のURL”">こちら</a>からどうぞ。

＜CSS＞

#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のインストールとJavaScriptコードの記述

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>


// (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());
        }
    });

    ...
});

ポイントは、

(1) 「$(function() { … })」のように、$()に関数を与えると、画面の読み込みが完了してから実行する処理を記述できます。
(2) 画面がスクロールすると呼び出される処理を定義しています。
$(document).scroll(function() {
… スクロール時に呼び出される処理 …
});
(3) 現在のスクロール位置が、画面最下部からどれくらい離れているかをピクセル単位で取得する筆者が自作した関数。ブラウザーごとの差異を考慮しつつ、非標準の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;
}

(4)スクロール位置が画面最下部から200ピクセル以内で、かつ情報バーが隠れている場合は情報バーを表示します。css()メソッドを用いると、スタイルのプロパティを変更することができます。
(5)スクロール位置が画面最下部から200ピクセル以上離れており、情報バーが表示されている場合はそれを隠します。
ここでは情報バーの横幅を動的に取得するようにしまた。jQueryが持つ「outerWidth()」というメソッドを使用すれば、要素の横幅（要素のボーダーの太さも含む）を簡単に取得することができます。

出典：jQuery入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html

－DOMの操作が容易になり、Webページの見た目を動的に変更するのが容易になる。

－jQueryはWebブラウザー間の差異を埋めてくれる。

つまり、jQueryを使用すれば、クロスブラウザーで動作するインタラクティブなWebサイトの作成が容易になります。