Web上的萬能瑞士刀: Chickenfoot

Monday, July 6th, 2009 | 瀏覽:68,440人次

喜歡用UNIX的人大都知道UNIX會是一個天然且高效率的工作平台不是沒有原因的,純文字的程式輸出入、輕巧又強大的shell、還有適合各種場合的script語言(像是Perl、Python等等)可以把許多小程式非常快速的結合起來完成許多複雜的工作。

但自從web開始蓬勃發展後,越來越多程式和系統開始移到web上。在剛開始的web 1.0時代,大部分網頁都是提供資料的靜態網頁,當時web app也都是用簡單的GET、POST參數接收資料後再到server side做處理。因為網頁是純文字的HTML寫的,所以在這個時代還有一些人會用scripting語言(像是Perl + WWW::Mechanize)來做網頁的自動化處理。但寫過這種程式的人都知道,要parse HTML並不是很容易的事,因為大部分HTML都沒照標準寫,於是只能用regular expression硬來,但無論如何都沒辦法應付一個最大的問題:只要人家的網頁一更新,script當場就變殘廢…。

到了web 2.0時代,問題變得更嚴重,因為web app不再是單純的server side程式;許多網站大量依賴在browser裡面執行的javascript,只是抓網頁回來而不執行javascript往往無法得到browser裡看到的網頁內容。

所幸我來MIT後發現我們group開發的一個超棒工具Chickenfoot,不但讓使用者能用很簡單的指令做到網頁自動化,它甚至還像是一個架在browser上的萬能shell scripting平台,可以輕易把不同網站的內容和功能連結在一起(就像UNIX shell的pipe一樣!)。

Chickenfoot是一個Firefox的extension,可以讓人在Firefox上寫script全自動操作網頁或是修改網頁的內容。Chickenfoot乍看之下很像另一個能讓人在client端另外插入javascript的Greasemonkey,但實際上Chickenfoot更像一個外掛在browser上的快速scripting平台。

Greasemonkey的目標使用者是會寫Javascript程式的網頁開發者,也因此它的進入門檻很高,如果是不會看HTML原始碼、不了解DOM或XPATH、不會寫Javascript的一般人是沒辦法用的。另外, Greasemonkey主要的功能偏重在單一網頁的客制化上,沒有針對網頁自動化做的設計,也很難做跨網頁的自動化操作。

相反地,Chickenfoot的設計是截然不同的方向:1. 使用者不需要看HTML原始碼,只要看網頁的畫面就能用關鍵字來鎖定畫面上的元件,並用簡單的指令(例如自動按按鈕的click、自動輸入文字的enter、自動選擇checkbox的check..等等)自動操作網頁;2. Chickenfoot是獨立於任何網頁之外的平台,可以輕易做到跨網頁的自動化操作,甚至可以從網頁中提取想要的資料,並帶到其他網頁中使用。3. Chickenfoot是browser的一部分,所以只要在browser中能看到的頁面就能自動操作,不用處理認證或cookie問題。

除了網頁的自動化和客製化外,Chickenfoot還有個很有趣的功能:可以把任何Chickenfoot script包裝成獨立的Firefox extension。也就是說,如果要把script分享給他人不需要請其他人事先安裝Chickenfoot,而是直接把「你的」extension給別人安裝就可以了。

我不打算寫詳細的tutorial,我建議可以從實例來學習,例如Google Icon Search就是一個很好的例子,包含了網頁內容的修改、跨網頁的自動化、還有基本命令的使用。最近釋出的Chickenfoot 1.0.5已經支援Firefox 3.5,並且也修正了中文網頁的支援問題,在中文網頁上也能正確執行。

另外附帶一提,我覺得Chickenfoot中有個很好用的小技巧,但在文件上其實不太容易找到XD 在Chickenfoot的script editor中寫script時,每寫一行就可以按ctrl-enter來執行「一行」指令。用這種方式就可以很容易一邊寫script,一邊測試並觀看每一行指令的結果,而不用一次寫一大堆後再一起測試。

有興趣更深入了解Chickenfoot的人可以參考官方網站上的Quick Start GuideExamples,或是直接看看paper: Michael Bolin, Matthew Webber, Philip Rha, Tom Wilson, and Robert C. Miller. “Automation and Customization of Rendered Web Pages”

更豐富的WEB預覽 – Apture

Saturday, May 10th, 2008 | 瀏覽:11,200人次

目前的網路發表平台越做越簡單,人人都能輕易的在自己的blog上發表文章,或是利用視覺化的工具製作網頁。但我一直覺得這些工具雖然都很簡單易用了,可是對於製作出來的網頁/文章品質並沒有任何幫助。例如,當我在文章中提到了Yukihiro Matsumoto,因為讀者很可能不知道他是誰,認真又勤勞的作者就會再利用Google或wikipedia找一個關於這個人的連結放上來。

可是,人都是很懶的。

我們在發表文章或做網頁時其實很難把所有資訊都加上一個輔助說明的連結。我一直覺得作者在發表時如果提到地名,就應該能輕易的加上Google maps的預覽窗;如果提到某一事件,就能輕易加上新聞報導和相關照片的預覽;如果提到某一個人,就能加上他的照片和背景說明..。最理想的情境是,以上都是自動的,作者只管寫文章,這些輔助資訊都能藉由在背景偷偷分析文章的程式來完成。

Apture提供的服務就非常類似上面的想法,但他們是提供一個網頁上的外掛編輯程式,讓作者甚至任何人都能直接編輯網頁,並加上額外的輔助說明預覽窗,內容可以包括照片、youtube影片、wikipedia說明等等..。這裡這裡是Apture提供的demo,連進去後把滑鼠移到有小圖示的連結上就能知道是怎麼回事了。

我在我的blog上也加上了Apture服務,像是早上寫的程式語言受歡迎程度與其發明者鬍子密度的關係就用了Apture加進每個相關人物的照片。Apture提供的編輯器還蠻好用的,只要在網頁上把字選起來,Apture就會自動搜尋相關的media,編者只要從裡面點選就能直接加上一個預覽連結。

Apture把這個服務做成一個獨立平台有一個很大的好處是可以讓許多人編輯同一個網頁,在社群的力量下就能快速的讓一個網頁內容加上更多相關的說明資訊。但相反的,這也帶來一個致命缺點:一定要直接連進該網頁,才能看到Apture所加上去的說明連結。因為Apture是透過附加在網站上的一段javascript程式碼在文章上動手腳的,這些Apture連結並不會真正存到放置網頁的主機上,而是統一存在Apture自家的伺服器裡。所以像我的blog雖然加上了Apture,但從RSS feed裡是看不到那些預覽連結的,一定得直接用瀏覽器連上blog才看得到。(這問題並不難解決, 對於blog來說,只要利用blog後端平台提供的API就能把這些連結存進blog主機中。只是看Apture的工程師有沒有想做而已。)

目前Apture對於中文的處理還有個小bug,每次都會漏掉選取範圍的最後一個中文字,英文就不會這樣。還好這不是很嚴重,選取時多選一個字就是了。

Apture的點子真是很不賴,我可以預見這個服務很快就會在各大網站和blog流行起來.. :-D

Adobe Apollo alpha released

Tuesday, March 20th, 2007 | 瀏覽:7,575人次

Adobe Apollo已經開放alpha版的SDK和runtime平台可以下載了。Apollo是我還蠻看好的一個新平台。最特別的地方是他讓習慣開發Web application的人,能用熟悉的方式,也就是HTML, CSS, Javascript, Flash, Flex來開發Desktop application。

其實相反的事情,也就是用Desktop app的開發方法來做Web app,Microsoft已經做很久了。只是MS把東西都綁在自己的系統下,實在一點都不想讓人去嘗試。
Apollo會支援Windows, MacOSX, Linux,而且SDK和runtime也全都是免費的,更棒的是底層的HTML Engine是用open source的Webkit(就是Safari用的那個)。加上現在Adobe把Flash/Flex的技術也吃進去了,Apollo的未來真是一面看好。
至於實際上會如何,就一起走著瞧吧XD

人體搜尋引擎 Ms. Dewey

Tuesday, October 24th, 2006 | 瀏覽:6,256人次

Ms. Dewey Ms. Dewey是一個很有意思的搜尋引擎, 它不像傳統的搜尋引擎, 一進去只有一個冰冷的文字輸入框,而是一位正在翻動手中雜誌的美女。這很像The Time Machine中出現的未來資料庫,會跟人對談、互動,也就是一個活生生的人體搜尋引擎。

Ms. Dewey目前雖然還只是用文字來呈現搜尋結果,但用這種方式來設計網站的介面還真是很有創意 :-D

我也不喜歡自動撥放~

Tuesday, October 17th, 2006 | 瀏覽:5,553人次

Ericsk做了一個不錯的貼紙: (詳情請看http://ericsk.csie.org/archives/357, http://ericsk.csie.org/archives/360兩篇文章)

在網頁裡放會自動撥放的音樂真的很惱人,尤其在我開始用Mac後,這種情況變得快讓我抓狂了。
我平常都用Mac下的Safari看網頁,而Safari碰到內嵌的音樂時,竟然會啟動Quicktime player來撥他。
沒錯,是獨立的程式,Quicktime,不是嵌在Safari裡面的。獨立的程式意味著視窗的focus跑掉了,所以我還得自己動手切回來。更慘的是,要是那網址有問題,就會一直看到quicktime跳出”URL無效”的最上層警告視窗。如果覺得還不夠糟,那我可以告訴你,會放自動撥放音樂的人都是把音樂放在每個頁面都會有的header/footer/sidebar裡面,也就是說我每點到一個新頁面,就要再關掉一次該死的”URL無效”視窗………..。

因為常碰到這種鳥事,所以大部份有放背景音樂的blog或網站,大都被我看一眼就被打入冷宮了。很有趣的是,這些站幾乎都是放在那個有名大站。(難道有名大站有特別方便的機制鼓勵使用者放背景音樂嗎?!)

所以啦,請大家告訴大家,一起支持這個運動吧! 我不要看會自動放音樂的網站~

Google Calendar!

Thursday, April 13th, 2006 | 瀏覽:6,485人次

Google Calendar終於出現了!

等了好久的東西,剛稍微試用一下還蠻不錯的:-D

以下是幾個我覺得不錯的重點功能整理:

  1. search calendar(還不能找中文…:()
  2. calendar sharing
  3. 每個人可以有很多不同的calendar, 包括別人share的, holiday, public calendar
  4. iCal, CSV(Outlook)格式的calendar匯入

目前用起來除了不能search中文而且不支援Safari外,還沒有發現什麼大缺點。基本上還蠻好用的,完全像是Apple iCal的web版 :-D

邪惡的XSS

Friday, January 6th, 2006 | 瀏覽:6,671人次

JavaScript真是太邪惡了…
等期末考完在來好好玩玩:p