暇だったのでjQueryで遊んでいました。
jQueryといえば便利なプラグインがありますが、少し慣れてくると自分でも書いてみたくなります。
というわけで20行ほどのプラグインを書いてみました。
背景色をランダムに変化させ続けるプラグインです。
コード数は短いのですが、色をアニメーションさせるのにjQuery UIが必要です。。
せっかくなのでプラグインの書き方を説明してみたいと思います。
あんまりJavaScriptを知らない人向けです。
以下コード全文。
/**
* ColorfulBg Plugin
* Author: Kechol
* License: MIT License
* Require: jQuery, jQuery UI
*/
(function($) {
$.fn.colorfulbg = function(options) {
var defaults = {
duration: 5000,
type: "random",
easing: "linear"
};
var setting = $.extend({}, defaults, options);
var change = function(jq) {
var random = 0x100000 + Math.floor(Math.random() * 0xEFFFFF + 1);
jq.animate(
{backgroundColor: "#" + eval(setting.type).toString(16)},
setting.duration,
setting.easing,
function(){ change(jq); }
);
};
this.each(function() {
change($(this));
});
return this;
};
})(jQuery);
短い。
使いたいときは、jQueryとjQuery UIが必要です。
背景を変えたい要素をセレクタに指定して使います。
下の例では上記のコードを jquery.colorfulbg.js という名前で保存して読み込んでいます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.colorfulbg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("selector").colorfulbg();
});
</script>
では以下説明です。
基本構造
jQuery Pluginの基本構造は以下のような感じです。
(function($) {
$.fn.pluginname = function(options) {
var defaults = { };
var setting = $.extend({}, defaults, options);
this.each(function() {
//ここで色々処理
//$(this) でセレクタにアクセスできる
});
return this;
};
})(jQuery);
なんで全体が()で囲われた関数になってるのとか難しいことは置いておいて、
$.fn.fnpluginnameに関数を代入するとプラグインにできるよ、という解釈でいきます。
（詳しく知りたい人は「クロージャ」とかで検索すればいいと思う）
このthisはプラグインを呼び出すときに指定したセレクタです。
$.fn.pluginname の”pluginname”の部分を自身のプラグイン名とすることができます。
このプラグインを呼び出すときは
$("selector").pluginname();
てな感じになります。
$.fn.pluginname = function(options) {
var defaults = { };
var setting = $.extend({}, defaults, options);
で何をしているかというと、プラグインのデフォルトの設定(defaults)を、プラグインが呼び出されたときの
設定(options)で上書きしてsettingという変数に代入しています。
こうすることでデフォルトの設定を残しつつ、ユーザの指定した値を使うことができます。
this.each(function() {
//ここで色々処理
//$(this) で要素にアクセスできる
});
return this;
の部分では、thisで指定した要素それぞれに対して処理をすることができます。
eachの中では、$(this)でそれぞれの要素にアクセスできます。
最後にthisを返すのはこの関数の後に、同じセレクタに対して別の関数を実行出来るようにするためです。（メソッドチェーンともいう）
改めてコードをみる
(function($) {
$.fn.colorfulbg = function(options) {
var defaults = {
duration: 5000,
type: "random",
easing: "linear"
};
var setting = $.extend({}, defaults, options);
var change = function(jq) {
var random = 0x100000 + Math.floor(Math.random() * 0xEFFFFF + 1);
jq.animate(
{backgroundColor: "#" + eval(setting.type).toString(16)},
setting.duration,
setting.easing,
function(){ change(jq); }
);
};
this.each(function() {
change($(this));
});
return this;
};
})(jQuery);
このコードでは単純に、animateのコールバックで再帰的に色を帰る関数(change())を実行しているだけです。
this.each() {} の外で$(this) は使えないため、changeの引数で$(this)を渡しています。
var change = function(jq) {
var random = 0x100000 + Math.floor(Math.random() * 0xEFFFFF + 1);
jq.animate(
{backgroundColor: "#" + eval(setting.type).toString(16)},
setting.duration,
setting.easing,
function(){ change(jq); }
);
};
この部分が再帰する関数です。関数を変数に入れる書き方を覚えとくとプラグインを書くときは便利ですね。
（詳しくは「無名関数」とかで検索するといいと思う）
以下はランダムの色を計算する部分。
var random = 0x100000 + Math.floor(Math.random() * 0xEFFFFF + 1);
色をランダムに変更するために、10000~0xFFFFFまでの数字を乱数でとってrandomにいれています。
そしてjQueryのanimate関数を使ってます。
jq.animate(
{backgroundColor: "#" + eval(setting.type).toString(16)},
setting.duration,
setting.easing,
function(){ change(jq); }
);
{backgroundColor: "#" + eval(setting.type).toString(16)},
この部分でわざわざeval(setting.type)としているのはプラグインの拡張を意図したためです。
random以外にも、計算次第でlight（薄目の色の間でランダム）やdark（暗い色の間でランダム）なんて
変数を定義すればそれらをパラメータで指定できるようになります。
(数字).toString(16)は数字を16進数の文字列にしてくれます。
function(){ change(jq); }
の部分でchange() を関数でくくっているのは、Firefoxで同じ関数で再帰をしようとするとエラー(too much recursion)がでてしまうためです。
こうすることで別の関数として認識させることができます。
以上、簡単なチュートリアルでした。
jQueryのプラグインを作ってみると、jQueryやJavaScriptの仕組みが少しわかるような気がして楽しいと思います。
また、プラグインの作り方は以下のページが詳しいです。参考にさせていただきました。
jQueryのプラグインの作り方 | Coder’s Note
ではでは。
