2006/04/08

[YWE] 為您的部落格量身打造專屬的 YWE Widget


朋友 tinna 的「沒什麼,就是跟著結子愛作夢」widget


朋友 Ivan 的「Ivanの詩人頻道」widget

雖然先前在下有跟各位介紹過 Yahoo! Widget Engine(以下簡稱 YWE)的 widget 製作方法,但可能寫的有點硬,且畢竟不是每個人都對 JavaScript 或 XML 熟,但的確很多人對 widget 的製作有興趣,所以再寫一篇比較簡單的介紹,希望大家都可以很容易地來製作 widget。

相信現在有很多網友都有自己的部落格,因此這次在下提供簡單的罐頭 JavaScript 檔與 .kon 檔案,您只需先準備好下列素材,便可製作出如上圖專屬於您部落格的 YWE widget:

  • 您的部落格 RSS 或 Atom Feed 的網址
  • Widget 的底圖設計圖檔(.png 圖形檔案)

有了上述素材,再配合可以製作圖形與編輯 .js 與 .kon 檔的工具軟體,然後再下載在下提供、可以使用於部落格系統所發佈的新聞剪輯 RSS 或 Atom Feed 的罐頭 JavaScript 與 .kon 檔並根據您的外觀設計與網址修改後,便可以製作出專屬的部落格 widget 哦!

上面的兩個 YWE widget 就是用這樣的罐頭樣板來作的,在下覺得已經算簡單了,不過還是得請您親自來檢驗

17 則留言:

Lug a Camera 提到...

您的YWE Widget很受用喔
雖然我還在摸索中
等理出個頭緒
再向您報告^^"

ammon 提到...

感謝您的的YWE Widget分享
非常好用ㄚ
粽算做出了自己第一個Widget
不知道可不可以問個問題
如果我站上有數個類別的分類
都讀再同一支XML裡
想做出有分類的Widget
應該用什麼方法做呢
可否提示一下...
感謝..

nk / a yuko fan 提到...

大概每行新聞就要多一個類別的欄位,不過改 JavaScript 是免不了的,每行都要在加入一個新的物件變數,如在 showRSS 裡加入:

newItem.category = (nodes.item(i).getElementsByTagName("category")).item(0).firstChild.data;

但上述只是把 RSS 的類別的資訊抽出來而已,再來還要顯示出來,這樣就要另外加一個 Text subview,如 catView = new Text(); 然後把位置屬性調一下(包括其他 subview),這個 catView 加到含有每行顯示資訊的主要 view(如 newItem.view.addSubview(catView);)。

如果真的要加這些東西,請參看在下之前比較詳細但比較硬的教材,您或許會有點概念。

ammon 提到...

感謝你的回覆歐!!
小弟雖然程式不強
不過會努力是試試的

還有另外一件事不知道能不能麻煩您
小弟有到YAHOO widget官網找了下
Widget Converter似乎已經不存在了
不知能否麻煩您mail一份給小弟
感激不盡,小弟的mail
edw0331@gmail.com

最後再次感謝您無私的分享與教學
相信許多人都跟我一樣受益良多

nk / a yuko fan 提到...

在下 Mac 版與 Win XP 版的 widget converter 都有留一份,按下列連結即可下載:
* Windows XP 版 Widget Converter
* Mac 版 Widget Converter
新的 YWE 3.1 版改變的 widget 的格式,要使用比較難用的命令列(Command-line)指令來轉換,等有時間再更新這個部份的教材。

nk / a yuko fan 提到...

抱歉,Mac 版的在這裡

ammon 提到...

狂賀...
哈哈..看到大大的文章再YAHOO Widger
的官方網站上出現拉
大大果然是Widget達人阿
期待大大更多的教學歐
在這裡先謝謝啦

nk / a yuko fan 提到...

謝謝各位的支持,才有機會登上 Yahoo! 的頁面!

翔 提到...

您好
第一次接觸widget這個東西
看到YAHOO文章裡面的達人教學
讓我不得不佩服你們的巧思
不過我想請問一下
關於這個NKTalk是否只能運用在RSS裡面?
如果是運用在一般的HTML呢?
例如有些網頁的公告或是更新所採用的是HTML的格式
這樣的話,這個widget就無法使用了呢!

nk / a yuko fan 提到...

您好,

如果在下提供的 JavaScript 程式不經修改,是無法應用在 RSS 之外格式的資料。但是如果您修改資料萃取的部份程式,那麼便可以處理其他格式的資料。
您說的 HTML,他只是一種格式,就像 RSS 屬於 XML 的一種,但是您無法利用沒有修改過的程式去期望它可以分析其他 XML 格式的資料,因為那段資料萃取程式是專為 RSS 這種格式的 XML 來製作的。

相同的,每個網站的 HTML 碼都不近相同,您希望萃取的資料是在 HTML 的哪段,是必須靠特製的、根據您網站 HTML 碼去製作的 JavaScript 程式去萃取出來您想要、認為有意義的資料並放的 widget 中來顯示出來,這段的程式碼是無法靠一個相同的程式碼來做,因為,每個網站資料置放還有您要萃取的資料都不同。

RSS 之所以可以通用,是因為它是一個公開、標準的 XML 格式。只要有符合相同格式的資料,倒是可以用同樣的程式碼來依樣畫葫蘆。

抱歉,解釋不週到,請見諒。但是結論是,如果您要分析一般 HTML 與法並萃取其中的資料,您必須要特別去製作那段程式。

翔 提到...

嗯~~謝謝您詳盡的解釋
我了解了!

sami 提到...

您好:
直接下載您的sample並執行MyRSS.kon(尚未更改任何內容),但只有顯示5筆資料。就算將var gFeedURL = "http://nktalk.blogspot.com/atom.xml"更改成其他rss(文章超過5筆),也總是顯示5筆資料,why ? thank's.
OS:win2000 server
yahoo widget:3.1.4

nk / a yuko fan 提到...

sami 兄,您能否將您改的 RSS Feed URL 給在下?因為這樣在下才能看看問題出在哪,謝謝!

sami 提到...

呵呵,解決了。
原來,LifeType 的 RSS 抓取的文章數,是依據「近期文章數目 *」的設定。

f814030 提到...
作者已經移除這則留言。
f814030 提到...

小弟有個不情之請…想請教大大…小弟從yahoo的說明文件中得知,[ author] 是用來說明作者,但是小弟這樣子使用「author」Andy & Spencer「/author」
似乎沒有作用耶…是否小弟指令下法下錯呢?還是放的位置有關呢?

小弟是放在開頭「widget」的下方。

懇請大大不吝賜教!謝謝

ps.因為使用<>會無法送出文章…所以小弟才用「」^^"

nk / a yuko fan 提到...

在下記得有一個 Windows 版本的 YWE 如果你放在桌面上,那些 .kon 檔的 widget name 還有 author 會變成怪怪的(中文),但看來你的也不是這問題。看起來是 "Andy & Spencer" 中這個 "&" 搞鬼,您要不要改成 "Andy &amp; Spencer" 看看?

在下剛剛查了 YWE 的開發文件,其中 & 這個符號要特別改成 &amp; 詳細情參看文件的第 5 頁有提到喔,您試試看。