jQueryを使った超クールなRSSティッカー『Technosophos RSS Widget』

さて、ちょっといろいろ調べていて、RSSティッカーを実装しました！！

Evernoteで使われているティッカーですね。実装したくなり調べていたんですが、MITライセンスのJavascriptだということがわかり、使わせてもらいました。

RSSがふわっふわっとフェードイン・アウトしながらローテーションします。RSSティッカーの中でも最高にかっこいいのでは。

それでは実装方法をご紹介。

■HTML
<div id="ticker"><!--空のままにしておく。ここにRSSが書き出される。--></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rsswidget.js"></script>
<script type="text/javascript">
function setupRss() {
Technosophos.rssWidget("rss.xml", "#ticker");
}
setupRss();
</script>

■HTMLの解説
・jQueryを↓からダウンロード。「jquery-1.2.1.min.js」以上のバージョンなら問題ないようです。
　» jQuery

・rsswidget.jsを↓からダウンロード。
　» rsswidget.js

・「Technosophos.rssWidget("rss.xml", "#ticker");」の部分について
　「rss.xml」にはxmlのパスを指定。#tickerは、<div id="ticker">と連動してID名を指定します。

■XML
さて、ここでかなりはまりました。。ローカル（しかもApacheのない場所）ではMTデフォルトのxmlを読んでも実装できたんですが、サーバにアップした時点でそれだと読み込めませんでした。

なのでxmlのテンプレートを新規で作成。↓のようになりました。

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>New Entry</title>
<MTEntries lastn="15">
<item>
<title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
<link><$MTEntryPermalink encode_xml="1"$></link>
</item>
</MTEntries>
</channel>
</rss>

■CSS
CSSを適切に指定。僕は↓のようにしました。

.rss-widget-outer-div {
font-size:0.9em;
margin: 7px 0 0 0;
padding-right: 5px;
background: #e4e4e4;
}
.rss-widget-inner-div {
padding: 3px 20px;
}
.rss-widget-title {
padding-right: 10px;
color: #565656;
font-weight:bold;
border-right:1px solid #808080;
}
.rss-widget-inner-div a {
text-decoration: none;
color: #6e6e6e;
padding:0 0 0 10px;
font-weight: normal;
}
.rss-widget-item-desc {
padding-left: 10px;
font-weight: normal;
}

■パラメータ
ローテーションする速度やテキストの長さなどは「rsswidget.js」の中の↓のあたりを変更すればOKですね。

refreshInterval: 7000, // HOW LONG TEXT IS DISPLAYED
refreshDuration: "fast", // HOW LONG A FADE EFFECT SHOULD TAKE (default = "slow")
maxTextLength: 115 // MAX NUM OF CHARS TO DISPLAY IN DESCRIPTION

■ライセンス
ライセンスについては、Using the RSS Widgetにあるように、MITライセンスとなっています。無料で使えますね。

というわけで、ひとまずトップページに実装。includeの仕方がよくないのかちょっと重くなった気がするので、最適化して、Windowsのブラウザチェックをしたら個別ページにも実装しようかな。

よかったらぜひ参考にして実装してみてください☆