網絡暴民 Jacky’s Blog

Mozilla 常有新點子。早些日子 (也真是相當早了…)，他們介紹了 Taskfox 的概念，想將一些經常做的動作化為語言般的指令，直接將 URL 欄當成指令輸入的地方。感覺上就好像將 Ubiquity 搬上 URL 欄，但玩過他們做的 Interactive Mockup ，感覺又有些不一樣。

在那個 Mockup 裏，可以搜索 google、wikipedia、youtube，介面都是蠻統一的。令我想到的是，我們是不是可以有一個統一的搜尋介面？仔細地看，搜尋這個動作有以下模式：1. 輸入搜尋字眼 2. 結果回傳 3. 瀏覽結果 4. 選取結果以作下一步 (通常是點擊)。在 Taskfox 的 Mockup 裏，輸入欄就是 URL 欄，而結果都顯示在小視窗裏，用戶可以通過方向鍵瀏覽結果，並可以作進一步行動，如即時預覽影片。

沒有研究過代碼，我想 Taskfox 是通過 Google Ajax Search API 來做搜尋的部份，然後將回傳的 JSON 再作處理。如果其他搜尋器也有相同 API 的話，則 Taskfox 可以成為一個通用搜尋介面，只消打幾個字就可以連到不同搜尋器，操作上也會很統一。

事實上「搜尋」這個動作也通常是某件工作的其中一小步而已。搜尋結果的「下一步」也其實有很多可能：看網頁、分享連結、轉寄影片、儲存到網絡筆記本等等。如果這個「下一步」是可擴展的話，則有更多的可能性。意念就如 Unix/Linux 的「|」 (pipe) 操作符號，可以將不同的指令連結，可提供很強的功能。

將瀏覽器的 URL 欄成變成指令欄並不是新鮮事，如 Yubnub 早已實驗，但始終比較原始，用法比較類以捷徑。如果能將緊密結合瀏覽器，統一搜尋介面 (用戶和程式) 和連接的「下一步」動作，可組合成更似 QuickSilver 的介面，變化無窮。

我很喜歡用 Aardvark 這個 Firefox Addon，除了用來查看 DOM struture 非常有用外，還經常會拿來刪除一些頁面的廣告、sidebar 等等，只留下想要的內容，無論是閱讀、列印、複製時都會非常有用。

經一段時間的使用，發覺自己有個習慣，就是在清理完畢時候，總會再微調一下文字大小、行高、寬度等等，所以就寫了個實驗性質的 bookmarklet，想做到像 Aardvark 某些功能，另外再加一條改變樣式的控制條。結果就是這個：

isolate

Bookmarklet 的名字我不知該怎叫，所以只是隨意叫我在 Aardvark 裏常用到的 isolate 功能。這個 bookmarklet 使用會模擬一小部份 Aardvark 的功能：Wider (擴大選區，w鍵)、Isolate (清除到只剩下選區，i 鍵)、Remove (清除，r 鍵)、Quit (離開，q 鍵)，Mouse click 可以鎖定選區，選區上方會出現可以控制樣式的條，再 Mouse Cilck 可消除鎖定區。

技術上這個 Bookmarklet 會先載入 jQuery 1.3.2，再插入選框和控制條，在 Mousemove 時會對「框」住目標，再可以使用控制條來設定目標樣式。這當中參考了不少 Aardvark 的碼。至於控制條是很簡陋的，因為沒有耐性做到很美… (可能用一個 CSS 輸入框會更適合…)。

出來的結果我自己也覺得有點吃力不討好，所以我懷疑自己還是會常用回 Aardvark。但無論如何，也寫一篇紀錄一下。

P.S. 不知道有沒有像 userscripts.org 這種但是給 bookmarklet 用的網站？

雖然我是主打 Twitter ，但有時也會到 Plurk 看看朋友們在討論甚麼。我通常是用 流動版 的，為了方便連同回應一起看，所以寫了這個 展開回應油猴 ，按 response 時不會跳頁，而是展開留言，也附有留言盒，可以即時回覆。

這個 script 有一個「自爆」開關，就是說可以設定成自動展開頁面上所有的 Plurk 留言。只要修改油猴 (右擊右下角的油猴 -> Manage User scripts -> 選 ‘Simulate Ajax comment in plurk mobile’ -> 點 ‘Edit’)。將在第七行左右的 AUTO_EXPAND 由 false 換成 true 就可以了。

又，我自己作了一些 CSS 改動，大家也可以自訂，修改 CUSTOM_CSS 這個 variable 就可以了。

因為我有記下日常生活費的習慣，所以會經常到地鐵網頁查車費。我昨晚再寫了一個 mtr-fare 的指令，用來調查港鐵站於站之間的車費表。再弄了個 首頁 來記下我的指令 (暫時就只有 mtr-fare 和 ydict 啦) 。

Ubiquity 的指令開發很簡單，因為可以使用 command-editor 作即時測試。要寫 Ubiquity 的指令，首先好好看這篇 Ubiquity 0.1 Author Tutorial 。

如果你想發佈指令，只要弄個簡單的 html，再用連結 <link rel="commands" href="xxx.js" /> 就可以了。要留意 js 檔暫時只接受 application/x-javascript 的 MIME type，所以要看需要在 Apache conf 或 .htaccess 加入設定 AddType application/x-javascript .js 。

在瀏覽器玩指令介面，首先從 URL bar 開始，Firefox 的書籤設定關鍵字:

然後可以用這個接駁 Yubnub :

再來就是 Awesome bar，自動搜尋歷史、書籤、標籤等等:

也有 Google 的 Command Line 版本 Goosh :

當然要說的，是最近熱話 Ubiquity ：

Ubiquity 的獨特的地方，在於其獨立介面，而不是使用 Url bar，而且可以提供更多的資料：自動提示指令、自動完成、搜尋結果預覽等等。而事實上這個獨立介面本身就是一個小型資料窗 ，讓你可以不用開新頁，不用跳來跳去來處理資料，還可以實行網絡 copy and paste。而這個窗口的功能，則有很大的自由度，可以由指令程式自由發揮，接駁不同的服務。

在這個基礎上，如果某某 Web Service 有公開的 API、又或者使用 Microformat 等標準格式，就更有利於人們寫指令。即使你的網站沒有這些，人們也可以用 Javascript (Ubiquity 本身就內附 jQuery) 來做 Ajax 和 DOM Manipulation，也不是難事。

上圖的 ydict 服務，是小弟試寫的一個字典指令，程式功能超簡單，不過因為 Yahoo 字典本身並沒有甚麼 API，所以都要花一些碼來拆解當中資料。

因為 Ubiquity 仍然是相當新的關係，所以還會有不少 bugs (例如清理 cache 時，會連 subscribe 了的指令清除…) 和改進空間，不過潛力無限！

P.S. 另一邊廂， IE8 Beta 2 推出了，也有類似的東西：

相關文章：

• 網絡 Copy and Paste
• 網絡指令