目的
- Facebook Graph API 位置情報があるデータを取得してみる
- 個人のFacebook写真アルバム内の写真情報を取得し
- Mapbox経由で位置情報がある写真をWeb可視化
1. About Facebook Graph API
1.1. 概要
参考
https://developers.facebook.com/docs/graph-api/overview
- Facebook上のアプリを開発する人が、ユーザーのFacebookにある情報をアクセスできるAPI
- ユーザーがそのAppliを利用したら「アプリがユーザー情報にアクセス可能」を承認しないと
- アクセスできるのFacebook情報種類が色々
- 今回写真関係の情報をチェックしてみる
1.2. APIを触ってみる
以下のConsoleでAPIをTryできる
https://developers.facebook.com/tools/explorer/?method=GET&path=me&version=v14.0
me だけをRequestしたら個人アカウントのBasic情報がでてる
左側にalbums/photosをBrowseしたらデータが色々でてます。
これから位置情報があるを探してみます。
位置情報が出てないけど、albums/photos/place を検索したら追加されてます！
画像URLを追加してEnoughだと思います
OKになればGETに書いてあるCURLをjavascript上で利用できます
curl = "https://graph.facebook.com/v14.0/me?fields=albums%7Bphotos.%7Bpicture%2Cplace%7D%7D&access_token="+token
2.Mapbox上で可視化
2.1. geojson作成とLayer設定
- 上記のResponseがAlbumごとで、JavascriptでScanしてMapboxで使えるGeojsonを作成
- コードイメージ：
const curl = "https://graph.facebook.com/v14.0/me?fields=albums%7Bphotos.%7Bpicture%2Cplace%7D%7D&access_token="+token;
axios.get(url).then(function(result){
const albums=result.data.albums.data;
processAlbum(albums);
)};
function processAlbum(albums){
for(var j=0; j < albums.length; j++){
if(albums[j].photos){
var photo = albums[j].photos.data;
for(var i=0; i < photo.length; i++){
var thumb = photo[i].picture;
if(photo[i].place && photo[i].place.location){
var place_name = photo[i].place.name
var lon = photo[i].place.location.longitude;
var lat = photo[i].place.location.latitude;
addMapboxGeojson(thumb,place_name,lon,lat);
}
}
}
}
}
}
- 最終的なGeojsonイメージがこちら
fbjson =
[
{
"type": "Feature",
"properties": {
"name": "Inis Mor, Aran Islands",
"img": "https://scontent-nrt1-1.xx.fbcdn.net/v/t1.18169-9/393470_4579134715906_2075779361_n.jpg?stp=dst-jpg_p110x80&_nc_cat=108&ccb=1-7&_nc_sid=caaa8d&_nc_ohc=eHb63BUWeK8AX--KfO7&_nc_ht=scontent-nrt1-1.xx&edm=AC7C4-wEAAAA&oh=00_AT8TI9UX3xKNSJ6ztqNLi-ipfhozASuTE6z0YLBVlK91xA&oe=630C5776"
},
"geometry": {
"type": "Point",
"coordinates": [
-9.6643103442363,
53.105765577622
]
}
},
{
"type": "Feature",
"properties": {
"name": "Inis Mor, Aran Islands",
"img": "https://scontent-nrt1-1.xx.fbcdn.net/v/t1.18169-9/564276_4579135475925_1452845447_n.jpg?stp=dst-jpg_s130x130&_nc_cat=100&ccb=1-7&_nc_sid=caaa8d&_nc_ohc=ol4Vit2jxc8AX99ZUDn&_nc_ht=scontent-nrt1-1.xx&edm=AC7C4-wEAAAA&oh=00_AT-nMPADdHwceZ2GEoyu3c8qN0VuVQJJWp3zFZvykQxJ2g&oe=630D7F60"
},
"geometry": {
"type": "Point",
"coordinates": [
-9.6643103442363,
53.105765577622
]
}
},
...
]
- Mapbox layer とそのPopup設定イメージ
- MapboxのBasic Codeから載せました
map.addSource('places', {
"type":"geojson",
"data":fbjson
});
map.addLayer({
"id": "places",
"source": "fbplaces",
"type": "circle",
"paint": {
"circle-radius": 3.5,
"circle-color": "#ff00aa",
"circle-opacity":0.6
}
},
);
map.on('mousemove', function (e) {
var fe = map.queryRenderedFeatures(e.point, {layers: ['places']});
if(fe.length){
var clon = fe[0].geometry.coordinates[0];
var clat = fe[0].geometry.coordinates[1];
var place_name = fe[0].properties.name;
var popupcontent = place_name+"<br><table><tr>";
for(var j=0; j < fe.length; j++){
if (j<3){
var n = fe.length - j-1;
var img_url = fe[n].properties.img;
popupcontent += "<td> <img src='"+img_url+"'/> </td>";
}
}
popup.setLngLat([clon,clat])
.setHTML(popupcontent+"</tr></table>")
.addTo(map);
} else {
popup.remove();
}
});
2.2. 結果 & 課題
PointにHoverするとPopupがでてます
- Graph API のtokenが1~2時間しか使えないので、毎回事前にAPIのTokenを作らないと
- Front End beginnerで手動でFacebook for developersページ上でTokenを取得＆コピーし、可視化画面にはりつ
- 個人情報のために例えば全体的なユーザーのPublic投稿を取得できない。Appliの承認したの各ユーザーしか取れない
- このページが完全にClient Sideで、Databaseとかに保存してない
- POIの位置が違う可能性があります。細かい地図を作りたければFacebook上でAnother locationを設定しよう
最後に
使ってみたければ
https://github.com/bordoray/facebook-insight
以上 