facebookアプリ/日記2

facebookアプリってなんだろう

いざ、既存のmixiアプリをfacebookアプリに移植しようと思ったのですが、ちょっと立ち止まることにしました。どこから手をつけていいのかわからなくなったので、facebookアプリ自身のことをもう少し調べてみたいと思います。

facebookアプリと一言で言っていましたが、その形態は多岐に渡っていて、iOSやAndroid OS向けのアプリも登録できるようです。今回、作ってみるのはWEBアプリです。Canvasページの中のiframeに自由にアプリを設置できるとのことなので、単純に静的なページを一枚用意するだけでもできてしまうわけです。既存のWEBアプリをCanvas URLに指定すればそれでいいのですね。

ただ、WEBアプリをfacebook上で扱うからには、facebookアプリ特有の機能を使わない手はありません。facebookが提供するソーシャル機能をうまく活用して、たくさんの人にサービスを提供することを忘れてはいけません。

このソーシャル機能は具体的には、facebookの提供するAPIを使って、ユーザとユーザのつながり方を調べることで実現します。どうやら、この機能はGraph APIという名前がついているようです。そういえば、mixiでもmixi Graph APIが提供されていましたっけ。このAPIを使うのに便利なSDKが各種の言語で提供されているわけですね。

今回はサーバ資源節約の意味も込めて、JavaScriptあたりでソーシャルグラフを取得してみようかなと思います。アプリケーションサーバとfacebookサーバが通信を行う必要があるケースではphpなどのモジュールを使ってサーバサイドの実装を行うようになるようです。私の好きなperl用のモジュールも開発されているとのこと。またAdobeからFlashのActionScript3用のライブラリが提供されているようです。mixiアプリ同様にFlash主体のゲームがfacebookアプリにも多そうなので、後々この辺も抑えることになるかもしれません。

アプリの構成

Canvas URLに自前のサーバのURLを登録しましたので、その場所に以下のような、ファイルを置くことにしました。

index.html - Canvasに表示するページ
js/jquery.js - dom操作に使う既存のjavascriptのライブラリ
js/canvas.js - ここにGraph APIを操作するスクリプトを書く予定
images/ - アプリを装飾するための画像やFlashを置いておく場所
css/ - アプリを装飾するためのスタイルシートを定義する外部ファイルを置く場所

Date: 2011/6/5

アプリの実装

HTML部分

<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>アプリのタイトル</title>
<link rel="stylesheet" type="text/css" href="css/canvas.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
</head>

<body>
<div id="fb-root"></div>
<h2>お友達</h2>
<div id="friends"></div>
</body>
</html>

こんなHTMLをとりあえず用意してみました。doctypeは何か指定があるのかわかりませんでしたので、php用のSDKのサンプルに倣ってみました。
また、htmlタグには「xmlns:fb="http://www.facebook.com/2008/fbml"」という属性を付加してあります。これはxmlのnamespaceを指定する作法で、fbmlというフレームワークを利用する場合に必要な記述ですね・・・あれ、fbmlって廃止が予定されていたような気がします。じゃあ、この属性要らなくない？というわけで、削除して動かしてみることにします。今回は初めてのアプリなので、最もコアな機能であるユーザのお友達を一覧する機能を実装してみようと思います。必要な機能はそこから付け足していけばいいというスタイルです。（スパゲッティコードができやすいスタイルです。）

HTML上にはお友達情報を表示する領域として、div#friend要素を用意してあります。その上にdiv#fb-rootという要素がありますが、ここには後でfacebook APIを呼ぶためのJavaScript SDKを呼び出すscriptタグが入ります。headタグの中では、jqueryライブラリとcanvas.jsという独自のファイルをscriptタグを使って呼び出していますし、同じようにFacebook JavaScript SDKを呼び出すこともできるのですが、なんでも非同期に呼び出した方がページの読み込みの際に都合がいいそうなのです。じゃあ、言うとおりにcanvas.jsの中で動的に呼び出すようにしましょう。

JavaScript部分

window.fbAsyncInit = function() {
FB.init({appId: 'your api key', status: true, cookie: true, xfbml: true});
//ここに友達を呼び出す処理を書く予定
};
$(document).ready(function(){
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
});

Facebook JavaScript SDKを呼び出す方法はこんな感じになります。
非同期のスクリプト要素をdiv#fb-rootに追加しているだけです。そしてwindow.fbAsyncInitという関数を追加しています。推測するに非同期でSDKの読み込みが完了したら、この関数が呼び出されるっていうことなのでしょう。そこではまず、SDKが提供するFBというインスタンスをinitというメソッドで初期化しています。引数には、アプリを登録した際にもらったAPIキーを渡します。これでfacebookのソーシャルグラフにアクセスする主体がどのアプリなのかを指定することになるのでしょう。その他の引数はこんな意味のようです。

status: ログイン状態をチェックするかどうか
cookie: セッション情報をサーバに送信するかどうか
xfbml: XFBMLをパースするかどうか

iframeでアプリを提供する場合、facebookとは関係ない外部サイトとしてもサービスを提供できるわけですから、facebookのユーザとしてログインしているかどうかをチェックしたくないケースもあるのかもしれません。その場合、facebookのソーシャルグラフへのアクセスに制限が加わるのでしょうね。

なお、SDKのURLはhttp://connect.facebook.net/ja_JP/all.jsとしています。（プロトコルはCanvas URLに準拠するようにしているので、httpsにもなりえます。）URL中の「ja_JP」という部分は「日本向けに日本語で」SDKをくださいという意味です。英語でアプリを提供する場合は「en_US」になります。世界中にユーザがいるfacebookですから、多言語対応についてはおいおい調べてみたいトピックです。

では、続いてFB.initで初期化した後に「友達情報を表示する」処理を書いてみましょう。

FB.api('/me/friend', function(response) {
// 取得データを表示するはずが・・・
});

JavaScript SDKからfacebookのソーシャルグラフにアクセスする方法は、FB.apiというメソッドを呼び出して行います。ソーシャルグラフはパスの形で表現されますので、最初の引数に「me/friend」を指定します。「利用ユーザ（me）の友達（friend）」の情報が欲しいという指定なわけです。とてもわかりやすいですね。この指定方法を変えることで様々な情報が引き出せてしまうわけです。

ここでは省略されていますが、第2引数に呼び出し時の通信メソッド（GET、POST）を、第3引数に呼び出し時のパラメータ（Object）を指定することもできるそうです。

最後の引数はコールバック関数です。Graph APIから応答があると、この関数に必要な情報が引数として渡されるので、中身を解析しながら友達の情報を表示してあげればよさそうです。

ところが、返ってきたのはエラー通知でした。

{
error:{
type:"OAuthException",
message:"An active access token must be used to query information about the current user."
}
}

OAuthExceptionということは、アクセスの権限に関する問題が起こっているようです。そういえば、Facebookアプリで遊ぼうとするとき、いつも最初に「このアプリに情報を連携させますけどいいですか？」なんていうダイアログが表示されていた気がしますが、このアプリにはそれがありません。アプリにアクセスしてきたユーザの情報を許可なく自由に引っ張ってこようとしたので、エラーが発生したのではないかと推測されます。というわけで、次回は要求された「active access token」というものを取得してみようと思います。

余談ですが、アクセストークンが広告業者に渡っちゃって問題になったニュースが今年ありましたね。個人情報の扱いに関連する事項なので、注意を払う必要がありそうです。

Date: 2011/6/6

日記一覧

Last-Modified 2017-09-01 17:30:16