2014.03.22 CLR/H #89 (MVP Community Camp 2014)
Facebook用のWebアプリをC#で開発する
C#でFacebookアプリ
自己紹介
識別子 SIN
Twitter @furuya02
趣味 札幌ワークス・BlackJumboDog
スタッフ CLR/H
Microsoft MVP for Visual C# (2013/1~)
Facebookアプリの開発
1 FacebookアプリとSDK
2 Graph API
3 FQL
4 OAuth
5 限定公開のFacebookアプリ作成要領
限定公開のFacebookアプリhttp://mvpcamp.azurewebsites.net/
FacebookアプリとSDKFacebookアプリの種類は大きく3種類
1 facebook.com上から起動左側のメニュー「アプリ」から一覧表示
2 スマートフォン等向けiOS・Android OS 用 SDKが提供されている
3 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度だけ
(1) 開発者登録最初に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を持つ
1 ノード(オブジェクト)ユーザ、ページ、イベント、グループ、アプリケーション、ステータス 、メッセージ、写真、プロフィール画像、動画、ノート etc.
2 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)ノードとノードの関連
1 エッジ(コネクション)友達、ニュースフィード、Like、パーミッション、写真タグ、ビデオタグ、投稿、イベント、グループ、チェックイン etc.
2 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)各ノード(オブジェクト)の要素(カラム)
1 フィールド名前、id、メールアドレス、誕生日、住所、etc.
2 パラメータで指定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()メソッドの第2パラメータで指定する
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リクエストを1回の接続で行う
var result = client.Batch(new FacebookBatchParameter("me"),new FacebookBatchParameter("me/feed“)
);
http://facebooksdk.net/docs/making-synchronous-requests/#4
※最大50リクエスト
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)
いいねベスト100自分の送った「いいね」の列挙
必要なデータは?1 自分が「いいね」した一覧2 対象「いいね」の「メッセージのURL」と「投稿者」
いいねベスト100FQLで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/
いいねベスト100FQLで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()”});
いいねベスト100object_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”{
}
投稿者
いいねベスト100Batch処理
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());
当社比1件ごとリクエストした場合 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のみ公開」用アプリ 第5段「いいね」から学ぶべき事¥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/
Top Related