jQueryを使ってNews Tickerプラグインを作ってみよう[後編]

前編でニュースティッカーができたので 後編ではjQueryプラグインにしてみましょう。

jQueryを使ってNews Tickerプラグインを作ってみよう[前編]

• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]
• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2]

jQueryプラグインのメリットは

• 要素をjQueryのメソッドチェーンで繋いで実行できる
• オプション項目の指定が簡単にできる

といったところでしょうか。

前回作成したnewsFaderメソッドをより汎用的なものにする

前回、前々回で以下のnewsFaderメソッドを作成しました。

ところでnewsFaderとnewsTickerを間違えて記述していたので
プラグインはnewsTickerにして作成します。

function newsFader(){
  if($("li","div#newsTicker ul").length==1) return false;

  $("li","div#newsTicker ul").each(function(i){
    $(this).attr("id","news-"+i);
    if(i!=0) $(this).hide();
  });

  var start = count = 0,
    end = $("li","div#newsTicker ul").length-1,
    interval = 1500,
    fadeTimer = setInterval(function(){
      $("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow");
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },interval);
}
newsFader();

汎用性を持たせる

まずは newsFaderメソッドに記述している
要素$(“li”,”div#newsTicker ul”)、切り替えの間隔interval、フェードアウトの速度”slow”
を引数指定で実行時できるようにします。

$(“li”,”div#newsTicker ul”) は $(“div#newsTicker ul li”) と同じ意味です。
どの要素を指定しているか分かりやすくするために前者のように記述しています。

function newsFader(elm,fadeSpeed,fadeInterval){
  if(elm.length==1) return false;

  elm.each(function(i){
    $(this).attr("id","news-"+i);
    if(i!=0) $(this).hide();
  });

  var start = count = 0,
    end = elm.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(fadeSpeed);
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },fadeInterval);
}

上記のように書き換えることで 3つの項目を実行時に引数で指定できるようになりました。

fadeTimer の最初の行で li#news- となっていましたが
li が入っていると LI要素にしか適用できないので、汎用性を持たせるために li を消去しています。

newsFader($("li","div#newsTicker ul"),"fast",1000);

のように実行できます。
ここまでを前回の記事に含めればよかった…

サンプル（引数指定）

メソッドチェーン

jQueryではメソッドチェーンでメソッドを繋いでいくようにコードを書いて行きますが
ところでメソッドチェーンとは何でしょうか。

これは、それぞれのjQueryオブジェクトのメソッドの戻り値の多くがjQueryオブジェクトになっているからです。 つまり、使いたいメソッドを「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムが書きあがるというわけです。

これは、メソッドチェーンと呼ばれている仕組みです。

via: All About – jQueryの魔法

まずjQueryプラグインを作るにあたって
指定の要素にメソッドチェーンで繋ぐことができる状態をつくります。

$.fn.メソッド = function(){}

上記のように $.fn.メソッド とすることで任意の$()で渡した要素に対して
メソッドを実行できるようになります。

具体的には $() の要素をメソッド内で
this として扱うことができるようになります。

下のような拡張メソッドを作成して実際に実行してみましょう。

$.fn.sampleChain = function(){
  alert(this.length);
}

最初なので単純に渡した要素の長さをアラートで表示するだけのものです。
これを実行してみます。

jQueryのメソッドを実行するときは

$(function(){});

の中に記述すればいいだけなので

$(function(){
  $("p").sampleChain();
});

で実行できます。
サンプル（メソッドチェーンサンプル）

サンプルHTMLにはP要素は3つ含まれているので
アラートの中には 3 と表示されます。

プラグインにする

メソッドチェーンでは親になっている要素をthisとして渡すことができるので

これにもとづいて newsFaderメソッドを $.fn.newsTickerメソッドに書き換えると…

$.fn.newsTicker(fadeSpeed,fadeInterval){
  if(this.length==1) return false;

  this.each(function(i){
    $(this).attr("id","news-"+i);
    if(i!=0) $(this).hide();
  });

  var start = count = 0,
    end = this.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(fadeSpeed);
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },interval);
}

となります。引数で渡していたelmがthisとして渡せるようになっています。
これを実行する場合は

$("li","div#newsTicker ul").newsTicker("fast",1000);

サンプル（プラグイン化）

となります。jQueryらしくなってきました。

次は残りの変数をオプションとして扱えるようにしてみましょう。

上のメソッドでは fadeSpeed、fadeIntervalを指定しない限りエラーを返すので
指定しない場合は何かデフォルトの値が入っているようにしてみます。

$.fn.newsTicker(options){

  var c = $.extend({
    interval: 3500,
    fade: 1000
  },options);

他の箇所は省いていますが、上記のようにすることで
デフォルトの値を設定することができます。

これらの変数は c.interval、c.fadeのように変数cのプロパティとして参照できます。
また

$("li","div#newsTicker ul").newsTicker({
  interval: 1500,
  fade: "slow"
});

のように実行時にnewsTickerメソッドの引数にハッシュで値を渡すことで
任意の値で実行することができます。

fadeはjQueryのfadeInメソッドを使っているので
値にはミリセカンド、”slow”、”normal”、”fast”をとることができます。

以下が完成したnewsTickerメソッドです。

$.fn.newsTicker = function(options){

  var c = $.extend({
    interval: 3500,
    fade: 1000
  },options);

  if(this.length==1) return false;
  this.each(function(i){
    $(this).attr("id","newsFader-"+i);
    if(i!=0) $(this).hide();
  });

  var count = 0,
    end = this.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(c.fade);
      if(count>end) count = 0;
    },c.interval);
}

さっそく実行してみましょう。

$("li","div#news ul").newsTicker();

サンプル（完成）

応用

ところで気付いている人もいるかもしれませんが
このnewsTickerメソッドはニュースティッカー以外にも使えます。

スライドショーに使ってみる

たとえば

div#image {
  width: 500px;
  height: 333px;
  position: relative;
}
  div#image img {
    position: absolute;
    top: 0;
    left: 0;
  }

$("img","div#image").newsTicker();

のようにすれば 簡単にスライドショーを作ることができます。
実用性はアレですけど…

サンプル（スライドショー）

スライドショーに使ってみる2

このままだと 画像が切り替わるときに チラっと白くなるので
前の画像を非表示にするところに fadeOut を使うときれいに切り替わるようになります。

hideをfadeOutに書き換えて、fadeOutの速度もオプションに追加します。

$.fn.newsTicker = function(options){

  var c = $.extend({
    interval: 3500,
    out: 1000,
    set: 1000
  },options);

  if(this.length==1) return false;
  this.each(function(i){
    $(this).attr("id","newsFader-"+i);
    if(i!=0) $(this).hide();
  });

  var count = 0,
    end = this.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).fadeOut(c.out);
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(c.set);
      if(count>end) count = 0;
    },c.interval);
}

これできれいに切り替わるようになりましたね。
サンプル（スライドショー完成）

ちなみに写真のワンコはうちのかわいい ゆに です。
誕生日にケーキをあげたら 口のまわりをクリームまみれになるくらい必死に食べてました。
かわいい…

まとめとサンプルファイルのzip

こんな感じでnewsTickerプラグインは他にも色々と応用できるかもしれないです。

それはさておき 「jQueryプラグインの作成方法は結構簡単」
ということを伝えたかったのですが、いかがだったでしょうか？？？

間違いなどあればコメント等で指摘していただけると助かります。

今回のサンプルファイルをまとめたものをあげておきますので必要な方は自由に使ってください。
作成したプラグインもライセンスなしで自由に使えます。

newsTicker.zip(33KB)