Tender Surrender

3 月 14 2008

Top / Facebook / アプリケーション制作のステップバイステップガイド

アプリケーション制作のステップバイステップガイド †

※このページは本家FacebookのStep-by-step Guide to Creating an Applicationページの翻訳です。

↑

目次 †

アプリケーション制作のステップバイステップガイド

↑

導入 †

このチュートリアルでは、あなたが新しくアプリケーションを制作し始める際にテンプレートにすることができる"tutorialapp"を、我々がどのように制作したのか説明します。PHP5が動いているウェブサーバーをご用意の上、お読みください。

"tutorialapp"の最新バージョンはhttp://tperry256.dreamhost.com/f8/tutorialapp/にあります。このURLにアクセスすると、Facebookアカウントへのログインと、アプリケーションの追加が求められます。このようなサーバーサービスは、月額数ドルで様々なホスティング会社から提供されています。

あなたのアプリケーションを制作する場合は、異なるアプリケーション名、異なるサーバーをご利用と思います。ここでは、あなたのアプリケーション用に書き換える部分が目立つように編集してあります。

↑

Hello World †

http://developers.facebook.com/にアクセスしてください
'Get Started' をクリックします
'Add Facebook Developer Application' をクリックします
Facebook上の画面左ナビゲーション部分に 'Developer' へのリンクが表示されます。Developerアプリケーションにアクセスしてください。
'Setup New Application'をクリックします。
下記の通りフォームを記入します:
1. アプリケーション名(Application Name): 我々はこの部分を 'Tutorial Application' としました - ご自分のアプリケーション用に別の名前を入力してください。
2. 利用規約(Terms of service)を確認します。
3. オプションフィールド(Optional Fields)をクリックします - オプションが拡張されます
4. サポートメールアドレス(Support E-mail): あなたのアカウント情報から自動的に入力されますが、アプリケーション利用者にプライベートなアドレスを利用させたくない場合もあるかと思います。誤りのないメールアドレスを入力するようご注意ください。
5. コールバックURL(Callback Url): 我々のアプリケーション用には 'http://tperry256.dreamhost.com/f8/tutorialapp/' としました - 異なるもの、つまりあなたがアプリケーションを制作するサーバーディレクトリのURLを入力してください。
6. キャンバスページURL(Canvas Page URL): http://apps.facebook.com/: 我々のアプリケーションでは 'tutorialapp' としました - 別の名前を付けてください
7. FBMLを利用する(Use FBML): 設定は変更しません。
8. アプリケーションタイプ(Application Type): 'Website'のままにしてください。
9. Facebookに追加可能(Can your application be added to Facebook): 'yes'とします - さらにオプションが拡張されます。
10. 利用規約のURL(TOS URL): 空のままで構いません。
11. ポスト/追加URL(Post-Add Url): 我々のアプリケーションでは 'http://apps.facebook.com/tutorialapp/' としました - ご自分のアプリケーション用にキャンバスページのURLを入力してください。
12. デフォルトFBML(Default FBML): 'hello'と入力してください。
13. インストールオプション(Installation Options)より下の項目は空のままにしてください。
14. サイドナビゲーションURL(Side Nav Url): 我々のアプリケーション用には 'http://apps.facebook.com/tutorialapp/' としました - ご自分のアプリケーション用にキャンバスページと同じURLをここでも入力します。
15. 連携ポイント(Integration Points)より下の項目は空のままとします。
'Submit'ボタンをクリックします。
'My Applications'ページに移動して、アプリケーションが作成されたことを確認します。ディベロッパーアプリケーションのどこにいるかによって、このページへのアクセス方法は異なります。
最新版のPHP5用クライアントライブラリをサーバーにコピーします。

downloads sectionにクライアントライブラリへのリンクがいくつかあります。UNIXシェルをお使いで、現在ディレクトリ上にいる場合は、下記のコマンドがご利用いただけます:

wget http://developers.facebook.com/clientlibs/facebook-platform.tar.gz
tar zxvf facebook-platform.tar.gz
cp facebook-platform/client/facebook.php .
cp facebook-platform/client/facebookapi_php5_restlib.php .
rm -rf facebook-platform.tar.gz facebook-platform

アプリケーションのすべてのPHPファイルの最初でインクルードする'appinclude.php'ファイルを作成してください。下記のコードをファイルにコピーペースとします:

<?php
require_once 'facebook.php';

$appapikey = '[your api_key]';
$appsecret = '[your secret]';
$facebook = new Facebook($appapikey, $appsecret);
$user = $facebook->require_login();

//[todo: change the following url to your callback url]
$appcallbackurl = 'http://tperry256.dreamhost.com/f8/tutorialapp/';

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
  if (!$facebook->api_client->users_isAppAdded()) {
    $facebook->redirect($facebook->get_add_url());
  }
} catch (Exception $ex) {
  //this will clear cookies for your application and redirect them to a login prompt
  $facebook->set_user(null, null);
  $facebook->redirect($appcallbackurl);
}

'[your api_key]'と'[your secret]'は、ディベロッパーアプリケーションの 'My Applications' に表示される'app_key'と'secret'に置き換えてください。コールバックURLの部分も忘れずにご自身のものに置き換えてください。
アプリケーションのホームページとなる'index.php'ファイルを作成します。ファイルには下記のコードをコピーペースとしてください:
```
<?php
require_once 'appinclude.php';

echo "<p>hello $user</p>";
```
あなたのアプリケーションのコールバックURLをブラウザのアドレスバーに入力してください。'index.php'が動くため、キャンバスページのURLでも構いません。いずれにしろ、現時点であなたのアプリケーションにアクセスするには、ブラウザのアドレスバーにURLを入力するしかありません。
こちらは我々のアプリケーションのコールバックURLです:
http://tperry256.dreamhost.com/f8/tutorialapp/

こちらは我々のアプリケーションのキャンバスページのURLです:
http://apps.facebook.com/tutorialapp/
'I agree' をクリックすることであなたのアプリケーションの利用規約に同意し、 'Add [あなたのアプリケーション名]' をクリックすることで追加します。
その後'index.php'の出力結果となるアプリケーションのキャンバスページにリダイレクトされます。
プロフィールページに行き、アプリケーションのプロフィールボックスをご覧ください。'hello'と表示されているはずです。 - これは先程設定したデフォルトFBMLが反映されたものです。
画面左ナビゲーションのリンクからキャンバスページに戻ることが出来ます。

↑

プロフィールボックスにFBMLを挿入する †

こちらは'index.php'の拡張版です。ユーザーがフォームから投稿した内容をプロフィールボックスに表示します。

何も入力せずに投稿すると、プロフィールボックスが消えることにご注意ください。

<?php
require_once 'appinclude.php';

echo "<p>hello $user</p>";

if (isset($_REQUEST['profiletext'])) {
  $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user);
  $facebook->redirect($facebook->get_facebook_url() . '/profile.php');
}

echo '<form action="" method="get">';
echo '<input name="profiletext" type="text" size="30" value=""><br>';
echo '<input name="submit" type="submit" value="Display text on profile">';
echo '</form>';

↑

モックAJAXを使ったプロフィールボックス †

こちらのコードは、プロフィールボックスの内容を動的に変化させる機能を持ったモックAJAXを利用したフォームを挿入します。

'index.php'ファイルの最初のif文がモックAJAXをどのように扱っているかに注目してください。

<?php
if (isset($_REQUEST['mockfbmltext'])) {
  echo $_REQUEST['mockfbmltext'];
  exit;
}

require_once 'appinclude.php';

echo "<p>hello $user</p>";

$fbml = <<<EndHereDoc
<fb:subtitle>This is the subtitle</fb:subtitle>

<form>
<input name="mockfbmltext" type="text" size="30">
<br />
<input type="submit"
  clickrewriteurl="$appcallbackurl"
  clickrewriteid="preview" value="Draw text below"
/>
<br />
<div id="preview" style="border-style: solid; border-color: black;
  border-width: 1px; padding: 5px;">
</div>
</form>
EndHereDoc;

$facebook->api_client->profile_setFBML($fbml, $user);

echo "<p>the following form was added to the profile box:</p>";

echo $fbml;

↑

MySQLを利用してカウンターを作る †

こちらの例は、サーバー上のPHPスクリプトが接続可能なMySQLデータベースを、あなたが作成可能なことを想定しています。
データベースがない場合は、作成してください。
'count'という名前のintegerカラムを持った'counter'という名前のテーブルを作成してください。

'dbappinclude.php'という名前の新しいファイルを作成して、下記のコードをコピーペースとしてください。括弧内のものは実際のデータベースホスト、ユーザー、パスワード、名前に置き換えてください。

<?php
require_once 'appinclude.php';

$dbhost = '[your db host]';
$dbuser = '[your db user]';
$dbpass = '[your db pass]';
$dbname = '[your db name]';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname, $conn);

function query($q) {
  global $conn;
  $result = mysql_query($q, $conn);
  if (!$result) {
    die("Invalid query -- $q -- " . mysql_error());
  }
  return $result;
}

こちらのバージョンの'index.php'を試してみてください。'index.php'が読み込まれる度に更新されるカウンターが表示されます。

<?php
require_once 'dbappinclude.php';

echo "<p>hello $user</p>";

$rs = query("select count from counter");
if ($row = mysql_fetch_assoc($rs)) {
  $count = $row['count'];
  query("update counter set count=count+1");
} else {
  query("insert into counter values (1)");
  $count = 1;
}

echo "<p>the count is $count</p>";

↑

サンプルコードをまとめる †

こちらはすべてのサンプルコードをまとめた'index.php'の最終バージョンです。前のサンプルで'dbappinclude.php'が作られていると想定しています。

<?php
if (isset($_REQUEST['mockfbmltext'])) {
  echo $_REQUEST['mockfbmltext'];
  exit;
}

require_once 'dbappinclude.php';

echo "<p>hello $user</p>";

$rs = query("select count from counter");
if ($row = mysql_fetch_assoc($rs)) {
  $count = $row['count'];
  query("update counter set count=count+1");
} else {
  query("insert into counter values (1)");
  $count = 1;
}

echo "<p>the count is $count</p>";

if (isset($_REQUEST['profiletext'])) {
  $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user);
  $facebook->redirect($facebook->get_facebook_url() . '/profile.php');
}

echo '<form action="" method="get">';
echo '<input name="profiletext" type="text" size="30" value=""><br>';
echo '<input name="submit" type="submit" value="Display text on profile">';
echo '</form>';

$fbml = <<<EndHereDoc
<form>
<input name="mockfbmltext" type="text" size="30">
<br />
<input type="submit"
  clickrewriteurl="$appcallbackurl"
  clickrewriteid="preview" value="Draw text below"
/>
<br />
<div id="preview" style="border-style: solid; border-color: black;
  border-width: 1px; padding: 5px;">
</div>
</form>
EndHereDoc;

$facebook->api_client->profile_setFBML($fbml, $user);

echo "<p>the following form was added to the profile box:</p>";

echo $fbml;

↑

ダウンロード †

facebook_client.tar.gz -- PHP5クライアントライブラリの最新版
tutorialapp.tar.gz -- まとめたサンプルコードのソース。ご自身のapp_key、application secret、データベース情報に置き換えてご利用ください。
tutorialapp.zip -- tutorialapp.tar.gzと同内容のzipファイル

Top / Facebook / アプリケーション制作のステップバイステップガイド

Top / Facebook / アプリケーション制作のステップバイステップガイド

アプリケーション制作のステップバイステップガイド †

目次 †

導入 †

Hello World †

プロフィールボックスにFBMLを挿入する †

モックAJAXを使ったプロフィールボックス †

MySQLを利用してカウンターを作る †

サンプルコードをまとめる †

ダウンロード †

あしあと

Table of Contents

アクセス数