Facebook Application の作り方

最近個人的にはまってる Facebook アプリケーションを開発したときのメモ。
まだそんなに日本では有名じゃないけど、こういう形の Web アプリは個人的に好きだし、こういうアイデアを知っておくととても面白いと思う。
しかも Facebook アプリの作成は比較的簡単にできる。
とりあえず今回の環境は以下の通り。

CentOS-4.4
PHP-5
App URL: http://www.enjoitech.jp/facebook_dev/

実際は php 以外の言語でも非公式ながらそこそこライブラリがそろってる。

Web サーバの準備

Facebook app を作成するにはホスティングでも自前でも自分で自由にスクリプトを配置できる Web サーバが必要。
上記で述べたとおり、様々な言語向けのライブラリがあるので、好きなものを選べる。

今のところ存在するライブラリはFacebook Developer | Resourcesで確認できる。

Facebook の設定

Facebook app "developer" を追加

Facebook アプリケーションを作成するには Developer を自分のアカウントに追加する必要がある。
このセクションで色々情報を得られるし、自分の作成したアプリケーションを管理する事になる。

Facebook app ID の取得

まず、自前のアプリケーションのための ID とセキュアコードを取得する。
これは developer アプリのセクションから + Set Up New Application アイコンをクリックして取得する事ができる。

Facebook app の設定

ID を取得したらそのアプリケーションの設定を行う。 My Applications ページから登録したアプリケーションの Edit Settings をクリックし、設定画面を開く。ここでは、自分の作成するアプリケーションの URL やメニューのリンク先などを設定する事になる。

少なくても以下の項目は設定する必要がある。

• Support E-Mail: メールアドレス
• Callback Url: 作成するスクリプトの置き場所(http://www.enjoitech.jp/facebook_dev/)
• Canvas Page URL: アプリケーションのトップページ(enjoitech)
• TOS URL: Term & Service Page(http://apps.facebook.com/enjoitech/)
• Default FBML: 何も作成されていないときにプロフィールに表示されるメッセージ(enjoitech under construction)
• Side Nav URL: 左サイドのアプリケーションメニューのリンクをクリックした時の URL(http://apps.facebook.com/enjoitech/)

開発

ライブラリのダウンロード

まず以下の URL から php 向けのライブラリをダウンロードする。
http://developers.facebook.com/resources.php

ダウンロードしたらアーカイブを展開し、 Callback Url に指定したディレクトリにコピーする。
appinclude.php を開いて以下の箇所を編集する。

$ vi appinclude.php

$appapikey = '08bf7a69edbd484ebd5fe7186c06a318';
$appsecret = 'abcdabcdabcdabcdabcdabcdabcdabcd';
...
$appcallbackurl = 'http://www.enjoitech.jp/facebook_dev/';

Hello world

第一段階

コードを見たほうが早いと思うので、まずは第一段階の Hello World 。

<?php
require_once("appinclude.php");
echo "Hello " . $user;
?>

ここでは $user という Facebook のユーザ ID 参照してるだけのシンプルなもの。
で、このコードが実際どこに表示されるかというと、アプリケーションのトップ画面になる。
では実際に表示されているかを http://apps.facebook.com/enjoitech/ に行って確認してみると。

Hello 723377025

となってれば成功。

第二段階

次は実際に何かを入力してそれを Facebook のプロファイルページにボックスを表示してみる。

<?php
require_once("appinclude.php");
if (isset($_REQUEST['your_name']))
{
        $facebook->api_client->profile_setFBML("Hello " . htmlspecialchars($_REQUEST['your
_name']), $user);
        $facebook->redirect($facebook->get_facebook_url() . '/profile.php');
}

echo <<<_FORM_
please input your name:<br />
<form action="" method="get">
<input type = "text" name = "your_name" />
<input type = "submit" value = "say hello" />
</form>
_FORM_;
?>

今度はアプリケーションのトップ画面に入力フォームを一個作ってみた。この post 先はどこになるかというと、
もちろんこのスクリプトナわけで、 Facebook がいくつかパラメータを加えてこのスクリプトにポストしてくる。実際には GET かな。
そしてここで profile_setFBML 関数に渡した HTML データがそのままプロフィールのボックスに表示される。はず。
なので、これを実行後に、プロフィールに入力した名前が Hello と一緒に表示されていれば成功。

そんな感じで、結構簡単にアプリケーションが作れるみたい。

コメント