Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2ページ目 | jQuery

jQueryのプラグインを作って分かった作法

1.$を衝突させないように。

(function($){
 /*処理*/
})(jQuery);

上のように無名関数で囲って、jQueryを$に変換し、中で$を扱う形で処理を書く。
他に$を名前空間に使用しているライブラリと衝突する可能性があるから。

2.メソッドを定義

$.fn.extendのなかに、JSON形式でメソッドを追加していける。下のようなソースを書くと、$("#hoge").func()のような形で使用することが出来る。

$.fn.extend({
	func:function(){
		/*この中に処理を書く*/
	},
});

3.オプションが存在するとき

オプションがある時は下のソースのようにデフォルトの値に上書き可能なように$.extendを使う。

func:function(opt){
    var opt = $.extend({
        key1:value1,/*デフォルト値1*/
        key2:value2,/*デフォルト値2*/
	key3:value3,/*デフォルト値3*/
	},opt);
	/*処理*/
}

$.extendの解説

引き数が1つのとき

jQuery自体の拡張という意味になる。例えば、$.isSmartphone()でスマートフォンかそうでないかの判定をしたい時は下のようなソースが考えられる。

$.extend({
	isSmartphone:function(){
	        var agent = navigator.userAgent;
        	if(agent.indexOf('iPhone') > 0 || agent.indexOf('iPad') > 0 
        	|| agent.indexOf('ipod') > 0 || agent.indexOf('Android') > 0){
			return true;
		}else{
            		return false;
       		}
	},
});

引き数が二つのとき

一番目の引き数のオブジェクトのプロパティを二番目の引き数のオブジェクトのプロパティで上書きできる。下の図のようなイメージ。既存のオブジェクトのメソッドやプロパティをオーバライドして使いたい時に使おう。


まとめると

以上、3つの点をふまえるとjQueryプラグインを作るひな形は以下のようになる。

(function($){
	$.fn.extend({
		func:function(opt){
			var opt = $.extend({
				key1:value1,
			key2,value2,
				key3,value3
			},opt);
			/*オプションを使った処理*/
		}
	});
})(jQuery);

簡易版CAPTCHA認証用jQueryプラグインを作った

フォームの送信前に認証用画像を用意して、その画像に書かれている内容を入力してもらうことで、フォームの入力をロボットにさせないための技術をCAPTCHAといいます。今回は簡易版CAPTCHA認証用jQueryプラグインを作ってみました。
jquery.captcha.jsです
本当のCAPTCHA認証ではサーバ側でハッシュ化した文字列と、入力された値のハッシュ値を比較して等しければ認証成功というシステムです。なのでjQueryのプラグインという時点でまったく成り立ちませんが、それでもよければ、フォームに設置してみてください。

DEMO

フォームに値を入力し、フォームテーブルの下にある「送信内容の確認へ」ボタンを押してみてください。画像に書かれている文字と実際に入力した値が違っていれば警告文が表示されるはずです。


HTML

<form class="acms-form acms-inline-btn">
	<!-- フォームの設置 -->
	<input type="text" id="captcha" />
</form>

jQuery

	$("#captcha").setCaptcha({
		hook:function(){$(".hideAlert").addClass("active");},
		width:300,
		height:100,
		length:5,
		form:".acms-form",
		color:"red",
		func:"twirl",
		size:50
	});

option

width画像の幅
height画像の高さ
length文字の長さ
formCAPTCHA画像を設置するフォーム
color文字の色
size文字の大きさ

callback

hook画像認証が失敗した時に発動する命令

ダウンロード

以下のリンクからダウンロードしてください



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド