Posted on

簡単なJQueryのプラグインを作ってみた

ブラウザ上で動作するアプリケーションを開発されている方のほとんどは、JQueryライブラリを利用しているのではないでしょうか。最近ではUIの機能も成熟してきてますし、モバイル用にも拡張され、非常に使い勝手の良いライブラリです。

JQuery公式サイト(英語)
http://jquery.com/

JQuery UI公式サイト(英語)
http://jqueryui.com/

JQuery Mobile公式サイト(英語)

http://jquerymobile.com/

そして何より魅力なのはそれらの基礎ライブラリを元にユーザが拡張したプラグインが豊富に提供されていることです。
以前は入力補助の小さなものが主でしたが、今では複雑なチャートや書き込み可能なカレンダーといった大規模なプラグインがほとんどの場合無料で提供されています。

最初は他の人が作ったプラグインを使うばかりだった人も、慣れてくるにしたがって自分の作った機能をプラグイン化してみたい、という欲求に駆られてくると思います。
だって、うまく機能単位で切り出せれば他の所でも使えますし、人にも提供しやすくなりますもの。

JQueryのプラグインの初歩の初歩はこちらで勉強させていただきました。

jQueryプラグインの作り方 ~ 重要な3つのポイント ~

http://nigohiroki.hatenablog.com/entry/2013/02/13/002508

ふむふむ、なるほど、



JQueryにおいてプラグインを作成することは、JQueryというクラスに新たなメソッドを付け加えるということなのですな

この概念プラス内部の変数がグローバル変数に影響を与えないように、括弧で括って即時関数の形式にするのですな。

即時関数についての説明は、以下のサイトに詳しいです。

(functuon(){…})();って何?(日本語)
http://se35over.seesaa.net/article/272576704.html

手始めに、現在の日付と曜日、時分秒を画面上に表示する超かんたんなプラグインを作ってみました。

(function($) {
$.fn.dateclock = function(options) {
var target = $(this);
var dayOfWeek = new Array("日","月","火","水","木","金","土");
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
month = month<10?"0"+month:month;
date = date<10?"0"+date:date;
hour = hour<10?"0"+hour:hour;
minute = minute<10?"0"+minute:minute;
second = second<10?"0"+second:second;
var clockString = "" + year + "年" + month + "月" + date + "日(" + dayOfWeek[day] + ")" + hour + ":" + minute + ":" + second + "";
target.html(clockString);
setTimeout(function(){
target.dateclock()
},1000);
}
})(jQuery);

外部からは何の設定も出来ないメッチャシンプルなプラグインですが(汗)、
このソースを事前に読み込んでおけば、

という領域に対して、

$("#clockArea").dateclock();

として呼び出すことが出来ます(^^)
こんな感じです↓

プラグイン作るのは結構面白いですね。
また機会があれば、さらに進んで外部から初期値や表示形式を設定する方法やメソッドチェーン等についてやっていきたいと思います☆