jQueryで自作したプラグインに変更を加えた

jQueryの自作プラグイン

jQueryの自作プラグインを書きなおした。ちょっと気になる点があったので。

気になる点

• 自作jQueryプラグインのセオリーに則った書き方になっているのか気になった
• 自作jQueryプラグインはすべてのメソッドがpublicになっている
• 同じ書き方を繰り返している部分を減らしたい
• 画像の倍率が最小は0.2倍だったのに、最大は2倍しかないので拡大側の倍率が物足りないと感じる

自作jQueryプラグインのセオリーに則った書き方になっているのか

jQueryクックブックなどを覗いてみると、以下のような書き方になっていた。

jQuery.fn.hoge = function() {
    return this.each(function() {
        // ... something
    });
};

セレクタに該当するもの全てに処理をかませる必要があるから、jQuery.eachを使う必要があるのだろう。そうなっていなかったので、上記のような書き方に変更して修正。

プラグインにオプションを渡す

jQuery.extendを使えば、オプションを上書きできるようだ。ここもjQueryクックブックを参考に。

自作jQueryプラグインはすべてのメソッドがpublicになっている

プラグインの外部で使う必要もないpublicなメソッドなので、プライベート関数でもいいはず。プライベート関数は、以下のようにすればいいらしい。

(function($) {
    function hoge() {
        // ...
    }

    $.fn.hoge = function(options) {
        hoge();
    };

})(jQuery);

データの読み出しはjQuery.dataを使えばとりあえずプライベート関数にできる。

画像の倍率が最小は0.2倍だったのに、最大は2倍しかないので拡大側の倍率が物足りないと感じる

拡大・縮小について、0.2倍と2倍とでは縮小するときに小さく見えるのに、拡大するときには大きくならない。違和感が半端無く、これでは困る。

拡大するときにはn倍、縮小するときには1/n倍であるということは、べき乗であれば制御できるはず。Googleスプレッドシートでグラフを書いてみた。

スプレッドシートで書いたグラフは上のようになった。基準値が2（青）だと、指数が大きくなればなるほどあっという間に莫大な拡大率になってしまう。基準値を1と2の間にしようとして1.1（黄）にしたが、せいぜい2.5倍から0.3倍。これではちょっと物足りないなぁ。というわけで、1.2（赤）に設定したら6倍から0.16倍。まぁ、妥当なところかな？と思ったので、基準値を1.2とした。

拡大率の制御を1.2のべき乗で行うと決めたので、JavaScriptだと以下のようになる。Math.powの指数部分を1か-1とすることで制御できるようになる。ちょっとややこしい。

scale = scale * Math.pow(1.2, delta); // deltaは拡大のとき1、縮小のとき-1。

これで、拡大・縮小の違和感は多少は緩和されたかな・・・？これに微調整を加えるとなるとなんか大変そうだとは思った。

2013/05/12 13:58