Facebook上にアプリを作成する事で、Facebook体験と密に関わる機会が得られます。
アプリはFacebook.comの色々な側面、たとえばNews FeedやNotificationを利用する事が可能です。
Social Plugin、Graph API、Platform DialogsなどのFacebook Platformの技術は、Facebook.com上のアプリでも利用できます。

このガイドは、以下の二点に焦点をしぼって解説しています。
  • どうやってFacebook上でアプリを動かせるようにするか
  • 特定の機能の使い方
ガイド中のサンプルにはPHPを使っていますが、とても明解なので簡単に他の言語へと書き換える事が出来ます。

目次:
Facebook.com上のアプリとは、Facebook内に読み込んで表示されるウェブアプリを指します。
PHP/Python/Java/C#など、ウェブプログラミングをサポートする言語であれば何でも好きな言語やツール郡を使って開発する事が出来ます。

アプリはCanvas Pageに読み込まれます。
Canvas PageはFacebookに存在する文字通り空っぽのページで、アプリを実行する為に使われるものです。
アプリを構成するHTML/JavaScript/CSSを書き出すCanvas URLを指定する事で、Canvas Pageにアプリを表示することができます。
ユーザがCanvas Pageを表示すると、Canvas URLに指定されたページがiframeで表示され、Facebook内にあなたのアプリが表示される事になります。

例えば、http://www.example.com/canvasというURLでアプリが作られているとします。
これがあなたのCanvas URLです。
アプリの設定をする際には、http://apps.facebook.com/XXXに当てはまるようにCanvas Page名を指定しなくてはいけません。
この例ではyour_appをCanvas Page名として使います。
ユーザがブラウザでhttp://apps.facebook.com/your_appにアクセスすると、http://www.example.com/canvasの中身が表示されます。
canvas_example
上記のようにCanvas PageとCanvas URLを設定するには、Facebookアプリを登録してアプリの基本情報を入力しなくてはなりません。
それが完了したら、設定ページ左のFacebook IntegrationタブをクリックしてCanvas PageとCanvas URLの項目を設定します。
canvas_setup
アプリはFacebook内で読み込まれるため、ユーザインターフェイスのデザインをする際にはサイズの制限に気をつけてください。
Canvas Pageの最大幅は760pxです。
高さがFacebook側のページのそれを越えるとスクロールバーが出ますが、高さに制限はありません。
Developer Appでスクロールバーの設定を解除してJavaScript SDKのsetSize()関数を使うことで制御できます。

パーソナライズされたユーザ体験を創りだすために、Facebookからアプリ側へユーザ情報が送られます。
base64urlでエンコードされたJSONオブジェクトが、singned_requestという名前のパラメータでCanvas URLへPOSTされます。

ユーザが最初にアプリにアクセスした段階では、signed_requestパラメータには限られた情報しか含まれません。
渡される情報は以下の通りです。
  • user ユーザのロケール/国名/年齢オブジェクト(属する年齢層の最小値と最大値)
  • algorithm リクエストのシグネチャで用いられたアルゴリズム
  • issued_at リクエスト時のUnixタイムスタンプ
(ユーザのFacebook IDなどの)デフォルトでアプリから取得可能なユーザ情報を得るには、まずユーザがアプリを承認する必要があります。
Facebookアプリ用のOAuth Dialogを使う事をお薦めします。
下記のURLにユーザをリダイレクトさせる事でダイアログが表示されます。(YOUR_APP_IDとYOUR_CANVAS_PAGEには、Developer Appに記されている正しい値を入れてください。)
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE
canvas_auth
現状のiframeの読み込み方の為に、ブラウザのトップウィンドウをOAuth Dialogへ移動させる事が重要になります。
だいたいのアプリでは、top.location.hrefプロパティにダイアログのURLを指定することで誘導しています。
詳細は、セクション最後にあるPHPのサンプルをご覧ください。

デフォルトで、ユーザはFacebook上で一般公開されている基本的な個人情報へのアクセス許可を求められます。
アプリの機能がこれらの基本情報以上のものを必要とする場合は、必要に応じてユーザに追加のパーミッションを求めなくてはなりません。
OAuth Dialogリクエストに対して、欲しいパーミッションをカンマ区切りでscopeパラメータとして渡すと実現できます。
ユーザのメールアドレスとニュースフィードへのアクセスを求める場合の例は以下の通りです。
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream
canvas_perms
パーミッションの一覧はこちらの一覧ページで見る事が出来ます。
求めるパーミッションの数とそれらを承認するユーザ数には、強い反比例の関係があります。
多くのパーミッションを求めるほどそれを承認するユーザ数は減ってしまいますので、本当に必要なものだけを選ぶようお勧めします。

ユーザがDon't Allowを押した場合、アプリは承認されません。
OAuth Dialogはredirect_uriパラメータで指定したURLに対して(HTTPのステータスコード302を返しつつ)リダイレクトし、下記のようなエラー情報が渡します。
http://YOUR_CANVAS_PAGE?error_reason=user_denied&error=access_denied&error_description=The+user+denied+your+request.

ユーザがAllowボタンを押すと、アプリは承認されます。
OAuth Dialogは(HTTPステータスコード302を返しつつ)redirect_uriパラメータで指定したURLへリダイレクトされます。
ユーザがアプリを承認してからは、signed_requestパラメータは以下の情報を含むようになります。
  • user ユーザのロケール/国名/年齢オブジェクト(属する年齢層の最小値と最大値)
  • algorithm リクエストのシグネチャで用いられたアルゴリズム
  • issued_at リクエスト時のUnixタイムスタンプ
  • user_id FacebookのユーザID
  • oauth_token Graph APIやLegacy REST APIに渡す文字列
  • expires oauth_tokenが失効する時刻のUnixタイムスタンプ
以下のPHPサンプルは、signed_requestパラメータの扱いと、ユーザにアプリの承認を求める部分を示しています。
 <?php 

     $app_id = YOUR_APP_ID;

     $canvas_page = YOUR_CANVAS_PAGE_URL;

     $auth_url = "http://www.facebook.com/dialog/oauth?client_id=" 
            . $app_id . "&redirect_uri=" . urlencode($canvas_page);

     $signed_request = $_REQUEST["signed_request"];

     list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

     $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

     if (empty($data["user_id"])) {
            echo("<script> top.location.href='" . $auth_url . "'</script>");
     } else {
            echo ("Welcome User: " . $data["user_id"]);
     } 
 ?>
Signed Request Referenceを読むと、シグネチャのバリデーションの方法などを含め、signed_requestパラメータについて詳しく知る事が出来ます。
SDKのいくつか(たとえばJavaScript SDKPHP SDK)は認証/承認を簡潔にしています。

あなたのアプリからユーザが友達とshareする方法はたくさんあり、それらはSocial Channelsと呼ばれています。
アプリからユーザのNews Feedに対して直接書き込んだり、ユーザの友達に対してリクエストを送ったりして、Automatic Channelsを利用できます。

Automatic Channels

アプリへのトラフィックを増やす為、いくつかの手段は自動化されています。
ユーザがアプリを使い始めると自動的にブックマークが作成され、ユーザがアプリへ戻るのが簡単になります。
また、ユーザがアプリを使い始めた事が投稿され、ユーザの友達に知らされます。
さらに、アプリはApp DashboardGame Dashboardに自動で足されます。

Feed

News FeedはユーザがFacebookにログインするとすぐに表示されるので、これがFacebook体験のコアになります。
アプリからは、Feed Dialogを使ってユーザのNews Feedに対して書き込みする事が出来ます。
以下のサンプルは、どうやってキャンバスページ内でダイアログを表示するか示しています。
<?php 

         $app_id = YOUR_APP_ID;

         $canvas_page = YOUR_CANVAS_PAGE_URL;

         $message = "Apps on Facebook.com are cool!";

         $feed_url = "http://www.facebook.com/dialog/feed?app_id=" 
                . $app_id . "&redirect_uri=" . urlencode($canvas_page)
                . "&message=" . $message;

         if (empty($_REQUEST["post_id"])) {
            echo("<script> top.location.href='" . $feed_url . "'</script>");
         } else {
            echo ("Feed Post Id: " . $_REQUEST["post_id"]);
         }
?>
canvas_feed

Requests

リクエスト機能は、ユーザの友達をアプリに招待したり、アプリ内でギフトを贈ったりミッション達成へのヘルプを求めたりといった行動を起こさせるのに最適です。
Request Dialogを使ってリクエストを送る事が出来ます。
次のサンプルは、キャンバスページでダイアログを表示する方法を示しています。
<?php 

         $app_id = YOUR_APP_ID;

         $canvas_page = YOUR_CANVAS_PAGE_URL;

         $message = "Would you like to join me in this great app?";

         $requests_url = "http://www.facebook.com/dialog/apprequests?app_id=" 
                . $app_id . "&redirect_uri=" . urlencode($canvas_page)
                . "&message=" . $message;

         if (empty($_REQUEST["request_ids"])) {
            echo("<script> top.location.href='" . $requests_url . "'</script>");
         } else {
            echo "Request Ids: ";
            print_r($_REQUEST["request_ids"]);
         }
?>
canvas_requests
これらのチャンネルに関する詳細は、Social Channels core concept ドキュメントをご覧ください。

Facebook Pagesは、Facebookで最もよく使われる機能です。
メジャーなブランドや、セレブたち、その他色々がFacebook Pagesを彼らのウェブ上の"ソーシャルなホーム"として使っています。
Facebookアプリの最も面白い機能の一つは、アプリをFacebook Pageにも表示するというものです。

この機能を使う為には、Tab NameTab URLを(さきほどCanvas PageとCanvas URLを設定したのと同じように)設定することで、Facebook Pageのタブを選択した時に読み込まれるページを指定しなくてはなりません。
Developer AppのFacebook Integrationという項目から設定することが出来ます。
new_tab_config
Tab URLはCanvas PageやCanvas URLから見て相対的なものになっていなくてはなりません。
先ほどまでのCanvas URL設定を使うと、http://www.example.com/canvas/tabが読み込まれます。

Canvas Pageでは、アプリで使える表示領域はアプリの外側にあるFacebookのコンテンツによって制限されます。
Facebook Pageに表示する場合も同じように制限されますが、Canvas Pageの場合より領域は狭くなり、横520pxまでとなります。
new_tab_example
Facebook Pageの管理者をアプリのProfile Pageに誘導してAdd to my Pageを選択させることで、彼らのページにアプリを追加することができます。
new_tab_add
ユーザがFacebook Pageを表示すると、Page Tabが既存のタブの次に表示されます。
大ざっぱに言うと、Page TabはCanvas Pageとまったく同じように読み込まれます。
ユーザがPage Tabを選択すると、pageというパラメータが追加されたsigned_requestパラメータがアプリへ送られます。
このパラメータはid(表示しているページのid)や、admin(ユーザがページ管理者か否か)、liked(ユーザがページをlikeしているか否か)などの項目を含んだJSONオブジェクトです。
Canvas Pageでは、ユーザが承認するまではsigned_requestにはユーザ情報は含まれません。

Next Steps

ここまでは、Facebookアプリに可能な連携の主な部分の紹介です。
Social PluginsGraph APIをアプリで利用することにより、ここで紹介された内容以上のことが可能となります。

Facebookアプリを作る上でより実践的なサンプルを探している場合は、Run with Friendsというサンプルアプリを見てください。
このアプリはFacebook Platformが提供する大部分の機能を使っている上に、いくつか高度な機能(Real-time Updatesなど)も使っています。