読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Facebookアプリで友達のプロフィールの写真を取得して、jQueryを使って一覧表示する方法。

Facebookアプリ
<スポンサーリンク>

ずいぶん苦労したけど、やっとできた。
Facebook APIを使ってプロフィール写真の取得。

やっぱりどんなFacebookアプリでもプロフィール写真を取得するのは基本なので、ここをうまくできたのは大きい。
あと、jQueryも使えた。
チープななサンプルだけど、表示する画面はこんな感じ。
(イメージ)

で、ボタンクリックで友人達の画像を表示するサンプルがこちら。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Facebookアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
$(function() {
	/** これはbodyに配置しないとダメなことがわかった!*/
	function init() {
		console.log("called init!");
		FB.init({	
			addId:"160297677502227", cookie:true,
			status:true, xfbml:true, oauth:true
		});
	}

	$("#friend").click(function() {
		//login();
		getLoginStatus();
		show_friends();
	});

	function login() {
		FB.login(function(res) {
			$("#info").append("<em>ログイン結果:" + res + "</em></br>");
			console.log(res);
		});
	}
	function getLoginStatus() {
		FB.getLoginStatus(function(response) {
			if(response.status != 'connected') {
				$("#info").append('<em>You are not connected!</em></br>');
				console.log("You are not connected!");
				login();
				return;
			}
		})
	}
	function show_friends() {
		var markup = '';
		FB.api('/me/friends', 'get', function(response) {
			if(!response || response.error) {
				$("#info").append('<em>友達リストを取得できませんでした!</em></br>');
			} else {
				$("#info").append('<em>友達取得できたよ!</em></br>');
				for(var i=0; i < response.data.length; i++) {
					friend = response.data[i];
					console.log(friend.id + "," + friend.name);
					markup += '<img src="https://graph.facebook.com/'+friend.id+'/picture/" title="'+friend.name+'" width="150" height="150" />';
				}
				
			}
			console.log(markup);
			$("#friend_listview").html(markup);
		});

	}


});
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="info"></div>
<h1>友達一覧</h1>
<input type="button" id="friend" value="友達一覧を表示する">
<div id="friend_listview">
</div>
<script type="text/javascript">
FB.init({
appId:'160297677502227', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
</body>
</html>

bodyの下の方にFB.init()があるけど、これをbodyに書いておくか、あるいはグローバル?に使って、まず実行されるようにしておかないと、

FB.getLoginStatus() called before calling FB.init(). 

こんな感じで怒られる。

読んだ本

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)


この本にはお世話になりっぱなしだ。
この本読まなきゃFacebookアプリの敷居は高いままだった。

感謝のプログラミング

今回で感謝のプログラミングは【658時間目】
10000時間まで、あと【9342時間】