FlexでFacebookのアプリケーション1

Ryanさんのブログで、Flex Builderで、Facebookのアプリが作れるということを
知って、早速試してみる事にしました。

Demo of Real Time Facebook Collaboration with the Flash Platform

取りあえずは、作ったアプリで、Facebookでログインするところまで、
下記ページを読みながらコードを追ってみました。
ただし英訳ではなく、抽出したメモで、結構適当です。
詳しくは、下記ページを読んで下さい。

Create your first Facebook application with Flex

-----

■Facebook側で、作成するアプリケーションを登録とAPIキーと秘密キーを作成

私は、Facebookのアカウントを持っているのですが、お持ちでない方は、
下記を参考にアカウントを作って下さい。

SIGN UP WITH FACEBOOK

Facebookにログインします。

次に「開発者」アプリケーションで、作成するアプリケーションを登録して、
APIキーと秘密キーを作ります。

ADD THE FACEBOOK DEVELOPER APPLICATION AND REGISTERING AN APPLICATION

開発者アプリケーションへ移動します。
http://www.facebook.com/developers/

アクセスを許可するかどうかのダイアログが出ます。

You hava no application. Create one.
とあるので、Create oneをクリックします。

アプリケーション名に「Yourlastname Hello User」として、
規約に同意を選択し、変更を保存します。

Application ID xxxxxxxxxxxxx
APIキー xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Your public API key.
秘密 xxxxxxxxxxxxxxxxxxxxxxxxxxx Do not share your secret key with anyone.

詳細のタブを選択して、詳細設定で、下記のように設定します。
Application Type：Desktop
サンドボックスモード：無力化

変更を保存し、開発者ホームに戻ります。


■Flex Builderで、アプリを作る。

Create your first Facebook application with Flex

Flexで開発するはじめてのFacebookアプリケーション
※2009.10.6追記 日本語のページも作成されているので、リンクしました。


1. 以下のように、プロジェクト名とアプリケーションの種類を設定後、
　 終了ボタンを押します。
　 プロジェクト名は、任意です。

　 プロジェクト名：ofukusHelloUser
　 アプリケーションの種類：Flex


2.デザイン画面に切り替えて、コンポートから、「ラベル」をドラッグし、
　ラベルをHello Youとします。

　コンパイルしてみます。

　パスはこのようになっているのを確認します。
　file:///{Project path}/YourNameHelloUser/bin-debug/YourNameHelloUser.html

　リンクは、直接SWFファイルではなく、HTMLにリンクします。
　HTMLの内容も確認しておきます。
　ユーザのFlash Playerのバージョンも確認して合わせておきましょう。


3.アプリケーションタグへbackgroundColorやbackgroundImageの指定を追加

　Create your first Facebook application with Flex
　

　Flex BuilderとFacebookプラットフォームのAS3のLibraryを使って、
　Facebookのプロファイルからユーザ名を表示するFlexのアプリケーションを作ります。

　下記からFacebookプラットフォームのAS3のAPIをダウンロードします。

　facebook-actionscript-api
　http://code.google.com/p/facebook-actionscript-api/

　ダウンロードした「facebook_library_v3.0.swc」をlibsにコピーします。


4.Facebookとの接続部分を作ります。

　以下を追加
　　＜mx:Script＞
　　　＜![CDATA[
　
　　　]]＞
　　＜/mx:Script＞

　この＜mx:Script＞＜/mx:Script＞に以下を追加

　　import com.facebook.Facebook;
　　import com.facebook.utils.FacebookSessionUtil

　　private var fbook:Facebook;
　　private var session: FacebookSessionUtil;

　　private function init():void{
　　　fbook = new Facebook();
　　　session=new FacebookSessionUtil();
　　}

　ここでさっきFacebook側で得られたAPIキーと秘密キーを設定します。

　session=new FacebookSessionUtil("your API key","your secret key", loaderInfo);

　※ただし、APIキーと秘密キーは、SWFに直接埋め込まないようにしましょう。
　　SWFは、逆コンパルできるので、悪意のあるユーザにアプリケーションのデータを
　　読まれてしまいます。
　　秘密キーはサーバから動的に取得するか、セッションのみの秘密キーを
　　使わなければなりませんとあるので、ここが参考になりそうです。
　　
　　Session Secret - Facebook Developers Wiki
　　http://wiki.developers.facebook.com/index.php/Session_Secret

　　(追記：4/10）


　下記も追加します。

　fbook=session.facebook;

　facebookプロパティは、FacebookSessionUtilのオブジェクトです。


■Facebook loginを加える

　1.下記を追加
　　 login()メソッドは、the FacebookSessionUtilのクラス
　　session.login();


　2.＜mx:Application＞を以下のように編集

　　＜mx:Application xmlns:mx="/2006/mxml"
　　　layout="vertical"
　　　backgroundColor="white"
　　　backgroundImage=""
　　　applicationComplete="init()"＞


3.アプリケーションを実行してみる
　ここで、Facebookのログイン画面が出て来ない場合は、ポップアップが
　ブロックされていないかを確認してみる。


4.Facebookのログイン画面でログインすると、下記のような表示となる。

「このウィンドウを閉じてアプリケーションに戻ることができます。」

　何も、このアプリケーションで起こりません。
　ログインするために、ユーザの情報を使って、Facebookのサーバで、
　自分のセッション情報をリフレッシュできるようにする必要があります。


5.＜mx:Application＞でlayout="vertical"に変更する。

6.＜mx:Label＞の下に下記のコードを追加する。

　＜mx:Button id="loginbutton"
　　label="Click after you log into Facebook"
　　click="onConfirmLogin()" /＞


7.function onConfirmLogin()を作り、返り値は、voidにする。
　ログインボタン「loginbutton」をアプリケーションから、消すことで、
　新しいユーザ情報で、Facebookセッションでリフレッシュさせます。


8.アプリを実行して、Facebookにログインする。
　
　「ログイン中にエラーが発生しました。このウィンドウを閉じてアプリケーションに
　　戻って下さい。その際、ログイン画面が再び表示されることがあります。
　　このエラーは、アプリケーションに問題があるために発生したと考えられます。」

　と表示されたましたが、どうもデバッグ用のバージョンの合うFlash Playerを
　使わないと表示されるようです。
　その際は、最新のデバッグ用のインストラーをAdobeのサイトからダウンロード後、
　インストールし、再度コンパイルしてみてください。


9.ログイン後、アプリーケションのボタンを押す事で、Facebookセッションを
　リフレッシュできます。

--

ユーザ情報表示部分のメモは、後日アップします。