このページの本文へ

Facebook APIでソーシャルなブロック崩しを作ろう

2012年06月13日 11時00分更新

萩原伸悟/jAction

  • この記事をはてなブックマークに追加
本文印刷
Facebookapp

 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

 元のブロック崩しゲームと比べると少し複雑になっているので、まずは全体の処理の流れを整理しておきましょう。

■ブロック崩しゲームのおおまかな流れ

  1. 背景/ブロック画像を読み込む
  2. 背景/ブロック画像が読み込まれたら this.onLoad が実行される
  3. ブロックを配置する(this.onLoad内)
  4. タッチされたら this.onEnterFrame が実行される
  5. ボールが動きだしゲーム開始(this.onEnterFrame内)

■ソーシャルブロック崩しゲームのおおまかな流れ

  1. Facebookログイン処理をする
  2. ログインが完了したらthis.onLoginを実行する
  3. フレンドの画像を取得する(this.onLogin内)
  4. 画像が取得されたらthis.onGetPictureを実行する
  5. 画像が1枚以上あればthis.onInitを実行する(this.onGetPicture内)
  6. フレンドの画像と背景画像を読み込む(this.onInit内)
  7. 背景画像が読み込まれたらthis.onLoadを実行する
  8. フレンドの画像が読み込まれたらthis.onLoadを実行する
  9. フレンドの画像と背景画像の読み込みが完了したらthis.displaypicを実行する
  10. ブロックを配置する(this.displaypic内)
  11. タッチされたら this.onEnterFrame を実行する
  12. ボールが動きだしゲーム開始(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の「アプリ」で確認できます。

写真1.png
Facebook developers アプリの設定

 第2引数はcookie、第3引数はoauthの設定ですが、通常はtrueで問題ありません。これでログイン処理を追加できました。ブラウザーからアクセスすると以下のようなダイアログが出てくるはずです。

写真2.png
ログインダイアログ画面
jActionの最新版はver1.10ですが、本連載ではver1.02を使用しています。ver1.10ではCanvas要素の使用がオプションとなったため、ver1.10を使用する場合はMain.jsの冒頭に ja_CanvasSet();と挿入してください。 詳しくはjActionバージョン1.10リリースのお知らせをご覧ください。
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング