スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Facebook APIで名前と写真を取得(ついでに非同期とループの注意点)

facebookのAPIを利用して友達のIDと写真を取得したいということがあると思います。
こちらの記事を参考にしてコードを作ってみました。

上記の記事ではIDと名前を取得するところで終わっているので、写真を持ってくるにはどうすればいいのかとあれこれ調べると結論としては写真も一緒に取得することができるとのこと。(下記コードのコメント参照)
これで解決なのですが、非同期でAPIを叩くときにループを使うとリクエストとレスポンスの整合性が取れないということがよくあります。
例えば、一度友達のIDリストを作ってからそのリストに沿って1つずつ写真を取ってくる場合を考えると、for文を使って1つずつリクエストを投げてレスを待つことができますが、for文を使うと上手く行きません。1つ目のリクエストを投げてレスが帰ってくる前に100個目のリクエストが終わっている、というような不整合です。
この時、下記のようにeachを使うとうまくいきます。
下記では敢えてeachを使って段階的にIDと写真を取得しています。

JavaScript

function fblogin() {
FB.login(function(resp) {
if (resp.authResponse) {
getdata();
}
}, {
scope : ''
});
}

window.fbAsyncInit = function() {
FB.init({
appId : 'ここは自分のapp id',
status : true,
xfbml : true,
version : 'v2.0',
});
//login check
FB.getLoginStatus(function(resp) {
if (resp.authResponse) {
getdata();
} else {
$("#result").html("
login
");
}
});

//fetch data via api
tmp = new Array();
friendsID = new Array();
friendsName = new Array();
friendsPic = new Array();

var getdata = function() {
//ここで /me/friends?fields=name,picture とやれば写真も一緒に取得できるがあえてしない
FB.api('/me/friends', function(resp) {
for (var i = 0; i < resp.data.length; i++) {
tmp.push(resp.data[i].id);
}
//取得したidのリストを1つずつ読んでいき、都度非同期で写真を取得
//$.eachはjQueryなのでjQueryの参照必須
$.each(tmp, function(index, val) {
req = '/' + val + '?fields=picture,name';
FB.api(req, function(resp1) {
friendsPic.push(resp1.picture.data.url);
friendsName.push(resp1.name);
friendsID.push(resp1.id);
if (friendsPic.length == tmp.length) {
outputFriendsInfo();
}
});
});
});

}
}
function outputFriendsInfo() {
var htm = '
logout Facebook

';
for (var i = 0; i < friendsID.length; i++) {
htm += friendsName[i] + '
';
}
$("#result").html(htm);
}

function logoutFB() {
FB.logout(function(response) {
$("#result").html("
facebook login
");
});
}

$(function() {( function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
});


※上記のjsとjQueryを参照
HTML

コメント

コメントの投稿

非公開コメント

PR

PR

プロフィール

何でも書くman

Author:何でも書くman
思ったことや備忘録など、とりあえずなんでも書きます。IT系のことや趣味、生活に関わることなども。

ページの先頭へ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。