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 入伍前完成剩下長長的清單啊(哭)

    2011年5月31日 星期二

    NicoFox 介面調查問卷

    0.7 推出之後,大家最常問到的問題就是介面。
    改介面幾乎是每個軟體的忌諱,在 Firefox 套件之中,近期因為改介面造成大抱怨的最佳例子就是 Echofon,。而我認為,NicoFox 也很有可能會變下一個最佳範例。 QQ

    但抱怨沒有用,解決問題才是方法。
    既然 0.4 的程式碼已經無法繼續維護下去,那就只能考慮在 0.8 或 0.9 給大家做更好的介面。

    因此,請提供你的意見吧!填寫以下問卷,感謝您。

    2011年5月27日 星期五

    NicoFox 0.7 初審過了,會自動更新!

    好消息:NicoFox 0.7 在排了 21 天的隊之後,通過初步審核了!
    Mozilla 附加元件網站上的頁面也全面復活!

    這表示:
    * 如果您使用 Firefox 3.6,您會收到 NicoFox 有更新版的訊息
    * 如果您從 Firefox 3.6 升級到 4.0,NicoFox 在更新檢查中升級到 0.7。
    * 如果您使用 Firefox 4 以上,您的 NicoFox 會被自動更新!

    接下來升級率會三級跳,應該一星期內就會飆上 90% 以上...
    因為 0.7 新版全新的介面需要時間習慣,而新版也有不少已知問題
    可想而知會有一些災情,所以請容我重新寫一個 FAQ:





    Q:更新過後我找不到 NicoFox 放在哪裡!

    Firefox 3.6:放在右下角狀態列。
    Firefox 4 以上:放在工具列右上角。請耐心點找找看!還是找不到?請到自定工具列找找看,找到之後拉回來。

    Q:請問下載按鈕在哪?

    瀏覽影片時,按下 NicoFox 的按鈕就有下載按鈕了。但由於 0.7 的問題,在某些狀況下可能不會顯示(日文使用(9)版或JavaScript、Flash被攔截)這些現象大部分已經在 0.8 修正,將儘快推出。

    至於本來附加在影片連結的箭頭按鈕,則移到右鍵功能表了。您可以在影片連結點擊滑鼠右鍵,選擇「Download Linked Video With NicoFox」下載影片。

    Q:以前的評論輔助器哪去了?

    現在以獨立套件的方式提供了,請到這裡安裝:
    https://addons.mozilla.org/zh-TW/firefox/addon/nicovideo-comment-helper/

    Q:這版 NicoFox 不能用!

    目前本版本已知的問題如下。
    如有任何除此之外的問題,請使用回應回報給我!
    • 有些字串還是英文。
      NicoFox 0.8 的日文/正簡體中文/英文翻譯正積極準備中 ^^"
    • 自動登入無法使用。0.8 即將修正!
    • 不相容於 NICO 日文舊版本 (9)
      如何檢查?→如果你的影片網址是 nine.nicovideo.jp,就是使用舊版
      如何切到新版?請點網頁右上角【ニコニコ動画のバージョンを変更する】。
      我開始在重新考慮要不要支援了... Orz
    • 無法下載非日本版的 SWF 影片(影片代號為 nm 開頭者),此問題已在 0.8 修正。 
    • 如果使用 Multifox,將無法使用 NicoFox 的下載功能。目前正在調查中,希望能儘快給大家解法
    • 如果 JavaScript 或 Flash 未啟用,或使用 Flashblock 等套件攔截網頁上的影片 Flash,NicoFox 將無法抓取影片資訊也無法提供下載按鈕。這點已經在 0.8 完成修正,希望能趕快送給大家!
    • 縮圖補載一旦瀏覽器關閉後就無法再繼續,這點會在 0.8 修正。
    • 新 UI 的不安定性:某些狀況下會導致下載介面異常(加新的不會有反應、刪舊的刪不掉)其中一個問題是源於視窗開關造成的異常,將會在 0.8 修正。
    • 對於下載管理員中有太多影片(>50)的情況下,第一次打開 NicoFox 的面板介面需要很長的時間(1秒以上)。這點我最近會再想辦法作一些微調。
    Q:我裝了 0.7 之後不喜歡,可以反悔嗎?

    可以,雖然我個人很不建議 :(
    請先移除 NicoFox 0.7 後,到這裡取得 0.4b1:
    http://code.google.com/p/nicofox/downloads/list

    下載好後打開工具 -> 附加元件,把載好的 XPI 拖進附加元件視窗裡

    另外請注意 NicoFox 0.4b1 就算不檢查相容性也無法在 Firefox 4 以上正常運作
    因此強烈建議 Firefox 4 使用者不要降級,謝謝 orz

    如果您有任何對新版介面的想法和建議,請回報到介面調查問卷,讓下一版的 NicoFox 更好用!

    2011年5月1日 星期日

    NicoFox: 太多東西要改,五月會有1.0!



    要改的東西太多了,就改天(ry

    是這樣的,雖然 Firefox 4 都出超久了,NicoFox 還是遲遲沒有出新版,真是糟糕 Orz

    不過 NicoFox 他確確實實的還活著,只是我現在還有太多地方還在慢慢修。本來所謂的12月要有0.6也因為整個12月大爆炸所以大延誤了。

    不過也因為這個緣故,我想趁著五月順便把 NicoFox 最糟糕的一些部分修掉,並且因應 Firefox 4 加上一些更好用的介面。這個五月,打通任督二脈的 NicoFox 1.0 會很快跟大家見面!

    雖然現在 GitHub 上的版本已經「可以用」了,但還是我開發到一半,不太完備的版本,所以請大家使用前多加斟酌。(如果你已經用了,請要回報心得和問題給我! :) )我會很努力在這個月趕快把東西寫完。

    然後來在這裡重貼一次介面的預定變更好了。

    預定的主介面改動:

    • 在Firefox 4時,預設顯示在工具列右上角。
    • 只顯示最近下載的項目。所有下載項目會在NicoFox Player裡顯示。
    • 把本來放在頁面上的工具全部移到Panel去。
     預定的 Player 更動:


    • 改開在分頁裡面。
    • 改為類似Ant Video Downloader播放器的兩欄介面。左欄可以作為管理工具。
    • 提供4:3和16:9選項。(考慮中)
    有任何意見都歡迎留言喔!

    2011年4月30日 星期六

    辦給自己的小B成發會

    旅途。

    是啊,日子過得好快,轉眼之間延畢一年的歲月就要過去了。隨著天氣愈來愈熱,也快要到了登入國軍 Online 的時間。

    這一年來說停滯是停滯,說有進展卻也有很多進展。依舊還是沒有堅定的信念,但「就這樣當完兵出去社會吧」的想法慢慢確定下來了。這一年來,雖然研究所最後只準備了一個半月所以沒上,但OnionSky、CC計畫都算是有不錯的成績。我在很多方面需要更好。

    登入以前我想先把我到底做了什麼給慢慢寫下來,算是個自己的一點交代吧。這就是我即將辦個自己的小B自嗨成發會 :)

    2011年4月26日 星期二

    Firefox 4 Party 之謝謝大家!

    P4249376

    我(左)和WM(右)的「火狐再臨」開場演講。圖片由 othree 拍攝,採CC-BY授權。

    故事要從二月底開始。WM 接下了 Party 內容組的工作之後,希望借助我的人脈,所以把我也一起拉進來。於是我們兩個人就開始了到處找人講東西的愉快旅程。

    Firefox 4 Party 的所有內容包括一場功能介紹、兩場大講、八場小科展攤位秀。其中小科展的概念是柏強提出來的,意圖複製 Mozilla Summit 2010 時廣受好評的科展形式。由於我也有去那場 Summit,對小科展也十分印象深刻,所以也就這樣同意了這個想法。

    大概是報著「國軍 Online 以前最後一場大活動」的想法,所以對於這場活動自己的期待很高,也確實花了不少心思在拉人上面。雖然因為我的拖延性格,加上溝通時龜龜毛毛,太多東西都拖了太久,也導致很多人最後沒辦法前來 :(。也因此,我一直到活動真的辦完以前都很擔心內容會不會出包。

    最後的活動仔細回想起來還算成功,真的要感謝提供內容的大家 :) 請容許我一個一個感謝吧:

    在功能介紹上,WM 非常認真的在準備這一次的演講,花了很多的時間製作基於 HTML5 的投影片、砍掉太多的內容、寫講稿且實際演練。最後的成果其實還不錯,以沒有真的兩人排練過來說還算流暢。 :)

    在大講上,異塵行者介紹了許多實用的套件,TonyQ 介紹了使用者面向的 Userscript(還特地花了時間送了 GreaseFire 在 Firefox 4 下的 Patch,超有誠意!)。這兩場演講內容都十分充實,包含了很多他們的使用心得,對一般使用者而言非常有用。很棒的分享!

    也謝謝 Mozilla 本部的 Andreas 和 Chris 為我們介紹了 Firefox 在 JavaScript 與 Layers 方面的重大技術改進。雖然內容有點深,但對稍微有爬技術文的我而言還算簡明易懂。不過一個小小可惜的地方是他們提出來的未來面相是太抽象的技術基礎,不見得是每個人都有機會參與的。

    小科展的部份一共有八攤,當初我在排的時候就希望能同時有技術攤和非技術攤,而實驗證明非技術攤擺小科展確實會有比較好的效果。技術的東西如果能更簡單、更有視覺效果的話我想會比較有機會受到矚目吧。我也想一個一個講我自己的想法:

    上半場
    • 我和 Irvin 的 Firefox Mobile + 各平台上的 MozTW 首頁:我跟後來亂入的 Irvin 的共同攤,手機版 Firefox 真的是個很有意思的話題,也有很多人問到為什麼舊手機不能跑 Firefox。我們加起來一共有 HTC Desire / 白色版 iPhone 4 / iPad / MacBook Pro 兩台,很大程度上是超大陣仗的攤位...
    • reke 等人的維基百科攤,維基娘 vs 小莎:算是我基於「回饋維基社群」理念下硬拉下來的攤位,由 reke.wang 等人一起負責。他們為了活動準備了一大疊傳單和一個液晶螢幕,內容上算頗為用心。我覺得雖然成效可能不如預期,但卻是社群經營的一個好開始。
    • orinx + 小喵的 WebM:算是 WM 指導的攤, 小喵後期的搶救完全讓這個攤起死回生,最後弄出了一個很好的 HTML5 video Demo。辛苦了!
    • TonyQ 的 Zk:顧自己攤位的緣故沒注意到。事後回想,同時讓他接大講和小科展真的是負擔太大。我希望以後不要再有這種讓人累壞的安排。Zk Team 辛苦了!
    下半場
    • 我的 Add-on SDK:附加元件大使義務攤。轉眼之間 Add-on SDK 就已經出到 1.0 Beta 4 了,而且已經有了超級完善的文件。我決定寫一個超簡單的顯示噗浪行動版套件來做 Demo,效果其實還可以,而且確實有把 Add-on Builder 吸引人的一面展現出來。
    • 柏強的 Drumbeat 之 全民上字幕:...我沒有注意到 qqqqq 不過柏強這次在工作量超重的情況下還能另外準備一個小科展,很大程度上我要給他好幾個讚。
    • 魏風的Audio Data API:也是 WM 指導攤,最後做出來的 Demo 是個很有設計感又很有火力展示風味的 HTML5 audio Demo。如果能用別的方式說明「這是動態產生的喔」也許會更好?
    • mosky 的 Enjoy Bus:很大程度上也許是整場活動的另類攤。
      這攤的誕生也實在是莫名其妙。有一天我去台北的時候想說「ㄟ mosky 有寫個 Enjoy Bus 耶,我想去西門玩,看看公車何時來」,結果讓我順利搭上了 660。發現這東西真的好用,於是突然打電話給 WM 說「ㄟ這個當一攤好不好」...... 對,就是這麼莫名其妙!Update: WM 說其實根本是我在耍白痴,他也覺得應該要邀這一攤,而且早就講了。好啦,當我千金難買早知道。總之這攤也是意外效果不錯的攤位,實用性的東西擺小科展確實很好。
    自從 Firefox 3 Party 時被拉來講 NicoFox 已經過了兩年半,轉眼間現在已經在 MozTW 做了很多事情。如今 Firefox 4 Party 也已經圓滿結束了,我個人希望 Firefox Party 能夠拉近大家的距離,也讓 MozTW 能在薪火相傳之餘,繼續扮演一個快快樂樂分享網路體驗的 FOSS 社群!