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

まずは今回つくるものをご覧ください。

ニュースティッカー1（完成）

jQueryプラグインでも見たことがあるような よくあるフェードで切り替えるやつです。
これを作ってみましょう。

前編では ニュースティッカーを実装するところまで
後編では 前編で作成したニュースティッカースクリプトをjQueryのプラグインにしていく予定です。
結構長いので数回に分けて投稿していきます。。。

JavaScriptとjQueryがちょっとわかる人なら理解できる…はずです。

用意するもの

• jQuery – 公式でもいいですし、僕がつくったサンプルに含まれてるやつでも大丈夫です。
• FirefoxとFirebug

だけです。
FirefoxとFirebugは開発に必須のツールなので 特に説明してません。

とりあえず…

jQueryを読み込んで…

<script type="text/javascript" src="js/lib/jquery.js"></script>

要素をマークアップしましょう。

<div id="newsTicker">
  <ul>
    <li><a href="#">ニュースティッカーサンプル1</a></li>
    <li>ニュースティッカーサンプル2</li>
    <li><a href="#">ニュースティッカーサンプル3</a></li>
    <li>ニュースティッカーサンプル4</li>
    <li><a href="#">ニュースティッカーサンプル5</a></li>
  </ul>
</div>

こんな感じでリストなっているニュース一覧を切り替えることにします。

CSSでデザインを決める

枠になる画像を用意して
その中に1行で表示されるようにします。

画像を用意するのが面倒な場合は↓の画像をどうぞ。
borderでもなんでもいいです。

ちなみに今回のニュースティッカーの前提として
ニュースの文章は 枠内に1行で表示できる文字数であることとします。

div#newsTicker {
  width: 579px;
  height: 35px;
  background: url(../img/bg_ticker.gif) no-repeat;
  overflow: hidden;
}
    div#newsTicker ul {
      padding: 0 1em;
    }
      div#newsTicker ul li {
        line-height: 35px;
      }

ここまでニュースが切り替わらない1行ニュースができたと思います。

ここまでのサンプル（切り替わらない1行ニュース）

JSソースを書く 1

ようやく準備ができたので 次はスクリプトを書いて実際に動かしていきます。

まずは newsTicker というfunctionをつくります。

function newsTicker(){
}

以降とくに指定がない限りこのfunction内に記述していきます。
まずは ニュースがひとつしかない場合は動かせるものがないので

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

というように LI要素がひとつ（またはそれ以下）の場合は
何もしないで終了するようにしておきます。
（これでCMSの自動吐き出しにも対応できるようになりました。）

次は識別しやすいように すべてのLI要素のIDを当てていきます。

今回は news-*（*は連番）というようにします。

ひとつひとつやっていくのは面倒なので
each関数を使って楽をしたいと思います。

jQueryのeach関数はforと同じように使うことができます。
たとえば

for(var i=0;i<x.length;i++){
  alert(i);
}

は

$(x).each(function(i){
  alert(i)
});

のように書くことができます。
ではeach関数を利用して
「すべてのLI要素のID：news-*（*は連番）を割り当てる」
コードを記述してみましょう。

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

ついでに 最初のLI要素以外をdisplay: noneにしておきます。

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

試しにここまでのスクリプトを実行してみましょう。

ページ読み込み時にスクリプトを実行する場合

window.onload = function(){}

とかaddEventListenerに登録したりしますが
jQueryでは

$(function(){
});

の中で実行するだけです。
厳密に言うとwindow.onloadのタイミングではなく
DOM構築後のタイミングで実行されることになります。

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

ここまでのサンプル（IDを割り当てて最初のLI要素以外を非表示）
- ひとつ前のサンプルと同じに見えますがFirebugで要素を確認すると状態が分かります。

JSソースを書く 2

LI要素にIDを割り当てて、最初のLI要素以外はdisplay: noneにしたので
フェードで入れ替える部分を作ります。

まずは最初のIDと終わりのIDを決めておきます。

現在表示しているニュースの番号は count という変数に入れることにします。
始まりは news-0 で終わりは news-4 ですが
終わりの数字を決めてしまうと 要素が増えたときにいちいち面倒くさいので
LI要素の数（ニュースの数）を取得して、それから-1したものを終わりの数字にします。
（JSでは数は0始まりなので終わりの数字は配列の長さ-1になります）

var count = 0,
end = $("li","div#newsTicker ul").length-1;

ニュースが入れ替わるまでの時間を決めます。

var interval = 1500;

特に指定はないですが、ある程度効果が分かるように1500ミリセカンドにします。

1500ミリセカンド毎にニュースを入れ替える。

ニュースの入れ替えは簡単に書くと
現在表示されてるニュースを非表示にして 次のニュースをフェードイン
でできそうな気がしませんか？

現在表示されているニュースは 例えば一番最初に表示されているのは
li#news-0 になるので 次のニュースは li#news-1 ですね。

ということは手順としては

1. li#news-(count) を非表示にする
2. countに1を加える
3. li#news-(count) をフェードインさせる

これをスクリプトにするとこうなります。

$("li#news-"+count).hide();
$("li#news-"+(++count)).fadeIn("slow");

とても簡単ですね。これをさっき決めたinterval毎に切り替えるには

setIntervalという関数を使います。
setIntervalは

setInterval(function(){},interval);

のように記述して、intervalの間隔毎にfunctionを実行します。
functionはあらかじめ定義した変数でも可。

今回は特に タイマーを解除する必要がないので変数にしなくてもいいのですが
いつものくせで変数に入れています。

var fadeTimer = setInterval(function(){
  $("li#news-"+count).hide();
  $("li#news-"+(++count)).fadeIn("slow");
},interval)

上記の記述で interval の間隔で setInterval の内容を実行するようになりました。
ここまでのスクリプトは以下になります。

$(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 count = 0,
    end = $("li","div#newsTicker ul").length-1,
    interval = 1500,
    fadeTimer = setInterval(function(){
      $("li#news-"+count).hide();
      $("li#news-"+(++count)).fadeIn("slow");
    },interval)

  }
  newsFader();
});

ではここまでのスクリプトを実行してみましょう。
ここまでのサンプル（フェードを実行）

サンプルを見てもらうと分かりますが 入れ替えは実装されましたが
このままでは最後のニュースを表示した後に何も表示しなくなってしまいます。

次回は以上の不具合を修正していくことにします。
続く。。→http://5509.me/2009/03/10/newsticker1-2.html