Facebookモバイルアプリの開発方法

Facebookモバイルアプリ開発チュートリアル（3）

作成したJavaScript

　今回作成したMain.jsは、以下の通りです。

Main = function()
{
  //FaceBookアプリID , cookie , oauth
  var fc = new FacebookClass('App ID の番号' , true , true);
  fc.addEventListener("onLogin", this);

  this.onLogin = function()
  {
    //ロードしたらする処理。
    fc.removeEventListener("onLogin", this);
    console.log("ログイン成功しました");

    //FQLオプションを第三引数にいれる。第三引数に何個でも取り出せる。
    //第一引数は何人取得するか。0で全員になる
    //ランダムに取得するか。ランダムの場合は全員でもシャッフルされて返ってくる
    fc.addEventListener("onGetFriendsData", this);
  fc.getFriendsData( 0 , "random" , 'sex , pic_square');
  };

  this.onGetFriendsData = function()
  {
    fc.removeEventListener("onGetFriendsData", this);
    if(fc.friendsDataArray.length <= 0)
    {
      alert("フレンド情報が見つかりませんでした");
    }
    else
    {
      //名前と写真の情報を取り出すメソッドを実行。
      onStart();
    }

  };

  function onStart()
  {
    var male = 0;
    var female = 0;
    var malePics=[];
    var femalePics=[];
      for(var i = 0 ; i < fc.friendsDataArray.length ; i++)
      {
        var friendObj = fc.friendsDataArray[i];
        if(friendObj.sex == "male")
        {
          male++;
        if(male < 6)
        {
          malePics.push(friendObj.pic_square);
        }
      }
      else
      {
        female++;
        if(female < 6)
        {
          femalePics.push(friendObj.pic_square);
        }
      }
    }

    var maleStr = "男性の友達は" + Math.round((male /(male + female)) * 100)+"％" ;
    var femaleStr = "女性の友達は" + Math.round((female /(male + female)) * 100)+"％" ;

    //HTMLに画像やテキストを入れていく。
    //男女のDOMオブジェクトを取得
    MaleObject=document.getElementById("Male");
    FemaleObject=document.getElementById("Female");

    //「友達は○○％」を変える
    MaleObject.childNodes[1].innerHTML=maleStr;
    FemaleObject.childNodes[1].innerHTML=femaleStr;

    //写真を5枚いれていく。
    var maleNode=MaleObject.childNodes[3].childNodes;
    var femaleNode=FemaleObject.childNodes[3].childNodes;

    for(var i=0;i < 5;i++)
    {
      maleNode[1+2*i].src=malePics[i];
      femaleNode[1+2*i].src=femalePics[i];
    }

    //他何名のところを埋める。※友達5人以下の場合は、他0名にする。
    //男性の場合。
    if(male>5)
    {
      MaleObject.childNodes[5].innerHTML="他"+(male-5)+"名";
    }
    else
    {
      MaleObject.childNodes[5].innerHTML="他0名";
    }

    //女性の場合。
    if(female>5)
    {
      FemaleObject.childNodes[5].innerHTML="他"+(female-5)+"名";
    }
    else
    {
      FemaleObject.childNodes[5].innerHTML="他0名";
    }
  }
};

　それぞれのデータをfriendsDataArrayから取得して、HTMLの該当箇所に表示しています。jAction自体は、Facebookだけでなく、色々な機能が実装されています。ぜひ色々試してみてください。

　次回は、HTML5の特色の1つでもある「Canvas」を使い、より動的なFacebookアプリを作ってみたいと思います。