FacebookClass

この拡張機能を使うと、jActionを使ってスマートフォン用のFaceBookブラウザアプリを作成する事が容易になります。

このFacebookクラスを使って作ったサンプルゲームはこちら
Facebookサンプル確認サイト
※Facebookアカウントを持っている必要があります。PCではGoogleクロームかSafariで動きます。

チュートリアルで習ったブロック崩しを、自分のバーの当たった位置で跳ね返る角度を変化させたり、玉が段々早くなるなどさらに進化させています。

FacebookClassは、以下のページよりダウンロードできます。
FacebookClassダウンロード

FaceBookアプリを作る為には、FaceBook開発者のページの「新しいアプリケーションを作成」ボタンを押して、アプリケーションを登録する必要があります。

スマートフォンで動くコンテンツを作るので「モバイルWebアプリ」に、jActionで作ったコンテンツの呼び出し先URLを記述することになります。「Facebook上のアプリ」にも登録しておくと、PC上のGoogleクロームで開発できるので便利です。
公開時にはモバイルのみにするのを忘れないようにしましょう。
登録するとApp ID:（アプリケーションID）が割り当てられますので、「App ID」でアプリログインを行います。

まずは「index.html」を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1,
						minimum-scale=1, user-scalable=0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>テストサンプル</title>
	<script src="Facebook.js"></script>
	<script src="jaction.js"></script>
	<script src="Main.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="fb-root"></div>
</body>
</html>

ここでポイントは

<script src="Facebook.js"></script>

が追加されているのと

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

のdivタグに「id=”fb-root”」が追加されていることです。

Facebookモバイルアプリを作るにあたって、この2点は必需になります。

Main.js上で、Facebookモバイルアプリにログインしてみます。

Main = function()
{
	//FaceBookアプリID , cookie , oauth
	var fc = new FacebookClass('アプリケーションID' , true , true);
	fc.addEventListener("onLogin", this);

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

となります。

var fc = new FacebookClass('FaceBookアプリID' , true , true);

まずは、FacebookClassを使いFacebookオブジェクトを作成します。

FacebookClassでFacebookオブジェクトを作るときに

第1引数 : FaceBook開発者のページで取得したアプリケーションID
第2引数 : cookieの指定
第3引数 : oauthの指定

を指定します。第2引数、第3引数は通常はtrueで問題ないと思われます。

fc.addEventListener("onLogin", this);

のように、Facebookオブジェクト.addEventListener(“onLogin”, リスナーオブジェクト);

とリスナー登録すれば、ログイン後にリスナーオブジェクトのonLoginメソッドオブジェクトが呼び出されます。

仮に、アプリにログインできない場合は、「failed login」とダイアログボックスが表示されます。

今回はリスナーオブジェクトにthis(つまりはMainが指定されているので）

this.onLogin = function()
{
};

が呼び出される事になります。

これで、Facebookモバイルブラウザアプリにログイン出来るようになりました。
せっかくなので、ランダムで友人2人を選び、その友人の性別とプロフィール写真を取得してみましょう。

取得する情報によっては、FaceBook開発者のページのアプリページで「認証ダイアログ項目」の中で
「User & Friend Permissions:」で設定する必要があります。

設定出来る「User & Friend Permissions」は
permissions設定
にて確認する事ができます。

今回は性別とプロフィール写真を持ってきますので「User & Friend Permissions」の設定は必要ありません。

ではサンプルソースを見てみましょう。

Main = function()
{

        ja_CanvasSet(); //Canvasを使う場合はCanvasのセットが必要です。

	//FaceBookアプリID , cookie , oauth
	var fc = new FacebookClass('アプリID' , true , true);
	fc.addEventListener("onLogin", this);

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

		fc.addEventListener("onGetFriendsData", this);

		//FQLオプションを第三引数にいれる。第三引数に何個でも取り出せる。
		//第一引数は何人取得するか。0で全員になる
		//ランダムに取得するか。ランダムの場合は全員でもシャッフルされて返ってくる

		fc.getFriendsData( 2 , "random" , 'sex , pic_big');
	};

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

	function Start()
	{
		//情報を取得する。
		console.log(fc.friendsDataArray);

		console.log(fc.friendsDataArray[0]);
		console.log(fc.friendsDataArray[1]);

		//名前を取得する
		console.log(fc.friendsDataArray[0]["name"]);
		console.log(fc.friendsDataArray[1]["name"]);

		//画像を取得する。
		console.log(fc.friendsDataArray[0].pic_big);
		console.log(fc.friendsDataArray[1].pic_big);

		 //画像を表示する。
		ja.imageUnitObj.addEventListener("onLoad",this);
		ja.imageUnitObj.load([fc.friendsDataArray[0].pic_big,fc.friendsDataArray[1].pic_big]);

		var topListerner = new Object();
		var bottomListerner = new Object();

		this.onLoad = function()
		{
			ja.imageUnitObj.removeEventListener("onLoad",this);
			ja.stage.addChild(ja.imageUnitObj.imageArray[0]);
			ja.stage.addChild(ja.imageUnitObj.imageArray[1]);

			ja.imageUnitObj.imageArray[0].y = 200;

			ja.imageUnitObj.imageArray[0].addEventListener("touchUp", topListerner);
			ja.imageUnitObj.imageArray[1].addEventListener("touchUp", bottomListerner);
		}

		//fc.share('タイトル' , 'リンク先URL' , 'アイコンのURL' , デフォルトメッセージ);
		topListerner.touchUp = function()
		{
			fc.share('上です',fc.friendsDataArray[0].pic_square,"",'上が選ばれました');
		}

		bottomListerner.touchUp = function()
		{
			fc.share('下です',fc.friendsDataArray[0].pic_square,"",'下が選ばれました');
		}
	}
}

この例では、取得した写真データをCanvasに貼り付けてますので、Canvasを使うために

ja_CanvasSet();

を実行して。Canvasを使えるようにします。

次に友人を2名ランダムに抽出して、プロフィール写真を表示しています。

友人のデータの取り方は

Facebookオブジェクト.getFriendsData( 取得したい人数 , "random" or "normal" , '取得したパラメータ');

のようにgetFriendsDataメソッドを使います。

第1引数 : 取得したい人数を指定します。0だと全員になります。
第2引数 : 登録順に取得するか、ランダムに取得するかを指定します。
第3引数 : 取得したいパラメータを指定します。

取得したいパラメータは

取得したいパラメータ一覧表

から指定する事になります。 , 区切りで複数指定する事が可能です。サンプルの

fc.getFriendsData( 2 , "random" , 'sex , pic_big');

で、2名をランダムに抽出し、性別とプロフィール写真のデータを持ってくるようにしています。

データの取得が終わると、Facebookオブジェクトで、”onGetFriendsData”イベントが発生しますので、

Facebookオブジェクト.addEventListener( "onGetFriendsData" , onGetFriendsDataを実行するオブジェクト);

でリスナー登録して、処理を行います。

このサンプルの場合は

fc.addEventListener("onGetFriendsData", this);

として、this=Mainオブジェクトの中のonGetFriendsDataメソッドを実行しています。

取得したデータは、Facebookオブジェクトの.friendsDataArrayに格納されています。

なにも指定しなくても、名前はnameプロパティで返ってきます。

fc.friendsDataArray[0]["name"]

fc.friendsDataArray[1]["name"]

今回、2名のデータが返ってきますのでfc.friendsDataArray配列には、2つのデータが入っており、0番目の人物の名前、

1番目の人物の名前が抽出できます。

fc.friendsDataArray[0].pic_big;

fc.friendsDataArray[1].pic_big;

で、0番目の人物のプロフィール写真、1番目の人物のプロフィール写真が抽出できます。

サンプルのようにConsole.logをかけてGoogleクロームのJavaScriptコンソールでみると、画像のURLが格納されていることが判ります。

友人ではなく、ユーザー自身のデータを取得する場合は

Facebookオブジェクト.getMeData('取得したパラメータ');

とします。データの取得が終わると、Facebookオブジェクトで、”onGetMeData”イベントが発生しますので、

Facebookオブジェクト.addEventListener( "onGetMeData" , onGetMeDataを実行するオブジェクト);

でリスナー登録して、onGetMeDataメソッドで処理する事ができます。

Facebookオブジェクト.meObj;

でユーザー自身のデータが取得できます。

友人と、ユーザー自身のデータをいっぺんに取得する場合は

Facebookオブジェクト.getMeAndFriendsData( 取得したい人数 , "random" or "normal" , '取得したパラメータ');

とします。データの取得が終わると、Facebookオブジェクトで、”onGetMeAndFriendsData”イベントが発生しますので、

Facebookオブジェクト.addEventListener( "onGetMeAndFriendsData" , onGetMeAndFriendsDataを実行するオブジェクト);

でリスナー登録して、onGetMeAndFriendsDataメソッドで処理する事ができます。

Facebookオブジェクト.meObj              -- ユーザー自身のデータ

Facebookオブジェクトの.friendsDataArray -- 友人のデータが格納された配列

でユーザー自身のデータと友人のデータが取得できます。

後は、いつもの要領で「ja.imageUnitObj」を使い画面に表示させています。

今回は最初から2名でしたので、使いませんでしたが、getFriendsDataのデータを取得後に

Facebookオブジェクト.matchData(['条件1 , 条件2 , ・・']);

で取得する条件を絞りこむことができます。　条件の書式は　’ 条件のプロパティ , 条件の値 ‘ で指定することが出来

‘ 条件のプロパティ 1, 条件の値1 ‘ , ’ 条件のプロパティ 2, 条件の値2 ‘ , ’ 条件のプロパティ 3 , 条件の値3 ‘ ・・・

と複数指定する事が出来ます。

例えば

fc.matchData(['sex,female']);

で、性別が女性の一つの条件式で絞り込んだ結果が、Facebookオブジェクトの.friendsDataArrayに格納される事になります。

最後にシェアの仕方です。

fc.share('シェアのタイトル名' , 'リンク先URL' , 'アイコンのURL' , 'デフォルトで入っているメッセージ文字列');

のように、
Facedbookオブジェクト.share(‘シェアのタイトル名’ , ‘リンク先URL’ , ‘アイコンのURL’ , ‘デフォルトで入っているメッセージ文字列’);
で、シェアする為のダイアログボックスが起動します。

是非試してみてください。
Facebookクラスは、今後もFacebook専用の命令が随時追加されていく予定です。
実装して欲しい命令などありましたら、優先して実装しますのでご意見や要望などよろしくお願いいたします。

2012年2月14日 9:00 AM
カテゴリー：プラグイン

FacebookClass

Facebook

Twitter

DISQUS

カテゴリー