Ｆlash Platform と Ｆacebook プラットフォームで開発するアプリケーションのアーキテクチャーの理解

リッチなユーザ体験を開発できる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上のアプリにユーザがリクエストすると（例えば、http://apps.facebook.com/someapp/）、 Facebookのクロームを含むページを返します。このページ内にはiFrameタグがあり、iFrame内にあなたのアプリがロードされます（図 1）。

1. Facebook上でユーザがアプリにアクセスします。つまり、ブラウザーがFacebookにHTTPリクエストを行います。
2. Facebookサーバーは、HTML／JavaScriptページを返します。このページには、FacebookのクロームとiFrameタグが含まれています。
3. ブラウザーは、あなたのサーバーに対して、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のログインページへリダイレクトするようにしなければなりません。
4. アプリケーションサーバーページが処理され、必要に応じて、Graph APIを使ったFacebookへのコールや、データベースや他のサーバーへのコールが行われます。FacebookのAPIをコールする際は、全てのコールにおいてセッションcookieから取得したaccess_tokenを含める必要があります。
5. Facebookサーバーは、リクエストされたデータをJSON形式であなたのサーバーへと返します。
6. あなたのサーバーがHTML／JavaScriptページをユーザのブラウザーに返し、iFrame内でページが表示されます。

さらにユーザがアプリを操作することで、以下のような処理が行われます。

• アプリ内に新しいサーバーサイドページへのリンクが含まれていて、ユーザがそれをクリックした場合、ステップ3～6が繰り返されます。
• また、アプリ内にあなたのサーバーに対する非同期型JavaScriptコールが含まれている場合、図1のステップ7～10の処理が行われます。ステップ 3～6と異なりこの場合、ユーザのブラウザーにはJSON形式で返され、ページ内のJavaScriptで処理が行われます。
• その他にも、Facebook JavaScript SDKを使えば、ページ内のJavaScriptから、あなたのアプリケーションサーバーを介さずに直接Facebookサーバへコールすることも可能です（図1のステップ11～12）。

Note: 以前はFBMLを使ってFacebookに対してAPIリクエストを送信することができましたが、FBMLは2012年1月1日から非推奨とされています。

Non-Flashアプリでの基本を押さえたところで、次はいよいよFlashアプリの場合について説明していきましょう（図2）。

1. Facebook上でユーザがアプリにアクセスします。つまり、ブラウザーがFacebookにHTTPリクエストを行います。
2. Facebookサーバーは、HTML／JavaScriptページを返します。このページには、FacebookのクロームとiFrameタグが含まれています。
3. ブラウザーは、あなたのサーバーに対して、iFrame内に表示するページをリクエストします。先程の場合、表示するページはアプリケーションサーバーページかHTMLページでしたが、ここではそれらのページ内にSWFファイル（Flashアプリ）を埋め込みます。
4. あなたのサーバーがHTML／JavaScriptページをユーザのブラウザーに返し、iFrame内でページが表示されます。このページには、先程と同様にユーザがFacebookにログインしているかをチェックするためのロジックを含める必要があります。ただし、このチェックロジックは、Adobe ActionScript 3 SDK for Facebook Platformを使ってSWF内に実装することも可能です。また、アプリ内にcookieの変数「access token」の有無をチェックするコードを含める必要があります。もし、access tokenがない場合は、Facebookのログインページへリダイレクトするようにしなければなりません。
5. ユーザのブラウザーはあなたのサーバーに対して別途リクエストを行います。今度はiFrame内のHTMLページに埋め込むSWFを取得するためです。
6. あなたのサーバーはSWFファイルを返します。
7. ユーザがアプリを操作すると、Adobe ActionScript 3 SDK for Facebook Platformを使って、Facebookサーバーへ非同期型のコールを行います。全てのAPIコールにおいてaccess tokenを含める必要がありますが、これはSDKにより自動で行われます。

Flash Playerのセキュリティ制約により、SWFファイルがデータコールを行うことができるのは、当該SWFファイルの供給元となったサーバー（つまりあなたのサーバー）、および当該SWF ファイルの供給元サーバーを記したクロスドメインポリシーファイルの配置されたサーバーに対してのみです。つまり、SWF ファイルからFacebookサーバーへ直接コールするためには、「SWFファイルにFacebookサーバーへのアクセスを許可する」クロスドメインポリシーファイルがFacebookサーバーに配置されている必要があります。以下は、Facebookのクロスドメインポリシーファイルの例です。ここでは「ワイルドカード「*」を使って、あらゆるサーバーから供給されたSWFファイルのアクセスを許可しています。

8. FacebookサーバーがJSON形式データをアプリへ返します。
9. ユーザがアプリを操作した際に、（サーバーにデータを保存したり、何らかのサーバーサイド処理を行うなどのために）リモートプロシージャコールメソッドを使ってあなたのサーバーへ非同期型のコールを行うこともできます。リモートプロシージャコールの手段としては、Flexで開発したFlashアプリの場合、HTTP／Webサービス／Flash Remotingなどが使えます。なお、これらのうちFlash Remotingを使うと、最速かつ最軽量のコールを実現することができます。というのも、Flash Remotingは、サーバーとFlash Player間のデータ交換に、オープンソースのバイナリプロトコル「Action Message Format（AMF）」を使っているからです。
10. 必要に応じて、Facebookサーバーとやり取りを行います。
11. Facebookサーバーから返ってきたJSON形式データを、サーバーサイドコードで処理します。
12. あなたのサーバーからブラウザーのFlashアプリにデータを返します。

「外部サイト上のアプリ」（図3）は「Facebook上のアプリ」と非常に似ています。主な違いは、ログインやアプリ認証の扱いです。Facebook JavaScript SDKとAdobe ActionScript 3 SDK for Facebook Platformを使えば、Facebookのログイン／認証ページへリダイレクトさせなくても、それらをポップアップウインドウで表示することができま す。FacebookログインはJavaScriptで扱いますが、通常はそのJavaScriptコードを書く必要はありません。Adobe ActionScript 3 SDK for Facebook Platformに用意されているクラスのメソッドを呼び出すだけでいいのです。ActionScript SDKのコード（特にfacebook.graph.core.FacebookJSBridgeクラスのメソッド）がFacebook JavaScript SDKのメソッドを呼び出します。そのため、FlashアプリのラッパーページにはFacebook JavaScript SDKを含める必要があります。

1. Facebook上でユーザがアプリにアクセスします。つまり、ブラウザーがFacebookにHTTPリクエストを行います（このリクエストの対象は、アプリケーションサーバーページやHTMLページですが、これ以降は便宜上、HTMLページとして表現します）。
2. あなたのサーバーは、SWFファイルを埋め込むことになるHTML／JavaScriptページを返します。このラッパーページには、Facebook JavaScript SDKが含まれている必要があります。Facebook JavaScript SDKのメソッドは、Adobe ActionScript 3 SDK for Facebook Platformによって呼び出されます。
3. ブラウザーはあなたのサーバーに対して、HTMLページ内に埋め込むSWFファイルのリクエストを行います。
4. あなたのサーバーがSWFファイルを返します。アプリはAdobe ActionScript 3 SDK for Facebook Platformのコードを使って、このユーザとアプリのaccess tokenがあるかをチェックします。もしなければ、ブラウザーのポップアップウインドウにFacebookのログイン／認証ページが表示されます。
5. ユーザがアプリを操作すると、Adobe ActionScript 3 SDK for Facebook Platformを使って、Facebookサーバーへ非同期型のコールを行います。全てのAPIコールにおいてaccess tokenを含める必要があります（これはSDKにより自動で行われます）。また、場合によっては、SWFファイルにFacebookサーバーへのアクセスを許可するクロスドメインポリシーファイルがFacebookサーバーに配置されている必要があります。
6. FacebookサーバーがJSON形式データをあなたのサーバーへ返し、それをアプリが処理します。
7. あなたのサーバーにデータを保存したり、何らかのサーバーサイド処理を行う場合は、リモートプロシージャコールメソッドを使ってコールを行います（HTTP／Webサービス／Flash Remotingなど）。
8. 必要に応じて、Facebookサーバーとやり取りを行います。
9. Facebookサーバーから返ってきたJSON形式データを、サーバーサイドコードで処理します。
10. あなたのサーバーからブラウザーのFlashアプリにデータを返します。

次は、デスクトップアプリのアーキテクチャです（図4）。「外部サイト上のアプリ」と非常に似ていますが、アプリをインストールするとそのままユーザのマ シンに残り続けるという点と、ログインはAdobe ActionScript 3 SDK for Facebook Platformだけで実装できるという点が異なります。デスクトップアプリとして配布するには、AIRアプリとして開発する必要があります。

1. ユーザがデスクトップAIRアプリをインストールして起動します。アプリはAdobe ActionScript 3 SDK for Facebook Platformのコードを使って、このユーザとアプリのaccess tokenがあるかをチェックします。もしなければ、OSのウインドウにFacebookのログイン／認証ページが表示されます。
2. SWFファイル内のActionScriptコードから、Adobe ActionScript 3 SDK for Facebook Platformを使って、直接Facebookサーバーに非同期型のコールを行います。各APIコールにおいて、自動でaccess tokenが渡されます。
3. FacebookサーバーがJSON形式データをあなたのサーバーへ返し、それをアプリが処理します。
4. あなたのサーバーにデータを保存したり、何らかのサーバーサイド処理を行う場合は、リモートプロシージャコールメソッドを使ってコールを行います（HTTP／Webサービス／Flash Remotingなど）。
5. 必要に応じて、Facebookサーバーとやり取りを行います。
6. Facebookサーバーから返ってきたJSON形式データを、サーバーで処理します。
7. あなたのサーバーからデスクトップAIRアプリにデータを返します。

モバイルアプリはデスクトップアプリの場合と似ています。インストール後アプリはユーザのデバイスに残り続けますし、ログインはAdobe ActionScript 3 SDK for Facebook Platformだけで実装できます。AndroidやBlackberry Tablet OSを搭載したデバイスの場合、アプリはAIRアプリとして配布できます（図5）。

1. ユーザがモバイルAIRアプリをインストールして起動します。アプリはAdobe ActionScript 3 SDK for Facebook Platformのコードを使って、このユーザとアプリのaccess tokenがあるかをチェックします。もしなければ、Facebookのログイン／認証画面が表示されます。
2. SWFファイル内のActionScriptコードから、Adobe ActionScript 3 SDK for Facebook Platformを使って、直接Facebookサーバーに非同期型のコールを行います。各APIコールにおいて、自動でaccess tokenが渡されます。
3. FacebookサーバーがJSON形式データをあなたのサーバーへ返し、それをアプリが処理します。
4. あなたのサーバーにデータを保存したり、何らかのサーバーサイド処理を行う場合は、リモートプロシージャコールメソッドを使ってコールを行います（HTTP／Webサービス／Flash Remotingなど）。
5. 必要に応じて、Facebookサーバーとやり取りを行います。
6. Facebookサーバーから返ってきたJSON形式データを、サーバーで処理します。
7. あなたのサーバーからモバイルAIRアプリにデータを返します。

iOSデバイスの場合は、Flash Builder 4.5以降やFlash Professional CS5以降を使ってAIRアプリをネイティブiOSアプリへの変換してから配布する必要があります。

アプリの種類ごとにそのアーキテクチャダイアグラムと処理のフローを解説しました。「Create your first Flex and Facebook application」シリーズでは、Flexを使って、デスクトップアプリ／外部サイト上のアプリ／Facebook上のアプリを開発する方法を詳しく解説しています。