Widget- 實做 RSS 瀏覽器

資三甲 古宗玄
資三丙 許嘉仁
資三甲 吳昌鴻
研究動機

常常見到 Yahoo 首頁上 Widget ，卻不知道他的用處及功

能，但仔細觀察卻發現許多網路相關的工具，像網站監示器、
Mail 告知器、小型聊天室、 Router 切換器、 P2P 軟體監示‧‧‧
等。

我們則選擇製作與生活較相關新聞閱讀器，也就是將有提
供 RSS 訂閱功能的新聞網站，利用 Widget 製作成 RSS 閱讀
器。
何謂 Widget ??

Yahoo! Widget Engine 是一個讓使用者可以方便使用一些

小工具的環境，使用者將一些生活上常用到的工具，像計算機
、日曆、天氣情報放以不同於傳統的便利方式來使用這些東西
。其實 Yahoo! Widget Engine 本並非是 Yahoo! 公司的產品，
他
的原名是 Konfabulator ，本來是一個要收費的小軟體，但在
2005 年 Yahoo! 併購後，宣佈可以免費下載使用這個軟體，並
將名稱更改為 Yahoo! Widget Engine 。
何謂 RSS ??

RSS(Really Simple Syndication) 是一種可供

網路使用者「訂閱」資訊格式，使用者只要
知道某資訊的 RSS 位置，就可以透過各種
閱讀軟體、客制化首頁、 Widget 等工具隨
時閱讀最新更新的資訊，不用再定期查閱特
定網站，同時可以將自己常看的資訊來源彙
整到一個單獨的介面，若要追蹤特定關鍵字
的相關資訊，許多 RSS 也能夠提供自訂功
能。
Widget 檔案結構
1. 圖形檔案
用來建構 widget 的外觀
2. XML 格式的 .kon 檔
用來宣告視窗、使用者界面控
制、計時器等的資料結構
3. JavaScript
包含處理 widget 的邏輯與功
能。
執行流程
loadRSS
var req = new XMLHttpRequest();
XMLHttpReqeust 是一個 class ，要使用前就像其他物件一樣，要
先用 new 敘述做出一個 XMLHttpRequest 。
req.open("GET", “feedURL", false);
open 這個 method 是用來作載入資料準備的。
req.setRequestHeader("Content-Type", "text/xml");
這行是向伺服器程式提出資料請求時，請伺服器提供
Content-Type 為 text/xml 的資料。
req.send();
send() 則提出資料要求，進行資料下載的一個函式。
var xml = XMLDOM.parse(req.responseText);
強制將傳回的資料 parse 變成 DOMDocument 物件。
ar rsss = xml.evaluate("rss");
利用這個物件函式將 RSS feed 的 rss 部份抽取出來。
RSS 2.0 XML 檔案範例

<rss version="2.0">
<channel>
<title>Yahoo! 奇摩新聞 - 即時新聞 </title>
<link>http://tw.news.yahoo.com/realtime/0.html</link>
<description>Yahoo! 奇摩新聞 - 即時新聞 </description>
<language>zh-tw</language>
<lastBuildDate>Sun, 5 Feb 2006 02:15:07 GMT</lastBuildDate>
<ttl>5</ttl>
<item>
<title> 強風迫使美國華盛頓州 16 萬戶斷電 </title>
<link>http://tw.news.yahoo.com/060205/4/2to0n.html</link>
<pubDate>Sun, 5 Feb 2006 02:00:00 GMT</pubDate>
</item>
</channel>
</rss>
showRSS
var nodes = rssDOM.evaluate("rss/channel/item");
從讀入的 rssDOM 這個 DOMDocument 物件中，萃取 rss ->
channel 下的所有 item 項目，然後存在 nodes 這個變數中。
newItem = new Array();
新製作的一個物件，每一則新聞都會對應到一個這樣的物件
newItem.title /newItem.link =
(nodes.item(i).getElementsByTagName("title/link")).item(0).fir
stChild.data;
從 RSS Feed 分析而來的新聞標題和新聞網頁連結。
newItem.pubDate = new
Date(Date.parse((nodes.item(i).getElementsByTagName("pu
bDate")).item(0).firstChild.data));
從 RSS Feed 分析而來的新聞發布時間。
心得
透過這次專題的實作，對 Widget 有更深入的了解，這次實
作我們發現由 Yahoo 官方所提供的 widget 作品都無法利用
Widget Converter 來拆卸並得知其內容，所以想要惡搞
都沒辦法 !

widget 還有一點有趣的地方，在 .kon 檔 widget 標籤下打上

<debug>on</debug> ，在執行該 widget 時，會出現 debug
視窗，会依實際操作顯示有錯誤的行數，對於 widget 開發
實在是相當便利。
參考資料

Yahoo! 奇摩 Widget Engine 3.1.1 版中文技術手冊

JavaScript 大全第四版

http://widgets.yahoo.com/

http://www.libertytimes.com.tw/rss/index.htm