基礎から分かる、Facebookアプリの作り方：無料クラウドでできるFacebookアプリ開発入門（1）（4/5 ページ）

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

[亀渕景司，株式会社ビービーシステム]

Windows Azure用プロジェクトの作成

　まずは、プロジェクトを作成します。

　［スタート］→［すべてのプログラム］→［Microsoft Visual Studio 2010 Express］内にある［Microsoft Visual Web Developer 2010 Express］を実行し、開発環境を立ち上げます。

　［ファイル］→［新しいプロジェクト］メニューを選択します。［インストールされたテンプレート］から［Visual C#］→［Cloud］を選択し［OK］ボタンをクリックします。

図13　Windows Azureプロジェクトの作成

　［新しいWindows Azureプロジェクト］ダイアログの「.NET Framework 4ロール」から「ASP.NET Webロール」を右側に追加します。追加したプロジェクトをクリックし、名前の編集ボタンからWebアプリケーションプロジェクトの名前を変更します（入力例：FacebookWebApplication）。

図14　Webアプリケーションプロジェクトの追加

　Webアプリケーションプロジェクトと、Windows Azureプロジェクトの2つが作成されます。

図15　プロジェクトの初期画面（画像をクリックすると、拡大します）

　ソリューション一覧からWebアプリケーションプロジェクトの［参照設定］を右クリックし、［参照の追加］メニューを選択します。

図16　アセンブリ参照の追加メニュー

　事前に入手したFacebook C# SDKのアセンブリ（「Facebook.dll」「Facebook.web.dll」）とJson.NETのアセンブリ（「Newtonsoft.Json.dll」）の3つのDLLを追加します。

図17　アセンブリの追加

Facebookアプリのコーディングを開始

　Webアプリケーションプロジェクトのファイル一覧から「Default.aspx」ファイルを表示し、ログインしたFacebookユーザーの名前を表示するラベルコントロール（IDに「UserName」と設定）と、友達リスト（IDに「Friends」と設定）を表示するリストボックスコントロールを追加します。

コード例1

：
【中略】
：
    <asp:Label ID="UserName" runat="server" Text="Label"></asp:Label>
：
【中略】
：
    <asp:ListBox ID="Friends" runat="server" Height="312px" Width="356px">
    </asp:ListBox>
：
【中略】
：

図18　コントロールの追加

　同様に「Default.aspx.cs」ファイルを開き、Page_Load（ページ表示時の処理）に以下のFacebook関連のコードを記述します。

コード例2


：
【中略】
：
        protected void Page_Load(object sender, EventArgs e)
        {
            //認証処理
            var auth = new CanvasAuthorizer { Permissions = new[] { "user_about_me" } };
 
            if (auth.Authorize())
            {
 
                var fb = new FacebookWebClient();
                
                //ログオンしているFacebookユーザーに関する情報を取得
                dynamic myInfo = fb.Get("me");
                UserName.Text = myInfo.name;
 
                //友達リストの取得
                dynamic myFriends = fb.Get("me/friends");
                foreach (var friend in myFriends.data)
                {
                    Friends.Items.Add(friend.name);
                }
            }
        }
：
【中略】
：

Facebook開発者アプリの設定を追加

■ Webアプリの設定ファイル

　Webアプリの設定ファイル（「Web.config」ファイル）を開き、Facebook C# SDKに関連する設定（Facebookの動作に関連する設定）を追加します。

コンフィグ例1

<?xml version="1.0"?>
<configuration>
  <configSections>
    <section type="Facebook.FacebookConfigurationSection, Facebook" name="facebookSettings" 
             allowLocation="true" allowDefinition="Everywhere" 
    />
  </configSections>
 
  <facebookSettings
    appId = "{app id}"
    appSecret = "{app secret}" 
    canvasPage = "http://apps.facebook.com/{fix this path}"
    canvasUrl = "http://{web application url}/"
  />
：
【中略】
：
  <system.web>
：
【中略】
：
    <httpHandlers>
      <add verb="*" path="facebookredirect.axd" 
           type="Facebook.Web.FacebookAppRedirectHttpHandler, Facebook.Web" 
      />
    </httpHandlers>
 
    <pages>
      <namespaces>
        <add namespace="Facebook.Web"/>
      </namespaces>
    </pages>
  
  </system.web>
 
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true" />
    <handlers>
      <add name="facebookredirect" path="facebookredirect.axd"
           verb="*"
           type="Facebook.Web.FacebookAppRedirectHttpHandler, Facebook.Web" />
    </handlers>
  </system.webServer>
</configuration>

　各要素追加後、要素の各属性に、Facebook開発者アプリで設定および取得したアプリケーションの情報を記入します。

**表　Facebook関連の設定例**
属性	入力例	備考
appId	123456789012345	アプリケーションID
appSecret	234567890abcdef1234567890abcdef1	アプリの秘密キー（Application Secret）
canvasPage	http://apps.facebook.com/fbapponazure	FacebookアプリのページURL
canvasUrl	http://localhost:8000/	公開するWebアプリのURL