C#で作成するfacebookアプリ mvp community camp

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アプリとSDK
Facebookアプリの種類は大きく３種類
１ facebook.com上から起動
左側のメニュー「アプリ」から一覧表示
２スマートフォン等向け
iOS・Android OS 用 SDKが提供されている
３ WebにFacebook機能を付ける
いいね、投稿、ログイン

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

JavaScript facebookテンプレートの _Layout.cshtml
普通にViewに記述する

Facebook SDK for .NET
FacebookClient

Facebook SDK for .NET
Install-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 API
Facebookのソーシャルグラフにアクセスする基本形
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 API
https://developers.facebook.com/docs/graph-api/quickstart/

ノード(node)
ソーシャルグラフ上の全てのノードは固有IDを持つ
１ノード（オブジェクト）
ユーザ、ページ、イベント、グループ、アプリケーション、ステータス、
メッセージ、写真、プロフィール画像、動画、ノート etc.
２ URLの一部で指定
http://graph.facebook.com/Microsoft
自分 Aさん
14日の
投稿
焼肉の
写真
Micro
soft
~~への
いいね

ノード(node)
GETリクエストは、Get()メソッドで記述する
(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/20528438720
指定はusername若しくは
idのどちらでもよい

エッジ(Edge)
ノードとノードの関連
１エッジ（コネクション）
友達、ニュースフィード、Like、パーミッション、写真タグ、
ビデオタグ、投稿、イベント、グループ、チェックイン etc.
２ URLの一部で指定
http://graph.facebook.com/Microsoft/feed
Micro
soft
13日の
投稿
15日の
投稿
11日の
投稿

http://graph.facebook.com/Microsoft/feed
(PHP) #result = $facebook->api('/Microsoft/feed');
エッジ(Edge)
GETリクエストは、Get()メソッドで記述する
var result = client.Get(“/Microsoft/feed”);

フィールド(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" });

(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; }

プロパティ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“});

GrapgAPI
GETメソッドのまとめ
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“)
);
※最大５０リクエスト

FQL
Facebookのクエリ言語
SQLと似たインターフェイスでGraph API上のデータにアクセス
SELECT [fields] FROM [table] WHERE [conditions]

FQL
GraphAPIの一部という位置づけに変わってます
https://api.facebook.com/method/fql.query
?query=QUERY
http://graph.facebook.com /fql?q=QUERY

FQL
Get()メソッドで記述
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});

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へのリダイレクト
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の受領
public ActionResult CallBack(string code,string error){
if(error!=null){ //キャンセルされた場合
View(“ERROR”);
};
//codeを使用した処理
}

③access_tokenの取得
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",

先読み自分新聞
自分の投稿に対する「いいね」を列挙する
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_6216632012
"link": "https://www.facebook.com/photo.php?fbid=621663201243765&set=a.200848559991900
"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/

C#で作成するfacebookアプリ mvp community camp

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to C#で作成するfacebookアプリ mvp community camp

Similar to C#で作成するfacebookアプリ mvp community camp (20)

More from Shinichi Hirauchi

More from Shinichi Hirauchi (20)

Recently uploaded

Recently uploaded (14)

C#で作成するfacebookアプリ mvp community camp