Coding4Fun-RunKeeper記錄轉檔外掛

前陣子入手GH-625M GPS心跳錶，拿來記錄慢跑心跳及里程，還寫了轉檔小程式將GH-625M的ACT檔轉成RunKeeper社群網站可識別的TCX格式。在Mobile01的討論板上，馬拉松世界是另一個常被跑友提到的國內的慢跑社群網站，可以登錄練跑記錄，統計月跑量(如下圖紅框)，另外網站裡有全國大小賽事資料，可以針對其中某場比賽新增成績，而社群成員以國內跑友為主，資訊內容與生活圈較有交集，互動性比RunKeeper還有趣。

不過，網站雖然支援GPS手錶或記錄器上傳慢跑記錄，但必須透過專屬軟體(不像是RunKeeper可直接上傳檔案到網站)，而該軟體主要支援站方發行的GPS運動錶(似乎與GH-625M同廠商，看晶片規格屬新一代，感覺C/P值也不錯，但我才入手新玩具所以無緣囉!)及記錄器，其他GPS設備的記錄必須透過GPX檔上傳(無法包含心跳數據)。而我實測還遇到一個小問題，軟體在Windows 7 x64上安裝得不太順利，無法執行，直到在Virtual PC中才測試成功。評估下來，對我來說，上傳到RunKeeper還是比較方便，並且有些額外功能，例如: 可以直接在網頁上校正偏移的GPS追蹤點(用JavaScript實現的，酷!!)、分享到Facebook... 等。看起來，上傳到RunKeeper，再"匯出"到馬拉松世界應是較便利的解決方案。

經過一番研究，我找到一個不錯的整合切入點。馬拉松世界有個新增日誌的網頁介面，能手動輸入慢跑的日期、時間、里程，在描述區為TextArea可自由輸入文字，甚至要用文字逐一列出每公里的平均Pace及平均心跳率也未嘗不可。

想在現成網頁加上強化功能? 這是該Greasemonkey出場的時候囉! 花了三個小時(時間主要消耗在Greasemonkey Script無法用IDE Debug，而我的奶油桂花手頻頻打錯字扯後腿，老花眼則看了好幾遍沒檢查出來... 至於程式部分有jQuery相助，倒是不難寫)，終於成功地在網頁輸入表格中增加"第九又四分之三列--RunKeeper匯入功能"!

原本的網頁忽然多冒出一個RunKeeper區塊，輸入帳號，右方可帶出該帳號在活動記錄，選取後按【匯入】，外掛程式便會自動由RunKeeper取得網頁，擷取慢跑資訊後自動填入到網頁各欄位，蠻方便的。

回到技術面，整理這次學到的幾點心得:

1. RunKeeper網頁的Client Script一整個jQuery風，讀來格外親切；馬拉松世界則是Ext JS幫。
2. 因為目標網頁沒有jQuery，所以在Greasemonkey Script中動態載入jQuery的技巧又派上用場了。
3. 在Greasemonkey中要用AJAX存取其他網站的程式或內容，需使用GM_xmlhttpRequest，才能打破Same Origin Policy限制。
4. GM_xmlhttpRequest取回的HTML，轉為DOM較便於jQuery取出特定元素。但原來的HTML中有很多<script>，在非原網站執行會有問題，所以我用了replace(/<script/g, "<no_script").replace(/<\/script/g, "</no_script")的技巧停用所有Script，之後再$("#divTemp").html(fixed_html)就能只純粹載入DOM。
5. 要解析字串取出特定部分，在JavaScript中一樣要用Regular Expression才是王道，例如: "Apr 29, 2012"字串，要取出年、月、日，可以這樣寫:
   

   var r = /([A-Za-z]{3}) (\d{1,2}), (\d{4})/.exec("Apr 29, 2012");

   var yy = r[3];

   var dd = r[2];

   var mm = $.inArray(r[1], "Null;Jan;Feb;Mar;Apr;May;Jun;Jul;Aug;Sep;Oct;Nov;Dec".split(';'));

   原理是在RegExp宣告中用( )分成月、日、年3個群組，在exec()後若比對成功會得到一個陣列，例如: r，其中r[0]會是整段吻合內容，即"Apr 29, 2012"，而r[1]是第一個群組"Apr"，r[2]為"29"，r[3]則為"2012"，以此類推，比自己拆解字串方便許多。