jQuery Mobileで作るスマホ向けFacebookアプリ：無料クラウドでできるFacebookアプリ開発入門（3）（3/5 ページ）

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

Facebook C# SDKでスマホ向けアプリ開発

■ サンプルプロジェクトの起動

　本稿で使用する、モバイルWebアプリの基となるソースコードはFacebook C# SDKのソースの以下のフォルダにあります。

【ソースを解凍したフォルダ】\Facebook\FacebookSDK\Samples\CSMvc3Website

　上記のサンプルフォルダをコピー後、Visual Web Developer Express 2010を起動し、［ファイル］→［プロジェクトを開く］メニューから、フォルダ内にある「Mvc3Website.csproj」を選択してプロジェクトを起動します。

　起動時、以下の警告ダイアログが表示されるので、「はい」を選択して仮想ディレクトリを作成します。

図7　仮想ディレクトリの確認ダイアログ

　第1回を参考にソリューションの参照の追加（［プロジェクト］→［参照の追加］メニュー）から「Facebook.dll」「Facebook.Web.dll」「Facebook.Web.Mvc.dll」の3つのアセンブリを追加し、更新します。

■ セッションとしてメモリ上にユーザー情報を格納

　［ソリューションエクスプローラー］から「Models」フォルダの「InMemoryUserStore.cs」を開き、以下のように追加修正します。

コード1　InMemoryUserStore.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace Mvc3Website.Models
{
    public class InMemoryUserStore
    {
 
        private static System.Collections.Concurrent.ConcurrentBag<FacebookUser> users = new System.Collections.Concurrent.ConcurrentBag<FacebookUser>();
 
        public static void Add(FacebookUser user)
        {
            var InMemoryUser = users.SingleOrDefault(u => u.FacebookId == user.FacebookId);
            if (InMemoryUser != null)
            {
                InMemoryUser.AccessToken = user.AccessToken;
                InMemoryUser.Expires = user.Expires;
                return;
                //throw new InvalidOperationException("User already exists.");
            }
 
            users.Add(user);
        }
 
        public static FacebookUser Get(long facebookId)
        {
            return users.SingleOrDefault(u => u.FacebookId == facebookId);
        }
 
    }
}

　セッションとしてメモリ上にユーザー情報を格納するサンプルコードです。本番での利用時はセッションの扱いなど別途考慮する必要があります。

■ OAuth認証

　同様に「Controllers」フォルダ内の「AccountController.cs」ファイルを開き、20?21行目の「appId」「appSecret」メンバ変数にFacebookアプリのアプリIDとアプリシークレット（アプリの秘けつ）の値に変更します。

コード2　AccountController.csから抜粋

：
：
    public class AccountController : Controller
    {
        const string logoffUrl = "http://localhost:25125/";
        const string redirectUrl = " http://localhost:25125/account/oauth/";
        private const string appId = "【あなたのアプリID】";
        private const string appSecret = "【あなたのアプリシークレット】";
 
：
：

　このコードではOAuthを使用してFacebookに対し認証しています。またFacebookのGraph APIなどへアクセスする場合、認証時に発行されたアクセストークンを使用します。

　アクセスされたユーザーのFacebook IDやアクセストークン、有効期限などを格納し、認証クッキーにキーとなるFacebook IDを格納しています。

■ Facebookで［Site URL］を設定

　この時点で、このサンプルコードは最低限動作するようになります。Facebook開発者アプリにアクセスし、［Website Settings］画面にある［Site URL］にサンプルのURL（変更していない場合は「http://localhost:25125」）を入力し保存します。

図8　［Site URL］の設定

　Facebook開発者アプリでの設定後、Webアプリを実行することでログイン処理が行えます。

■ 「Facebookから友達一覧」「友達の詳細を取得する」コードを追加

　次に、今回のサンプルで利用する「Facebookから友達一覧」「友達の詳細を取得する」コードを追加します。「Controllers」フォルダの「HomeController.cs」ファイルを開き、以下のように修正します。

コード3　HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Facebook;
using Facebook.Web;
namespace Mvc3Website.Controllers
{
	public class HomeController : Controller
	{
		public ActionResult Index()
		{
			if (User.Identity.IsAuthenticated)
			{
				var user = Mvc3Website.Models.InMemoryUserStore.Get(long.Parse(HttpContext.User.Identity.Name));
				FacebookClient fbClient = new FacebookClient(user.AccessToken);
				dynamic myFriends = fbClient.Get("me/friends?fields=name,id");
				return View(myFriends);
			}
			else
			{
				return View();
			}
		}
		[Authorize]
		public ActionResult FriendDetail(string id)
		{
			if (User.Identity.IsAuthenticated)
			{
				var user = Mvc3Website.Models.InMemoryUserStore.Get(long.Parse(HttpContext.User.Identity.Name));
				FacebookClient fbClient = new FacebookClient(user.AccessToken);
				dynamic detail = fbClient.Get("/" + id + "?fields=picture,name,gender");
				return View(detail);
			}
			else
			{
				return View();
			}
		}
	}
}

　コントローラはユーザーからのリクエストに対する処理を返します。「コントローラ内の、どのメソッドが呼び出されるか？」は、MVCフレームワークによりURLから判断されます。

　また、［Authorize］属性を指定することで、指定されたメソッドへの要求時に認証が必要であることを指定しています。

　Indexメソッドでは、ルートにアクセスされた際に処理され、Graph APIを通じてログオンユーザーの友達一覧のJSONデータを返します。

　FriendDetailメソッドでは、引数として渡されたFacebook IDを基に、Graph APIを通じて指定された友達の画像のURL、名前、性別が含まれたJSONデータを取得し返します。

　次ページでは、取得したJSONを基にjQuery MobileとRazor記法でHTMLを作成していきます。