jQueryでニュースティッカーのプログラムを作成

ブログの最新記事を順番に表示するニュースティッカーを開発

表示するデータを定義

ブログの最新記事を個別の記事ページの上の方に表示することにした。

「jQuery ニュースティッカー」でWeb検索してみるとプラグインとして公開されているものが複数見つかった。利用可能なプログラムは多数あるものの、シンプルなニュースティッカーが作れそうだったので、作成した上で記事にすることにした。

最終的には、WordPressで公開中の最新記事をAjaxで5件取得し、その記事をフロント側でティッカー表示する。当初は、Ajaxの事は考慮せず、フロントエンドでダミーデータを定義して、そのデータをティッカー表示する。

ダミーデータは以下の通り

var data = new Array(
  {
    url: 'http://webengineer.local/article/1',
    title: 'Post1'
  },
  {
    url: 'http://webengineer.local/article/2',
    title: 'Post2'
  },
  {
    url: 'http://webengineer.local/article/3',
    title: 'Post3'
  }
);

オブジェクト配列のデータ構造になっていて、各配列が2つの属性(url, title)を持っています。

jQueryでコーディング

ニュースティッカーを表示するブログの任意の場所に、下のHTMLを追加します。

<i id="news"></i>

このHTMLタグ内にダミーデータをjQueryで取得して表示します。具体的には、

$('#news').html(data[0].title);

上のコードでダミーデータの先頭の配列のtitleを表示することが出来ます。下のように書いて、

$('#news').html(data[0].title).fadeIn(2000);

fadeInを利用するとよりjQueryらしく表示することが可能です。

$('#news').html('<a href="'+data[0].url+'">'+data[0].title+'</a>').fadeIn(2000);

実際には、各ティッカーは最新記事のリンクになるので、上のようにコーディングして#newsにアンカータグを挿入します。

setIntervalで繰り返し

ニュースティッカーなので、最新記事5件を順番に繰り返し表示することになります。繰り返し処理は

JavaScriptのsetInterval関数

を利用することでコーディングできます。実際のコードは下のとおりです。

// 初期表示データ
$('#news').html('<a href="'+data[0].url+'">'+data[0].title+'</a>').fadeIn(2000);
// インクリメント値
var i = 1;
// 繰り返し処理開始 7秒おきに最新記事のリンクを表示
setInterval(function(){
  $('#news').html('<a href="'+data[i].url+'">'+data[i].title+'</a>').hide().fadeIn(2000);
  // インクリメント値を加算				
  i = i + 1;
  // ダミーデータの配列数とインクリメント値が同じになったらリセットして、最初から繰り返す
  if( i == data.length )
  {
    i = 0;
  }
}, 7000);

setInterval関数を利用してJavaScriptで繰り返し処理を書いてみました。このコードにより、ダミーデータが繰り返し表示されるようになり、ニュースティッカーらしい動きが確認できるようになります。

繰り返し処理の中断

ニュースティッカーでは、一定の間隔で、同じデータを繰り返し表示するのですが、表示中のリンクにマウスカーソルを合わせると繰り返し表示が停止するプラグインがほとんどようです。そのため、繰り返しの停止処理を実装してみます。

具体的には、

jQueryでイベントの取得
jsのclearIntervalで繰り返しを中断

上の2つの要素をコーディングすることでニュースティッカーに繰り返しの停止機能を実装することが可能です。

最初に#newsに対してイベントを設定します。

$('#news').on({
  mouseenter: function() {
    // マウスオンで繰り返し停止処理
  },
  mouseleave: function() {
    // マウスが外れている間は繰り返し処理
  } 
}).trigger('mouseleave');

jQueryのon関数で

mouseenter
mouseleave

のイベントを設定します。それぞれのイベント内で、具体的な繰り返しの停止処理と繰り返し処理をコーディングします。

$('#news').on({
  mouseenter: function() {
    clearInterval( $(this).data('timer') );
  },
  mouseleave: function() {
    $(this).data('timer', setInterval(function(){
      $('#news').html('<a href="'+data[i].url+'">'+data[i].title+'</a>').hide().fadeIn(2000);
      i = i + 1;
      if( i == data.length )
      {
        i = 0;
      }
    }, 7000));
  } 
}).trigger('mouseleave');

このコードにより、リンクにマウスオンしたタイミングでニュースティッカーが停止するようになり、マウスを外すと繰り返し処理が再開されるようになります。

まとめ

ニュースティッカーの開発を通じて、

JavaScriptによるデータ定義
jQueryによるフロントエンド処理
setIntervalによる繰り返し処理
clearIntervalによる繰り返しの停止
jQueryによるイベントの制御

などの技術を扱うことができる。