C#で作成するfacebookアプリ mvp community camp
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,565 views

 

Statistics

Views

Total Views
1,565
Views on SlideShare
1,432
Embed Views
133

Actions

Likes
0
Downloads
6
Comments
0

5 Embeds 133

http://www.sapporoworks.ne.jp 63
http://d.hatena.ne.jp 36
https://twitter.com 29
http://furuya02.hatenablog.com 3
http://feedly.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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アプリとSDK Facebookアプリの種類は大きく3種類 1 facebook.com上から起動 左側のメニュー「アプリ」から一覧表示 2 スマートフォン等向け iOS・Android OS 用 SDKが提供されている 3 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度だけ (1) 開発者登録 最初に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を持つ 1 ノード(オブジェクト) ユーザ、ページ、イベント、グループ、アプリケーション、ステータス 、 メッセージ、写真、プロフィール画像、動画、ノート etc. 2 URLの一部で指定 http://graph.facebook.com/Microsoft 自分 Aさん 14日の 投稿 焼肉の 写真 Micro soft ~~への いいね
  • ノード(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/Microsoft http://graph.facebook.com/20528438720 指定はusername若しくは idのどちらでもよい
  • エッジ(Edge) ノードとノードの関連 1 エッジ(コネクション) 友達、ニュースフィード、Like、パーミッション、写真タグ、 ビデオタグ、投稿、イベント、グループ、チェックイン etc. 2 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”); 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; }
  • アクセストークン プロパティ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リクエストを1回の接続で行う var result = client.Batch( new FacebookBatchParameter("me"), new FacebookBatchParameter("me/feed“) ); http://facebooksdk.net/docs/making-synchronous-requests/#4 ※最大50リクエスト
  • 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}); 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」と「投稿者」
  • いいねベスト100 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/
  • いいねベスト100 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()”});
  • いいねベスト100 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”{ } 投稿者
  • いいねベスト100 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()); 当社比 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",
  • 先読み自分新聞 自分の投稿に対する「いいね」を列挙する 必要なデータは? 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_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/