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 就不會收錄你的成績。由於目前沒辦法作個人身分確認,因此加入成績單視同加入排行榜裡,這點也請各位玩家見諒囉。