==應用程式== dubSteps 步步 - 在地圖上觀看遍所有朋友的打卡動態！ ==程式分類== 地圖 ==程式連結== http://grassboy.tw/dubSteps/ ==程式專頁== (無) ==程式介紹== 在旅行的時候… 你是否會不自覺的想 follow 朋友曾經踩過的足跡？ 如果今天到了一個陌生的地方… 能夠讓你掌握「周遭有哪些是朋友造訪過的景點」 並且能看到朋友當時留下的照片、訊息… 這樣對你在這裡的旅程安排，是否有一定的幫助呢？ 是的，這就是 dubSteps 想作的事情！ 讓你在地圖上看看朋友都去哪~ 先來幾張使用示意圖XD 所有朋友在全世界的打卡分佈：http://i.imgur.com/2IbTBs6.png 造訪過此景點的朋友們：http://i.imgur.com/8S1vhs5.png (密集恐懼症患者請小心服用) 點開特定朋友的造訪記錄：http://i.imgur.com/91AoWgw.png 看過示意圖之後… 是否開始對於朋友在世界上留下的足跡感到興趣了呢？ 你也可以在 dubSteps 載入朋友在 Facebook 留下的打卡資訊喲~ [初次使用] 打開 dubSteps ( http://grassboy.tw/dubSteps/ ) 主要功能其實只有右上角三項， 根據螢幕大小可能長得不一樣，如下圖： http://i.imgur.com/dObDY24.png http://i.imgur.com/6QvpoRH.png http://i.imgur.com/7kc6cCD.png [開始操作 - 先備份 Facebook 好友打卡記錄] 要使用 dubSteps，您必需先備份好友們在 Faceboook 裡的打卡記錄 所以，需要先點選 [下載 Facebook 資料] 由於 dubSteps 使用的技術不全是 Facebook 官方開放程式API (詳見後 [運作原理] 會有詳細說明) 所以您需要經由幾個步驟來備份打卡記錄 (目前已確認 Firefox 和 Chrome 兩個瀏覽器下運作皆正常) 第一步：先打開 https://www.facebook.com/images/spacer.gif 到新視窗 取得一個位於 Facebook 的空白分頁 第二步：在空白分頁按 F12 打開瀏覽器的開發者工具，並切到 Console / 主控台分頁 如圖： http://i.imgur.com/XCLCiO5.png (Chrome) http://i.imgur.com/XTxxbJU.png (Firefox) 第三步：把 http://grassboy.tw/dubSteps/getFBData.js 的文字內容 全選(Ctrl+A)→複製(Ctrl+C)→貼到 Console / 主控台 下(Ctrl+V) 如圖： http://i.imgur.com/XX8sd9e.png (Chrome) http://i.imgur.com/pNRuNqS.png (Firefox) 接著按下 Enter 送出 第四步：按下 Enter 後，你會發覺原本的空白分頁載入了 dubSteps 的畫面， 如圖： http://i.imgur.com/ttwjnBK.png 這時就可以快樂的按下 [開始讀取] 按鈕囉！ (第一次按下去，會跳出 dubSteps APP 的授權頁面， 由於 dubSteps 會需要取得您的好友姓名資訊…所以要麻煩您授權囉~) 第五步：接著就是等 dubSteps 慢慢讀完您的好友的打卡資訊， 如圖： http://i.imgur.com/a7OjVoG.png 經實測，小弟大約四百個好友，會花 15 分鐘左右才讀取完畢 讀取完畢畫面如圖： http://i.imgur.com/Az6rIVR.png 讀取完畢後你便可以下載至您的電腦進行保存 (這個過程並不會把這些打卡記錄偷偷傳到網路上，請放心~) 當您備份完了朋友們在 Facebook 的打卡資訊， 就可以回到 http://grassboy.tw/dubSteps/ 載入囉~ 您可選擇直接將剛才下載下來的檔案，直接拉到 dubSteps 分頁去 如圖：http://i.imgur.com/HnSJmfr.png 或是點選 [載入打卡資訊] 選擇剛才下載的檔案… dubSteps 就會開始將朋友的打卡資訊全部顯示在地圖上囉！ (這個過程也不會把這些打卡記錄偷偷傳到網路上， 所有資料只顯示在瀏覽器下，因此也可以放心~) 如何？朋友們在 Facebook 裡的打卡記錄是不是比想像中多很多呢XD (小弟好友只有 400 人左右，就覺得整個地圖相當的輝煌了 所以如果好友動不動就上千的…hmm...希望你的瀏覽器不會當機XD) [進階使用情境 - 局部匯出功能] 雖然一次載入朋友們在全世界的足跡很爽非常爽… 不過爽過了好像也沒太大實質幫助 其實小弟準備這支程式，腦中的念頭只有： 「下個月要到東京玩了，如果臨時不知道要去哪，希望朋友能給我一些建議」 「現在人在台南，人生地不熟…附近有什麼好吃的東西呢？」 所以，與其一次顯示朋友們在全世界的打卡記錄… 還不如局部匯出特定範圍內的打卡記錄， 因此…來踹踹 [局部匯出] 功能吧！ 按下 [局部匯出至雲端] 的按鈕後，你會看到地圖中間多一個紅色框框 如圖：http://i.imgur.com/sEezjqT.png 你可以調整紅色框框的範圍，把你想關注的範圍包起來後，你可以選擇： 一、存到本機：你會得到一個比較小的 Facebook 打卡記錄檔，這個檔案丟到手機後， 手機打開 http://grassboy.tw/dubStep/ 便可透過本機載入這個檔案 (這個過程，打卡記錄檔都不會傳到網路上，請放心) 二、存到雲端：你會把目前範圍內的打卡記錄檔，上傳一份到網路上， 並且取得一個超連結網址 (或者說取得一個 QRCode) 如圖： http://i.imgur.com/EeRbne7.png 你可以用手機直接開啟該網址， 便可省去從本機上傳檔案進 dubSteps 頁面的時間囉！ 不過也因此，若您將這個網址給了別人， 別人也可以看到您的朋友在這個範圍內去了哪些地方 (不過也請放心，好友的打卡動態仍然是無權被陌生人看到的 舉例：若不是我的好友， 應該是看不到 http://facebook.com/10154025171798858 的) 您在局部匯出的過程中，會被要求為此打卡記錄命名 如圖：http://i.imgur.com/x1mHoSA.png 這是為了方便在手機載入後，若要新增書籤時，頁面標題能夠有所區隔 如圖：http://i.imgur.com/24qmpRk.png [在手機上的使用祕訣] 先來一張手機上 dubSteps 的顯示畫面： http://i.imgur.com/0RV1KDi.jpg 從上圖可以看到，若您手機有開 GPS 定位， 右下角的 icon 按下去，將會定到您目前的位置 然後畫面左邊那一堆數字會記錄你在 google map 每一層縮放級別， 並且會記憶該級別下的中心點位置， 所以當你按下畫面中的地點群組，地圖展開到對應的縮放級別 可直接點選往下的縮放箭頭，回到上一級縮放級別~ 另外，針對藍色圈圈的地點群組，由於考量到該群組的地點少於 10 所以您可以直接長按它，過大約一秒後，他會直接展開地點讓你選 如圖：http://i.imgur.com/oDmZnoA.jpg 你就可以在不縮放地圖的狀態下，直接切換這幾個景點 如圖：http://i.imgur.com/Wx9hIHQ.jpg 然後，頁面上的 dubSteps Logo 其實點下去可以啟用全螢幕… 不過目前的實用性極低，因為當你點了好友動態， 切到 Facebook APP 再切回來時，全螢幕就被跳出了 0rz.... 最後，由於每次在 dubSteps 下都要先載入打卡資訊， 所以以頁面的立場會不希望大家不小心點一下就到別頁了… 因此在離開頁面時會有個小提示~ 如圖：http://i.imgur.com/MArUSQd.png [運作原理 - 沒興趣可略過XD] 首先…前面應該有提過，這個頁面用到的並不是 Facebook 官方的 API... 唯一用到官方 API 的部份… 只有根據你的好友 facebook id，去抓取您好友的姓名而已~ 而抓取好友清單的機制，是根據 http://www.facebook.com/ 的原始碼中， 有一段是你所有的好友 facebook id 清單 抓取好友的所有打卡記錄， 是根據每個朋友在"地標"頁 (ex: https://www.facebook.com/me/map ) 原始碼有一段會儲存你(or你朋友)從以前到現在的所有打卡記錄 所以如果朋友把地標頁設成關閉時…在備份 Facebook 打卡記錄時就會失敗 (不過也有可能是當時和 Facebook 的連線中猴了…所以建議第一次跑完時， 別急著下載，再按一次 [針對無法取得打卡記錄的朋友重試一次] 試試) 然後目前打卡記錄的 id ，前面加上 http://facebook.com/ 就可以直接連到該則動態，這是 facebook 有提供的機制 上面三點都無法保證 Facebook 以後會不會有其他更動， 所以也不保證 dubSteps 能夠活多久降子XDD (但您所備份下來的打卡記錄，永遠都能在 dubSteps 裡載入) 不過由於用的不是官方 API， 而是直接用開發者工具貼上程式碼的方式抓資料… 所以應該還是有人有所疑慮… 因此還是得將這個網頁的原始碼公開至網路上 【dubSteps 步步】專案原始碼： https://github.com/Grassboy/dubSteps 全選→複製→貼至 Console / 主控台 裡的程式碼： https://github.com/Grassboy/dubSteps/blob/master/GetFBData.js 讓有能力的人都能進來把關， 也希望各位能放心使用 m(_ _)m ==使用心得== hmm... 我個人是覺得還滿好用的啦，這樣會很虛嗎XDD 好啦沒啦…其實我目前只有用兩個 Facebook 帳號測試過… 本尊帳號大約 400 個好友，分身帳號大約 20 個好友… 用起來都滿正常的， 不過小弟可以想像正妹的好友清單都是一兩千起跳的… 所以目前的確是無法預期 到時產生的打卡記錄檔能否能正常被載入到 dubstep 然後如果好友過多…可能周遭能地的地點太多， 造成資訊爆炸，而無法提供太大的幫助… 關於這點…目前的確是無解XD 或許以後可以加個設定說：我只關注特定好友圈or近一年的打卡記錄 不過目前的確還在思考要怎麼加，使用上比較直覺降子~ 這部分…就再看看大家的使用回饋如何囉~ 文長感謝閱讀 m(_ _)m 祝使用愉快XDD --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.34.136.131 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/Facebook/M.1437504590.A.339.html