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

前回までのおさらい。

前回の記事

まずは前回最後のサンプルを見てください。

ここまでのサンプル（フェードを実行）

サンプルを見ればわかるように
ニュースティッカーの実装まではできましたが不具合があるようです。

• 最後のニュースが表示された後に何も表示されない

よくあるパターンは最後が表示されると最初に戻る というものです。
これを実装してみようと思います。

JSソースを書く 3

どうすればいいか考える

最後のニュースを表示したあとに 最初のニュースに戻るにはどうすればよいのか
とりあえず順を追って考えてみることにしましょう。
僕の全然プログラマではない思考でやってみます。

1. count>=end なら count = 0 にしたのち li#news-(end) を非表示にして
2. li#news-(count) を表示

count>=end になった後をどう判別するかが必要になりますので 新しく
var start = 0; を追記します。それもふまえて実装してみましょう。

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

  if(count>=end{
    count = 0;
    start = 1;
  }

},interval);

実行してみましたか？
ここまでのサンプル

最後のニュースから最初のニュースに戻るようにはなりましたが
そのあとがだめですね。

ちなみに

a ? b : c;

は a を判別してtrue を返せば b, falseなら c になります。

if(a){
  return b;
}else{
  return c;
}

と同じような意味になります。
たとえば上の例では

start==1 ? end : count

は start==1 なら end、それ以外なら（0なら）count

start==1 ? count++ : ++count

も同じように start==1 なら count++、それ以外なら ++count
がそれぞれ入ることになります。

結局どうしたらいいのか

順を追って解決していこうと思ってたんですけれど
次が結構ややこしくなってしまって…結論から言うと

$("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
$("li#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;
}

となります。
見た感じ非常にややこしくなってしまったので 順番に説明していきます。

1. 1週目と2週目以降は count の動きが変わるので それを判別する 変数startを用意する。
2. start == 0 なら1週目、start == 1 なら2週目以降
3. start==1 ? は2週目以降かどうか
4. count==0 ? は最後のニュースから最初のニュースにもどるときがどうか
5. 1週目は 非表示：li#news-count、表示：li#news-(++count)
6. 2週目以降は 非表示：li#news-(count==0 ? end : count-1)、表示：li#news-((++count)-1)
7. つまり、li#news-endが表示される → count = 0 → 非表示にするのは li#news-end
8. さらに li#news-endが非表示になる → li#news-(++count – 1)(ようはli#news-0) を表示
9. この -1 のずれを戻すために 非表示にする方にも count-1 を
10. 最初の週の終わりには count = 0; start = 1;にする。
11. 次週以降の終わりには count = 0; にする。

start==1 ? count==0 ? end : count-1 : count

は start==1 && count==0 なら end、start==1 && count!=0 なら count-1
start!=1 なら count ということです。

説明すればするほど難解になっているような気もしますが…;;;
もっとキレイに説明したいんですけれど…
そんなことよりももっとスマートな書き方がきっとあるはずです。。。

というわけで、完成したスクリプトは以下になります。

$(function(){
  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();
});

＆は半角に直してください。

では実行してみましょう。
サンプル（完成）

後半の流れが若干（結構）アヤシイ感じもしますけど
とりあえずはこれでニュースティッカーが完成しました。

次回は…

次回はこのファンクションを利用してjQueryのプラグインにしてみましょう。
たとえば interval、フェードの速度をオプションで設定できるようになります。