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",以此類推,比自己拆解字串方便許多。
歡迎推文分享:
Published 30 April 2012 07:40 AM 由 Jeffrey
Filed under: ,
Views: 8,725



意見

# Ammon said on 02 May, 2012 04:35 AM

GreaseMonkey 從0.8.x 開始支援 @require 可以事先載入需要的 Library 而不需使用動態載入的技巧

wiki.greasespot.net/Third-Party_Libraries

另,jQuery 原始碼中有一段比對 script 的正規表示可以參考 (用來處理 ajax load + selector 的狀況),請搜尋關鍵字 rscript 即可找到 :)

# supermacos said on 09 September, 2013 10:46 AM

hi, 請問可以share一下這個Greasemonkey Script 嗎?

我也想把runkeeper的activities 轉到馬拉松世界去....

# Jeffrey said on 10 September, 2013 09:38 AM

to supermacos, 檔案我放在FB社團(www.facebook.com/.../513198765430809),但要聲明,我後來已不再透過RunKeeper轉換記錄,這個外掛已久未使用,且馬拉松世界網站也改版過,恕無法保證Script仍然有效,祝好運!

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<April 2012>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication