1. 2013.9.14 OSC 2013 Hokkaido
C#+Windows Azure編
初めてのFacebookアプリの開発

2. 自己紹介
 識別子 ＳＩＮ/札幌ワークス
 Twitter @furuya02
 仕事 某社でシステムサポート
 スタッフ CLR/H
 Microsoft MVP for Visual C# (2013/1～)

3. アジェンダ
 1 開発環境
 2 C#(.NET）での選択
 3 Facebookアプリの作成
 4 公開
 5 Graph API と FacebookClient

4. 1 開発環境
Visual Studio 2012 Express for Web
Windows Azure
開発者登録

5. Microsoft Web Platform Installer

6. Visual Studio Express 2012 for Web
with Windows Azure SDK 2.1

7. インストール
copyright© 2013/05 by SAPPOROWORKS

8. 有効期間３０日

9. プロダクトキー
LiveIDが有る場合は、「氏名」などの入力でプロダクトキーが発行されます

10. 起動画面

11. 1 開発環境
Visual Studio 2012 Express for Web
Windows Azure
開発者登録

12. Facebook開発者登録
未登録のユーザーは、右上に「Register Now」というボタンが表示されます
開発者ページ
https://developers.facebook.com/

13. Facebook開発者登録
Facebookプラットフォームポリシーとプライバシーポリシーに同意する

14. Facebook開発者登録
携帯のメールアドレスが必要

15. Facebook開発者登録
メールで送られてきたコードを入力して承認

16. Facebook開発者登録
情報入力は、不要であればそのまま進んでも大丈夫

17. Facebook開発者登録
携帯のメールアドレスを用意しておけば、５分で完了します。

18. 1 開発環境
Visual Studio 2012 Express for Web
Windows Azure
開発者登録

19. Windows Azure
１か月無料プラン 「Live ID」「クレジットカード」「携帯電話番号」

20. Windows Azure
30日間、17,000円分のクレジット 使用限度額を超えたらサービス停止

21. 「制限を超えた場合、サービス停止」するのは、「無料プラン」「 BizSpark 」
「MSDNサブスクライバー」など
Windows Azure
従量制は0円から。定額制なし

22. サブスクリプション申し込み Step by Step
http://msdn.microsoft.com/ja-jp/windowsazure/ee943806
クラウドガール
http://msdn.microsoft.com/ja-jp/windowsazure/gg194745
Windows Azure
各種の情報がWeb上で公開されています

23. ２ C#(.NET)での選択
 1 開発環境
 2 C#(.NET)での選択
 3 Facebookアプリの作成
 4 公開
 5 Graph API と FacebookClient

24. 2 C#(.NET)での選択
Facebookテンプレート
Facebook SDK for .NET

25. Facebookテンプレート
ASP.NET MVC 4 でプロジェクトを作成すると選択可能になる

26. ASP.NET and Web Tools 2012.2
2013年2月に公開 Visual Studio SP2 にも含まれる

27. バージョン SP 種類 可否
VS2010 ×
VS2012
SP1以前 ×
SP2
Webフォーム ×
MVC3 ×
MVC4
VS2013 RC
VS2012のSP2以降で利用可能
SP1では使用できません

28. 2 C#(.NET)での選択
Facebookテンプレート
Facebook SDK for .NET

29. Facebook SDK for .NET
Webフォーム で使用できるのは・・・
Facebook SDK for .NET
http://facebooksdk.net/

30. copyright© 2013/05 by SAPPOROWORKS
Facebook SDK for .NET
NuGetからインストール可能

31. Facebook.dllは共通
テンプレートは、Facebook.dll上のマイクロソフト製のライブラリ
WebフォームでSDKを使用 Facebookテンプレートを使用

32. WebフォームでのFacebookアプリ
札幌ワークスのホームページで紹介しています
札幌ワークス
http://www.sapporoworks.ne.jp/

33. 3 Facebookアプリの作成
 1 開発環境
 2 C#(.NET)での選択
 3 Facebookアプリの作成
 4 公開
 5 Graph API と FacebookClient

34. 3 Facebookアプリ作成
新しいアプリを作成
プロジェクトの新規作成
結合

35. 新しいアプリを作成
開発者ページで・・・・

36. 新しいアプリを作成
開発者ページで「＋新しいアプリを作成」をクリックする

37. 新しいアプリを作成
入力するのは「アプリ名」と「アプリの名前空間」のみ

38. 新しいアプリを作成
セキュリティチェック

39. 新しいアプリを作成
「App ID」「App Secret」が付与される

40. 3 Facebookアプリ作成
新しいアプリを作成
プロジェクトの新規作成
結合

41. プロジェクトの新規作成
「.NET Framework 4.5」-「ASP.NET MVC 4 Webアプリケーション」

42. プロジェクトテンプレート
「Facebookアプリケーション」を選択

43. SSL有効
「https://localhost:44300/」を使用してFacebookと結合する

44. デバッグ実行で例外
Facebookとの結合が完了するまで、動作できません

45. 3 Facebookアプリ作成
新しいアプリを作成
プロジェクトの新規作成
結合

46. 結合する方法
開発者ページで指定する

47. 結合する方法
「Facebook上のアプリ」を使用する

48. 結合する方法
「Facebook上のアプリ」の接続イメージ

49. 名前空間
Facebookアプリの場合、そのままURLになる

50. 名前空間
まだ、接続先が存在しないため

51. Ｗebアプリ側の設定
Web.configへの記述

52. Facebook側の設定
「セキュリティで保護されたキャンパスのURL」のみ使用する

53. パーミッション許可のポップアップ

54. 証明書エラー
https://localhost:XXXX ローカルのサーバに証明書が置かれていない

55. ローカルデバッグ
URLの?code=以降はアクセストークン

56. 結合状態
ローカルIISの内容が表示されている
https://apps.facebook.com/
osc-sample/
https://localhost:44300/

57. 4 公開
 1 開発環境
 2 C#(.NET)での選択
 3 Facebookアプリの作成
 4 公開
 5 Graph API と FacebookClient

58. 4 公開
Webサイトの作成
発行
結合

59. Windows Azureへのサインイン
Microsoft LiveID でサインイン

60. WindowsAzureポータル
サインイン後の状態

61. WindowsAzureポータル
Webサイトの作成

62. webサイト－簡易作成
地域は、今、日本で使用するのであれば「東アジア」がお勧めと聞いてます

63. webサイト
名前をクリックすると「ダッシュボード」が開く

64. ダッシュボード
発行プロファイルのダウンロード

65. 発行プロファイル
接続用のURLやパスワードの入ったXMLファイル

66. 4 公開
Webサイトの作成
発行
結合

67. 発行
「ソリューションエクスプローラ」で「プロジェクト」を右クリック

68. Webを発行
発行プロファイルをインポートする

69. ファイルからインポート
ダウンロードした発行プロファイルを使用する

70. すべての設定がインポートされる
「発行」を押すだけ

71. デプロイ完了
iframe内は、ローカルから出力されてる

72. 結合状態
ローカルIISの内容が表示されている
https://apps.facebook.com/
osc-sample/
https://osc-
sample.azurewebsites.net/
https://localhost:44300/

73. 4 公開
Webサイトの作成
発行
結合

74. サイトURL
SSLでのアクセスも可能
http://osc-sample.azurewebsites.net
https://osc-sample.azurewebsites.net

75. アプリをFacebookに結合する方法
「セキュリティで保護されたキャンパスのURL」を書き換える

76. 結合状態
Webサイトの内容が表示されている
https://apps.facebook.com/
osc-sample/
https://osc-
sample.azurewebsites.net/
https://localhost:44300/

77. SandBox Mode
「セキュリティで保護されたキャンパスのURL」を書き換える

78. SandBox ModeとSSLの関係
非SSLではサンドボックスの解除はできない

79. ５ Graph API
 1 開発環境
 2 C#(.NET)の選択
 3 Facebookアプリの作成
 4 公開
 5 Graph API と FacebookClient

80. 5 Graph API と FacebookClient
Graph API Explorer
オブジェクト
フィールド・コネクション
パーミッション

81. Graph APIとは
「Facebookのソーシャルグラフ」からデータを取得するためのAPI
https://graph.facebook.com/{オブジェクト}/{コネクション}
オブジェクト
人や物の事で、ID（数字）もしくは
usernameで指定する
コネクション
オブジェクトとオブジェクトの繋がり
で、名前で指定する
https://graph.facebook.com/{オブジェクト}?fields={フィールド}

82. Graph API Explorer
Google Chromeでは、右の結果表示の部分が下にずれてしまいます
https://developers.facebook.com/tools/explorer

83. Graph API Explorer
「パラメータ」を指定して「送信」
パラメータ 送信結果（JSON)が返る

84. Graph API Explorer
「パラメータ」の自動生成
フィールド名・コネクションの選択自動的にパラメータがセットされる

85. Graph API Explorer
前回の設定を保持している、「Clear」「キャンセル」でパーミッションなし
アクセストークン取得

86. Graph API Explorer
「ID」「名前」「電子メール」「友達一覧」の取得例
/{自分のID}?frields=id,name,email,friends

87. Graph API Explorer
自分自身を表現するオブジェクトは、”me” で指定可能
/me?frields=id,name,email,friends

88. 5 Graph APIとFacebookClient
Graph API Explorer
オブジェクト
フィールド・コネクション
パーミッション

89. Facebookテンプレート
最初から、Facebook情報を取得したサンプルになっている
アイコン
名前
電子メールアドレス
写真一覧
友達一覧

90. FacebookClientの拡張メソッド
GetCurentUserAsync()

91. CodePlexでコードを確認
GetCurrentUser => “me”を指定してGetFacebookObjectAsyncを呼び出す

92. FacebookClientExtensions
GetCurrntUser GetCurrentUserFriends GetCurrentUserPhotos など

93. CodePlexでコードを確認
他の拡張メソッドもGetFacebookObjectAsyncを呼出している
GetCurrentUserFriends
=> "me/friends"
GetCurrentUserStatuses
=> "me/statuses"
GetCurrnetUserPhotos
=> "me/photos"

94. 5 Graph APIとFacebookClient
Graph API Explorer
オブジェクト
フィールド・コネクション
パーミッション

95. FacebookClientの型指定
MyAppUserを指定して使用されている

96. Models/MyAppUser.cs
必要なフィールド名がプロパティとして指定されている

97. GetFieldによるフィールド指定
パラメータ（”me”の後ろ）に追加されている

98. FacebookQueryHelper.GetFields
?fields=以降にフィールド指定が生成されている

99. Models/MyAppUser.cs
３種類の型のプロパティ

100. プロパティの型
フィールドはString、コネクションは2種類
String(フィールド)
FacebookConnection
(コネクション)
FacebookGroupConnection
(コネクション)

101. Models/MyAppUser.cs
コネクションのフィールドは、更に型で指定する

102. GraphAPIの利用方法
フィールド及びコネクションを型定義
class Dat{
public String id;
public String name;
public FacebookGroupConnection<>photos;
}
https://graph.facebook.com/me?fields=id,name,photos
Dat dat = GetFacebookObjectAsync<Dat>(“me”)
オブジェクト
フィールド
コネクション

103. 5 Graph APIとFacebookClient
Graph API Explorer
オブジェクト
フィールド・コネクション
パーミッション

104. パーミッション
FacebookAuthorize属性

105. パーミッション
GraphAPIのパーミッションそのまま

106. アジェンダ
 1 開発環境
 2 C#(.NET）での選択
 3 Facebookアプリの作成
 4 公開
 5 Graph API と FacebookClient

107. ご清聴ありがとうございました
札幌ワークス
http://www.sapporoworks.ne.jp/spw