こんにちは。
リサーチグループ、アルバイトの山本です。

前回の Facebook 発のフレームワーク 「 Thrift 」の調査報告 に続き、今回は Facebook 用アプリケーションの開発環境である Facebook Platform についてご紹介します。

なお、Facebook Platform は現在も開発が進んでいるため、記事の内容は執筆時点 ( 2007 年 8 月 ) のものとなります。あらかじめご了承ください。

Facebook / Facebook Platform とは

Facebook は、主にアメリカの大学生向けに作られた SNS ( ソーシャル・ネットワーキング・サービス ) としてスタートし、現在では、同じアメリカ発の SNS である MySpace に次いで世界第 2 位のユーザを抱えているサービスです。

Facebook では、一般的な SNS サービスのほかに " Facebook Developers " という開発者向けのサイトも運営しています。このサイトを利用して、Facebook 用の拡張アプリケーションを開発できます。

この Facebook Platform によるアプリケーションの開発が大変面白く感じられる理由として、開発したアプリケーションをすぐに他のユーザに使ってもらえるという点が挙げられます。

はじめから Facebook に用意されているアプリケーションとほぼ区別なく、自分が開発したアプリケーションをユーザに使ってもらうことができるのです！

何だかとても面白そうな感じがしませんか？

このFacebook Platform では、 3 つの種類のアプリケーションを開発することができます。

また、Facebook とのインタフェースとなる API の他にも、特徴的な機能が用意されています。それでは、順番にご紹介していきます。

アプリケーションの種類

Facebook Platform で作成できるアプリケーションは以下の 3 種類です。

• Web Apps
• Desktop Apps
• Internal Facebook Apps ( "coming soon" )

なお、Internal Facebook Apps がどんなアプリケーションであるかは現時点では不明です。

以下では主に Web Apps について解説します。

Web Apps の基本構造

Web アプリケーション本体は外部の Web サーバー上で動作します。
Facebook 上でユーザがそのアプリケーションを使おうとすると、Facebook からこちらの Web サーバーにリクエストが飛び、こちらのレスポンスは Facebook を経由してユーザに返されます。

認証やセッション管理はすべて Facebook 側で行われるので、アプリケーションはユーザリストを管理したり認証を実装する必要はありません。

アプリケーションからのレスポンスの形式は 2 つあります。

普通の HTML

そのまま iframe 内にレンダリングされます。

FBML

HTML を独自に拡張したもので、アプリケーションのデザインを Facebook に合わせたり、Facebook のユーザ情報を利用したレスポンスを生成したい場合に便利です。詳しくは後述します。

自分のサーバー上で Web アプリを動かすわけですから、かなり自由度の高い設計が可能です。ただし、ユーザ情報を自分のサーバーで保持することは ( ユーザ ID など一部を除いて ) 禁止されています。

Facebookへの統合

作成したアプリケーションは以下のような形で Facebook に統合することができます。

Application Directoryへの登録

公開されている Facebook アプリケーションを集めたディレクトリ。ユーザはここでアプリケーションを検索したり、カテゴリごとの一覧を見ることができます。

Left Nav

左側に表示されるサイドバー ( ユーザごとにカスタマイズ可能 ) の中にアプリケーションへのショートカットが入ります。

Facebook Canvas Page

Web Apps のレスポンスは上のように Facebook の枠内に表示されます。
この画面を " Canvas Page " と呼びます。

Profile Box

( 画像クリックで拡大表示 )

ユーザの Profile ページの中に小さなボックス ( 枠で囲まれた部分 ) を表示することができます。使い方は自由です。

Mini Feed

Mini Feed とは各ユーザの行動 ( 誰を友達に追加した、どのアプリケーションをインストールした、など ) を友達に配信するフィードです。アプリケーションからこのフィードを生成・配信することができます。

Notification

アプリケーションからユーザにメールを送ることができます。

API 概要

認証

まず、ユーザが Facebook にログインしていない場合はログインしてもらう必要があります。PHP の場合はクライアントライブラリに require_login という名前のメソッドが用意されているので、それを使うと便利です。

include_once 'config.php';

$facebook = new Facebook($api_key, $secret);
$facebook->require_frame();
$user = $facebook->require_login(); 

if (isset($_POST['to'])) {

以後、現在ログインしてアプリを使っているユーザ本人を current_user と呼ぶことにします。ログイン後は以下のような API が利用できます。

ユーザ情報の取得

users.getInfo

任意のユーザの名前、年齢、性別、所属ネットワーク、住んでいる場所、その他 Profile で設定した情報はほぼすべて取得できるようです。また、そのユーザのタイムゾーンも取得することができるので国際化対応に役立つでしょう。
ただし、ユーザがすべてのフィールドを設定してくれているとは限りません。

友達に関する情報取得

friends.get

current_user の友達のユーザ ID を取得できます。

friends.areFriends

A さんと B さんが友達であるか否かを取得できます。

friends.getAppUsers

current_user の友達の中にこのアプリケーションのユーザがいればその ID を取得できます。

Mini Feed

feed.publishStoryToUser

ユーザの Mini Feed にフィードを追加します。操作できるのは current_user のフィードのみです。

Profile Box

profile.getFBML / setFBML

任意のユーザの Profile Box の内容を取得・変更します。

Notification

notifications.get

current_user に送られた Notification の情報を取得します。

notifications.send

ユーザにメールを送ります。アプリケーションを Add しているユーザなら誰にでも送ることができます。

写真

Facebook にはユーザが写真をアップロードできる機能があり、写真に関係する API もあります。

• photos.get / upload
• photos.createAlbum / getAlbums
• photos.addTag / getTags

FQL ( Facebook Query Language )

fql.query という API を使い、SQL に似ている言語で問い合わせを行うこともできます。

SELECT name, pic FROM user WHERE uid=211031 OR uid=4801660

取得できる情報は上の API を使った場合と同じですが、

• 必要な情報だけを要求できる
• 複数のリクエストを組み合わせることができる
• 様々な情報を同じ操作で取得できる

というメリットがあります。

FBML ( Facebook Markup Language )

FBML は HTML に独自の拡張を施した言語で、アプリケーションからのレスポンスに使うことができます。独自拡張のタグを使うことにより、Facebook 風の部品を表示させたり、ユーザ情報を利用したレスポンスを生成することができます。FBML は Facebook で HTML に変換されてユーザに渡ります。

HTML のタグは基本的にそのまま使えますが、多少の制限があります。

FBML 独自拡張タグの一例を示します。

fb:dashboard

Facebook 風のダッシュボード ( 画面上部にタイトルなどが表示される部分 ) を生成します。

fb:userlink

ユーザの名前を表示し、その Profile Page へのリンクを張ります。

fb:share-button

Facebook風の " Share " ボタン ( 友達に紹介するボタン ) を生成します。

fb:photo

Facebookにアップロードされている写真を表示します。

fb:time

時刻をユーザのローカルタイムで表示します。

その他様々な拡張タグが用意されています。

セキュリティ

アプリの認証

アプリごとに割り当てられている ID と Key のペア ( アプリ登録時に取得したもの ) を使い、アプリケーションを認証します。
Optional ですが、アプリが動作しているサーバーの IP アドレスを Facebook に登録しておき、それ以外の Source IP からのアクセスを拒否させることもできます。

リクエストの正当性の確認

最初に Callback Page が呼ばれるとき、Facebook 側から auth_token が渡されます。そのトークンを引数として auth.getSession という API を呼ぶことでリクエストが Facebook から来たものであることを確認し、成功したら session_key を受け取ります。このあたりの仕事はライブラリがこっそり片付けてくれるので、あまり意識する必要はないかもしれません。

ライブラリ

PHP と Java のクライアントライブラリが提供されています。 また、非公式ですが Perl, Ruby, Python などのライブラリも存在します。
http://developers.facebook.com/resources.php

Visual Studio との連携

Desktop Apps の作成には、Visual Studio と連携して Facebook アプリケーションを作ることができる Facebook Developer Toolkit を使うと便利です。
http://www.codeplex.com/FacebookToolkit

これを使って C# や VB.NET を使った Desktop Apps を作成することができます。 また、ASP.NET を使った Web Apps を作ることも可能です。

アプリケーションの開発

では、実際にアプリケーションを開発してみましょう。

Facebook Developers のトップページから Get Started、Add Facebook Developer Application、Developer トップページの My Applications メニューの Create one を順にクリックし、いよいよアプリケーション開発のスタートです。

Facebook Developers
http://developers.facebook.com/

私は今回、『手紙が入ったボトルを海に流して、どこかの誰かに拾ってもらう』というイメージで、 送ったメッセージがいつ誰に届くか分からないという、不思議なメールアプリケーションを作ってみました。開発言語は PHP で、公式 PHP クライアントライブラリを利用しました。
このアプリケーションの開発を例に、Web Apps 開発の流れを説明します。

サーバーの準備

外から HTTP でアクセスできる環境を用意します。一般的な Web アプリケーションを提供する場合と同様です。

API Key の取得

Facebook にアプリケーションを登録し、アプリケーションの ID と Key をもらいます。Facebook API の利用にはこの ID と Key が必要になります。

設定

アプリケーションの名前、種類、開発者のメールアドレス、アイコンなどのほかに、以下のような項目を設定します。

Callback URL

ユーザがアプリを使おうとすると、このページにリダイレクトされます。

レスポンスタイプ

HTML または FBML を選択します。

Developer Mode の On / Off

これを On にすると、開発者以外はこのアプリケーションをインストールできなくなります。

コーディング

ここまでの準備が終わったら、あとはコーディングするだけです。

ただ、ローカル環境ではテストしづらいのが少し気になりました。API を呼ぶためにセッションキーが必要だったり、FBML を Facebook 側で HTML に変換してもらう必要があるためです。結局、修正するたびにサーバーに上げてテスト、という繰り返しになってしまいました。

公開準備

About Page の作成

アプリケーションの説明などを書きます。このページにはユーザがコメントやレビューを寄せられるようになっています。

5 人以上ユーザを集める

アプリケーションを公開するためには 5 人以上のユーザが必要です。

Application Directory に登録

5 人以上のユーザを集めたら、ここにアプリケーションを登録してめでたく公開、という運びになります。

現状の問題点

ドキュメント不足

FBML のドキュメントを中心に、一部不完全な部分が見られます。しかしこれは徐々に改善されてきているようです。Official Document に載っていなくても、Facebook Platform Wiki に行くと情報が見つかることもあります。

FBML 内で JavaScript が使えない

これも " Currently not allowed ( 現在使用できません ) " となっているのでいずれ改善されるかもしれませんが、現時点では FBML に JavaScript を含めることができず、不便な場合があります。

外部の CSS を読み込めない

FBML 内から外部の CSS を読み込むことができません。ただし <style> タグは使用可能です。

文字化け

Facebook では基本的に UTF-8 を使うことになっており、Web Apps のレスポンスも UTF-8 で返せば問題ないはずなのですが、FBML のタグの中に日本語を入れたとき文字化けが起こることがあるようです。

タイムゾーン絡みのバグ

users.getInfo で返されるユーザのタイムゾーンがずれていたり、fb:time で表示される時刻がずれる現象が発生します。

まとめ

実際にアプリケーションを開発してみて、Facebook Platform は全体的によく考えて作りこまれたプラットフォームであると感じました。まだ細かい問題が残ってはいますが、今後の展開が楽しみです。

ただ、現時点で既に 2000 以上のアプリケーションが公開されており、使いたいアプリケーションを探すのもユーザを獲得するのも、どちらも大変だなという印象を持ちました。