2014.03.22 CLR/H #89 (MVP Community Camp 2014)

Facebook用のWebアプリをC#で開発する

C#でFacebookアプリ

自己紹介

識別子 ＳＩＮ

Twitter @furuya02

趣味 札幌ワークス・BlackJumboDog

スタッフ CLR/H

Microsoft MVP for Visual C# (2013/1～)

Facebookアプリの開発

１ FacebookアプリとSDK

２ Graph API

３ FQL

４ OAuth

５ 限定公開のFacebookアプリ作成要領

限定公開のFacebookアプリhttp://mvpcamp.azurewebsites.net/

FacebookアプリとSDKFacebookアプリの種類は大きく３種類

１ facebook.com上から起動左側のメニュー「アプリ」から一覧表示

２ スマートフォン等向けiOS・Android OS 用 SDKが提供されている

３ WebにFacebook機能を付けるいいね、投稿、ログイン

提供されるSDKサーバサイド用として、PHP(SDK)が提供されている

JavaScript facebookテンプレートの _Layout.cshtml

普通にViewに記述する

Facebook SDK for .NETFacebookClient

Facebook SDK for .NETInstall-Package Facebook

PM> Install-Package Facebook'Facebook 6.0.18' をインストールしています。'Facebook 6.0.18' が正常にインストールされました。'Facebook 6.0.18' を SampleApp に追加しています。'Facebook 6.0.18' が SampleApp に正常に追加されました。

アプリ登録アプリ毎に必ず必要、開発者登録は１度だけ

(1) 開発者登録最初に１回だけ開発者ページから「Register Now」携帯のメールアドレスが必要

(2) アプリ作成必要の都度、いくつでも作成可能

「初めてのFacebookアプリの開発」http://www.slideshare.net/furuya02/facebook-26186324

Graph APIFacebookのソーシャルグラフにアクセスする基本形

http://graph.facebook.com/ノード名

上記URLにGetリクエストを送ると、オブジェクトのデータがJSON形式で返される

WebRequestによる実装ノード(オブジェクト)に「Miscrosoft」を指定して、HTTPのGETリクエストを送る

PHP-SDKによる実装$facebook->api(’url’) SDKの読み込み

http://graph.facebook.com/ へのGetリクエスト

Facebookオブジェクトの初期化

C#SDKによる実装Get(“パス”)

Facebookオブジェクトの初期化

http://graph.facebook.com/ へのGetリクエスト

SDKの参照

GraphAPIとは結局、graph.facebook.comで提供されているWebAPI

http://graph.facebook.com/～

OpenGraphについて「ノード」「エッジ」と「フィード」で構成されている

nodes (such as a User, a Photo,

a Page, a Comment),

edges (such as a Page's Photos,

or a Photo's Comments),

fields (such as the birthday of a User,or the name of a Page).

Quickstart for Graph APIhttps://developers.facebook.com/docs/graph-api/quickstart/

ノード(node)ソーシャルグラフ上の全てのノードは固有IDを持つ

１ ノード（オブジェクト）ユーザ、ページ、イベント、グループ、アプリケーション、ステータス 、メッセージ、写真、プロフィール画像、動画、ノート etc.

２ URLの一部で指定http://graph.facebook.com/Microsoft

自分 Aさん14日の投稿

焼肉の写真

Microsoft

~~へのいいね

ノード(node) GETリクエストは、Get()メソッドで記述する

http://graph.facebook.com/Microsoft

(PHP) #result = $facebook->api('/Microsoft');

var result = client.Get(“Microsoft”);

http://facebooksdk.net/docs/making-synchronous-requests/#0

ノード(node)全てノードにはid(数値)とusername(名前)がある

{"category": "Company","username": "Microsoft","website": "http://www.facebook.com/Microsoft","id": "20528438720","link": "http://www.facebook.com/Microsoft","likes": 4002578,

http://graph.facebook.com/Microsofthttp://graph.facebook.com/20528438720

指定はusername若しくはidのどちらでもよい

エッジ(Edge)ノードとノードの関連

１ エッジ（コネクション）友達、ニュースフィード、Like、パーミッション、写真タグ、ビデオタグ、投稿、イベント、グループ、チェックイン etc.

２ URLの一部で指定http://graph.facebook.com/Microsoft/feed

Microsoft

13日の投稿

15日の投稿

11日の投稿

http://graph.facebook.com/Microsoft/feed

(PHP) #result = $facebook->api('/Microsoft/feed');

エッジ(Edge)GETリクエストは、Get()メソッドで記述する

var result = client.Get(“/Microsoft/feed”);

http://facebooksdk.net/docs/making-synchronous-requests/#0

フィールド(field)各ノード（オブジェクト）の要素（カラム）

１ フィールド名前、id、メールアドレス、誕生日、住所、etc.

２ パラメータで指定http://graph.facebook.com/Microsoft?fields=id,name

Id:

20528438720

name:

Microsoft

website:

http://www.....

likes:

4036786

http://graph.facebook.com/Microsoft?fields=id,name

(PHP) #result = $facebook->api('/Microsoft','GET‘,array('fields' => 'name,id'));

フィールド(field)パラメータは、Get()メソッドの第２パラメータで指定する

var result = client.Get(“Microsoft”,new{ fields = "name,id" });

http://facebooksdk.net/docs/making-synchronous-requests/#0

(PHP) #result = $facebook->api('/Microsoft?fields=name,id');

パラメータの記述要領パスの一部として書いてしまってもいい

//第2パラメータに指定var result = client.Get(“Microsoft” , new{ fields = ”name,id” });

//パスの一部として第1パラメータに指定var result = client.Get(“Microsoft?fields=name,id“);

アクセストークン認証が必要なデータの場合

パラメータ(access_token=)

として渡される

アクセストークンFacebookClientにプロパティとしてAccessTokenがある

namespace Facebook

{// Provides access to the Facbook Platform.

public class FacebookClient

{

public FacebookClient();

public FacebookClient(string accessToken);

// Gets or sets the access token.

public virtual string AccessToken { get; set; }// Gets or sets the app id.

public virtual string AppId { get; set; }

// Gets or sets the app secret.

public virtual string AppSecret { get; set; }public virtual Func<object, string> SerializeJson { get; set; }

public virtual bool UseFacebookBeta { get; set; }

アクセストークンプロパティAccessTokenが自動的に付加される

http://graph.facebook.com/～?access_token=CACACACA

public class FacebookClient {

public virtual string AccessToken { get; set; }

1 プロパティAccessToken

2 コンストラクタ

3 実行時指定

アクセストークンC#SDKでの指定

var client = new FacebookClient(){ };client.AccessToken = “CACACA";

new FacebookClient(“CACACA”){ };

client.Get("Microsoft/feed?access_token=CACACA");client.Get("Microsoft/feed”,new{access_token=“CACACA“});

GrapgAPIGETメソッドのまとめ

http://graph.facebook.com/Microsoft/feed?fields=name,id&access_tokrn=CACACA

var client = new FacebookClient(accessToken);var result = client.Get(“Microsoft/feed” , new{ fields = ”name,id” });

ノード エッジ フィールド

アクセストークン

GET以外のGraphAPI

■投稿client.Post(“me/feed”,new {message=“投稿するメッセージ”);

■更新client.Post(“記事ID”,new {message=“書き換えたメッセージ"});

■削除client.Delete("記事ID");

検索graph.facebook.com/search?q={your-query}&[type={object-type}]

client.Get(“search” , new{ q = ”ラーメン”,type=“post” });

https://developers.facebook.com/docs/graph-api/using-graph-api

バッチ処理複数のGETリクエストを１回の接続で行う

var result = client.Batch(new FacebookBatchParameter("me"),new FacebookBatchParameter("me/feed“)

);

http://facebooksdk.net/docs/making-synchronous-requests/#4

※最大５０リクエスト

FQLFacebookのクエリ言語

SQLと似たインターフェイスでGraph API上のデータにアクセス

SELECT [fields] FROM [table] WHERE [conditions]

FQLGraphAPIの一部という位置づけに変わってます

https://api.facebook.com/method/fql.query?query=QUERY

http://graph.facebook.com /fql?q=QUERY

FQLGet()メソッドで記述

http://graph.facebook.com/fql?q=QUERY

(PHP) #result = $facebook->api(array(

'method' => 'fql.query',

'query' => QUERY

));

var result = client.Get(“fql”,new{q=QUERY});

http://facebooksdk.net/docs/making-synchronous-requests/#3

FQLテーブルの種類

https://developers.facebook.com/docs/reference/fql

FQLフィールドの種類

https://developers.facebook.com/docs/reference/fql/user/

FQLの例サブクエリの記述可能

名前から情報取得する

SELECT uid,name,sex,pic,username FROM user WHERE username ="taro“

友達の画像を取得する

SELECT pic FROM user WHERE uid=‘xxxxxxxxxxxx‘

「いいね」を押したURLを取得

SELECT url FROM object_url WHERE url <>“” AND id IN

(SELECT object_id FROM like WHERE user_id=me())

SELETE に*は使えない WHEREは必須(1=1などはエラーとなる)

FQL複数リクエスト

(PHP) $results = $facebook->api(array(

'method' => 'fql.multiquery',

'queries' => array(

'query1' => 'SELECT …',

'query2' => 'SELECT ...',

),

)); http://facebooksdk.net/docs/making-synchronous-requests/#3

var result = client.Get("fql", new{

q = new[]{"SELECT uid from user where uid=me()",

"SELECT name FROM user WHERE uid=me()"

}});

AOuth必要なアクセストークンを取得するために

Webアプリから見たOAuthの実装可能な限り簡略化してみた

① /www.facebook.com/dialog/oauth?redirect_url=“callBack”

② public ActionResult callBack(string code)

③/graph.facebook.com/oauth/access_token?code=xxx

www.facebook.com

①dialog/oauthへのリダイレクトC#SDKによる実装

var url = client.GetLoginUrl(new {client_id = “XXXX”, //必須

client_secret = “XXXXXXXXX”,redirect_uri = "http://localhost/Home/CallBack", //必須//scope = “email” 追加のパーミッションが必要な場合

});return Redirect(url.AbsoluteUri);

"https://www.facebook.com/dialog/oauth?client_id=“XXX”&client_secret=“XXXXXX”& redirect_uri=“http://localhost/Home/Callback”

②codeの受領C#SDKによる実装

public ActionResult CallBack(string code,string error){if(error!=null){ //キャンセルされた場合

View(“ERROR”);

};//codeを使用した処理

}

③access_tokenの取得C#SDKによる実装

var client = new FacebookClient(){};

dynamic result = client.Get("oauth/access_token", new{client_id = “XXX”, //必須client_secret = “XXXXXXX”,//必須redirect_uri = "http://localhost/Home/CallBack", //必須code = code //必須

});

var accessToken= result.access_token;

①oauth/dialogへのリクエストと一致している必要がある

http://graph.facebook.com/oauth/access_token?

限定公開のFacebookアプリ作成要領かなりやっつけです。コードは情けなくて公開できません(T^T)

いいねベスト１００自分の送った「いいね」の列挙

必要なデータは？1 自分が「いいね」した一覧2 対象「いいね」の「メッセージのURL」と「投稿者」

いいねベスト１００FQLでlikeテーブルから取得する ※エッジのlikeは、ファンページへの「いいね」

SELECT object_id FROM like WHERE user_id=me()

Likeのテーブルには、「投稿者」が無いので、とりあえず「object_id」を取得する

object_idでメッセージのURLが作成できる

https://www.facebook.com/object_id

https://developers.facebook.com/docs/reference/fql/like/

いいねベスト１００FQLでlikeテーブルからobject_idを取得する

{

"data": [

{

"object_id": "6673XXX0002813"

},

{

"object_id": "7532XXX8023129"

},

{

"object_id": "2262XXX0897216"

},

{

"object_id": "7061XXX6107744"

},

var result = client.Get(”fql”,new

{ q= “SELECT object_id FROM like WHERE user_id=me()”});

いいねベスト１００object_idから、フィールド(投稿者)を取得する

var result = client.Get(”object_id”);

{

"id": "75322XXXXX3129",

"created_time": "2014-03-20T13:22:49+0000",

"from": {

"name": “YAMADA TARO”,

"id": "100000XXXXXXXX"

},

“message”:” ********”

“link”: “https://www.facebook.com/photo.php? ******** ",

"updated_time": "2014-03-20T13:22:49+0000",

"comments": {

}

“likes”{

}

投稿者

いいねベスト１００Batch処理

var list = new List<FacebookBatchParameter>();

foreach (var d in data){

list.Add(new FacebookBatchParameter(d.object_id));

}

var result = client.Batch(list.GetRange((n*50),50).ToArray());

当社比１件ごとリクエストした場合 78秒/50件Batchでリクエストした場合 2.3秒/50件

SQL処理にボトルネックが無いことは明白

※1度に50件までしかBatchのパラメータに送れない

ダダ漏れメッセージ検索Facebook内の公開メッセージの検索

必要なデータは？1 リンク先2 メッセージ3 画像リンク

ダダ漏れメッセージ検索GraphAPIのsearchを使用する

投稿が検索対象なのでtype=post

デフォルトでは、検索数が25件なのでlimit=100

var result = client.Get(”search?type=post&q={検索文字列}&limit=100");

{

"data": [

{

"id": "100000466595635_854462207912658",

"from": {

"name": "Masayuki Shake Matsushita",

"id": "100000466595635"

},

"story": "Masayuki Shake Matsushita shared Yuzo Fabio Iwata's event.",

"link": "https://www.facebook.com/events/667356079989254/",

"actions": [

{

"name": "Like",

"link": "https://www.facebook.com/100000466595635/posts/854462207912658"

}

],

"privacy": {

"value": ""

},

"type": "link",

"application": {

"name": "Links",

"id": "2309869772"

},

"created_time": "2014-03-21T01:07:24+0000",

"updated_time": "2014-03-21T01:07:24+0000"

先読み自分新聞自分の投稿に対する「いいね」を列挙する

必要なデータは？1 投稿に対する「いいね」の列挙2 投稿の画像3 投稿へのリンク4 投稿の日時

先読み自分新聞自分の投稿に対する「いいね」を列挙する

ノード：me 自分エッジ：post 投稿フィールド：画像、メッセージ、

likesの中のid など

likesの列挙はデフォルトで25なのでlimitで多い目に指定している

var q=“me/posts?fields=type,message,story,picture,link,created_time,

likes.limit(500).fields(id)&limit=300";

var result = client.Get(q);

{

"data": [

{

"type": "photo", "message": "「3/22のみ公開」用アプリ 第５段「いいね」から学ぶべき事¥n土曜日のセッションでは、これらのつまらないアプリの作成方法も・・・

"picture": "https://fbcdn-photos-g-a.akamaihd.net/hphotos-ak-ash3/t1.0-0/537110_621663201243765_1155083109_s.jpg

"link": "https://www.facebook.com/photo.php?fbid=621663201243765&set=a.200848559991900.50847.100002002711624&type=1&relevant_count=1

"created_time": "2014-03-20T06:04:11+0000",

"id": "100002002711624_621663487910403",

"likes": {

"data": [

{

"id": "10000XXXXXXX426"

},

{

"id": "10000XXXXXXX951"

},

{

"id": "10000XXXXXXX367"

},

{

"id": "10000XXXXXXX377"

},

ご清聴ありがとうございました

札幌ワークス

http://www.sapporoworks.ne.jp/spw

イラストは、「いらすとや」様のフリー素材を利用させて頂きました。http://www.irasutoya.com/