答應過板主,所以特別製作了一個 mobile01 專屬的 Dashboard Widget,含有以下功能:
  • 觀看討論區最新新進的 100 篇文章
  • 觀看最新 10 則網站新聞
  • 觀看最新 10 篇精選文章
  • 搜尋所有討論區
  • 背面設定包括搜尋的範圍、文章時間,還有指定搜尋討論區

有興趣的網友可以到在下的 Blog 下載,希望大家用的開心!

版主:我幫nk轉貼一下文章

這是安裝後在 Dashboard 裡的圖像:


當您將 mobile01 widget 加入後會出現一個合起來的視窗:


如果在“請輸入關鍵字”的欄位中鍵入您要搜尋的關鍵字並按下符 Return (Enter),或者在“新進文章”、“本站新聞”、“精選文章”標籤上按一下,視窗就會展開並顯示相對應的內容。


如按下“新進文章”,就會顯示最新發表的 100 篇文章:


如按下“本站新聞”,則顯示最新的 10 則新聞:


如按下“精選文章”,則顯示最新的 10 篇精選文章:


如按下“搜尋結果”標籤或在欄位中輸入關鍵字按 Return,則會搜尋討論區中含有指定關鍵字的文章:


而當您在上述的標籤按一下時,如尚未載入內容,則會載入內容並顯示出來;如果已經載入內容,就會切換到該對應的內容。如按兩下時,就會自動更新其相對應的內容。

如果您對於搜尋結果不是很滿意,您可以按下右下角的小 i 圖像到背面去做進階設定。目前預設的搜尋選項為搜尋所有討論區中,不限定日期、標題含有關鍵字的文章。

以下是背面的搜尋進階選項:


您可以指定只搜尋某個特定討論區,還有文章的日期,例如最近 1、2 或 3 個月或一年內的文章,還有搜尋範圍是否包括內文等。

以上便是 mobile01 widget 0.1a1 版的詳細資訊,希望大家用得開心!

設計與技術後記

當初設計時的想法就是希望這個 widget 要有跟 mobile01 網站有整體感、一致的感覺,所以特別在界面上用了類似的色調,並遵循 Apple Dashboard 的使用者界面準則。為何用單一色調?這是因為 Apple 的文件上有特別標明,且他的準則也是有道理的,這樣才不會像一些程式看起來花花綠綠的,反而降低其辨識度。

我想 mobile01 版主與站長也是使用單一色調(綠),所以跟 mobile01 的界面設計之間差別不大。這個 widget 也是我第一次使用 JavaScript 來實作 tab 標籤設計,也算學到了一些東西。

JavaScript 技術上來說,這個 widget 我比較傷腦筋的是 mobile01 都是 session-based,許多地方都一定要有 session ID,像要使用搜尋功能,就得要有 session ID。根據我研究的結果,由於 mobile01 使用 PHP,預設的 session ID 傳遞方式是使用 cookie。但是 Apple WebKit 基於安全因素,除非使用者在 Safari 下將 Cookie 設為“永遠接受”,要不然用 cookie 傳遞都會失敗(在 Dashboard 環境下)。為了突破這樣的限制,我想到 PHP 另一種 session ID 的傳遞方式是用 PHPSESSID 這個 GET 變數來傳遞,所以就造了個假的 Session ID 然後 attach 在每個搜尋的 request 之後,例如 http://www.mobile01.com/search.php?PHPSESSID=32790dd89y349 之類的。這樣就可以不犧牲 WebKit 的安全限制,且可以達成在使用者不設定“Cookie 永遠接受”的情況下 widget 的搜尋功能仍然可以使用的目的了。


都是本來這個 widget 大概一週前就可以發表,不過由於上述問題讓我多花了一些時間,但也學到一些技巧,在此分享給往後有興趣製作 Dashboard widget 的朋友們。

我希望往後製作 widget 的同好越來越多,也希望可以與大家互相切磋。只要您具備 JavaScript、HTML、CSS 等知識,要寫個 widget 並不是難事,重點在於要不要跨出這步、還有想像力、是不是想把東西做出來的決心而已,Apple Dashboard 還有 Konfabulator 技術的確提供一個很棒的環境給寫網頁的人也可以寫出好玩實用的 desktop client,希望有更多人可以投入 widget 的製作。

版主:以下都是NK發表的widget文章

(1)電子地圖搜尋系統

(2)Yahoo拍賣搜尋

(3)NK 譯丸中日翻譯 Widget 1.0a1