Facebookアプリ開発に挑戦（その4・Graph APIの利用）

Facebookアプリで、ユーザー等の各種の情報を取得するには、Facebookの「Graph API」を利用します。
Javascript SDKを使うと、Graph APIを呼び出してデータを取得する処理を、比較的簡単に実装することができます。

1.Graph APIの概要

Graph APIは、Facebookから各種の情報を取得するためのAPI（Application Programming Interface）です。
「http://graph.facebook.com/API名?パラメータ=値&パラメータ=値・・・」のようなアドレスにHTTPでアクセスすると、Facebookのデータを得ることができます。

なお、Graph APIの詳細な情報は、Facebookの「Graph API Reference」のページにあります。

2.JavaScript SDKでGraph APIを呼び出す

JavaScript APIを使う場合、Graph APIを呼び出すには、「FB.api」という関数を使います。
この関数の書き方は、以下のようになります。

FB.api(アドレス, パラメータ, function(response) {
  結果を処理する部分
});

「アドレス」には、呼び出すAPIのアドレスのうち、「http://graph.facebook.com」を除いた部分を指定します。
「パラメータ」の部分には、パラメータ名と値からなるオブジェクトを指定します。
パラメータがない関数では、パラメータの部分を省略します。

APIの呼び出しが終わると、functionで指定した関数が実行されます。
その関数には、APIから返されたデータを表すオブジェクトが渡されます。
そのオブジェクトを利用して、必要な処理を行います。

なお、APIをHTTPで直接に呼び出す場合、パラメータとしてアクセストークン（権限等の情報を暗号化した値）を渡す必要があります。
ただ、JavaScript SDKを使う場合、アクセストークンは自動的に処理されますので、アクセストークンを気にする必要がありません。

3.事例

ごく簡単な事例として、アプリケーションを許可したユーザーに対して、「○○さんこんにちは。」と表示するだけのものを作ってみます。

HTMLの部分は、先日解説したひな形の通りです。
JavaScriptを一部書き換えて、APIを呼び出す処理を追加します。

(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);
}());
window.fbAsyncInit = function() {
  FB.init({
    appId: 'アプリケーションのID',
    status: true,
    cookie: true,
    xfbml: true
  });
  FB.getLoginStatus(function(response) {
    if (response.session) {
      FB.api('/me', function(response) {
        jQuery('#login')
          .html('<p>' + response.name + 'さんこんにちは。</p>')
          .show();
      });
    }
    else {
      jQuery('#not_login').show();
      jQuery('#login_button').click(function() {
        FB.login(function(response){
          if (response.session) {
            top.location.href = 'アプリケーションのアドレス';
          }
        });
      });
    }
  });
}

先日のひな形のプログラムと比べると、16～20行目が異なります。
この部分で、FB.api関数を実行して、Graph APIを呼び出しています。

アドレスとして「/me」を指定していますので、「http://graph.facebook.com/me」を呼び出すことになります。
このアドレスは、ユーザーの情報を得るAPIのアドレスです。

APIを実行すると、処理結果が以下のようなJSONとして返されます。

{
  id : ユーザーのID,
  name : ユーザーの名前,
  ・
  ・（その他各種の情報）
  ・
}

リストの16行目で、この結果を変数responseに代入しています。
したがって、response.nameがユーザーの名前を表します。
この結果、18行目の文で「<p>○○さんこんにちは。</p>」というHTMLが作られ、IDがloginの要素の中に流し込まれて、上であげた画面のように表示されます。