そろそろFlashからFacebookできるようになっておこうぜ vol.2 AS&JS編 [ #facebookjp ]

ando

Nov 20, 2010

facebook

前回はFacebookにアプリケーションを登録し、URLの設定までやりました。

今回は実際にASとJSを使ってFacebookと通信ができることを確認してみます！

（※2010/12/20 追記）

Adobe配布のライブラリが1.0から1.5へバージョンアップしました。
記事の内容も1.5にあわせて修正させていただきました！

AS、JSライブラリをダウンロード

Facebook APIのためのライブラリはAdobeより提供されています。こちらのページから、

GraphAPI_Web_1_5.swc

をダウンロードしてください。
※ver 1.5ではFBJSBridge.jsは不要になりました。

Flashを作成

さっそくFlashを組みます。swcファイルにパスを通し、com.facebook.graph.Facebookクラスをインポートします。このクラスが通信まわりを全部やってくれます。

import com.facebook.graph.Facebook;

次に初期化を行います。この初期化をするにはFacebookアプリケーションのIDが必要になります。アプリケーション設定のページで確認しておきましょう。↓ここです！

初期化をするには以下のメソッドを呼び出します。

Facebook.init('アプリケーションID', initCallBack);

第一引数にはアプリケーションIDをStringで、そして第二引数にはコールバック関数を渡します。通信がうまく行けば、このコールバックが呼ばれるというわけです。

コールバック関数は以下のように書いておきます。

private function initCallBack(response:Object, fail:Object = null):void
{
	trace('initCallBack\n');
	if (response)
	{
		//初期化成功。
		trace('Facebook　初期化に成功.\n');
		trace('あなたのユーザID：' + response.uid + '\n');
	}
	else
	{
		//初期化失敗
		trace('Facebook　初期化に失敗.\n');
	}
}

初期化に成功 / 失敗　なんて書きましたが、実はこのコールバックが呼ばれる時点でFacebookとの通信は成功です。この関数内での結果が成功であれ失敗であれ、次には同様の処理に進む事になりますので、今はとりあえずコールバックが呼ばれればOKと考えておいてください。

Flashをembed

さて次にHTMLをやっていきます。

swfobject 2.2、そしてhttp://connect.facebook.net/en_US/all.js の2つが必要になります。インポートしておいてください。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>

次に、bodyタグ開始のすぐ次に id="fb-root" としたdivタグをひとつ必ず入れておく必要があります。

<body>
<div id="fb-root">
</div>

そしてswfをembedします。
※ver 1.5ではswfobject.embedSWFを使って貼り付けるようになりました。

<div id="swfBox">

<script type="text/javascript">
    var fv = {
    };
    var params = {
        scale:  'noScale',
        salign: 'lt',
        menu:   'false',
        allowFullScreen:   'true',
        allowScriptAccess: 'always'
    };
    var attr = {};
    
    swfobject.embedSWF("facebookTest.swf", "swfBox", "500", "500", "10", fv, params, attr, {name:"swfBox"});

</script>

</div>

<noscript><p id="msgNoscript">ブラウザのJavaScript設定を有効にしてご覧ください。</p></noscript>
</body>
</html>

これで準備が整いました！vol.1の時に設定したURLへ各種ファイルをアップロードし、実行してみましょう。initCallBackまで戻ってくれば成功です。

ここまでの内容をまとめたソースはこちらからDLできます。（Flash CS4ファイル + html　ver 1.5に修正しました。）