カスタムの jQuery プラグインを作成する

再利用可能な独自のコードを使用して jQuery ライブラリーを拡張する

jQuery は JavaScript プロジェクトの開発に必要なすべてのコア機能を提供する強力なライブラリーですが、生産性を高めるためにカスタム・コードを使用して jQuery のコア機能を拡張する必要がある場合もあります。この記事では jQuery ライブラリーを使用して、再利用可能なカスタム・プラグインを作成する方法について学びます。

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock は、1996年から契約 Web 開発者および設計者として、SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、Le Cordon Bleu、Canon などの企業のプロジェクトを手掛けてきました。著書には『Query Mobile: Develop and Design』、『Ajax for Web Application Developers』(Sams)、『The ActionScript Migration Guide』(New Riders) があります。また、コラムニストおよびライターとしても、Peachpit.com、InformIT.com、Practical Web Design magazine などの数々の Web サイトや設計関連の雑誌で活躍しています。彼は、フォームと関数の融合を専門とする Web 設計およびソフトウェア開発会社、www.studiosedition.com の創設者でもあります。



2012年 8月 02日

はじめに

jQuery ライブラリーは JavaScript アプリケーションの開発を迅速に行えるように設計されています。jQuery ライブラリーを使用すると JavaScript コードを単純に作成できるため、作成するコードの量を減らすことができます。jQuery ライブラリーを使用している場合、一般的な機能のために何度も同じコードを作成していることに気付くことがあります。そのような場合には、独自にカスタムの jQuery プラグインを作成した方がよいかもしれません。

jQuery プラグインを使用すると、カスタム・コードによって jQuery ライブラリーを拡張することができます。プラグインは、繰り返し利用されるどのような機能にも使用することができます。例えば、スライドショーのためのプラグインや、ドロップダウン・メニューやアコーディオン・メニューのためのプラグインが数多くあります。jQuery プラグインを検索してみると、皆さん自身のプロジェクトに使用できる (そしてプラグインの作成方法の参考になる) プラグインの例がたくさん見つかるはずです。

頻繁に使用される略語

  • CSS: Cascading Style Sheets
  • HTML: HyperText Markup Language

この記事では、カスタムの jQuery プラグインを簡単に作成する方法について説明します。具体的には、サンプル・コードと手順を示しながら、アコーディオン・メニューのための jQuery プラグインを作成する方法について説明します。jQuery を理解していて jQuery のスキルを高めたい人達にとって、この記事は最適です。

この記事で使用するサンプルのソース・コードはダウンロードすることができます。

前提条件

この記事では、読者が JavaScript と jQuery、CSS の基本を理解しているという前提で説明を進めます。前提となる事項について学ぶためには「参考文献」を参照してください。


作業を開始する

jQuery は JavaScript 言語を拡張するライブラリーです。jQuery プラグインを作成することは基本的に jQuery ライブラリーを拡張することであり、それはつまり JavaScript 自体を拡張することです。プラグインがどのようにして jQuery ライブラリーを拡張するのかについてきちんと理解をするには、JavaScript の prototype プロパティーを理解する必要があります。JavaScript の prototype プロパティーは直接使用されるわけではありませんが、jQuery の fn プロパティーを通じて背後で使用されます。fn プロパティーは、JavaScript ネイティブの prototype プロパティーに対する jQuery での別名です。

fn プロパティーを使用して新しい jQuery プラグインを作成するためには、単純な JavaScript の場合と同じように、単にプラグインの名前を fn プロパティーに割り当て、コンストラクター関数として動作する新しい関数を fn プロパティーが指すようにします。リスト 1 のコードは、jQuery オブジェクトと fn プロパティーを使用して新しい accordion という jQuery プラグインを定義し、新しいコンストラクター関数に割り当てるためのコードです。

リスト 1. 新しい accordion という jQuery プラグインを定義する
jQuery.fn.accordion = function() {
  // Add plugin code here
};

リスト 1 は jQuery プラグインを作成するための 1 つの方法を示しており、この例には何も機能的に悪い点はありませんが、jQuery プラグインを作成するために推奨される方法では、最初にラッパー関数を作成し、ドル記号 ($) を使用できるようにします。ドル記号はデフォルトでは他の JavaScript フレームワークと競合する可能性がありますが、関数の中にプラグインをラップすると、ドル記号を使用しても他の JavaScript フレームワークとの競合は起こりません。リスト 2 のサンプル・コードは jQuery プラグインの定義にラッパー関数を適用する方法を示しています。

リスト 2. 新しい accordion という jQuery プラグインをラッパー関数の中にラップする
(function($) {
  $.fn.accordion = function() {
    // Add plugin code here
  };
})(jQuery);

リスト 2 ではラッパー関数に jQuery キーワードを適用しています。こうすることで、fn プロパティーを使用する場合のように、プラグインの中でドル記号を使用することができます。ラッパー関数を用意できると、プラグインのどこででも、サードパーティーの他のプラグインを妨害することなく、jQuery キーワードの代わりにドル記号を使用できるようになります。この方法を使用すると、プラグイン全体の中で作成するコードの量を減らすことができ、またプラグインのコードが簡潔で保守のしやすいものになります。


チェーン機能を維持する

jQuery のメリットは、任意のタイプのセレクターを使用できることです。ただし、作成されるプラグインは数種類の異なる要素タイプを扱う可能性があることを頭に入れておく必要があります。this キーワードを使用すると、要素タイプにかかわらずループ内の各要素にアクセスし、プラグインによって関連する関数を適用することができます。each ループの前に return キーワードを使用すると、プラグインのチェーン機能を維持することができます。リスト 3 では each ループが関数ハンドラーに割り当てられ、return キーワードと組み合わされています。

リスト 3. each ループの前に return キーワードを使用する
(function($) {
  $.fn.accordion = function() {
    return this.each(function() {
      // Using return allows for chainability
    });
  };
})(jQuery);

リスト 3 のコードのようにすると、サンプルのアコーディオン・プラグインをメソッド呼び出しのチェーンに使用することができます。jQuery が持つ優れた機能の 1 つであるチェーン機能により、メソッド呼び出しのチェーンにプラグインを使用することができます。例えば以下のコードは、1 つのメソッド呼び出しチェーンの中で HTML 要素をフェードアウトし、DOM (Document Object Model) から削除する方法を示しています。

$("#my-div").fadeOut().remove();

アコーディオン構造を作成する

典型的なアコーディオンの設計には、タイトル・バーと関連コンテンツ領域の設計が含まれます。定義リストはアコーディオンに最適の HTML 構造であり、タイトルに dt 要素を使用し、コンテンツ領域には dd 要素を使用します。リスト 4 に示す HTML 構造は、4 つのタイトルと各タイトルに対応するコンテンツ領域を持つ定義リストです。

リスト 4. メソッド呼び出しのチェーン
<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
    <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
    <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
    <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
    <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

リスト 4 の定義リストには、accordion という名前の CSS クラスも割り当てられています。何も CSS を適用しないと、このアコーディオン構造は図 1 のように非常に素っ気ないものになります。

図 1. 何も CSS を適用していない状態のアコーディオン構造
タブ付きウィンドウに 4 つの異なるセクションが表示されています

そこで、accordion クラスを使用して、タイトルとコンテンツ領域を含む定義リスト全体にスタイルを適用します。リスト 5 の例では accordion クラスに幅、枠線、フォントの種類、フォントのサイズを指定しています。以降の CSS の例は、独自のカスタム・スタイル (色、フォントの種類、サイズ、スペースなど) を含めるように変更することができます。

リスト 5. accordion CSS クラスを使用して定義リスト全体のスタイルを定義する
.accordion {
  width: 500px;
  border: 1px solid #ccc;
  border-bottom: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

続いて、accordion CSS クラスを使用してタイトル (dt) とコンテンツ (dd) のスタイルを定義します。タイトルとコンテンツの両方に共通のスタイルが含まれており、このスタイルによって下の枠線を定義し、マージンを 0 に設定します (リスト 6)。マージンを 0 に設定することで、タイトル・バーとコンテンツ領域とを互いに密接して配置することができます。

リスト 6. アコーディオンのタイトルとコンテンツ領域に対し、共通のスタイルを関連付ける
.accordion dt, 
.accordion dd {
  border-bottom: 1px solid #ccc;
  margin: 0px;
}

dt 要素がタイトル・バーらしく見えるように、背景色を設定し、ポインター・カーソルを追加します。こうすることで、タイトル・バーをクリックできることがユーザーに明らかになります。これらのクラスには他にも、パディング、フォントのサイズ、フォントの太さなど、さまざまなスタイルが含まれています。dd 要素はタイトルと説明との間隔を少し空けるためのパディングを追加しています。一例をリスト 7 に示します。

リスト 7. アコーディオンのタイトルとコンテンツ領域に対し、CSS クラスを関連付ける
.accordion dt {
  background: #eaeaea;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: bold;
}
.accordion dd {
  padding: 12px 8px;
}

すべての CSS を追加すると、画面は以前よりも完成されてアコーディオンらしくなります (図 2)。

図 2. アコーディオン構造にカスタムの CSS を適用した状態
タブ付きウィンドウに 4 つの折り畳みセクションが表示されています

プラグインをカスタム・コーディングする

実際に動作するアコーディオンにするためには、この前のセクションで作成を始めた jQuery プラグイン関数にカスタム・コードを適用する必要があります。このアコーディオン・プラグインはまず、定義されたすべてのアコーディオンでループ処理を行います。アコーディオンを定義するためには、HTML 文書の中で、または組み込まれる外部 JavaScript ファイルの中で、以下の jQuery を使用します。

$('dl#my-accordion').accordion();

各アコーディオンに対し、関連付けられた定義リストのタイトルに jQuery の children メソッドを使用してアクセスすると、一連の dt 要素の配列が返されます。この dt 要素に click イベントを適用した後、各 dtreset というメソッドを適用します。reset メソッドにより、アコーディオンが初めてロードされた時にすべての dd 要素が折り畳まれた状態になります。dt 要素またはタイトル・バーがクリックされると、click イベントは onClick というカスタム・メソッドをトリガーします。カスタムの onClick メソッドはアコーディオン内にあるすべての dt 要素に対し、関連付けられた dd 要素を隠すカスタムの hide メソッドを呼び出します。hide メソッドは next メソッドを使用して dt 要素の次にある dd 要素を見つけ、その dd 要素をアニメーション上でスライドさせて dt 要素の裏に隠すことで、その dd 要素を閉じます。

すべての dd 要素が隠された後、slideDown メソッドを使用することで、クリックされた dt 要素と関連付けられた dd 要素が表示されるようになり、アコーディオンが開いたり閉じたりするアニメーションになります (リスト 8)。onClick メソッドのコードの最後の行には return false があり、クリックされたタイトル・バーが通常の動作をしないようにしています。例えば、タイトル・バーとして anchor 要素を使用する場合には、ユーザーが別のページや現在のページの別の場所にジャンプしてしまうことがないように、return false を使用する必要があります。

リスト 8. カスタムのアコーディオン関数を使用して jQuery プラグインを作成する
(function($) {
  $.fn.accordion = function(options) {
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
    });
	
    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);

このアコーディオン・プラグインを先ほど作成したような HTML の定義リスト構造と関連付けると、アコーディオン関数が適用されます。アコーディオン関数により、1 つのタイトル・バー、つまり dt 要素がクリックされると、その dt 要素に対応するコンテンツ領域が開かれ、それまで開いていた他のコンテンツ領域は閉じられます。つまり一度に 1 つのコンテンツ領域のみが開かれます。


デフォルトとオプション

jQuery プラグインにはデフォルトとオプションを含めることができます。オプションは基本的にプラグインに渡すことができる引数です。オプションを使用すると、いくつもの引数を渡す代わりに 1 つの引数をオブジェクト・リテラルとして渡すことができます。そうすることが jQuery の標準的なプラクティスです。プラグインにオプションを使用できるようにする場合、defaults オブジェクトを使用してデフォルトのオプションを設定することがベスト・プラクティスです。オプションと同じようにデフォルトもオブジェクト・リテラルであり、デフォルトの中にはプラグインに渡せるようにしたプロパティーを含める必要があります。

例えば、アコーディオンが最初にロードされた時にアコーディオンの最初のコンテンツ領域を開くために使用できるプロパティーを許可する場合には、コンテンツ領域を開くためのプロパティーに対するデフォルトをプラグインの中に含める必要があります。プラグインの中でデフォルトを使用するとデフォルトの関数が決定され、オプションを使用するとデフォルトの値を上書きすることができます。プラグインがそれらのオプションを受け取った場合には、$.extend メソッドを使用して実際に上書きを行います。jQuery の $.extend メソッドは 2 つ以上のオブジェクトをマージします。リスト 9 は、ユーザーが定義したオプションとデフォルトのオプションとをカスタムの jQuery プラグインの中で $.extend メソッドを使用してマージする例を示しています。

リスト 9. カスタムのアコーディオン jQuery プラグインにオプションとデフォルトを追加する
(function($) {
  $.fn.accordion = function(options) {
    var settings = $.extend({}, {open: false}, options);
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
      if(settings.open) $(this).children('dt:first-child').next().show();
    });
	
    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);

$.extend メソッドの引数は、ターゲット・オブジェクトと、マージ対象の 2 つ以上のオブジェクトです。この例のターゲット・オブジェクトは、マージされたオブジェクトのコンテナーとして機能する空のオブジェクト・リテラルです。このターゲットは、マージされたオブジェクトの値 (この場合は settings 変数) を含む 1 つのオブジェクトになります。2 番目の引数は、プラグインのプロパティーのデフォルトを含むオブジェクト・リテラルです。3 番目の引数はユーザー定義の options 引数です。ある HTML 要素に関してアコーディオン・プラグインを使用してオプションを渡すためには、オブジェクト・リテラルとしてオプションを渡す前に、どのプロパティーをプラグインが想定しているのかを認識しておく必要があります。これを以下に示します。

$('dl#my-accordion').accordion({open:true});

リスト 9 の例では、$.extend メソッドを使用することで、プラグインに渡されたオプションによってデフォルトの値が上書きされています。オプションが渡されない場合にはデフォルトの値が使用されます。このサンプル・プラグインでは、ロードされた時に最初のコンテンツ領域を開く必要があるかどうかを open プロパティーを使用して判断しています。


再利用性

このサンプルのアコーディオン・プラグインは、どの HTML 文書でも再利用することができ、また 1 つの HTML 文書内で何度も使用することができます。既に作成したようなアコーディオン構造は複数含めることができ、また作成した新しいアコーディオン・プラグインと jQuery を使用して、それぞれを 1 つのアコーディオンとして別々に定義することもできます。HTML 文書に複数のアコーディオンを追加するためには、単純に必要なだけアコーディオン構造を追加します。リスト 10 のコードには、1 つの段落で分けられた 2 つのアコーディオン構造が含まれています。

リスト 10. 同じ HTML 文書内で複数のアコーディオンを使用する
<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
  <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
  <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<dl class="accordion" id="my-accordion2">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
</dl>

リスト 10 に含まれる 2 つのアコーディオン構造はほとんど同じですが、コンテンツは異なり、もっと重要な点として ID の値が異なります。最初のアコーディオン構造の ID の値は my-accordion です。2 番目のアコーディオン構造の ID の値は my-accordion2 です。これらの ID により、2 つの構造を互いに独立したターゲットとして指定することができます。例えば、以下の jQuery スクリプトは、先ほど作成した新しいプラグインを使用するアコーディオンとして各アコーディオン構造を定義しています。

$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});

両方のアコーディオン構造が定義されており、デフォルトで最初のパネルが開くように設定されています。図 3 は同じ HTML 文書内で複数のアコーディオン・プラグインが使用されている例を示しています。

図 3. 同じ HTML 文書内で複数のアコーディオン構造を使用する
タブ付きウィンドウに 4 つのセクションが折り畳まれており、3 つのセクションは展開されています

全体をまとめる

新しいカスタムの jQuery アコーディオン・プラグイン、CSS、HTML マークアップを作成したら、全体を最終的な Web ページにまとめることができます。jQuery アコーディオン・プラグインを動作させるためには jQuery ライブラリーを組み込む必要があります。私が好きな方法は CDN (Content Delivery Network) を使用する方法です。CDN を利用すると、ユーザーの地理的な場所に応じてライブラリーを提供することができるため、最も速い方法でファイルを提供することができます。Google の CDN には jQuery ライブラリーが含まれており、URL として https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js を使用することで、Web ページに jQuery ライブラリーを組み込むことができます。

他のバージョンの jQuery ライブラリーを利用することもできます。Google の開発者向け Web サイトにあるライブラリーへのリンクを「参考文献」に挙げてありますので、それを参照してください。それ以外に HTML 文書の中で参照する必要があるファイルは、アコーディオンのスタイルを設定する CSS ファイルと、アコーディオンの jQuery プラグインのみです。それらが揃うと、実際のアコーディオン構造のための HTML マークアップが形を変えて表現されます。リスト 11 はその例です。

リスト 11. 2 つのアコーディオン構造を jQuery アコーディオンとして定義する
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Creating a Custom jQuery Plugin</title>
  <link type="text/css" rel="stylesheet" href="jquery.accordion.css" />
  <script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
  </script>
  <script type="text/javascript" src="jquery.accordion.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('dl#my-accordion').accordion({open:true});
    $('dl#my-accordion2').accordion({open:true});
});
</script>
</head>

<body>

<dl class="accordion" id="my-accordion">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
  <dt>Section 3</dt>
  <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
  <dt>Section 4</dt>
  <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<dl class="accordion" id="my-accordion2">
  <dt>Section 1</dt>
  <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
  <dt>Section 2</dt>
  <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
</dl>

</body>
</html>

まとめ

この記事では、カスタムの jQuery プラグインを非常に容易に作成できることを学びました。繰り返し利用される機能を作成して迅速にプラグインに変換することで、開発期間を短縮し、効率を高めることができます。どのようなプラグインの場合も、再利用できることが重要であり、再利用によって生産性を高めることができます。


ダウンロード

内容ファイル名サイズ
Create and run a custom jQuery accordion plugincustom-jquery-plugin.zip3KB

参考文献

学ぶために

製品や技術を入手するために

  • IBM 製品の評価版: IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2、Lotus、Rational、Tivoli、WebSphere などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために

  • developerWorks コミュニティー: ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、ウィキを調べることができます。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=828049
ArticleTitle=カスタムの jQuery プラグインを作成する
publish-date=08022012