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