うみの河童

facebook-actionscript-api 1.8の使い方

今日は、facebook-actionscript-api 1.8に
イライラさせられた一日だった。

現在、ネット上にある
facebook-actionscript-apiは1.6を使ったものが多い。

普通ならある程度バージョンが上がっても
機能は追加されるけど使い方の基本は同じってのが多いけど、
こいつは違った。

1.6と1.8は記述方法が少々違うのです!

ご協力いただいた@ccsxw718さん、@ProjectNyaさんありがとうございました。

今回作ったサンプル
connectボタンを押すとfacebookと通信・認証して
アクセストークンを取得し、アイコン画像を読込む。
2度目からは認証しなくてもいける。というかんじ

ここでコードを
HTML

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>facebook_test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
name:"flashContent"
};
swfobject.embedSWF("facebook_test.swf", "flashContent", "550", "400", "10", "expressInstall.swf", flashvars, params, attributes);
</script>

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="flashContent"></div>
<!-- これが必ず必要 -->
<div id="fb-root"></div>
</body>
</html>
[/html]

ActionScript3.0

[as3]
package
{
import com.facebook.graph.Facebook;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.system.Security;
import flash.text.TextField;

/**
* ...
* @author Kurashita Masayuki
*/
public class Main extends MovieClip
{
public var button:MovieClip;
public var debugText:TextField;

private const APP_ID:String = "*************";

//id
private var uid:String;
//アクセストークン
private var accessToken:String;

public function Main()
{
Security.loadPolicyFile("https://fbcdn-profile-a.akamaihd.net/crossdomain.xml");

button.addEventListener(MouseEvent.CLICK, button_click);
}

private function button_click(event:MouseEvent):void
{
//facebook api 初期化
Facebook.init(APP_ID, initCallback);
}

//----------------------------------
// init CallBack
//----------------------------------
private function initCallback(response:Object, failure:Object = null):void
{
if (response)
{
//ログイン・認証済み
debug("facebook ログイン&認証済み");

//uid accessTokenを設定
setData(response.uid, response.accessToken);

//アイコンを読込む
iconLoad();
}
else
{
debug("facebook 未ログインor非認証");

//ログイン&認証
login();
}
}

//----------------------------------
// uid accessTokenを設定
//----------------------------------
private function setData(uid:String, accessToken:String):void
{
this.uid = uid;
this.accessToken = accessToken;

debug("ID : " + this.uid);
debug("ACCESS TOKEN : " + this.accessToken);
}

//----------------------------------
// ログイン
//----------------------------------
private function login():void
{
//セッション状態の管理
Facebook.addJSEventListener("auth.statusChange", statusChange);

//権限の設定
var opts:Object = {scope: "publish_stream"};
Facebook.login(loginCallBack, opts);
}

//----------------------------------
// セッション状態の管理
//----------------------------------
private function statusChange(response:Object, extendedPermissions:Object = null):void
{
if (response)
{
debug("facebook ログイン・認証成功");

//uid accessTokenを設定
setData(response.authResponse.userID, response.authResponse.accessToken);

//アイコンを読込む
iconLoad();
}
else
{
//ログイン・認証失敗
debug("facebook ログイン・認証失敗");
}

}

//----------------------------------
// アイコン画像の読込み
//----------------------------------
private function iconLoad():void
{
//Facebook.api("/me/friends", facebookCallback);
//アイコン画像のURL (square, small, or large)
var url:String = Facebook.getImageUrl(uid, "square");
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest(url);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete);
loader.load(request);
}

//----------------------------------
// アイコン画像読込み完了
//----------------------------------
private function iconLoadComplete(event:Event):void
{
var bitmap:Bitmap = event.target.content as Bitmap;
addChild(bitmap);
bitmap.x = 46;
bitmap.y = 21;
}

//----------------------------------
// ログイン画面が開いた
//----------------------------------
private function loginCallBack(response:Object, fail:Object):void
{
debug("ログイン画面が開いた");
}

//----------------------------------
// デバッグ
//----------------------------------
private function debug(string:String):void
{
debugText.appendText(string + "\n");
}
}

}
[/as3]

ここで1.6と違うのは、

通信が成功したか管理する、

[as3]Facebook.addJSEventListener("auth.statusChange", statusChange);[/as3]

権限の設定をする

[as3]var opts:Object = {scope: "publish_stream"};[/as3]

この2箇所くらいなんだけど、
あまりにも情報がなくて時間がかかった、、、

あと、忘れがちなHTMLにこれをいれて

[html]<div id="fb-root"></div>[/html]

参考にしたのは下記のサイト
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

あとはリファレンス
http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/index.html

@ProjectNyaさんがわかりやすくまとめてくださったので
そちらがいいかもしれませんw
[AS3.0] Facebookと連携 (4) 
もうこれ以上変わらないでほしいな