category:
Technology
Back to Blog Index
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>