連載
» 2011年04月25日 00時00分 公開

無料クラウドでできるFacebookアプリ開発入門(1):基礎から分かる、Facebookアプリの作り方 (5/5)

[亀渕景司,株式会社ビービーシステム]
前のページへ 1|2|3|4|5       

Facebookアプリを動かしてみよう

 これまでの手順で必要最小限のFacebookアプリの準備が完了したので、単体のWebアプリとして動作することを確認します。

デバッグの開始

 ソリューションの一覧からWebアプリケーションプロジェクトを右クリックし、[スタートアッププロジェクトに設定]メニューを選択します。

図20 スタートアッププロジェクトの変更 図20 スタートアッププロジェクトの変更

 スタートアッププロジェクトにWebアプリケーションプロジェクトを設定後、[デバッグ]→[デバッグの開始]メニューを選択し実行します。

 修正したファイルや設定がエラーなければビルドが完了し、Webブラウザが起動します。

Facebookに認証を求める

 Webブラウザは指定したURL(例:http://localhost:8000 )を表示しますが、既定で表示される「default.aspx」ファイル内のPage_LoadメソッドでFacebookの認証を行っているため、Facebookへリダイレクトされます。

 リダイレクト先ではFacebookへのログオンと、ユーザー情報へアクセスする許可が求められるので[許可する]を選択します。

 Facebookでは、Facebookアプリに初回アクセスした際に必ず許可を求めます。一度許可したアプリは、以降許可を求めません。

図21 開発したWebアプリのアクセス許可 図21 開発したWebアプリのアクセス許可

 Facebook側でWebアプリに対しユーザー情報へのアクセスを許可した後、Webアプリに自動的にリダイレクトされます。

 Facebookの認証について詳しく知りたい読者は、以下の記事を参照してください。

結果を表示

 再度表示されたWebアプリでは、Page_Load内に記述したユーザー名と友達リストを取得・表示するコードが実行され、Webブラウザ上に結果が表示されます。

図22 アプリの実行結果 図22 アプリの実行結果

 アクセス許可後のリダイレクトが動作しない場合、いったんWebブラウザを終了し再度実行してください。

コラム「Facebookアプリの横幅」

Facebookでは、Facebook内に表示するWebアプリの横幅は760ピクセル以下にすることを推奨しています。

既定のWebアプリケーションプロジェクトの場合、必要に応じて既定のCSS/スタイルシート(Site.cssファイル)内の「page」クラスのwidthの値を変更することでページの横幅を変えることができます。


Facebookアプリを全世界に公開しよう

 連載第1回では、開発環境の準備と、簡単なFacebookアプリの開発の仕方について紹介しましたが、いかがでしたでしょうか。Facebook C# SDKを利用すると、最小限の設定とコード記述で簡単にFacebook上のデータにアクセスできることが理解できたかと思います。

 Facebookは、外部のアプリ向けにFacebookとのつながりを持つためのFacebook Graph APIを提供しており、簡単に独自のFacebookアプリを全世界に公開できます。しかし本稿のアプリは、開発者のコンピュータ上で動作しているので、他のユーザーはアプリを利用できません。

 次回は、Windows Azureを使用してクラウド上にアプリを配置し、全世界に公開します。

参考リンク

 以下のURLに、FacebookおよびWindows Azureの開発者向け情報が記載されています。より本格的な開発を行う場合に参照することをお勧めします。


前のページへ 1|2|3|4|5       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。