0334期：實戰 Yahoo Pipes 應用(以 PChome 個人電子報與 iTry 討論區為例)
作者：CGS • 日期：2009/12/23 • 類別: 程式漫談 ;•
;•
Yahoo Pipes 其實早在 2007 年 2 月就發表了，不過一直沒去試過他的功能，經過幾年的發展，原本類似的競爭工具 Google Mashup Editor、Microsoft popfly都已經停止服務[Google 建議改用用 Google App Engine(應用服務引擎)]。
網路上最常看到的應用是利用 Yahoo Pipes 抓取不同的 RSS來源，然後把他依一定的條件式過濾及排序後，送出一個處理後合併的 RSS，這種功能很多聯播的 RSS 工具都做得到，就簡單做個範例，我們可以合併氣象局所有的36小時天氣預報 RSS成為一個全台灣36小時的天氣預報(我做的範例在 http://pipes.yahoo.com/cgspipes/mycwb )，RSS 的短網址是 http://ppt.cc/PT~S。
不過 Yahoo Pipes 的威力並不僅止於此，由於他在網頁上直接設定程式流程，線上除錯，並看到輸出的結果，我們可以幫一些原本沒有 RSS 功能的網頁加上 RSS 的功能，就舉我自己的 PChome 個人電子報為例好了，PCHome 電子報的服務並沒有提供 RSS。我們可以利用 Yahoo Pipes 的網頁存取和處理能力來建立一個簡單的標題和超連結的RSS。（我做的功能有點像 feedity，只是 feedity 主要是自己判斷，詳細的客製化需要付費)
http://pipes.yahoo.com/cgspipes/epaper 是我建的 PCHome 個人電子報通用的 RSS ，我們可以分成幾個部份來看這個網頁解譯的流程。
先以右方的 URL Input元件要求使用者輸入一個網址 URLContent，目前的預設是 http://mychannel.pchome.com.tw/channels/p/d/pd/content.htm ，將 URL 轉給左邊的 Fetch Page 元件，就會自動抓下我們要求的部份，並用 "Cut Content from:" 設定的頭尾字串來切下需要的部份，"Split using delimeter"，則是不同則新聞如何被斷開，抓下來的資料會自動送到 item.content。
我們再以 Filter 元件過濾掉頭尾不屬於我們需要的部份，(我設定的條件是內文包含 javascript)，因為 Content 還是太長，寫比對的字串正則式(regex)蠻累人的，再使用一次 Loop 把 item.content 切成更多的 item.token。
看一下 item.token 的內容，把第二則的內容複製成為超連結 ，第三則複製成為標題，第五則則預備做成出版時間，第七則是作者，接下來則是以字串正則式把每一行的內容過濾出來。最後再把時間轉換成為 "YYYY/MM/DD HH:MI GMT+8" 的形式
我原本以為RSS的時間設定對 Yahoo Pipes 來說很簡單，不過取出年月日後發覺 YYYY/MM/DD 或 YYYY-MM-DD ，如果直接用 Loop 元件讓 Date Builder 去解，反而解不出來，這個地方我卡住很久，想了不同的方法來解，原本準備發表的部份就把日期時間的部份略過，不過最後還是找到其他的解法。
最後看了別人的程式流程，複製了另一個 "Data Formatter" 的處理流程。放在"For Each Annotate"元件裡面，就可以產出另一個 feeddate的輸出，然夠再用 Rename 元件把解出來的 pubDate 跟 y:published 更名即可。
看一下輸出就可以看到每一則電子報的標題和超連結被自動解出來，如果需要全文或部份輸出內文，可以再設定用 Loop 搭配 Fetch Page 去抓取資料。這個就交給有興趣的讀者自己去做。
設定好通用的 RSS 解譯，我們可以用不同的 PChome 個人電子報來試看看抓取的內容是否正常。http://pipes.yahoo.com/cgspipes/pdepaper 和 http://pipes.yahoo.com/cgspipes/iiepaper 直接將通用的 PCHome 個人電子報置入後，設定網址，系統就會把適當的標題送出。
http://pipes.yahoo.com/cgspipes/itry 是另一個範例，實作的方法跟 PCHome 個人電子報很像，原本 itry 網站有 RSS，只是似乎故障了，網頁上的顯示的日期時間是中文的月份和星期，時間又從12小時制轉換成 24小時制，由於是用 regex 不斷的置換做出來的，所以看起來右方有一個很大的區塊放了很長的置換條件。
藉著 Yahoo Pipes，我們可以幫網站增加 RSS 的功能，或許因為 Yahoo Pipes 能做出來的功能不少，有些網站也擋下了 Yahoo Pipes不能存取，做了這些簡單的範例，希望能拋磚引玉，有興趣的讀者可以參考一下這些視覺化的程式碼，看起來就像我們畫了一張簡單的程式流程圖來處理這些資料。
網路上最常看到的應用是利用 Yahoo Pipes 抓取不同的 RSS來源，然後把他依一定的條件式過濾及排序後，送出一個處理後合併的 RSS，這種功能很多聯播的 RSS 工具都做得到，就簡單做個範例，我們可以合併氣象局所有的36小時天氣預報 RSS成為一個全台灣36小時的天氣預報(我做的範例在 http://pipes.yahoo.com/cgspipes/mycwb )，RSS 的短網址是 http://ppt.cc/PT~S。
不過 Yahoo Pipes 的威力並不僅止於此，由於他在網頁上直接設定程式流程，線上除錯，並看到輸出的結果，我們可以幫一些原本沒有 RSS 功能的網頁加上 RSS 的功能，就舉我自己的 PChome 個人電子報為例好了，PCHome 電子報的服務並沒有提供 RSS。我們可以利用 Yahoo Pipes 的網頁存取和處理能力來建立一個簡單的標題和超連結的RSS。（我做的功能有點像 feedity，只是 feedity 主要是自己判斷，詳細的客製化需要付費)
http://pipes.yahoo.com/cgspipes/epaper 是我建的 PCHome 個人電子報通用的 RSS ，我們可以分成幾個部份來看這個網頁解譯的流程。
先以右方的 URL Input元件要求使用者輸入一個網址 URLContent，目前的預設是 http://mychannel.pchome.com.tw/channels/p/d/pd/content.htm ，將 URL 轉給左邊的 Fetch Page 元件，就會自動抓下我們要求的部份，並用 "Cut Content from:" 設定的頭尾字串來切下需要的部份，"Split using delimeter"，則是不同則新聞如何被斷開，抓下來的資料會自動送到 item.content。
我們再以 Filter 元件過濾掉頭尾不屬於我們需要的部份，(我設定的條件是內文包含 javascript)，因為 Content 還是太長，寫比對的字串正則式(regex)蠻累人的，再使用一次 Loop 把 item.content 切成更多的 item.token。
看一下 item.token 的內容，把第二則的內容複製成為超連結 ，第三則複製成為標題，第五則則預備做成出版時間，第七則是作者，接下來則是以字串正則式把每一行的內容過濾出來。最後再把時間轉換成為 "YYYY/MM/DD HH:MI GMT+8" 的形式
我原本以為RSS的時間設定對 Yahoo Pipes 來說很簡單，不過取出年月日後發覺 YYYY/MM/DD 或 YYYY-MM-DD ，如果直接用 Loop 元件讓 Date Builder 去解，反而解不出來，這個地方我卡住很久，想了不同的方法來解，原本準備發表的部份就把日期時間的部份略過，不過最後還是找到其他的解法。
最後看了別人的程式流程，複製了另一個 "Data Formatter" 的處理流程。放在"For Each Annotate"元件裡面，就可以產出另一個 feeddate的輸出，然夠再用 Rename 元件把解出來的 pubDate 跟 y:published 更名即可。
看一下輸出就可以看到每一則電子報的標題和超連結被自動解出來，如果需要全文或部份輸出內文，可以再設定用 Loop 搭配 Fetch Page 去抓取資料。這個就交給有興趣的讀者自己去做。
設定好通用的 RSS 解譯，我們可以用不同的 PChome 個人電子報來試看看抓取的內容是否正常。http://pipes.yahoo.com/cgspipes/pdepaper 和 http://pipes.yahoo.com/cgspipes/iiepaper 直接將通用的 PCHome 個人電子報置入後，設定網址，系統就會把適當的標題送出。
http://pipes.yahoo.com/cgspipes/itry 是另一個範例，實作的方法跟 PCHome 個人電子報很像，原本 itry 網站有 RSS，只是似乎故障了，網頁上的顯示的日期時間是中文的月份和星期，時間又從12小時制轉換成 24小時制，由於是用 regex 不斷的置換做出來的，所以看起來右方有一個很大的區塊放了很長的置換條件。
藉著 Yahoo Pipes，我們可以幫網站增加 RSS 的功能，或許因為 Yahoo Pipes 能做出來的功能不少，有些網站也擋下了 Yahoo Pipes不能存取，做了這些簡單的範例，希望能拋磚引玉，有興趣的讀者可以參考一下這些視覺化的程式碼，看起來就像我們畫了一張簡單的程式流程圖來處理這些資料。
