多摩美 - メディアリテラシー 2010

jQueryで拡がるWebデザインの可能性

November 29, 2010

今日の内容

前回の授業では、canvas要素とJavascriptを連携して、図形やアニメーションを作成する方法について学びました。簡単とはいえ、実際にやってみると、なかなか難しい部分もあったと思います。

今回の授業は、より手軽な方法で、Webページにちょっとしたアニメーションを追加したり、タブナビゲーションやオートスクロールなど気の効いたインタラクションを追加する方法として、jQueryというJavaScriptライブラリを紹介したいと思います。

jQueryの特徴

jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリです。フリーなオープンソースプロジェクトとして公開されているので、誰でも自由にライブラリを利用することが可能となっています。現在では、マイクロソフトやノキアなど大手デベロッパーにも採用され、今後ますます注目が集りそうなライブラリです。

jQueryは以下のような特徴が挙げられます。

ブラウザに依存しない
ページ内のドキュメント要素(DOM)走査と変更
CSS操作
エフェクトとアニメーション
Ajaxを利用した非同期な通信
プラグインによる機能拡張

jQueryの習得は、素のJavaScriptを一から習得するのに比べると格段に容易です。しかしながら、その利用によって拡がる表現の可能性はとても大きなものがあります。jQueryの機能はとても多岐にわたるため、その全てを1回の授業で紹介するのは無理ですが、その魅力の一端に触れることができればと思います。

jQuweyの環境設定

jQueryを利用するためには、jQueryのライブラリをWebページに読みこむ必要があります。自分で作成しているHTML書類に、jQueryライブラリを読みこむ方法は、大きくわけて2つあります。ひとつは、jQeuryのサイトから最新のjQueryライブラリをダウンロードして、そのファイルをHTMLのhead要素内でlink要素を使用して関連づける方法。もうひとつは、jQueryのライブラリをホスティングしている外部のWebサービスを利用する方法です。

今回の授業では、ライブラリをダウンロードする方法ではなく、より簡易に利用可能な外部のjQueryのホスティングを利用する方法を使用してみましょう。jQueryなどの主要なJavaScriptライブラリは、Google Libraries APIから簡単に利用することが可能です。Googleにホスティングされている現時点で最新のjQuery ver 1.4.4を利用するには、HTMLファイルのhead要素に以下のような記述を追加するだけです。

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>

jQueryのライブラリを読みこんだら、これを利用したJavaScriptのプログラムを追加することで、様々な効果を使用することが可能となります。今回は、外部ファイルとしてJavaScriptを作成して、それをHTMファイル側からよびだして関連づけてみましょう。今回作成するJavaScriptを「original.js」というファイル名にして、HTMLファイルと同じフォルダに配置するものとします。このときHTMLファイルの骨組は以下のようなものになるでしょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQueryのテスト</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.4.4");</script>
    <script src="original.js"></script>
  </head>
  <body>
    <h1>jQueryのテスト</h1>
  </body>
</html>

jQuery基本：クリックすると文字がフェードアウト

まずは、簡単なサンプルからみていきましょう。下記のHTMLとJavaScriptファイル「original.js」を同じフォルダ内に作成して、下記のHTMLとJavaScirptのコードを記入してみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQueryのテスト</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.4.4");</script>
    <script src="original.js"></script>
    <style>
      body {margin:2em 4em;}
      p {background-color: #39f; color:white; padding:1em;}
    </style>
  </head>
  <body>
    <p>クリックすると消えるよ!!</p>
  </body>
</html>

JavaScript (original.js)

$(function() { //jQueryの開始
    $('p').click(function() { //pタグをクリックしたら
        $(this).fadeOut('slow'); //自分自身を消す
    });
});

デモ

このサンプルがjQueryの基本的な使用法になります。

まず、プログラム全体が「$(function(){ … });」で囲まれていることに注目してください。この記述は、中括弧「{…}」内の記述を、このHTMLドキュメントの読み込みが完了した時点で実行するという意味をもっています。つまり、この簡単な記述でドキュメントの読み込み完了のイベント処理を行うことができているのです。このようにjQueryでは短い記述で実際には複雑な処理を、簡単に行うことができることが特徴です。

次に「$(‘p’).click(function() { … });」という部分に注目してみましょう。まず「$(‘p’)」の部分に注目します。この記述は、読み込んだHTMLドキュメントの全てのp要素に対して行う命令であることを示しています。このようにjQueryではドキュメント内の要素にアクセスする際に非常に簡素な記述で行うことが可能です。この記述のルールは、CSSにおけるセレクタの記述ルールとほぼ共通していますので、CSSを使用した経験があれば容易に理解できるでしょう。

その後に続く「.click(function(){ … });」で、要素をクリックした際に命令を実行するように指示しています。その内容として記述されている、「$(this).fadeOut(‘slow’);」は、自分自身(つまりクリックされた要素)をフェードアウトする、という意味です。つまりこれによってクリックすると自分自身をフェードアウトさせるという処理が行われているのです。

フェードイン/フェードアウトのタイミングを調整する

何も指定しないでフェードイン(fadeIn)やフェードアウト(fadeOut)を実行すると、その変化に要する時間は400ミリ秒に設定されています。このタイミングは変更可能です。「fadeIn(‘fast’)」というように「fast」と指定すると、変化は200ミリ秒に短縮されます。逆に、「fadeOut(‘slow’)」というように「slow」という指定をすると、変化時間は600msになります。また、「fadeIn(1000)」というように、時間をミリ秒単位で数値で指定することも可能です。

実際に様々な指定を試してみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQueryのテスト</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.4.4");</script>
    <script src="original.js"></script>
    <style>
      body {margin:2em 4em;}
      p {
      background-color: #39f;
      color:white;
      padding:1em;
      }
    </style>
  </head>
  <body>
    <p>この部分が、いろいろアニメーションするよ!!</p>
    <ul>
      <li><a id="fadeout_fast" href="#">素早くフェードアウト</a></li>
      <li><a id="fadein_fast" href="#">素早くフェードイン</a></li>
      <li><a id="fadeout_slow" href="#">ゆっくりフェードアウト</a></li>
      <li><a id="fadein_slow" href="#">ゆっくりフェードイン</a></li>
      <li><a id="fadeout_2000" href="#">2秒(2000ms)かけてフェードアウト</a></li>
      <li><a id="fadein_4000" href="#">4秒(4000ms)かけてフェードイン</a></li>
    </ul>
  </body>
</html>

JavaScript (original.js)

$(function() {
    //素早くフェードアウト
    $('#fadeout_fast').click(function() {
        $('p').fadeOut('fast');
    });
    //素早くフェードイン
    $('#fadein_fast').click(function() {
        $('p').fadeIn('fast');
    });
    //ゆっくりフェードアウト
    $('#fadeout_slow').click(function() {
        $('p').fadeOut('slow');
    });
    //ゆっくりフェードイン
    $('#fadein_slow').click(function() {
        $('p').fadeIn('slow');
    });
    //2秒でフェードアウト
    $('#fadeout_2000').click(function() {
        $('p').fadeOut(2000);
    });
    //4秒でフェードイン
    $('#fadein_4000').click(function() {
        $('p').fadeIn(4000);
    });
});

デモ

場所の移動

.animate関数を利用すると、場所の移動するアニメーションも自在に作成することが可能です。実例を見ながら理解していきましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQueryのテスト</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.4.4");</script>
    <script src="original.js"></script>
    <style>
      body {margin:2em 4em;}
      p {background-color: #39f; color:white; padding:1em;}
      #animField {width:640px; height:480px; padding:1em; border:1px solid #ccc;}
      #block {width:100px; position:relative;}
    </style>
  </head>
  <body>
    <div id="animField">
      <p id="block">動くよ!</p>
    </div>
    <ul>
      <li><a id="animation01" href="#">右にスライドして拡大</a></li>
      <li><a id="animation02" href="#">左にスライドして縮小、薄くなる</a></li>
      <li><a id="animation03" href="#">1000msで下に移動して、200msで戻ってくる</a></li>
      <li><a id="animation04" href="#">500msで右下に移動して、1000ms停止して、200msで戻ってくる</a></li>
    </ul>
  </body>
</html>

JavaScript (original.js)

$(function() {
    //アニメーション01
    $('#animation01').click(function() {
        $('#block').animate({
            left: '400px',
            width: '200px',
            height: '200px',
            opacity: 1.0
        });
    });
    //アニメーション02
    $('#animation02').click(function() {
        $('#block').animate({
            left: '0px',
            width: '100px',
            height: '1em',
            opacity: .5
        });
    });
    //アニメーション03
    $('#animation03').click(function() {
        $('#block').animate({
            top: '400px',
            opacity: 0.2
        }, 1000).animate({
            top: '0px',
            opacity: 1.0
        }, 200);
    });
    //アニメーション04
    $('#animation04').click(function() {
        $('#block').animate({
            top: '400px',
            left: '400px',
            opacity: 0.2
        }, 500).delay(1000).animate({
            top: '0px',
            left: '0px',
            opacity: 1.0
        }, 200);
    });
});

デモ

プラグインを利用する 1：タブメニュー

jQueryはプラグインを使用することで、様々な便利な機能を拡張していくことが可能です。プラグインは多岐にわたっていますが、まずサンプルとしてタブメニューを可能とするプラグインをみてみましょう。

タブプラグインを利用可能にするには、HTMLのhead要素に、jQuery UIのライブラリを新規に読み込む必要があります。jQueryのメインのライブラリに加えて、現時点でのjQuery UIの最新のバージョン1.8.6を読み込むには以下のように記述します。このサンプルではjQuery UIのライブラリのリンクとあわせて、UI用のスタイルシートの読み込みも行っています。

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>
<script>google.load("jqueryui", "1.8.6");</script>

タブメニューの実装はとても簡単です。サンプルを掲載します。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQueryのテスト</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.4.4");</script>
    <script>google.load("jqueryui", "1.8.6");</script>
    <script src="original.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>jQuery UI : タブメニューサンプル</h1>
    <div id="tabs">
      <ul>
	<li><a href="#tabs-1">Tab 1</a></li>
	<li><a href="#tabs-2">Tab 2</a></li>
	<li><a href="#tabs-3">Tab 3</a></li>
      </ul>
      <div id="tabs-1">
	<p>ここにタブ1の文章を入れていきます。</p>
      </div>
      <div id="tabs-2">
	<p>ここにタブ2の文章を入れていきます。</p>
      </div>
      <div id="tabs-3">
	<p>ここにタブ3の文章を入れていきます。</p>
      </div>
    </div>
  </body>
</html>

JavaScript (original.js)

$(function() {
    $("#tabs").tabs();
});

デモ

さらに高度なプラグインの利用：フォトギャラリー、ライトボックス

jQueryを利用したより高度なプラグインが数多く公開されています。これらのプラグインを活用することで、フォトギャラリーやライトボックスなど様々な高度な機能が簡単に利用可能です。

下記にjQueryのプラグインに関するリンクを紹介します。この他にも沢山の情報がありますので、検索を活用しながらいろいろ調べてみてください。