dubSteps 步步 - 看看朋友都去哪 - Facebook

==應用程式==
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

--