図6●作成するアプリの外観を決める
図6●作成するアプリの外観を決める
[画像のクリックで拡大表示]

 Facebook上にアプリが登録できたので、これから実際に開発を行います。まず、アプリの具体的な内容を決めましょう。図6が実際に作成する画面イメージです。中央の部分がインラインフレームで、アプリが表示されるスペースになります。今回はシンプルに、アップロード機能とアップロードされた写真を表示する機能のみを実装します。

 この機能だけだと、通常のWebアプリケーションとあまり変わりません。そこで、Facebookアプリならではの機能を三つ盛り込みましょう。(1)OAuthを用いてアプリの許可をしたユーザーのみ投稿できるようにする、(2)投稿された写真はFacebookにアップロードするようにする、(3)複数のFacebookページにアプリが登録された場合は、Facebookページごとに写真データを管理する、の三つの機能です。

 この3点を盛り込むと、だいぶFacebookアプリらしくなりますね。これらはFacebookが提供するAPIとPHP用のSDKを活用すれば簡単に実装できます。それでは、内容が決まったところで実際に開発を進めていきます。

テストページの作成とタブの追加

 アプリの動作を確認するために、テスト用のFacebookページを事前に用意しておきましょう。http://www.facebook.com/pages/create.phpにアクセスすると、Facebookページの作成画面が表示されます。「慈善活動またはコミュニティ」を選択し、任意のページ名を入力して登録します。ここではテストとわかる名前を適宜付けておきましょう。Facebookページの規約に同意できればチェックを入れて、「スタート」ボタンを押します。

 その後のステップは、すべてスキップして構いません。Facebookページが作成できたら次は作成したアプリをタブに登録します。タブの登録方法はいくつかありますが、今回は手動で行います。「http://www.facebook.com/add.php?api_key={App ID}&pages=1」({App ID}の部分は作成したアプリのApp IDに置き換えてください)にアクセスすると、図7の画面に遷移します。「アプリケーションの追加先」の中から、アプリを追加したいFacebookページを選択するとボタンが表示されるので、「写真展を追加する」ボタンをクリックします*2。すると、Facebookページのタブに写真展が追加されます(図8)。

図7●アプリケーションの追加先から選択する
図7●アプリケーションの追加先から選択する
図8●Facebookページのホームに登録したアプリが表示される
図8●Facebookページのホームに登録したアプリが表示される