將網站轉成Gadget的心得分享 - Google

相信現在每個人都需要在網路上查尋資料
字典、捷運、網路拍賣、火車時刻表
但是每查一個東西都需要開一個網頁
穿越過一大堆廣告、不必要的文字或圖片
這時候如果有同樣功能的Gadget用就方便多了
在這裡分享一下我將一些查尋網站轉成gadget的一些程式設計上的心得
____________________________________________________

1.適不適合轉成gadget使用?

並不是所有的網站都適合轉成gadget，第一個考慮到的就是版面的問題
因為在iGoogle的用意就是將不同的工具濃縮放在一起
若是某些網站功能，像拍賣網、購物網這種需要很大的版面來顯示圖片
而又沒有辦法精簡，就算精簡了，使用者也用起來綁手綁腳

2.該網頁資料截取的難易度?

將網頁轉成gadget的目的必定是要將我們需要的資料從龐大的HTML中截取出來
然而最困難的步驟，就是在於你必須寫一個程式去讀取別人網頁的source code
若是該source code產生沒有規律性，亂七八糟，這時就要寫一大堆判斷去避開
不需要的資料

3.主要技術

(API部份請參照Gadget Javascript程式庫http://tinyurl.com/yownhp)

content type選擇:
Gadget的內容有三種類型 html 、 html-inline、URL
將網站放到gadget上最簡單的方法就是使用URL，但是這樣一來我們就沒有辦法把
source code抓出來精簡後再呈現，所以URL只適用於原本就設計成很小的網頁
而這篇文章的重點是要將大版面的網頁轉成小gadget，
因此建議content type使用 html 類型

設計步驟:
如果某些網站若沒有用到特殊的技術，只有簡單的HTML，不用cookie,session
例如 : yahoo字典、縮網址 等等 ，那麼處理起來都是大同小異
不外乎以下這幾個步驟
------------------------------------------------------------------
A.設計你的Gadget版面 -> B.抓取該原始網頁原始碼 -> C.截取需要的資料
-> D呈現版面
------------------------------------------------------------------

最困難的應該在於A和C的步驟

至於B步驟:
iGoogle提供的Javascript API中有個function 叫 _IG_FetchContent()
只需要將網站URL丟進去這個function 會幫你把原始碼抓出來

D步驟:
只需要在資料處理完時 用_gel()改掉HTML，show 出結果就好

舉例: yahoo字典
這裡舉一個yahoo字典的例子 當我輸入要查的單字 例如"test" 再按送出
會傳到這個網頁 http://tw.dictionary.yahoo.com/search?ei=UTF-8&p=test
而網址後的test即是我要查的單字 因此這裡可以設個變數去存使用者要查尋的
單字然後再把它和"http://tw.dictionary.yahoo.com/search?ei=UTF-8&p="
接起來之後再丟進IG_FetchContent()就可以得到查尋結果的source code了
抓到source code後就要做精簡 運用.indexOf() .substring() 取出需要的地方
整理好後再show出來

4.版權問題

小弟在發表這篇文章前想了很久，因為我不清楚這種直接用HTTP get、post截取對方
的web算不算侵權，還是像crawler、搜尋引擎一樣，憑良心看要不要遵守對方的
robot.txt，不過我想無論如何繼然是要用人家的東西，所以千萬還是要尊重一下版權
最少還是要註明一下所有權才是...

--

--