感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery news tickerでRSSのリンクをティッカー表示する。

スポンサーリンク

1.前提

以下の画像のように、左から右に流れるような帯に、RSSフィードの内容を表示させたい。
クリックすると、そのタイトルの先に飛べれば、Webページのちょっとした飾りにも使えるかもしれない。

こんな感じで、文字が左から流れてくる。
f:id:sho322:20140205194246j:plain

で、クリックすると、リンク先に飛ぶことができる。
f:id:sho322:20140205194255j:plain

こういうのをしれっとヘッダーに置いたら、アクセスが増えるかも?

で、こんな感じのティッカー(帯)を表示するにはどうしたらいいだろうか。
まず、jQueryプラグイン、「jQuery news ticker」を使う。
jQuery news ticker
http://www.jquerynewsticker.com/

RSSフィードを読み込むには、クロスドメイン制約を乗り越えるために、Google Feed APIを使う。

ただ、これだけではうまくいかない。
RSSフィードの読み込みが終わってから→そのリンクとかタイトルをティッカーで表示する
というように、ちゃんと前後関係をつけないと、うまいこと表示することができない。

そして、Google Feed APIは非同期で実行されるため、それがちゃんと読み込み終わったかどうかがわからない。
というわけで、
・ちゃんと読み込み終わってから→ティッカー表示
するために、jQuery Deferredを使う。
以下の記事をめちゃくちゃ参考にした。
Google Feed APIとdefferdオブジェクトの使い方

前置きが長くなったけど、サンプルはこんな感じ。
ちなみに、jQuery news tickerはjQueryのバージョン1.10以降だったら、liveメソッドが無いとかで、うまく動かなかった。

2.コードサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ticker sample</title>
<!--
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
-->
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.ticker.js"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(function() {

	var feedUrl = "http://dennou-kurage.hatenablog.com/feed";
	var entryNum = 10;
	var $jsnews = $("#js-news");

	google.setOnLoadCallback(function() {
		var promissTask = function(feedUrl,entryNum) {
			var feed = new google.feeds.Feed(feedUrl);
			feed.setNumEntries(entryNum);

			var dfd = $.Deferred();
			feed.load(function(result) {
				console.log("feed load finish");
				if (!result.error) {
					var entries = result.feed.entries;
					for (var i=0; i < entries.length; i++) {
						var entry = entries[i];
						$jsnews.append('<li>' + '<a href="' + entry.link +'"' + 'target="_blank">'  + entry.title + '</a>').attr('class', 'news-item');
					}
					dfd.resolve('task success');
				} else {
					dfd.reject()
				}
			});
			return dfd.promise();
		};

		$.when(promissTask(feedUrl,entryNum)).then(
			function(res) {
				$('#js-news').ticker();
			}
		);
	});
});


</script>
</head>
<body>
<h2>jQuery News Ticker Example</h2>

<ul id="js-news" class="js-hidden">
</ul>

</body>
</html>

jQuery news tickerは、
・ticker-style.css
jquery.ticker.js
の2つを読みこめば使うことができる。
これ、どっかのサーバにホスティングされてないか探したんだけど、見つからないんだよね。残念。

上のサンプルを表示させると、ティッカーが表示される。
ティッカーの表示のされ方は、色々と変更を加える事ができるので、本家のサイトを見てほしい。

なお、他にも色々とティッカー表示させるプラグインはあるようだ。
6 Best jQuery Vertical & Horizontal News Ticker Plugins

あと、以下のように、liタグにリンクを設定するところは、以下のように、スマートとはいえない書き方をした。

$jsnews.append('<li>' + '<a href="' + entry.link +'"' + 'target="_blank">'  + entry.title + '</a>').attr('class', 'news-item');

これは、以下のように書き換えても、全く同じように動作する。

$jsnews.append(
	$("<li>",{}).append(
		$("<a>", {href: entry.link, target: '_blank'}).text(
			entry.title
		)
	)
);

参考リンク→http://stackoverflow.com/questions/15416239/append-lia-hef-text-a-li-to-ul-using-jquery-foreach-append

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)