jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例

2010年2月18日(Update:2011年6月5日) by 村上和久

jQueryでのプラグインの簡単な書き方と、広告などをランダムに表示するのに便利なjQueryプラグインを紹介する。

プラグインといっても、そんなに難しいことはなくて、jQueryでちょっとしたJavaScriptを書けるようになれば、プラグインも普通のjQueryのスクリプトとあまり変わらず簡単に作ることができる。

次のサンプルは、要素をランダムに表示するプラグイン。このページをリロードすると順番が変わるのが分かる。

広告1

広告2

広告3

広告4

広告5

広告6

広告7

まずはテスト用のhtml。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ランダム表示テスト</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.randomdisplay.js"></script>
</head>

<body>
<ul randomdisplay="3">
<li><a href="#1">広告1</a></li>
<li><a href="#2">広告2</a></li>
<li><a href="#3">広告3</a></li>
<li><a href="#4">広告4</a></li>
<li><a href="#5">広告5</a></li>
<li><a href="#6">広告6</a></li>
<li><a href="#7">広告7</a></li>
</ul>
<div randomdisplay="2">
<p>コンテンツp1</p>
<p>コンテンツp2</p>
<p>コンテンツp3</p>
<div>コンテンツdiv4</div>
<div>コンテンツdiv5</div>
</div>
</body>
</html>

htmlには、JavaScriptファイルを読み込む2行を追加して、ランダム表示したいタグを並べて、その親のタグに新しい属性 randomdisplay を付けて表示したい数を指定するだけ。後はJavaScriptがやってくれるので、htmlを汚さなくていい。

この例の動作はどのようなものかというと、広告1～広告7の内3つだけがランダムに表示される。そしてコンテンツp1～コンテンツdiv5の内2つだけがランダムに表示される。

jquery.randomdisplay.js

jQuery(function($) {

$.fn.extend({
	randomdisplay : function(num) {
		return this.each(function() {
			var chn = $(this).children().hide().length;
			for(var i = 0; i < num && i < chn; i++) {
				var r = parseInt(Math.random() * (chn - i)) + i;
				$(this).children().eq(r).show().prependTo($(this));
			}
		});
	}
});

$(function(){
	$("[randomdisplay]").each(function() {
		$(this).randomdisplay($(this).attr("randomdisplay"));
	});
});

});

JavaScript解説

プラグイン jquery.randomdisplay.js のJavaScriptを順番に見ていこう。

1行目 jQuery(function($) { と 21行目 }); は、グローバル変数や関数の名前空間を関数内に閉じ込めて、DOM構築後documentオブジェクトに対して function($) を呼び出す。$は引数となるので prototypeを併用してもグローバル変数が衝突することはない。

3～4行目の $.fn.extend({ randomdisplay : function(num) { } }); の記述がプラグインの関数定義。 jQueryオブジェクトの新しい関数 randomdisplay() を定義している。こうすることでオリジナルのjQuery関数を作ることができ、jQueryのセレクターや操作関数と同じように使うことができる。この関数の引数の形式は自由で、thisにjQueryオブジェクトが入る。戻り値の型も自由だが基本的にはjQueryオブジェクトを返せばよい。

ここでは、jQueryオブジェクトthisの子のタグからランダムに選んだタグを、引数で指定された数だけ表示する関数 randomdisplay() を定義している。

5行目 return this.each(function() { }); は、渡されたjQueryオブジェクト一つ一つについて無名関数を実行。

6行目 var chn = $(this).children().hide().length; は、子のオブジェクトを一旦全て非表示にして、子の数を取り出している。

7行目 for(var i = 0; i < num && i < chn; i++) { は、表示する個数分だけループ。

8行目 var r = parseInt(Math.random() * (chn – i)) + i; は、次に表示するインデックスを残りからランダムに算出。

9行目 $(this).children().eq(r).show().prependTo($(this)); は、r番目の子を表示して、prependTo()で親の先頭に移動している。移動することで表示順序もランダムになる。

15行目 $(function(){ }); は、DOM構築後にdocumentオブジェクトに対して無名関数を実行。

16行目 $(“[randomdisplay]”).each(function() { }); は、セレクターで属性 randomdisplay を持つタグを選択して、それぞれに対して無名関数を実行。

17行目 $(this).randomdisplay($(this).attr(“randomdisplay”)); は、先に定義したプラグイン関数 randomdisplay() を呼び出していて、引数に属性 randomdisplay の値を渡している。

基本的にはこのような形でjQueryのプラグインを書くことができる。書き方が独特でちょっと分かりにくいかも知れないが、jQueryのプラグインはこのように書くものだと割り切って、自分がプラグインを作るときは似たような機能のプラグインのソースを元に改造するところから始めるといい。

投稿者: 村上和久

アクセス解析・Webコンサルティングのアナライズネット代表・Webアナリスト。Googleアナリティクスの導入とカスタマイズ、ウェブ分析、アクセス解析に関するセミナーなどを行っている。

murak.net

アクセス解析・Googleアナリティクス・ネット戦略・SEO・Webプログラミングなどを綴るブログ

jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例

JavaScript解説

関連しているかもしれない記事

投稿者: 村上和久

5件のコメント

JavaScript解説

関連しているかもしれない記事

投稿者: 村上 和久

5件のコメント

投稿者: 村上和久