リッチなユーザ体験を開発できるFlash Platform、リッチなソーシャル体験を開発できるFacebook Platform、この2つのプラットフォームを組み合わせれば、インタラクティビティと応答性、表現力に優れ、さらにソーシャル機能も盛り込んだキラーアプリケーションを開発することが可能となります。
この記事では、Flash PlatformとFacebook Platformを使用したアプリのアーキテクチャーについて解説します。開発できるアプリの種類と、それらのアプリがどのようにサーバーやFacebookと連携するのかについて説明します。
合わせて「The technologies for building applications on the Flash and Facebook Platforms」（英語）もお読みください。
開発できるアプリの種類
Facebookと連携するFlashアプリを開発する場合、「Facebook上のアプリ」「外部サイト上のアプリ」「デスクトップアプリ」「モバイルアプリ」の4種類から選べます。
Facebookで開発できるFlashアプリの種類
Facebook上のアプリ
アプリ自体はあなたのサーバーにホストすることになりますが、ユーザはFacebook経由でアプリにアクセスします。また、アプリはFacebookのクロームを含むページの中に表示されるため、ユーザから見るとFacebook上にあなたのアプリがあるように感じます。友人からの招待やアプリ検索などで「Facebook上のアプリ」へアクセスすると、Facebookサーバーはそのリクエストをあなたのサーバーへと中継（プロキシ）し、アプリのページ（Flashアプリが埋め込まれたHTMLやJavaScriptを含む）を取得し、Facebook上に表示します。そのため、ユーザはFacebookから離れることなくアプリを利用でき、シームレスなユーザ体験を提供することができます。
Flashアプリは、Facebook Graph APIのラッパーである「Adobe ActionScript 3 SDK for Facebook Platform」を使って、Facebookとデータのやり取りを行います。このようなアプリの例としては、「Who Has the Biggest Brain」やZyngaの「Texas Hold'em Poker」があります。
外部サイト上のアプリ
こちらもアプリ自体はあなたのサーバーにホストすることになります。しかしユーザは、Facebook経由ではなく、URLを介してアプリにアクセスすることになります。このようなアプリでFacebookのソーシャル機能を利用するには、Adobe ActionScript 3 SDK for Facebook PlatformとFacebook JavaScript SDKを使って、アプリやFacebookにシングルサインイン／アウトする仕組みを追加する必要があります。アプリにログイン／アウトボタンを設置し、ユーザがログインした際には、ポップアップウインドウをなどを使ってFacebookログインやアプリ認証ダイアログ（場合によっては両方）が表示されるようにします。セキュリティ面を考慮すれば、ポップアップウインドウでの表示は必須でしょう。そうすることで、ユーザは自分自身がFacebookにログインしようとしていることを把握できるからです。
Facebookにシングルサインインすることで、アプリのログインプロセスがすっきりとするほか、ユーザのプロフィールにアクセスできるようになり、ユーザごとにサイトや体験をカスタマイズすることができます（例えば、ユーザ名や写真を表示したり、友達が購入した商品を掲載したり、友達のコメントやレビューを表示したり、ユーザのウォールや友達のニュースフィードにコメントやレビューを投稿したりするなど）。「Facebook上のアプリ」と同様にFlashアプリは、Facebook Graph APIのラッパーである「Adobe ActionScript 3 SDK for Facebook Platform」を使って、Facebookとデータのやり取りを行います。このようなアプリの例としては、「Ben and Jerry's」や「City Search」があります。
デスクトップアプリ
「外部サイト上のアプリ」と似ていますが、Flashアプリをサーバー上にホストするかわりに、デスクトップ用AIRアプリとして配布するという点が異なります。「外部サイト上のアプリ」同様に、デスクトップアプリでも「Adobe ActionScript 3 SDK for Facebook Platform」を使って、ログイン機能やFacebookのソーシャル機能を実装します。このようなアプリの例としては、「Seesmic for Facebook」や「Nomee」があります。
モバイルアプリ
デスクトップアプリと似ていますが、アプリの配布先がPCではなくデバイスとなります。他の種類のアプリ同様に、モバイルアプリでも「Adobe ActionScript 3 SDK for Facebook Platform」を使って、ログイン機能やFacebookのソーシャル機能を実装します。このようなアプリの例として、Zyngaの「Farmville」があります。
Facebook上のアプリ：Non-Flashアプリの場合
Facebook上のアプリにユーザがリクエストすると（例えば、http://apps.facebook.com/someapp/）、Facebookのクロームを含むページを返します。このページ内にはiFrameタグがあり、iFrame内にあなたのアプリがロードされます（図1）。
- Facebook上でユーザがアプリにアクセスします。つまり、ブラウザーがFacebookにHTTPリクエストを行います。
- Facebookサーバーは、HTML／JavaScriptページを返します。このページには、FacebookのクロームとiFrameタグが含まれています。
- ブラウザーは、あなたのサーバーに対して、iFrame内に表示するページをリクエストします。通常、このリクエストされるページは（PHP、ColdFusion、JSPなどの）アプリケーションサーバーページですが、HTMLページでも構いません。このページには、ユーザがFacebookにログインしているかをチェックするためのロジックを含める必要があります。ユーザがFacebookにログインすると、「fbs_applicationID」というcookieにセッションデータが保存されます。このapplicationIDは、Facebook Developer applicationにアプリを登録した際に割り振られるIDです。またcookieには「access_token」という変数があり、これを取得し、ログイン後に行うFacebook Graph APIへの呼び出し全てにおいてこの変数を渡すことになります。もしユーザがFacebookにログインしていない状態、つまりcookieに変数「access_token」が保持されていない場合は、Facebookのログインページへリダイレクトするようにしなければなりません。
- アプリケーションサーバーページが処理され、必要に応じて、Graph APIを使ったFacebookへのコールや、データベースや他のサーバーへのコールが行われます。FacebookのAPIをコールする際は、全てのコールにおいてセッションcookieから取得したaccess_tokenを含める必要があります。
- Facebookサーバーは、リクエストされたデータをJSON形式であなたのサーバーへと返します。
- あなたのサーバーがHTML／JavaScriptページをユーザのブラウザーに返し、iFrame内でページが表示されます。
さらにユーザがアプリを操作することで、以下のような処理が行われます。
- アプリ内に新しいサーバーサイドページへのリンクが含まれていて、ユーザがそれをクリックした場合、ステップ3～6が繰り返されます。
- また、アプリ内にあなたのサーバーに対する非同期型JavaScriptコールが含まれている場合、図1のステップ7～10の処理が行われます。ステップ3～6と異なりこの場合、ユーザのブラウザーにはJSON形式で返され、ページ内のJavaScriptで処理が行われます。
- その他にも、Facebook JavaScript SDKを使えば、ページ内のJavaScriptから、あなたのアプリケーションサーバーを介さずに直接Facebookサーバへコールすることも可能です（図1のステップ11～12）。
以前はFBMLを使ってFacebookに対してAPIリクエストを送信することができましたが、FBMLは2012年1月1日から非推奨とされています。
Facebook上のアプリ：Flashアプリの場合
Non-Flashアプリでの基本を押さえたところで、次はいよいよFlashアプリの場合について説明していきましょう（図2）。
- Facebook上でユーザがアプリにアクセスします。つまり、ブラウザーがFacebookにHTTPリクエストを行います。
- Facebookサーバーは、HTML／JavaScriptページを返します。このページには、FacebookのクロームとiFrameタグが含まれています。
- ブラウザーは、あなたのサーバーに対して、iFrame内に表示するページをリクエストします。先程の場合、表示するページはアプリケーションサーバーページかHTMLページでしたが、ここではそれらのページ内にSWFファイル（Flashアプリ）を埋め込みます。
- あなたのサーバーがHTML／JavaScriptページをユーザのブラウザーに返し、iFrame内でページが表示されます。このページには、先程と同様にユーザがFacebookにログインしているかをチェックするためのロジックを含める必要があります。ただし、このチェックロジックは、Adobe ActionScript 3 SDK for Facebook Platformを使ってSWF内に実装することも可能です。また、アプリ内にcookieの変数「access token」の有無をチェックするコードを含める必要があります。もし、access tokenがない場合は、Facebookのログインページへリダイレクトするようにしなければなりません。
- ユーザのブラウザーはあなたのサーバーに対して別途リクエストを行います。今度はiFrame内のHTMLページに埋め込むSWFを取得するためです。
- あなたのサーバーはSWFファイルを返します。
-
ユーザがアプリを操作すると、Adobe ActionScript 3 SDK for Facebook Platformを使って、Facebookサーバーへ非同期型のコールを行います。全てのAPIコールにおいてaccess tokenを含める必要がありますが、これはSDKにより自動で行われます。
Flash Playerのセキュリティ制約により、SWFファイルがデータコールを行うことができるのは、当該SWFファイルの供給元となったサーバー（つまりあなたのサーバー）、および当該SWFファイルの供給元サーバーを記したクロスドメインポリシーファイルの配置されたサーバーに対してのみです。つまり、SWFファイルからFacebookサーバーへ直接コールするためには、「SWFファイルにFacebookサーバーへのアクセスを許可する」クロスドメインポリシーファイルがFacebookサーバーに配置されている必要があります。以下は、Facebookのクロスドメインポリシーファイルの例です。ここでは「ワイルドカード「*」を使って、あらゆるサーバーから供給されたSWFファイルのアクセスを許可しています。
<cross-domain-policy> <site-control permitted-cross-domain-policies="master-only"/> <allow-access-from domain="*" secure="false"/> </cross-domain-policy>
- FacebookサーバーがJSON形式データをアプリへ返します。
- ユーザがアプリを操作した際に、（サーバーにデータを保存したり、何らかのサーバーサイド処理を行うなどのために）リモートプロシージャコールメソッドを使ってあなたのサーバーへ非同期型のコールを行うこともできます。リモートプロシージャコールの手段としては、Flexで開発したFlashアプリの場合、HTTP／Webサービス／Flash Remotingなどが使えます。なお、これらのうちFlash Remotingを使うと、最速かつ最軽量のコールを実現することができます。というのも、Flash Remotingは、サーバーとFlash Player間のデータ交換に、オープンソースのバイナリプロトコル「Action Message Format（AMF）」を使っているからです。
- 必要に応じて、Facebookサーバーとやり取りを行います。
- Facebookサーバーから返ってきたJSON形式データを、サーバーサイドコードで処理します。
- あなたのサーバーからブラウザーのFlashアプリにデータを返します。
ここまでで、Facebookと連携するFlashアプリを開発する場合の「Facebook上のアプリのアーキテクチャ」を解説しました。続いては「外部サイト上のアプリ」との連携を見て行きましょう。
この記事の続きは、Dreamweaverデベロッパーセンターにてご覧ください。
