初めてのjQueryプラグイン作成(2)

初めてのjQueryプラグイン作成の続き

前回は、jQueryプラグインの基本定義について学んだ

こんなに簡単に、下記で定義できた↓

[code lang=”js”]
$.fn.関数名 = function(){ /*処理*/ }
[/code]

では、実際に簡単なプラグインを作ってみる

（２）カウントダウンプラグインの作成１カウントダウンプラグインの作成１

1. まずはプラグインの設計（目的の明確化）
　→今回は、とある1要素に対してカウントダウンを行わせるようなプラグインを作ることが目的

1-1. どんなカウントダウンを行わせたいか？を考える
　→今回は、下記のような機能が欲しい

①カウントダウンの終了日時を指定させたい(指定しなかったらロードした日の23:59:59まで)
②カウントダウンを開始日時も指定させたい(指定しなかったらロードした時間)
③カウントダウンさせる場所を指定したい
④日、時、分、秒、ミリ秒
⑤カウントダウンさせる間隔を指定したい、指定しない場合1秒に1回カウント

2. 簡単に使い方を考える

[code lang=”js”]
$(対象のエレメント).my_countdown({
start,
end,
target,
interval
});
[/code]

・$(対象のエレメント)...カウントダウンを行わせるエレメント要素
・$().my_countdown({})...カウントダウン用のメソッド（今回のjQueryプラグインのメイン関数名）
・以下はメソッドの引数として、提供（すべて省略可とする）
　start...カウントダウンを開始する日時（1-1.①）
　end...カウントダウンを終了する日時（1-1.②）
　target...カウントダウンを行う場所（1-1.③及び④）
　interbal...カウントダウンをさせる間隔（1-1.⑤）

３．実際に実装する

目的（やりたいこと）を機能的に書き出したので、実際に実装をしていく

[code lang=”js”]

//関数を定義する
$.fn.my_countdown = function(options){

//現在のthisエレメントが変更されても良い様にしておく
var this_element = this;

//初期時間の設定
var t = new Date();

//月の初期値
var tmonth = t.getMonth() + 1; //jsの仕様上、1ヶ月マイナスの値がでるので修正
if(tmonth<10) tmonth = ‘0’ + tmonth; //2桁にする

//日の初期値
var tday = t.getDate();
if(tday<10) tday = ‘0’ + tday;

/* 年月日の初期値。YYYY/MM/DDの形に揃える、後に日付計算を行うため「/」区切りにしておく。
* （jsでは「/」で区切らないと、日付の計算が行えないため）
*/
var t_ymd = t.getFullYear() + ‘/’ + tmonth + ‘/’ + tday;

//カウントダウン終了時間の初期値
var today_end = t_ymd + ‘ ‘ + ’23:59:59’;

//カウントダウン開始時間の初期値（現在の時刻）
var today_start = t;

//初期値を設定する
var default_settings = {
start: today_start,
end: today_end,
target: this_element,
interval: 1000, //初期値は1秒間隔
countdown_end: function(){
//カウントダウンが終了したときの振る舞い。
//初期値は「何も行わない」
return;
}
}

//ユーザ設定がある場合、デフォルト値にマージする
var settings = $.extend(true, default_settings, options);

//カウントダウンを行うターゲット要素の取得
var target_element = settings.target;

var t = this_element.get()[0];
this_key = ”+t.localName+’_’+t.id+’_’+t.className; //後でも使うのでグローバル変数として定義
var length = this_element.children().length;

//カウントダウンが終了したときの関数
var end_countdown_func = settings.countdown_end;

//カウントダウン用の設定
diff_time = {};
diff_time[this_key] = new Array(length);

//カウントダウンを行うため、終わり時間と開始時間の差分を計算
var i = 1;
this_element.children().each(function(){
var end_date = settings.end;

if(!end_date.match(/^\d{4}\/\d{2}\/\d{2}\s\d{2}\:\d{2}\:\d{2}$/)){
//if(!end_date.match(/^¥d{4}¥/¥d{2}¥/¥d{2}¥s¥d{2}¥:¥d{2}¥:¥d{2}$/)){
end_date = $(this).find(end_date).text();
}

var end = new Date(String(end_date));
end = Date.parse(end);
start = Date.parse(settings.start);

diff_time[this_key][i] = end – start;

i++;
});

//インターバルの設定
var interval = settings.interval;

//実際にカウントダウンを行う
setInterval(function(){

for(var i=1;i<=length;i++){
if(diff_time[this_key][i]){
diff_time[this_key][i] = diff_time[this_key][i] – interval;
gd_countdown(diff_time[this_key][i], i);
}
}

},interval);

//カウントダウンを行う際のレンダ処理
function gd_countdown(diff_time, i){

//残り日数
rdate = Math.floor(diff_time/(24*60*60*1000));
//残り時間の計算
var r = diff_time%(24*60*60*1000);
//残り時間（hour）
var rhour = Math.floor(r / (60*60*1000));
//残り時間(min)
var rmin = Math.floor(r/(60*1000))%60;
//残り時間(sec)
var rsec = Math.floor(r/1000)%60%60;
//残り時間(msec)
var rmsec = Math.floor(r/10)%100;

//カウントが10以下の場合2桁にする
if(0<rdate && rdate < 10) rdate = ‘0’+rdate;
if(0<rhour && rhour < 10) rhour = ‘0’+rhour;
if(0<rmin && rmin < 10) rmin = ‘0’+rmin;
if(0<rsec && rsec < 10) rsec = ‘0’+rsec;
if(0<rmsec && rmsec < 10) rmsec = ‘0’+rmsec;

//カウントが0の場合、00にする
if(rdate <= 0) rdate = ’00’;
if(rhour <= 0) rhour = ’00’;
if(rmin <= 0) rmin = ’00’;
if(rsec <= 0) rsec = ’00’;
if(rmsec <= 0) rmsec = ’00’;

var n = ‘:nth-child(‘+i+’)’;
var this_child = this_element.children(n);

$(this_child).find(‘span[id=date]’).text(rdate);
$(this_child).find(‘span[id=hour]’).text(rhour);
$(this_child).find(‘span[id=min]’).text(rmin);
$(this_child).find(‘span[id=sec]’).text(rsec);
$(this_child).find(‘span[id=msec]’).text(rmsec);

if(diff_time<=0){
var this_method = gd_countdown;
var this_diff_time = diff_time;
(end_countdown_func(this_child, this_method ,i));
}
}

//メソッドチェーンを行わせるため
return this;
}
[/code]