Eclipse Galileo を使って Facebook アプリケーションを開発する

レストラン検索アプリケーションを作成してデバッグし、デプロイする

この記事の対象読者は、Galileo の成熟した Web Tools Platform リリースを使ってレストラン検索用の Facebook アプリケーションを開発してデバックし、デプロイする方法を習得したいと思っている Eclipse 開発者です。この記事では、Facebook Application API と Facebook Connect API のさまざまな側面を利用します。

Suresh Krishna, Software Developer, Freelance Developer

Suresh Krishna は 2000年からプログラマーとしてドメイン・モデリング、IDE、そして生産性向上ツールに取り組んできました。IDE の進化と開発者の生産性に触発された彼は、主に Eclkipse プラグインおよび RCP アプリケーションを専門としています。Eclipse の良さをユーザー、開発者、企業のコミュニティーに説くとともに、エクストリーム・プログラミングとスクラムを愛好しています。余暇の楽しみは、ブログの作成と製品の評価です。



2009年 12月 22日

Eclipse Galileo

Eclipse Galileo は、33 のプロジェクトからなる Eclipse プロジェクトの年次リリースです。44 の団体からの 380 人のコミッターによる 2400 万行のコードが含まれるGalileo リリースには、Eclipse コミュニティーの重要な 3 つの傾向を反映した新機能が追加されています。その傾向とは、企業における Eclipse 採用の拡大、Eclipse モデリング技術の革新、そして Eclipse ランタイム技術の拡張です。

Galileo を導入する

この記事のサンプル・アプリケーション「Facebook SimpleRestaurantSearch」の開発に取り掛かる前に、まずは Eclipse のGalileo パッケージ (「参考文献」を参照) をダウンロードしてインストールしてください。セットアップ方法については、このセクションで説明します。

Galileo をダウンロードする

Galileo パッケージは Eclipse の次期インクリメンタル・リリースであるため、Eclipse プラットフォームの新しいインストール環境を意味します。すべての Eclipse リリースと同じく、多数のパッケージのなかから開発の必要に応じてパッケージを選択できるようになっています。

この記事で説明する Facebook アプリケーション用には、Eclipse IDE for Java™ EE Developers バージョンをダウンロードします。このバージョンには Facebook アプリケーションを開発してデプロイするために必要なものがすべて含まれているからです。ご使用のオペレーティング・システムに対応するバージョンを選択し、適切なミラーを選んでダウンロードしてください (「参考文献」を参照)。ダウンロード・ファイルはかなり大きく、プラットフォームによっては 190 MB 近くもあるので、辛抱強くダウンロードが完了するのを待ってください。

図 1 は、Eclipse Web サイトに掲載されている、パッケージの比較表です。

図 1. パッケージ比較表
この図には Eclipse Web サイトに掲載されている、パッケージの比較表が示されています。

ダウンロードが完了したら、Eclipse をインストールする場所にパッケージを解凍し、Eclipse アイコンをダブルクリックして Eclipse を実行します。ワークスペースを選択すると Eclipse の「Welcome (ウェルカム)」ページが表示されるので、このページから「Workbench」アイコン (図 2 に示すウェルカム画面の右上隅にある矢印) を選択します。

図 2. Eclipse の「Welcome (ウェルカム)」画面
Eclipse の「Welcome (ウェルカム)」画面のスクリーンショットです。

Eclipse で Tomcat をセットアップする

Eclipse Galileo では、あらゆる Web アプリケーションを開発、デバッグ、デプロイできるように多種多様なサーバーを統合できるようになっています。この記事の「Facebook SimpleRestaurantSearch」アプリケーションでは、Tomcat をアプリケーション・サーバーとして使用します (「参考文献」を参照)。Tomcat をローカル・フォルダーにダウンロードして、解凍してください。

Eclipse に切り替えて、「Servers (サーバー)」ビューを開きます (図 3 を参照)。

図 3. Eclipse の「Servers (サーバー)」ビュー
図 3 には、Eclipse のサーバー・ビューが示されています。

「Servers (サーバー)」ビューを右クリックし、「New (新規)」 > 「Server (サーバー)」の順にメニュー・オプションを選択します (図 4 を参照)。

図 4. 新規サーバー作成用のメニュー・オプション
この図には、新規サーバー作成用のメニュー・オプションが示されています。

表示される画面で適切なオプションを選択して新規サーバーを定義します。サーバーのタイプとしては、「Apache」カテゴリー配下の「Tomcat v6.0 Server」を選択してください。サーバーにはアプリケーションに適した意味のある名前を付けることができます (この例では、「EclipseBook-Host」という名前を付けます) 。サーバー名を入力したら、「Next (次へ)」をクリックします (図 5 を参照)。

図 5. 新規サーバーを定義する
図 5 は、新規サーバーの定義方法を示しています。

次のウィザード・ウィンドウでは、Tomcat のインストール・ディレクトリーを入力し、必要な JRE を選択した後、「Finish (完了)」をクリックします (図 6 を参照)。

図 6. インストール・ディレクトリーを設定する
インストール・ディレクトリーの設定方法を示すスクリーンショットです。

Tomcat が正しく構成されると、今作成したサーバーが「Servers (サーバー)」ビューに表示されます。デフォルトでは、サーバー・ポートは 8080 に設定されます (図 7 を参照)。

図 7. 「Servers (サーバー)」ビューに表示されたサーバー
「Servers (サーバー)」ビューに表示されたサーバーを示す図です。

今度は動的 Web プロジェクトをセットアップして、Eclipse からアプリケーションの Web インターフェースを操作できるようにします。

動的 Web プロジェクトをセットアップする

「Project Explorer (プロジェクト・エクスプローラー)」で右クリックし、「New (新規)」を選択して表示されるメニューに「Dynamic Web Project (動的 Web プロジェクト)」があれば選択します (図 8 を参照)。メニューに「Dynamic Web Project (動的 Web プロジェクト)」が表示されていない場合は「Other (その他)」を選択し、表示されるウィザード画面でツリーから「Web」フォルダー配下にある「Dynamic Web Project (動的 Web プロジェクト)」を選択します。

図 8. 動的 Web プロジェクトをセットアップする
この図には、動的 Web プロジェクトをセットアップするための操作画面が示されています。

プロジェクトに名前を付け、「Target runtime」を先ほど作成した Tomcat サーバーの名前に設定します。この例で Tomcat サーバーに付けた名前は「EclipseBook-Host」です。「Finish (完了)」をクリックすると、Tomcat サーバーとデフォルトの Web 構成を使用するように構成された Web プロジェクトが作成されます (図 9 を参照)。

図 9. Web プロジェクトを作成する
Web プロジェクトを作成している画面です。

Facebook Java API のダウンロードとセットアップ

2008年 5月以降、Facebook では公式 Java クライアントのサポートをすべて中止し、Java での Facebook アプリケーション開発に関与するユーザーに対し、巷に出回っている各種サード・パーティー製クライアントのいずれかを使用するように指示しています。よく使用されている Facebook Java API の 1 つは、Google にあります (「参考文献」を参照)。Google のこのプロジェクトでは、放棄されたコード・ベースを保守およびサポートし、さらに拡張して Java 開発者向けに高品質で最新バージョンの Facebook API クライアントを提供することを目的としています (図 10 を参照)。

図 10. Facebook Java API
図 10 には、Facebook Java API が示されています。

最新の Java Facebook API (V3.0.0) をローカル・フォルダーにダウンロードして、ファイルを解凍してください (図 11 を参照)。

図 11. 最新の Facebook Java API をダウンロードする
最新の Facebook Java API のダウンロードが表示された画面です。

この Facebook Java API には、Facebook Application API やその他の依存 JAR に関連するライブラリーがすべて含まれています (図 12 を参照)。サンプル・アプリケーションのソース・コードについては、「ダウンロード」を参照してください。注意する点として、この記事に付属の zip ファイルには JAR ファイルは含まれていません。JAR ファイルは Facebook Java API と一緒にダウンロードされるためです。

図 12. Facebook Application API およびその他の依存 JAR の関連ライブラリー
図 12 には、Facebook Application API およびその他の依存 JAR に関連するライブラリーが示されています。

Facebook Java Client JAR のすべてを「SimpleRestaurantSearch」アプリケーションの「lib」フォルダーにコピーしてください。これで、プロジェクトが Facebook API を使用できるようになります (図 13 を参照)。

図 13. すべての Facebook Java Client JAR を「lib」フォルダーにコピーする
この図には、すべての Facebook Java Client JAR がコピーされた「lib」フォルダーが示されています。

Facebook アプリケーションの作成

Facebook には、Web 開発者や企業の経営者、そしてソーシャル・ネットワークのマニアを含め、あらゆる人が参加しています。そんな Facebook プラットフォーム上に Facebook Application API を利用したアプリケーションを作成すれば、その目的が製品やサービスの宣伝であろうと、あるいは友達との単なる情報共有であろうと、あらゆるユーザーがそれを見られるようになります。

Facebook アプリケーションを作成するためには、まず初めに Facebook Platform API キーを取得する必要があります。Facebook デベロッパー・アプリケーションで新規アプリケーションを作成する手順は以下のとおりです。

「Get Started」サイトにアクセスすると、アプリケーションのセットアップ手順の概要が見られます (「参考文献」を参照)。自分のユーザー・プロフィールに進んで開発者アプリケーションを追加するには、参考リンクとして記載された「Go to Facebook Developer App」をクリックしてください (図 14 を参照)。まだログインしていない場合はログイン画面が表示され、ログイン情報の入力が促されます。すでにログインしている場合には、ユーザーに対して開発者アプリケーションを追加する許可を求めてから、アプリケーションがプロフィールに追加されます。

図 14. 「Get Started」サイトの画面
図 14 には、「Get Started」サイトの画面が示されています。

開発者向けのホーム・ページにはニュース、近況、そして Facebook Platform API 関連の記事が記載されています。

新規アプリケーションを作成する場合、このホーム・ページ右上の「Set Up New Application (新規アプリケーションを作成)」をクリックして表示される画面で、「Application Name (アプリケーション名)」フィールドに、アプリケーションの名前を入力します (図 15 を参照)。アプリケーションのアイコンとロゴを作成済みであれば、次の画面でその情報を入力することができます。Facebook の利用規約に同意してから「Save Changes」(もしくは「Create Application」) をクリックします。

図 15. アプリケーションに名前を付ける
アプリケーションの名前を入力する画面です。

次の画面 (図 16 を参照) には、重要な情報が表示されます。その後のアプリケーション開発のために、「Application ID (アプリケーション ID)」、「API Key (API キー)」、「Secret Key (秘密鍵)」を必ず記録しておいてください。

図 16. アプリケーション ID、API キー、秘密鍵が表示されている画面
図 16 には、アプリケーション ID、API キー、秘密鍵が表示された画面が示されています。

必要な情報を入力し終わったら、新規アプリケーションを保存します。すると、「RestaurantSearch」アプリケーションの概要が表示されます (図 17 を参照)。

図 17. アプリケーションの概要
この図にはアプリケーションの概要が示されています。

ここまでの手順で、「SimpleRestaurantSearch」という名前のアプリケーションを作成して Facebook に登録しました。次は、単純なサーブレットを作成して、Facebook API キーの認証機能を追加する番です。「Project Explorer (プロジェクト・エクスプローラー)」で「SimpleRestaurantSearch」プロジェクトを展開し、「src」フォルダー内にサーブレットを作成します。それには「src」フォルダーで右クリックし、「New (新規)」 > 「Servlet (サーブレット)」の順に選択し、サーブレットには「RestaurantSearch」という名前を付け (「Class name (クラス名)」に「RestaurantSearch」と入力し)、パッケージ名として「com.devworks.facebook」と入力します (「Java package (Java パッケージ)」に「com.devworks.facebook」と入力します)。この作業が終わったら、「Next (次へ)」をクリックして、サーブレットの初期化パラメーターを入力します (図 18 を参照)。

図 18. 単純なサーブレットを作成する
単純なサーブレットを作成している画面です。

次の画面 (図 19 を参照) では初期化パラメーター API_KEY を入力します。その値にはこの Facebook アプリケーションを最初に作成したときに割り当てられた API キーを入力します。

図 19. 初期化パラメーター API_KEY を入力する
図 19 には、初期化パラメーター API_KEY を入力している画面が示されています。

続いて初期化パラメーター SECRET_KEY を追加し、その値には Facebook アプリケーションを作成したときに割り当てられた秘密鍵を入力します。

以上の作業が完了したら、API_KEYSECRET_KEY を使って Facebook アプリケーションを認証する番です。ログインが成功すると、単純な「Hello World」メッセージが出力されます。

リスト 1 は、RestaurantSearch サーブレットに含まれる doGet メソッドの重要なセグメントです。

リスト 1. doGet メソッド
01   protected void doGet(HttpServletRequest request,
02     HttpServletResponse response) throws ServletException,IOException {
03 
04     String apiKey = getServletConfig().getInitParameter("API_KEY");
05     String secretKey = getServletConfig().getInitParameter("SECRET_KEY");
06     HttpSession session = request.getSession();
07     String sessionKey = (String) session
08         .getAttribute("restSearchAppSession");
09     String authToken = request.getParameter("auth_token");
10 
11     FacebookJsonRestClient client = null;
12 
13     if (sessionKey != null) {
14       client = new FacebookJsonRestClient(apiKey,
15           secretKey,
16           sessionKey);
17 
18     } else if (authToken != null) {
19       client = new FacebookJsonRestClient(apiKey, secretKey);
20       client.setIsDesktop(false);
21       try {
22         sessionKey = client.auth_getSession(authToken);
23         session.setAttribute("restSearchAppSession", sessionKey);
24       } catch (Exception e) {
25         e.printStackTrace();
26       }
27     } else {
28      response.sendRedirect("http://www.facebook.com/login.php?api_key="+apiKey);
29       return;
30     }
31     response.getWriter().println("HelloWorld");
32   }

行 4 と行 5 はサーブレット構成から API_KEY および SECRET_KEY などの初期パラメーターを取得します。

行 7 は、セッションがすでに張られている場合にはそのセッションからセッション・キーを取得します。セッションがまだ張られていなければ、セッション・キーは null になります。

行 9 はリクエスト・パラメーターから認証トークンを取得します。セッションが認証されないと、認証トークンは null になります。

sessionKey が存在する場合、行 14 には FacebookJsonRestClient を作成するためのコンストラクター引数として、apiKeysecretKey、および sessionKey が必要となります。

図 20. FacebookJsonRestClient を作成する
この図には、FacebookJsonRestClient の作成画面が示されています

sessionKey が存在しなければ、apiKeysecretKey だけを使用して FacebookJsonRestClient を作成します。行 20 では必ず、正しいクライアント・モードを設定してください。

ここで重要なのは、アプリケーションが正しいモードに設定されていることです。アプリケーションで「デスクトップ・モードは false」に設定されていれば、ユーザーが非公開のセッションを渡そうとすると、Facebook サーバーがそれを理解します。

行 22 と行 23 では、認証トークンの助けを借りて sessionKey を作成し、このキーをセッション属性 restSearchAppSession に設定します。

sessionKey もなければ、認証トークンもないという場合、それはユーザーが Facebook にログインして新しいセッションと認証キーを取得する必要があることを意味します。したがって、行 28 では Facebook のログイン・ページにリダイレクトします。

そして最後に、行 31 で出力ライターによって Hello World が出力されます。

「RestaurantSearch」アプリケーションが完成したらすぐに、Tomcat サーバーを起動することができます。思い出してください。「SimpleRestaurantSearch」アプリケーションを作成した最初の段階で、このプロジェクトはすでに Tomcat サーバーの「EclipseBook-Host」に関連付けてあります。したがって、「Servers (サーバー)」ビューから Tomcat を起動すると、Eclipse で Tomcat サーバーが起動されてアプリケーションをデプロイするというわけです (図 21 を参照)。

図 21. Eclipse で Tomcat サーバーを起動してアプリケーションをデプロイする
この画面には、Eclipse で Tomcat サーバーを起動し、アプリケーションがデプロイされたことが示されています。

Tomcat サーバーが起動したら、http://localhost:8080/SimpleRestaurantSearch/RestaurantSearch までブラウズします。すると Facebook 開発者ページが表示されて、このサイトは作成中であることが通知され、アプリケーションのコールバック URL を設定するようアドバイスされます。この文中の「applications settings editor (アプリケーション設定エディター)」をクリックしてください (図 22 を参照)。

図 22. アプリケーション設定エディター
この図には、アプリケーション設定エディターのリンクが示されています。

アプリケーション設定エディターで「Canvas」タブを表示します。このタブに入力するのは、「Canvas」ページの URL (http://apps.facebook.com/devrestaurantsearch)、Canvas コールバックの URL (http://localhost:8080/SimpleRestaurantSearch/RestaurantSearch)、そしてブックマークの URL (http://apps.facebook.com/devrestaurantsearch) です。入力し終わったら、設定を保存します (図 23 を参照)。

図 23. アプリケーション設定エディター
アプリケーション設定エディターの画面です。

新しい設定が保存されると、アプリケーション概要ページが表示されます (図 24 を参照)。

図 24. アプリケーションの概要
図 24 には、アプリケーションの概要ページが示されています。

Eclipse が持つ真の威力は、Tomcat を統合してホット・デプロイできることです。今ここでサーバーを再起動するだけで、保存したアプリケーション・プロパティーが適用されているかどうかを調べることができます (図 25 を参照)。

図 25. サーバーを再起動する
サーバーを再起動するための操作を示す図です。

Eclipse Galileo 内でサーバーが再起動すると、RestaurantSearch サーブレットによってアプリケーションのログイン・ページ (http://www.facebook.com/login.php?api_key=<API_KEY>) にリダイレクトされるはずです。このページで Facebook に登録した自分の E メールの ID とパスワードを入力すると、サーブレットがレスポンスを出力します。

Facebook アプリケーションの画面を見ると、適切なアプリケーションにログインするために API_KEY が使用されていることがわかります。この例の場合、適切なアプリケーションは「SimpleRestaurantSearch」です (図 26 を参照)。

図 26. アプリケーションへのログイン
アプリケーションのログイン画面です。

これで Facebook アプリケーションが認証され、sessionKeyauthKey が生成されると同時に画面に「Hello World」メッセージが表示されます。

図 27. 「Hello World」の表示
この図には、「Hello World」と表示されている画面が示されています。

Facebook からログオフして、http://www.facebook.com/apps/application.php?id=144078916555 にあるアプリケーションにアクセスしてみてください。Facebook がアプリケーション情報を表示し、ユーザーはログインすることによってこのアプリケーションにアクセスすることができます (図 28 を参照)。

図 28. ログイン・ページ
ログイン・ページが表示された画面です

次のステップでは Google Search API を使用し、この API を単純な JSP に組み込みます。


Facebook アプリケーションへの Google Search API の統合

Google Ajax Search API では、JavaScript を使用して自分の Web ページに Google 検索を組み込むことができます。Web ページに単純な動的検索ボックスを埋め込んで検索結果を表示することも、プログラムを使って検索結果を革新的な方法で利用することもできます。この API を使用するのにキーは必要ありません。アプリケーション/サイトでキーを使用するかどうかは完全に任意ですが、キーを使用すると便利です。

キーを生成するには http://code.google.com/apis/ajaxsearch/signup.html にアクセスし、利用規約に同意して「Generate API Key (API キーを生成)」をクリックします (図 29 を参照)。

図 29. API キーを生成する
この図には、API キーを生成するための画面が示されています。

Google が API キーを生成し、この API キーが有効な URL を示します。さらに、この Web ページにはサンプル・コードも提供されます (図 30 を参照)。

図 30. Google によって生成された API キー
図 30 には Google によって生成された API キーが示されています。

上記の Google 検索から提供されたサンプル・コードを「WebContent」フォルダー内にある RestaurantSearch.jsp にコピーします。この JSP ファイルを保存したら必ず「SimpleRestaurantSearch」のコードを変更して、「Hello World」というレスポンスを出力するのではなく、RestaurantSearch.jsp にリクエストを送信するようにしてください。

それにはコードを response.getWriter().println("Hello World"); から request.getRequestDispatcher("RestaurantSearch.jsp").forward(request,response); に変更します。

JSP ファイルが保存されると同時に、自動的にプロジェクト全体が Tomcat サーバーに再デプロイされます。前のステップで、Canvas URL (http://apps.facebook.com/devrestaurantsearch) と併せて Canvas コールバック URL (http://localhost:8080/SimpleRestaurantSearch/RestaurantSearch) も設定したことを思い出してください (図 31 を参照)。

図 31. Canvas URL と Canvas コールバック URL の設定
Canvas URL と Canvas コールバック URL の設定が表示された画面です。

Canvas URL にアクセスすると、すでに正常にログインしている場合には RestaurantSearch.jsp が「RestaurantSearch」アプリケーションを起動します (図 32 を参照)。

図 32. 「RestaurantSearch」アプリケーションの起動
この図には、起動された「RestaurantSearch」アプリケーションが示されています。

アプリケーションのブックマークはアプリケーション・ツールバーの左下隅にあります。このアプリケーションでは、レストランを検索するための検索文字列を入力することができます (図 33 を参照)。

図 33. アプリケーション・ツールバーにあるアプリケーションのブックマーク
図 33 には、アプリケーション・ツールバーにあるアプリケーションのブックマークが示されています。

Google マップのデフォルト・ロケーションを変更し、デフォルトのマップ・ビューを RestaurantSearch.jsp 内の NORMAL ビューに設定します (リスト 2 を参照)。

リスト 2. Google マップのデフォルト・ロケーションを変更する
// change the default location in the Google Maps
map.setCenter(new google.maps.LatLng(37.773,-122.417),13);

// set the Map to Normal view
map.setMapType(G_NORMAL_MAP);
map.removeMapType(G_HYBRID_MAP);
map.addMapType(G_NORMAL_MAP);

JSP を保存してホット・デプロイし、ロケーションとマップ・タイプが変更されていることを確認するために再度テストしてみます (図 34 を参照)。現在、デフォルトの検索ロケーションとして選択してあるのはサンフランシスコです。このアプリケーションが Facebook で実行中になると、ユーザーはレストランのタイプを検索する際に、検索対象とする地域の郵便番号を追加できるようになるはずです。郵便番号を追加した場合、該当する地域に存在するレストランが検索結果として返されます。

図 34. アプリケーションを再デプロイして再度テストする
再デプロイされて再度テストが行われたアプリケーションのスクリーンショット

さらに詳しくテストするため、今度は Facebook の自分のプロフィールまでナビゲートし、右上隅にある検索ボックスで「SimpleRestaurantSearch」アプリケーションを検索します。

図 35. Facebook のプロフィールから「SimpleRestaurantSearch」アプリケーションを検索する
Facebook のプロフィールから「SimpleRestaurantSearch」アプリケーションを検索している画面です。

アプリケーション検索によって、「SimpleRestaurantSearch」アプリケーションが表示されるはずです (図 36 を参照)。

図 36. アプリケーション検索によって表示された「SimpleRestaurantSearch」アプリケーション
この図には、アプリケーション検索によって表示された「SimpleRestaurantSearch」アプリケーションが示されています。

Facebook Connect API の統合

Facebook Connect を使用することで、Facebook 以外のアプリケーションでも Facebook を利用できるようになります。例えばサイトで Facebook Connect API を使用すれば、そのサイトの閲覧者が互いのプロフィール情報を共有することができます。

まず必要な作業は、xd_receiver.htm という名前のクロスドメイン通信チャネル・ファイルを作成し、コールバック URL に関連するディレクトリーに配置することです。xd_receiver.htm ファイルは、「Connect Web」ページを提供することになるディレクトリー (この例の場合は「WebContent」フォルダー) に作成する必要があります。図 37 を参照してください。

図 37. クロスドメイン通信チャネルを作成して保存する
クロスドメイン通信チャネルを作成および保存するディレクトリーが表示された画面です。

リスト 3 に、クロスドメイン・チャネル・ファイルの一例を記載します。このコードをコピーして、「WebContent」フォルダー内に xd_receiver.htm を作成してください。クロスドメイン・チャネル・ファイルがないと、Facebook はアプリケーション・サーバーと正しく通信することができません (リスト 3 を参照)。

リスト 3. クロスドメイン・チャネル・ファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js"
 mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" 
type="text/javascript"></script>
</body>
</html>

サーバーで最も簡単に Facebook Connect を使用し始める方法は、JavaScript API ライブラリーを利用することです。このライブラリーに接続する際に必ず必要なことは、正しい文書タイプを設定すること、そして JavaScript ライブラリーを Web ページ最後の </body> タグの近くでロードすることの 2 つです。このコード変更は、RestuarantSearch.jsp ファイルで行います (リスト 4 を参照)。

リスト 4. Facebook Connect をサーバーで使用する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:fb="http://www.facebook.com/2008/fbml">

<script type="text/javascript" 
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
 mce_src="http://static.ak.connect.facebook.com/js/api_lib/
v0.4/FeatureLoader.js.php"> </script>

リスト 5 は、他のユーザーを自分の Facebook Connect アプリケーションにログインさせて、Facebook でのそのユーザーの名前とプロフィールの写真を表示する単純な例です。

リスト 5. 他のユーザーを自分の Facebook Connect アプリケーションにログインさせる単純な例
<script type="text/javascript"> 
function update_user_box() {
    var user_box = document.getElementById("user");

    user_box.innerHTML =
    "<span>"
    + "<fb:profile-pic uid='loggedinuser' facebook-logo='true'>
</fb:profile-pic>"
    + "Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>"
    + "</span>";

    FB.XFBML.Host.parseDomTree();
}
</script>

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js
/api_lib/v0.4/FeatureLoader.js.php"mce_src="http://static.ak.connect.facebook.com/js
/api_lib/v0.4/FeatureLoader.js.php"> 
</script>

<script type="text/javascript">
    var api_key = "Connect API_key here";
    var channel_path = "xd_receiver.htm"; 
    FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>

このコードを自分のサーバーでテストするには、リスト 5 の API キーを置き換える必要があります (図 38 を参照)。

図 38. API キーを置き換える
この図には、置き換えられた API キーが示されています。

JSP ファイルは保存されると同時にホット・デプロイされるので、そのまま「RestaurantSearch」アプリケーションを起動することができます。起動後のアプリケーションでは、検索結果の下にボタンが表示されていることに注目してください (図 39 を参照)。

図 39. 検索結果の下に表示されたボタン
この図には、検索結果の下に表示されたボタンが示されています。

Facebook セッションにログイン済みであれば、Facebook Connect をクリックすると自分のプロフィールにログインされます。つまり自分自身のプロフィールで、「SimpleRestaurantSearch」のユーザーがお気に入りのレストランの情報を共有し、フィードバックするということです。

この例は、Facebook Connect API の実力を明らかにしています。レストラン・アプリケーションが立ち上がったら、Facebook Connect に接続して自分のプロフィールでレストランを推薦してください。推薦したレストランの情報は、他の友達も見ることができます。

Recommend (推薦)」ボタンをクリックすると小さなウィザードが開くので、ここにコメントを記入すれば、そのコメントが友達と共有されます (図 40 を参照)。

図 40. コメント用のウィザードを開く
図 40 には、コメント用のウィザードが開かれている様子が示されています。

この Facebook アプリケーションをテストするには、自分のアプリケーション開発者プロフィールに進み、他のユーザーに対してプロフィールの表示を許可してください (図 41 を参照)。

図 41. 自分の情報を共有する
情報を共有するための画面です。

まとめ

Eclipse Galileo には、新しく追加された機能や改善された機能がいくつも組み込まれています。そんな Galileo は、優れたアプリケーションを開発するために使用することができます。この記事では Eclipse Galileo J2EE エディションを使用しました。このエディションには、Java IDE、Java EE 用ツール、JPA、JSF、Mylyn の他、Java EE および Web アプリケーションを開発する Java 開発者向けのツールが用意されています。

Galileo J2EE エディションを使って、Facebook Java ライブラリーをインポートし、Tomcat を内部サーバーとして構成しました。その上で、「SimpleRestaurantSearch」アプリケーションに Facebook の認証機能、Google Search API、Facebook Connect API を追加しました。

Tomcat の統合は、完全な Facebook アプリケーション・コードの開発、デバッグ、テスト、デプロイを可能にします。Galileo リリースを存分に活用して、優れた Facebook アプリケーションを開発してください。Facebook ID、Facebook 開発者キー、そして Google Search API があれば、この記事に付属のコードを使って「RestaurantSearch」アプリケーションをテストすることができます。


ダウンロード

内容ファイル名サイズ
Restaurant Search source codeos-eclipse-facebookRestaurantSearch.zip18KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

  • Eclipse に関する質問を投じる最初の場所として、Eclipse Platform newsgroups があります (このリンクをクリックすると、デフォルト Usenet ニュース・リーダー・アプリケーションが起動され、eclipse.platform が開きます)。
  • Eclipse newsgroups には Eclipse を利用し、拡張することに関心を持つ人達のために、さまざまなリソースが用意されています。
  • developerWorks blogs から developerWorks コミュニティーに加わってください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=465731
ArticleTitle=Eclipse Galileo を使って Facebook アプリケーションを開発する
publish-date=12222009