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

newsticker

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

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

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

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

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

用意するもの

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

とりあえず…

jQueryを読み込んで…

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




  

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

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).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. 
              
  2. countに1を加える
    3. 
              
  3. li#news-(count) をフェードインさせる
    4. 
            

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

            

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


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

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

            
サンプルを見てもらうと分かりますが 入れ替えは実装されましたが

            このままでは最後のニュースを表示した後に何も表示しなくなってしまいます。

            
次回は以上の不具合を修正していくことにします。

            続く。。→https://5509.me/2009/03/10/newsticker1-2.html

            

              
            

            

              
何か役に立つことがあったらシェアしてみてください

              

                このエントリーをはてなブックマークに追加 
                  
                  
                
              

            

            

              
Related Entries

Leave a comment

Trackbacks: 1

Trackback URL for this entry
Listed below are links to weblogs that reference
jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1] from 5509
  1. pingback from jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2] | 5509

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

Author

nori
nori
- UI Engineer
Location
- ,