|
|---|
FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。前回作成したCanvasを使った「ブロック崩しゲーム」アプリをベースに、今回はGraph APIを使ってソーシャルグラフを取り入れた「ソーシャルブロック崩しゲーム」に仕上げます。Facebookモバイルアプリ、いよいよ完成です。
Step 1：処理の流れを確認する
ブロック崩しのプログラムに、FacebookのGraph APIを利用して情報を取得する処理を加えます。具体的には、ブロックの画像部分をユーザーのフレンドのプロフィール画像に置き換えます。以下から完成版のデモをご覧ください。
ソーシャルブロック崩しの画面
- ブロック崩し（iPhone/Androidスマートフォン用）
- http://tadashiku.sunnyday.jp/ASCII/04/index.html
元のブロック崩しゲームと比べると少し複雑になっているので、まずは全体の処理の流れを整理しておきましょう。
■ブロック崩しゲームのおおまかな流れ
- 背景/ブロック画像を読み込む
- 背景/ブロック画像が読み込まれたら this.onLoad が実行される
- ブロックを配置する(this.onLoad内)
- タッチされたら this.onEnterFrame が実行される
- ボールが動きだしゲーム開始(this.onEnterFrame内)
■ソーシャルブロック崩しゲームのおおまかな流れ
- Facebookログイン処理をする
- ログインが完了したらthis.onLoginを実行する
- フレンドの画像を取得する(this.onLogin内)
- 画像が取得されたらthis.onGetPictureを実行する
- 画像が1枚以上あればthis.onInitを実行する(this.onGetPicture内)
- フレンドの画像と背景画像を読み込む(this.onInit内)
- 背景画像が読み込まれたらthis.onLoadを実行する
- フレンドの画像が読み込まれたらthis.onLoadを実行する
- フレンドの画像と背景画像の読み込みが完了したらthis.displaypicを実行する
- ブロックを配置する(this.displaypic内)
- タッチされたら this.onEnterFrame を実行する
- ボールが動きだしゲーム開始(this.onEnterFrame内)
Facebookから画像を取得する1〜5の手順が追加されています。この手順を踏まえてFacebookモバイルアプリを開発します。
Step 2：Facebookから画像を取得する
処理の流れに従ってプログラムを書きます。前回のプログラムは以下からダウンロードできます。
- ブロック崩しゲームのプログラム（ZIP）
- http://tadashiku.sunnyday.jp/ASCII/downloads/03.zip
●1. Facebookログイン処理をする
jActionには、FacebookのAPIを手軽に扱える「FacebookClass」がありますので、このFacebookClassを使ってコードを書きます。FacebookClassには「Facebook.js」が必要ですので、以下からダウンロードします。
ダウンロードしたらFacebook.jsをindex.htmlと同階層にアップロードし、head要素内の<script src="jaction.js"></script>の後に以下を追加します。
<script src="Facebook.js"></script>
あわせてbody要素の中の以下の行を次のように変更してください。
<div style="position:absolute;z-index:1;">
↓
<div id="fb-root" style="position:absolute;z-index:1;">
これでHTMLの準備はできました。index.htmlは以下のようになります。
■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="jaction.js"></script>
<script src="Facebook.js"></script>
<script src="Main.js"></script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:relative;">
<div style="position:absolute;z-index:2;">
<script src="sound_swf.js"></script>
</div>
<div id="fb-root" style="position:absolute;z-index:1;">
<canvas id="ja_canvas" width="320" height="480"></canvas>
</div>
</div>
</body>
次に、ゲームの処理を記述している「Main.js」に処理を加えていきます。ログイン処理は最初に実行するため、Main = function(){}の直下、ブロックやバーを定義したあとに追加しましょう。var yinc = 15;の次の行に以下を追加します。
var fc = new FacebookClass(***APP ID*** , true , true);
***APP ID***には自身のAPP IDを入れてください。APP IDはFacebook developersの「アプリ」で確認できます。
Facebook developers アプリの設定
第2引数はcookie、第3引数はoauthの設定ですが、通常はtrueで問題ありません。これでログイン処理を追加できました。ブラウザーからアクセスすると以下のようなダイアログが出てくるはずです。
ログインダイアログ画面
