==应用程式== 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/cn.aspx?n=bbs/Facebook/M.1437504590.A.339.html