facebook APIに挑戦してみた

チュートリアルを見ながら、ちょっとしたアプリケーションを作成してみました。本当にちょっとしてます。


こんなビデオもあるよ


チュートリアルでは、Flex Builderでの例が載っているのでFlash CS3での例を示します。

まずは、。こちらにクラスパスを通して置いてください。

FLAファイルの作成

  • facebook-actionscript-api http://facebook-actionscript-api.googlecode.com/svn/trunk/source/actionscript/ をダウンロードします
  • flaファイルは[Flashファイル(AS3.0)]で作成します。
  • flaファイルを保存します。
  • flaファイルと同じディレクトリに[FacebookAPI.as]という空ファイルを作成します。
  • flaファイルを開きます。
  • [ファイル]->[パブリッシュ設定]->[Flash]タブ->[ActionScriptのバージョン]項目の右にある[設定]をクリック
  • [クラスパス]へ先ほどダウンロードしたfacebook-actionscript-apiのパスを記入
  • [ドキュメントクラス]へ[FacebookAPI]と記入
  • [ドキュメントクラス]の右にある[えんぴつ]アイコンをクリック
  • しばらくすると先ほど作成した[FacebookAPI.as]が開かれます。空ですね、もちろん。

とりあえず、FLASHオーサリングは放置。次は、facebookの設定を行います。

facebookの設定

  • http://www.facebook.com/developers/へアクセスして、アプリケーションを使うことに同意する必要があります。
  • 自分のアプリケーションを作成します。
  • [設定を編集]->[詳細]->[詳細設定]のApplication Typeで[Desktop]を選択します(まずはオーサリングツールからパブリッシュして確認するので)。開発中は自分にしか見せたくない場合は[サンドボックスモード]を[可能にさせる]としておくと良いです。もちろんリリース時には[無力化]へ変更します。
  • APIキーはマイアプリケーションのページでアプリケーションを選択すると表示されています。シークレットキーはAPIキーの下に表示されています。このシークレットキーですが、たまに秘密と訳されています(設定を編集内など)が、値は同様なので同じものを指していると思われます。

facebookの設定は以上でOK。次は、先ほど放置したFLASHオーサリングで開いている[FacebookAPI.as]に以下のソースをコピペして下さい(あまり素敵なコードではないかも知れません)。

package
{
  import com.facebook.data.users.GetInfoData;
  import com.facebook.utils.FacebookSessionUtil;
  import com.facebook.data.users.FacebookUser;
  import com.facebook.data.users.GetInfoFieldValues;
  import com.facebook.commands.users.GetInfo;
  import com.facebook.net.FacebookCall;
  import com.facebook.events.FacebookEvent;
  import com.facebook.Facebook;
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFieldType;
  
  /**
   * facebook api test
   * @author naoto koshikawa
   */
  public class FacebookAPI extends Sprite
  {
    private const FACEBOOK_API_KEY:String = "あなたのアプリケーションのAPIキー";
    private const FACEBOOK_SECRET_KEY:String = "あなたのアプリケーションのシークレットキー";
    
    public var loginbutton:Sprite;
    public var title:TextField;
    
    private var fbook:Facebook;
    private var session:FacebookSessionUtil;
    private var user:FacebookUser;
    
    public function FacebookAPI() 
    {
      // ボタンを作成します。雑ですみません。。。
      var loginLabel:TextField = new TextField();
      loginLabel.type = TextFieldType.DYNAMIC;
      loginLabel.width = loginLabel.height = 0;
      loginLabel.autoSize = TextFieldAutoSize.LEFT;
      loginLabel.text = "Click after you log into Facebook";
      loginLabel.mouseEnabled = false;
      loginbutton = new Sprite();
      loginbutton.addChild(loginLabel);
      loginbutton.addEventListener(MouseEvent.CLICK, onConfirmLogin);
      loginbutton.x = stage.stageWidth / 2 - loginbutton.width / 2;
      loginbutton.y = stage.stageHeight  - loginbutton.height;
      loginbutton.graphics.lineStyle(1, 0x000000);
      loginbutton.graphics.drawRect(0, 0, loginbutton.width, loginbutton.height);
      
      // 結果などを表示するテキストフィールドを作成します。とても雑ですね。
      title = new TextField();
      title.type = TextFieldType.DYNAMIC;
      title.width = title.height = 0;
      title.autoSize = TextFieldAutoSize.LEFT;
      title.text = "Hello you";
      title.y = stage.stageHeight / 2 - title.height / 2;
      
      addChild(title);
      addChild(loginbutton);
      init();
    }
    
    private function init():void
    {
      session=new FacebookSessionUtil(FACEBOOK_API_KEY, FACEBOOK_SECRET_KEY, loaderInfo);
      session.addEventListener(FacebookEvent.CONNECT, onConnect);
      fbook=session.facebook;
      session.login();
    }
    
    private function onConfirmLogin(event:MouseEvent):void
    {
      this.removeChild(loginbutton);
      session.validateLogin();
    }
    
    private function onConnect(e:FacebookEvent):void
    {
      var call:FacebookCall=fbook.post(new GetInfo([fbook.uid],[GetInfoFieldValues.ALL_VALUES]));
      call.addEventListener(FacebookEvent.COMPLETE,onGetInfo);
    }
    
    private function onGetInfo(e:FacebookEvent):void
    {
      var infoData:GetInfoData = e.data as GetInfoData;
      
      trace(infoData.userCollection.getItemAt(0));
      
      user=(e.data as GetInfoData).userCollection.getItemAt(0) as FacebookUser;
      title.text = "Hello "+user.first_name+" "+user.last_name + " " + user.name;
    }
  }
}

[FacebookAPI.as]を保存したら、先ほど作成した.flaファイルをパブリッシュすればちょっとしたアプリケーションの完成です。