IBM WebSphere Cast Iron の Web API サービスへの Facebook の統合

Facebook Graph API を統合する

この記事では、API 開発者を対象に、IBM WebSphere Cast Iron Live の Web API サービスに Facebook を統合する方法を説明します。これにより、Facebook 用の魅力的な Web API を迅速かつ容易に作成、ソーシャル化、管理できるようにします。この記事を読んで、API の定義方法、定義した API に合わせて開発者ページをカスタマイズする方法、アプリケーションを登録する方法、そして API をテストする方法を学んでください。

Vineet Gupta, Certified IT Specialist, IBM

author photo - vineet gupta 3Vineet Gupta は、IBM ミドルウェア製品に熟練した認定 IT スペシャリストであり、インドのグルガオンにある India Software Lab の IBM Lab Services for WebSphere に勤務しています。これまで、ディストリビューション、テレコム、ヘルスケア、コンテンツ管理など、さまざまな分野の顧客を対象としたソリューションの開発を 8 年間経験しました。また、エンタープライズ例外パターンの Support Pac (MQ Support Pac ID08) の作成者でもあります。彼は、インドのヒサールにある Guru Jambheshwar 大学でコンピューター・アプリケーションの修士号を取得しました。



2013年 7月 25日

はじめに

Cast Iron Live Web API サービスを試してください

クラウドにホストされた Cast Iron Live Web API サービスの 90 日間無料の試用版にサインアップしてください。

Web API はそれを提供する企業が外部に見せる顔となります。Web API を提供する企業は容易にパートナーと連携することが可能になり、Web API を提供する企業のビジネスをベースに他の企業がビジネスを構築することもできます。IBM WebSphere Cast Iron の Web API サービスは、企業がパートナーや企業内外の革新的なアプリケーションの開発者の興味を引き付ける上で役立つあらゆる Web API 機能一式を提供します。

  • Web API では、構成を通じて既存のビジネス資産やクラウド・サービスから新しい API を迅速に作成することができます。
  • Cast Iron Web API サービスは、Web API をアセンブル、セキュリティー強化、およびスケーリングするための機能や、ビジネス・オペレーションのための分析機能、そして API をソーシャル化するための開発者ポータルを提供します。

この記事では、Cast Iron Live Web API サービスに Facebook を統合する方法をステップ・バイ・ステップで説明します。この統合プロセスは、以下の作業で構成されます。

  1. Facebook Graph API を呼び出す単純なプロキシーを作成します。
  2. Facebook からのフィードを JSON (JavaScript Object Notation) 形式のレスポンスとして返します。
  3. Twitter と Facebook のフィードを開発者ページに表示します。

前提条件

この記事では API 開発者を対象に、Cast Iron Web API Live インスタンスで API を開発する方法を説明します。以下の技術や作業に関する予備知識があると、記事に記載するサンプル・コードを理解する助けになります。

  • JSON および XML の基本概念
  • REST (REpresentational State Transfer) の基本概念
  • Cast Iron Web API 管理ログイン ID の作成方法
  • Facebook Graph API の使用方法

この記事のサンプル・アプリケーションを実装するには、以下のものが必要です。

  • 標準的なインターネット・ブラウザーがインストールされたワークステーション
  • 有効な Cast Iron Web API 管理 ID と資格情報
  • インターネット接続
  • Facebook アカウント
  • Facebook ページの ID
  • アプリケーションの登録に使用する e-メール・アカウント

Facebook Graph API

Facebook のコアとなるソーシャル・グラフは、人々、そして人々が関心を持つすべての物事と人々との関係とで構成されます。Graph API は、このソーシャル・グラフのシンプルかつ一貫性のあるビューを提供します。ソーシャル・グラフには、オブジェクトと、オブジェクト間の関係が示され、グラフ上のすべてのオブジェクトには一意の ID が与えられます。

Graph API は、この一意の ID を使用してオブジェクトのプロパティーおよび関係にアクセスします。そして、すべてのレスポンスは JSON オブジェクトとして返されます (リスト 1 を参照)。

リスト 1. Graph API の JSON レスポンス
{
   "name": "Facebook Platform",
   "website": "http://developers.facebook.com",
   "username": "platform",
   "founded": "May 2007",
   "company_overview": "Facebook Platform enables anyone to build...",
   "mission": "To make the web more open and social.",
   "products": "Facebook Application Programming Interface (API)...",
   "likes": 449921,
   "id": 19292868552,
   "category": "Technology"
}

Graph API を使用すれば、オブジェクトの公開プロフィールに簡単にアクセスすることができますが、その他の情報を入手するにはユーザーからの許可が必要です。Graph API では、オープン・スタンダードの OAuth 2.0 を使用して認可を行います。ユーザーは相手に対して Facebook 上で何かをする (友達のページにアクセスしたり、友達の「いいね!」にアクセスしたりするなど) ことを認可することも可能です。ユーザーがアプリケーションを認可すると、そのアプリケーションにはユーザーのフィードを表示したり、「シェア」したり等々で使用する access_token が与えられます。Facebook Graph API に対するあらゆるリクエストにこのアクセス・トークンが伴っていなければ、アプリケーションがユーザーのプロフィールやその他の情報にアクセスすることはできません。


Facebook オブジェクトのプロフィールにアクセスするための認証

Facebook Graph API を統合するための最初のステップは、認証を使用して Facebook オブジェクトのプロフィールにアクセスすることです。この記事で使用する JKHLE モバイル・アプリケーションは、以下の OAuth 2.0 URL を使用して Facebook で自己認証を行います。

https://graph.facebook.com/oauth/access_token?
   grant_type=client_credentials&client_id=[mobile/facebook app 
   id]&client_secret=[mobile/facebook app secret key]

上記の URLに対するレスポンスとして、JKHLE モバイル・アプリケーションは、オブジェクト (この例の場合、Cast Iron 開発者) のプロフィールを取得するために使用できるアクセス・トークンを受け取ります。このモバイル・アプリケーションは、ユーザー (Cast Iron 開発者) のフィードを取得するための GET リクエストを送信する際にも、このアクセス・トークンを使用します。


ユーザーのフィードを取得するための単純なプロキシーの定義

ユーザーのフィードを取得するためのプロキシーを作成して定義するには、以下の手順に従います。

  1. 登録時に e-メールで受信した管理資格情報を使用して、https://webapi.castiron.com/webapibuilder にログインします (図 1 を参照)。
    図 1. Cast Iron Web API サービスへのサインイン
    Cast Iron Web API サービスへのサインインの方法を示す画像
  2. API を作成するために、「Getting Started with Web API (Cast Iron Web API 入門)」ページの「Create (作成)」リンクをクリックするか、タイトル・バーの「APIs (API)」をクリックします。図 2 に両方の方法を示します。
    図 2. API の作成
    API の作成を開始する方法を示す画像
  3. 「Define APIs and Resources (API およびリソースの定義)」ページで、以下のフィールドに入力してから「Create (作成)」をクリックします。これで、API 定義が作成されます (図 3 を参照)。
    • 「API name (API 名)」に、「Facebook」と入力します。
    • 「context (コンテキスト)」に、「Facebook」と入力します。
    • 「API description (API の説明)」に、「To connect to Facebook for Cast Iron developer (Cast Iron を使用する開発者が Facebook に接続するため)」と入力します。
    図 3. API の定義
    API の定義方法を示す画像

API リソースの定義

次のステップでは、API のリソースを定義します。リソースを作成して構成するには、「Facebook」API を編集モードで開きます。「Facebook」API を編集するには、次の 2 つの方法のいずれかを実行します。鉛筆アイコンをクリックするか、表示されている API 名「Facebook」をクリックします (図 4 を参照)。

図 4. API のリソースの定義
API のリソースの定義方法を示す画像

「Resource Definition (リソース定義)」タブで、適切な値を設定してリソースを定義します。「Facebook」API の「Feed (フィード)」リソースを定義するには、以下の値を使用してください。

  • 「Resource URI (リソース URI)」フィールドに、「Feed?access_token=myaccesstoken」と入力します。
  • 「Resource description (リソースの説明)」に、「to get Feed of Cast Iron Developer (Cast Iron を使用する開発者のフィードを取得するため)」と入力します。

入力が完了したら、「Add (追加)」をクリックしてリソースを定義します (図 5 を参照)。

図 5. 「Facebook」API の「Feed (フィード)」リソースの追加
「Facebook」API の「Feed (フィード)」リソースの追加方法を示す画像

エンドポイントの構成

「Feed (フィード)」リソースを定義した後は、エンドポイント、期待するレスポンス、およびその他のパラメーターを構成する必要があります。それには、リソースの前面に表示される鉛筆アイコンをクリックするか、リソース名 (この例では「Feed (フィード)」) をクリックします。

次のページで、リソースに関連するすべての詳細 (パラメーター、要求ヘッダー、応答ヘッダー、要求本文、応答本文を含む) を定義します。

注: 必ず、「Response Body (応答本文)」フィールドには、既存のバックエンド・リソースに基づく新しい選択的インターフェースを定義してください。

この記事の例では、このリソースに対するすべての要求は、Graph API の URL (https://graph.facebook.com/castirondev/feed) に転送されます。したがって、図 6 に示されているようにリソースを定義する必要があります。

図 6. リソースの定義
リソースの定義方法を示す画像

API を保存すると、Facebook に接続するプロキシーが定義されます。

API のアクティブ化

API をアクティブにするには、以下の値を使用して資格を定義します。

  • 「Name the Entitlement (この資格に名前を付けます)」フィールドには、「Basic (基本)」と入力します。
  • 「Describe the Access Level (このアクセス・レベルの説明を入力します)」フィールドには、「This is Basic entitlement (これは基本資格です)」と入力します。
  • 「Calls / Minute (呼び出し / 分)」フィールドには、「10」と入力します。
  • 「Requires Approval (承認を要求)」チェック・ボックスを選択します。

    このチェック・ボックスにチェック・マークを付けると、ID だけでアクセスできるようになります。秘密鍵は不要です。

図 7 を参照してください。

図 7. 資格の定義
資格の定義方法を示す画像

注: 資格を定義しなければ、リソースはアクティブになりません。

以上の作業が完了したら、「Resource Definition (リソース定義)」タブをクリックし、リソースに対して「Activate (アクティブ化)」をクリックします (図 8 を参照)。

図 8. リソースのアクティブ化
リソースをアクティブにする方法を示す画像

これで、API はアクティブになりました。


開発者ページのカスタマイズ

開発者ページは、お客様、パートナー、開発者に対して API をソーシャル化して採用してもらうための手段となります。開発者ページには、開発者ポータルの Facebook フィードと Twitter ID を構成することができます。開発者ページにアクセスするには、「Getting Started with Web API (Cast Iron Web API 入門)」ページで「Socialize (ソーシャル化)」をクリックするか、自分のユーザー名のドロップダウン・リストから「Customize Developer Pages (開発者ページのカスタマイズ)」を選択します (図 9 を参照)。

図 9. 開発者ページへのアクセス
開発者ページへのアクセス方法を示す画像

この記事の例では、好みのアイコンを開発者ページのロゴとして使用することができます。ただし、図 10 に示すプロパティーを定義する必要があります。

図 10. 開発者ページのプロパティーの定義
開発者ページのプロパティーを定義する方法を示す画像

開発者ポータルについての注意

開発者ページのホーム・ページには、IBM Software Services India の Facebook ウォールからのフィードが表示されます。「Sign Up (サインアップ)」をクリックしてこのページを登録してください。これにより、開発者 API にアクセスして、アプリケーションを登録できるようになります。

前に説明したように、ユーザーは ID を使用して Facebook ページからのフィードを RSS または atom10 として取得することができます。この記事の例では、atom10 形式の IBM Software Services India の Facebook のフィードを RSS フィードとして構成し、以下の URL を使用して開発者ポータルのホーム・ページに表示されるようにしてあります。

http://www.facebook.com/feeds/page.php?format=atom10&id=112906215424363

「Publish (公開)」を 1 回クリックするだけで、開発者ポータルが公開されます (図 11 を参照)。

図 11. 完成した開発者ポータル
完成した開発者ポータルを示す画像

API をテストするアプリケーションの登録

ご自分の資格情報を使用して、開発者ポータルにログインしてください。ログインに成功すると、作成した API の「Getting Started (入門)」ページが表示されます (図 12 を参照)。

図 12. 新規 API の入門ページ
新規 API の入門ページを示す画像

「Register Apps (アプリケーションの登録)」をクリックして、「Register an Application (アプリケーションの登録)」ページにナビゲートします。以下の値を使用してアプリケーションを登録してください (図 13 を参照)。

  • 「Name of Application (アプリケーションの名前)」フィールドに、「Baggage Tracker」と入力します。
  • 「Describe this Application (このアプリケーションの説明を入力します)」フィールドに、「Baggage Application」と入力します。
  • 「Provide a URL link (URL リンクを入力します)」フィールドに、「http://www.mybaggagetracker.com」と入力します。
図 13. 新規 API 用のアプリケーションの定義
新規 API 用のアプリケーションを定義する方法を示す画像

「Add (追加)」をクリックします。すると、図 14 に示す登録ウィンドウが表示されます。

図 14. 新規アプリケーションの登録
新規アプリケーションの登録方法を示す画像

注: 必ず、アプリケーション ID と秘密鍵を覚えておいてください。これらの情報は、アプリケーションから API を呼び出すときに必須です。

「Register (登録)」をクリックします。すると図 15 に示すように、アプリケーションが Cast Iron Web API Live インスタンスに登録されます。

図 15. 新しく登録されたアプリケーション
新しく登録されたアプリケーションを示す画像

開発者ポータルのアプリケーション・ページでこのアプリケーションがフィーチャーされるようにしたい場合は、「Allow this app to be featured (このアプリケーションをフィーチャーさせる)」チェック・ボックスを選択します。


Feed API のテスト

現時点で、API の定義、API に合わせた開発者ページのカスタマイズ、そしてアプリケーションの登録が完了しています。これで、この API をテストする準備が整いました。

新規 API をテストするには、ブラウザーを開いて以下の URL を入力します。

https://guptavineet.web.castiron.com/Facebook/Feed?
   access_token=[accesstoken]&appId=[application Id]

図 16 に示すように、Facebook フィードが JSON として表示されるはずです。

図 16. 新規 Facebook フィード
新規 Facebook フィードを示す画像

まとめ

Facebook に接続可能な API を開発する方法を理解したので、今度は https://graph.facebook.com/castirondev/feed へのプロキシーとして、access_token および message to post updates on the Facebook wall パラメーターを使用して POST メソッド API を作成してみてください。ご健闘を祈ります!

参考文献

学ぶために

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

議論するために

コメント

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=Mobile development, Cloud computing, WebSphere
ArticleID=937876
ArticleTitle=IBM WebSphere Cast Iron の Web API サービスへの Facebook の統合
publish-date=07252013