2007年11月11日

jQuery のプラグインを作成する : ブログの新着記事を表示

jQueryは、プラグインで手軽に機能を実装できるのが特徴です。プラグイン・ディレクトリ（Plugins | jQuery Plugins）に沢山のプラグインが公開されていますが、作り方を調べてみたら、かなり簡単に自分でも作成できるよう。以下の記事は分かりやすいチュートリアルになっています。

jQuery For Programmers: Part 1

プラグインを作成するためのテンプレートは、以下のような感じ。jQuery.fn.myplugin のmyplugin の部分は、自分が作りたいプラグインの名称（＆実行する際のファンクション名）。config は、プラグインに渡す引数を、連想配列で複数指定することができる。あとは、this でプラグインを適用するHTML要素が取れるので、DOMなどで自由に操作できる。

(function() {  
		
	jQuery.fn.myplugin = function(config){

		// 引数のデフォルト値を渡す {}内は、カンマ（,）で区切って複数可能
		config = jQuery.extend({
				value1: "Default value 1",
				value2: "Default value 2"
			},config);

		// プラグイン内のthis は、$("div.target") など指定したHTML要素
		var target = this;
		target.append("Hello jQuery Plugin !<br />"
				 + config.value1 + "<br />"  + config.value2);
	};
})(jQuery);

このテンプレートを元に、自分のプラグインを作成したら、それを jquery.myplugin.js などの名前で保存。サーバにアップロードして、HTMLファイル内のhead内で読み込む。そして、自分のプラグインを実行する対象のHTML要素を、jQueryのセレクターで指定。この例では、<div class="target"></div>というHTML要素に対して、mypluginを実行。

<script src="./jquery-latest.js" type="text/javascript"></script>
<script src="./jquery.template.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
// HTMLファイルの読み込みが終了したら自動実行される、jQueryのメソッド
$(document).ready(function(){
  // 引数値を渡す {}内は、カンマ（,）で区切って複数可能
  $("div.target").myplugin({value1: "This is value 1"});
});  
//-->
</script>
</head>
<body>
<div class="target"></div>
以下、通常のHTMLをつらつらと

このHTMLを表示すると、<div class="target"></div>の内部に、Hello jQuery Plugin ! が表示されるはず。

以前にprototype.jsで作った、Movable Type の新着記事を、個別のブログ記事ページにカテゴリーごとに表示する機能を、

Prototype.js を使って、MovableTypeで最新記事を表示する

jQueryのプラグインにしてみた。MTテンプレートは以下。

 (function() {  
		
	jQuery.fn.mtNewEntry = function(config){

		// 引数のデフォルト値を渡す {}内は、カンマ（,）で区切って複数可能
		config = jQuery.extend({
				category: "1,0"
			},config);
		arrayCategory = config.category.split(",");
		var cat_id = arrayCategory[0];		
		var target = this;
		
		// 最新記事をカテゴリ毎に5件 JSON形式で出力
		var articles = {
			<MTCategories>
			"<$MTCategoryID$>" : {
				"id" : "<$MTCategoryID$>",
				"label" : "<$MTCategoryLabel$>",
				"links" : [
						   <MTEntries lastn='5'>
							   {"title" : "<$MTEntryTitle encode_js="1"$>"
								,"url" : "<$MTEntryPermalink$>"
								, "excerpt" : "<$MTEntryExcerpt encode_js="1"$>"}
						   <MTEntriesFooter> <MTElse>, </MTElse> </MTEntriesFooter>
						   </MTEntries>
						   ]
			},
			</MTCategories>
			"id" : "end"
		};

		function showList(id) {
			var list = "";

			for ( var i = 0; i < articles[id].links.length; i++) {
				list += '<h4><a href="' + articles[id].links[i].url + '">' + articles[id].links[i].title + '</a></h4><p>' + articles[id].links[i].excerpt  + '</p>';
			};

			return list;
		};
		target.append(showList(cat_id));
	};
})(jQuery);

これを、jquery.mtrecents.js などの名前で保存し、ブログの個別ページのテンプレートで読み込み。

<script src="http://www.goodpic.com/mt/jquery.mtrecents.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
  // 引数値を渡す {}内は、カンマ（,）で区切って複数可能
  $("div#mt-new-entries").mtNewEntry({category: "<MTEntryCategories><$MTCategoryID$>,</MTEntryCategories>0"});
});
//-->
</script>
</head>

あとは、テンプレート内で、そのカテゴリーの新着記事リストを表示したい場所に、<div id="mt-new-entries">　</div> を埋め込めばよい。

こんな風に、jQuery のプラグインはかなり簡単に作成できるので、ちょっとしたjavascriptでもプラグインにしておくことで、ウェブサイトの管理がしやすくなるかもしれません。