2011年11月4日 星期五

當興趣結合興趣:TouchLimit 幕後祕辛

TouchLimit 是我這一個月來費盡心思做出來的網站,是一個非官方的 jubeat 成績單與排行系統。以下將試著很簡單地跟大家介紹作這個網站的點點滴滴。


節奏遊戲 vs 網站開發

同時身為節奏遊戲玩家和網頁程式開發者的我,一直都很想在奇怪(?)的地方稍微發揮一下專長,例如撰寫一個去抓 jubeat 遊戲成績單的系統。因此在二代時開發了基於 Google App Engine 的紅譜平均排行榜。

而到了學習 Rails 之後,一直都想用 Ruby on Rails 去重寫一個新的成績單,也很早以前就根據「觸碰」和「刷新自己的最高分」決定了「TouchLimit」這個網站的名字,但當時的時間和實力都不夠,因此一直沒有去作。

直到我當兵下部隊期間,jubeat 四代稼動,需要一個新的台灣紅譜平均排行系統,而我學習 Rails 一年後開始熟悉了,想趁機學習一些 NoSQL 的技巧,因此決定利用雙十節的連假把這個東西寫出來。(當然,Jobs 那時的突然逝世也有可能是我想寫這個的一大動機。)

實作的歷程

在雙十節連假期間,我跟 GoDaddy 買了 touchlim.it 這個網域名稱(非歐盟國家公民買義大利網址貴一倍,但還是心痛給他刷下去了 ||||)。而空間當初本來想放在 heroku 上,但考慮 heroku 的 Worker 費用實在太貴,所以最後放棄,而 WM 剛好也想要買一個 VPS 當玩具,因此 WM 就很阿殺力地幫我刷了一台 Linode 東京機房的 VPS 來放這個網站。

網站架構上使用 Rails 3.1 作為網站框架,資料庫方面分別使用 MongoDB (搭配 mongoid)和 Redis(搭配 redis-objects),前者用於存放主要資料,後者用於 Resque 和紅譜平均排行。為了學習這兩套 NoSQL 系統花了很多時間,而 Rails 3.1 新的 Assets 機制也讓我遇到了一些麻煩,因此在雙十節收假時這個網站其實是完全沒有什麼東西可以發出來的 XDDDDD

整個網站最重要的部份向遊戲官方網站要成績的成績更新程式, 一方面要把 HTML 作解析,這方面 nokogiri 真的幫了超級超級大的忙(還會自動幫忙看編碼,很棒!雖然還是有被 Mac 和 Ubuntu 對 shift-jis 轉換不同的小問題陰到),讓我可以用很快的時間把功能實現出來,將大部分的時間都花在檢查系統的錯誤並修正上。

魔鬼藏在細節裡


而在網站排版上,在我剛決定要開始做的時候,魏藥就跳出來說想幫忙寫 CSS,於是我就把 CSS 的樣式和排版都交給他負責。整體網站的版型上使用了 Bootstrap,節省下了非常多的時間。而配合上 SASS 與 Compass 作了很多很多非常酷炫的樣式。你有注意到更新歷史裡的箭頭是全 CSS 的嗎?這都是多虧魏藥的功勞 XDDD 除此以外,有很多小細節上的東西也都是我跟他討論之下跑出來的,例如成績更新到滿分 EXCELLENT 的時候成績上會閃金色:

網站插圖的部分則是我去拉 KIKA 來幫忙,而他也正在幫忙處理包含首頁圖與 favicon 等等的小細項,請大家慢慢期待囉 :)

「放假再修!」

在經過了兩個星期的努力之後,10/23 這套系統正式開放給大家測試。為了讓系統可以運作更順暢,我使用了很方便的 Resque 作排程管理。後來發現 Resque 的管理機制實在太棒了,錯誤記錄也非常完善,就算有好幾天的時間不在電腦前面,一旦放假打開管理頁面,運行出了什麼問題馬上一目了然,可以立即進行修正。而且還可以加掛排程和自動重試等機能,在原始網站不穩定的情況下這些功能實在是太棒了!而隨後下一個挑戰就是提供定期自動更新,希望能夠趕快做出來。

祕辛和小提示 
  • 為什麼叫 TouchLimit "Fengyuan"?這個代號指的是「豐原」,台灣中部的一個城市。其中一個原因是我這幾個月三分之二的時間都得待在豐原,另一個原因是他跟「Copious」的「豐富」有異曲同工之妙。
  • 要不被收錄進這個排行榜或系統裡,但還是公開你的成績?很簡單:請隱藏你的最終遊玩資訊,TouchLimit 就不會收錄你的成績。由於目前沒辦法作個人身分確認,因此加入成績單視同加入排行榜裡,這點也請各位玩家見諒囉。

2011年9月24日 星期六

Why jQuery is so Magical?

昨天在跟某位 Web Developer 聊天時提到 jQuery,我於是隨口把 jQuery「到底為什麼會這麼神奇」用最簡單的方法講完。事後講講整理得很有道理,於是我打下來吧:

jQuery 背後的故事 or 為什麼需要 jQuery
  1.  jQuery 操作文件內容的根基是瀏覽器的 DOM(Document Object Model)功能。這個功能可以追溯到早期的 Netscape 和 IE,從所謂的 DHTML 一路變成今天的 DOM。
    DOM 做的事情就是「把 HTML 文件用樹狀的方式操作」,因此可以動態變化網頁內容。

    但使用 DOM 操作文件,會有程式碼冗長且有瀏覽器相容的問題(尤其是 IE)。
  2. jQuery 操作 AJAX 用的是 XMLHttpRequest,這是 IE 開始推廣的神奇技術,現在已經廣泛內建在各種瀏覽器裡。但也是有瀏覽器實現相關的問題 Orz 
jQuery 做了哪些魔法
DOM 上:
  1. 解決了絕大部分瀏覽器在 DOM 操作/事件處理下的 Bug
  2. 寫了一個神奇的 Selector 解析器叫 Sizzle,可以把大部分的 CSS Selector 轉譯成對應的 DOM Tree 元素
  3. 以 jQuery Object 把對應的 DOM Tree 包裝起來,所以可以進行 Chaining
  4. 以神妙的方式對事件處理做了很大的擴充(bind() 和 live())
  5. 可以用神妙的 .data() 在一個 DOM Tree 中加註資訊
AJAX 上:寫了神妙的 AJAX 函式,還一併處理了 JSONP 方面的問題


就這樣吧,應該有地方有錯,歡迎大家指責 XD

2011年8月21日 星期日

COSCUP 2011 非會議投影片

今年最後只倉促報了 13 分鐘的非會議,所以也就作了一個非常簡單的投影片:


跟大家簡單分享了一下 NicoFox 的 UI 改進心得和血淚 (?),在當兵沒梗的時候希望還是能帶給大家歡樂。 :)

2011年7月11日 星期一

NicoFox 0.8 釋出

當兵放懇親假出來,所以趕快把 0.8 正式版發出來了~
這次的新版是針對 0.7 既有的問題所做的介面、翻譯和下載功能更新。
相容於 Firefox 3.6~7.0a2(Release、Beta、Aurora都可以用)

目前已經送到 AMO 站上 送交審核,大概過一兩個星期之後應該就會有結果,通過之後,Firefox 4 以上的使用者將會被自動升級到 0.8(您可以在附加元件管理員中關閉自動更新)。如果您已經等不及,可以先安裝釋出的 XPI 檔案

此版本的改進:

  • 翻譯全部翻完了,也潤飾了很多小地方 :)
  • 新 UI 的全面性改善:更快的介面開啟速度、下載進度與影片資訊顯示、縮圖可調顯示大小......還有許許多多說不完的小幅度更新與修正。
  • NicoFox Player 支援 16:9 與 4:3 的畫面切換,同時修正了在 Firefox 6 (目前 Beta) 以上版本 Player 沒有畫面的問題。
  • 修正了 Flashblock 的衝突問題,在 Flash 未啟用下也能讀取影片資訊。就算影片資料無法讀取,也依舊提供下載按鈕。
  • 全面改寫了縮圖補載機制,快把你的影片縮圖補齊吧 ^o^/ 現在只要縮圖下載是打開的就會檢查有沒有縮圖沒載到,按一下連結就一次 OK

  • 自動登入回來了!同時增加了對網站連線錯誤與 NICO 防洪機制的偵測。
  • 在遇到網站相關問題時所有下載項目都會暫停,不再會噴一排失敗了 Q____Q
  • 同時因為有了暫停,未下載的下載項目將在瀏覽器關閉重開時自動恢復下載喔 :)
  • 下載相關修正:修正了非日本版下 SWF 影片(影片代號為 nm 開頭者)下載的問題,社區評論載不下來、以及特殊評論號碼無法判斷的問題,還有低畫質模式預約系統無法在時段解除時自動下載的問題。
已知的問題
  • NicoFox Player 暫不支援投稿者評論。
  • 如果使用 Multifox,將無法使用 NicoFox 的下載功能。
  • 因為缺乏本機檔案處理機制,如果從下載管理中刪掉東西就無法再復原回去。也因此如果移動影片路徑 NicoFox 就會整個找不到影片,以後會設法解決。
  • 新 UI 還是比舊 UI 慢和不方便一點點。NicoFox:「怎麼可以這樣!」「報告班長,新兵會在結訓假趕快寫出固定在側邊欄的功能的!」
    縮圖補載「還是」有可能會有失敗情形(目前只會自動重試一遍)請多點幾下那個連結就好了 =3=
我下次放假是新訓結訓假,在七月底八月初, 大家屆時見囉~

    2011年6月17日 星期五

    NicoFox 0.8 之中途報告

    好多東西要改...... orz(氣餒ing)

    真的還沒有整理到可以出新版的地步,但還是跟大家講一下目前為止已經改完了哪些東西。

    新介面的改善


    0.7 時新介面的縮圖很佔空間、顯示的資訊又不多。0.8 版中,下載中的影片會顯示下載進度,下載好的影片會顯示檔案大小、評論類型和下載時間。舊 UI 裡的所有資訊可以說是都放在新 UI 了 ^o^/。

    縮圖大小也提供大、中、小、不顯示四種選擇,而且把預設的大小調整為略小於 0.7 版的「中」。

    另外,在載入速度方面也做了一定程度的調整,希望能讓大家滿意。

    * 新舊介面的切換和置放到側邊欄很有可能會趕不上 0.8,0.8 重點會放在新 UI 的修正上。因為我只剩12天就要被抓去當兵了,請各位見諒 |||

     NicoFox Player 小升級


    NICO 官方新版的 Player 在 2010 年 7 月(好久以前喔 ||||) 時進行了改版,加上了 16:9 影音的支援。NicoFox Player 在最近也做了對應的調整,如今也已經完成了 16:9 與 4:3 模式的對應。新的 NicoFox Player 會自動偵測影片寬高比,自動選擇使用 16:9 模式或著 4:3 模式。

    對應 16:9 模式之後修正了很多彈幕位置不正確或著被蓋掉的問題,也同時一口氣解決了 SWF 影片縮放錯誤的問題。接下來如果行有餘力,我會希望能支援不含特殊語法的投稿者評論。敬請期待!


    其他雜七雜八修正

    • 修好了社區評論載不下來、以及特殊評論號碼無法判斷的問題。
    • 修好了 Flashblock 的衝突問題。就算影片資料無法讀取,也依舊提供下載按鈕。
    希望能趕在我 6/28 入伍前完成剩下長長的清單啊(哭)