jQuery(2) : プラグインを使おう

プラグインとは

jQueryはDOMやXMLHTTPRequestの操作等、基本的で誰もが必要とする機能を提供しています。 また、jQueryに機能を追加するためのプラグインという仕組みを提供しており、 簡単に機能拡張ができるように設計されています。多くのプラグインが作成され公開されています。
jQueryのプラグインはここで見つけることができます。 今回はそのうちのいくつかをご紹介します。

プラグインを使う場合はjQueryライブラリを読み込んだ後に、プラグインのライブラリを読み込みます。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/plugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // ここにコードを記述する
});
</script>

tablesorter

まずはtablesorterを使ってみましょう。
tablesorterはHTMLのtableの各列をクリックすると、その列で昇順、降順にソートが行えるプラグインです。
それでは例を示します。列の見出しをクリックするとクリックする度に昇順、降順でソートします。 「名前」の列はソートできないようにしてあります。

ID	名前	名前（カナ）	年齢	電話番号
1	内藤	ナイトウ	25	083-333-44XX
2	佐藤	サトウ	29	083-444-44XX
3	斉藤	サイトウ	58	083-444-45XX
4	近藤	コンドウ	45	083-333-45XX
5	林	ハヤシ	25	084-444-44XX
6	中林	ナカバヤシ	29	083-444-34XX
7	坂本	サカモト	29	083-444-42XX
8	飯岡	イノオカ	39	084-444-43XX
9	飯田	イイダ	33	083-444-24XX
10	田中	タナカ	20	084-424-44XX

まずはソートするテーブルのHTMLを用意します。
tablesorterを使用する場合は必ず見出しに<thead>タグ、本体に<tbody>タグを使用しなければなりません。

<table id="telephone_table" border="1" cellspacing="0">
<thead>
  <tr><th>ID</th><th>名前</th><th>名前（カナ）</th><th>年齢</th><th>電話番号</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>内藤</td><td>ナイトウ</td><td>25</td><td>083-333-44XX</td></tr>
  <tr><td>2</td><td>佐藤</td><td>サトウ</td><td>29</td><td>083-444-44XX</td></tr>
  <tr><td>3</td><td>斉藤</td><td>サイトウ</td><td>58</td><td>083-444-45XX</td></tr>
  <tr><td>4</td><td>近藤</td><td>コンドウ</td><td>45</td><td>083-333-45XX</td></tr>
  <tr><td>5</td><td>林</td><td>ハヤシ</td><td>25</td><td>084-444-44XX</td></tr>
  <tr><td>6</td><td>中林</td><td>ナカバヤシ</td><td>29</td><td>083-444-34XX</td></tr>
  <tr><td>7</td><td>坂本</td><td>サカモト</td><td>29</td><td>083-444-42XX</td></tr>
  <tr><td>8</td><td>飯岡</td><td>イノオカ</td><td>39</td><td>084-444-43XX</td></tr>
  <tr><td>9</td><td>飯田</td><td>イイダ</td><td>33</td><td>083-444-24XX</td></tr>
  <tr><td>10</td><td>田中</td><td>タナカ</td><td>20</td><td>084-424-44XX</td></tr>
</tbody>
</table>

次にCSSスタイルを用意します。
tablesorterではソート対象の列に"header"という名前のクラスを追加します。 今回の場合は「名前」列以外の全ての列に"header"クラスが追加されます。
また、昇順にソートされた列には"headerSortUp"、降順にソートされた列には"headerSortDown"クラスが追加されます。 この時、"header"クラスは削除されずにそのまま残りますが、昇順から降順に変更された場合は"headerSortUp"クラスは削除されます。 逆に降順から昇順に変更された場合は"headerSortDown"クラスは削除されます。
また、ここでは分かりやすいようにソートされた列の背景色を変更し、さらに昇順か降順か一目で分かるように矢印の画像を使用しています。
上記の事を考慮して以下のクラスを定義します。

<style type="text/css">
table#telephone_table thead tr th {
  padding: 2px 5px;
  background-color: #ffcccc;
  font-weight: bold;
}

table#telephone_table tbody tr td {
  padding: 2px 5px;
  background-color: #ffffff;
}

table#telephone_table thead tr th.header {
  background-image: url("/path/to/jquery.tablesorter/themes/blue/bg.gif");
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 20px;
  margin-left: -1px;
  cursor: pointer;
}

table#telephone_table thead tr th.headerSortUp {
  background-image: url("/path/to/jquery.tablesorter/themes/blue/asc.gif");
  background-color: #ff99cc;
}

table#telephone_table thead tr th.headerSortDown{
  background-image: url("/path/to/jquery.tablesorter/themes/blue/desc.gif");
  background-color: #ff99cc;
}
</style>

最後にjQueryのコードを書いて完成です。
tablesorterライブラリをダウンロードし、tablesorterライブラリへのパスを指定します。 また、tablesorterライブラリを読み込む前にjQueryライブラリを読み込む必要があります。
テーブルを選択し"tablesorter()"メソッドを実行するだけでソート対応のテーブルに変身します。 今回は「名前」列をソート対象にしないためオプションを指定していますが、 全ての列をソート対象にする場合は"tablesorter()"のみで構いません。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#telephone_table").tablesorter({headers : { 1 : { sorter : false }}});
});
</script>

jCarousel

次にjCarouselプラグインをご紹介します。
jCarouselは、リストのアイテムをコントロールするjQueryのプラグインです。 リストのアイテムとして画像を利用すると、画像のスライドショーを作成することもできます。
例として、HDE製品の画像を自動的にスライド表示し、画像をクリックすると製品のサイトに移動するものを示します。 画像が入れ替わる際にバウンド等の効果をつけることもできます。

• 
• 
• 
• 
• 
• 
• 
• 

まず、スライドに表示する画像リストのHTMLを作成します。
<ul>のclass属性にjCarouselで使用するスキンを指定します。 スキンはボタンや外観をセットにしたもので、画像ファイルやCSSファイルで構成されています。 ここではjCarouselに付属しているtangoスキンを使用します。

<ul id="hde_products" class="jcarousel-skin-tango">
  <li><a href="http://www.hde.co.jp/hav/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/cc/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/center/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/has/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/controller/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/hsm/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/mf/"><img src="/path/to/img" border="0" /></a></li>
  <li><a href="http://www.hde.co.jp/mmta/"><img src="/path/to/img" border="0" /></a></li>
</ul>

続いてCSSスタイルの編集ですが、jCarouselに付属のCSSファイル(jquery.jcarousel.css)をインポートします。 またtangoスキンを使用するので、jCarouselに付属のtangoスキン用のCSSファイル(skin.css)をインポートします。

<link rel="stylesheet" type="text/css" href="/path/to/jcarousel/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/jcarousel/skins/tango/skin.css" />

まず、jquery.jcarousel.cssファイルを編集します。
編集する必要があるのは、jcarousel-itemクラスのwidthとheight属性です。 この属性にリストのアイテム（画像）の幅と高さを指定します。

.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 300px;
    height: 125px;
}

次にtangoスキンのskin.cssファイルを編集します。
jcarousel-container-vertical, jcarousel-clip-vertical, jcarousel-itemクラスを編集します。 それぞれのクラスのwidth, height属性に幅と高さを指定します。
今回は縦方向にスクロールさせるので"*-vertical"のクラスを編集しますが、横方向へスクロール させる場合は、"*-horizontal"のクラスを編集します。

.jcarousel-skin-tango.jcarousel-container-vertical {
    width: 300px;
    height: 125px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  300px;
    height: 125px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 300px;
    height: 125px;
}

ボタンの配置場所を編集する場合は、jcarousel-next-[vertical or horizontal], jcarousel-prev-[vertical or horizontal]クラスを編集します。

最後にjQueryのコードを書きます。
リストの要素を指定して、jcarouselメソッドを呼び出します。
縦方向にスクロールさせるには、"vertical"オプションにtrueを指定します。横方向にスクロールさせる場合はオプションの指定は必要ありません。
リストのアイテムを1つずつスクロールさせるので、"scroll"オプションに1を指定します。
自動的にスクロールさせるには"auto"オプションにスクロールさせる時間間隔を秒単位で指定します。
先頭のアイテムで戻るボタンをクリックした場合、あるいは、最後のアイテムで進むボタンをクリックした場合の挙動を"wrap"オプションで指定できます。デフォルトでは先頭で戻るボタンを押しても、最後で進むボタンを押しても何も変化はありません。先頭から最後のアイテムに行きたい場合は"first"を指定します。最後から先頭のアイテムに行きたい場合は"last"を指定します。両方とも行いたい場合は"both"を指定します。今回は"both"を指定します。
画像が入れ替わる際に効果をつけたい場合は、"easing"オプションを指定します。 jQueryが備えているeasing効果は、"linear"と"swing"のみですが、 jQueryにeasing効果を追加するプラグイン Easingプラグインを使用すれば様々なeasing効果が使用できます。 今回はこのプラグインの"easeOutBounce"を使用します。
アイテムがスクロールする時間を"animation"オプションにミリ秒単位で指定します。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.easing.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#hde_products").jcarousel({
    vertical : true,
    scroll : 1,
    auto : 3,
    wrap : "both",
    easing: "easeOutBounce",
    animation: 800;
  });
});
</script>

プラグインを利用することで、jQueryに強力な機能を追加できることがお分かり頂けたと思います。
ここで紹介した以外にも様々なプラグインが公開されていますので、是非ほかのプラグインも試してみてください。