2015.10.03 第6回 Japan Xamarin User Group Conference 東京 セッション資料

1. 2015.10.03 #6 JXUG Conference
Xamarin.Forms も Facebook の graph API も、頑張りすぎないのが吉。
シルバーウィークにXamarin.Formsで
Facebookアプリを作成した

2. ⾃自⼰己紹介
¡ 識識別⼦子 ＳＩＮ/札幌ワークス
¡ Twitter @furuya02
¡ スタッフ CLR/H
¡ ブログ SIN@SAPPOROWORKSの覚書
¡ Microsoft MVP for Visual C# (2013/1〜～)
¡ フリーソフト BlackJumboDog
¡ BuildInsider Xamarin逆引きTips

3. アプリ紹介

4. アプリ紹介
Xamarin.Formsで約１週間で作成
graph API を利利⽤用して、各種情報を視覚化
ここんとこ
重要
Facebookのソーシャルグラフ
からデータを取得
・たくさんの「いいね」を頂いた投稿
・たくさん「いいね」くださった⽅方々
・最近、何に「いいね」を押したか
・何時頃、投稿しているのか
・何⽉月にたくさんとう投稿したか
など・・・

5. アプリ紹介
先読み⾃自分新聞
最もたくさんの「いいね」を獲得した記事の紹介

6. アプリ紹介
たくさんの「いいね」をありがとう

7. アプリ紹介
最近、何書いたっけ
酔っ払って、何か、変なこと書いてない？

8. アプリ紹介
脊髄反応ページ
どんなリンクを紹介したか。
すいません、私の場合は、⾃自分のブログばっかり・・・

9. アプリ紹介
いつ寝るの・依存⽉月間
投稿した、時間、⽇日付を
集計してみました。

10. デモ

11. Facebookアプリ開発事情

12. Facebookアプリ開発事情
Facebookで提供されるSDKには、C#⽤用はない・・・

13. Facebookアプリ開発事情
C#でFacebook書くなら、これ⼀一択かも

14. Facebookアプリ開発事情
Profile78では、使えないです・・・
PM> Install-Package Facebook

15. Facebookアプリ開発事情
Forms⽤用のコンポーネントは、現時点では公開されていません
Search>Facebook
Android
iOS

16. Facebookアプリ開発事情
Forms⽤用もあるじゃないか︎ ＼（⌒∀⌒*）/ﾅﾝﾃﾞ ﾊﾔｸ ｲﾜﾅｲﾉ☆♪
すてま

17. Facebookアプリ開発事情
Xamarin.FormsでFacebookアプリ書くなら、現時点ではこれ⼀一択

18. OAuth認証

19. Facebookアプリ
OAuth認証
1. OauthのURLをリクエストすると
https://m.facebook.com/dialog/oauth? [AppID]&&scope=[Scope]…
2. Loginのページへリダイレクトされる
https://m.facebook.com/login.php? [AppID]&&scope=[Scope]…
3. ID・パスワードで認証が成功するとアクセス許可を求める
https://m.facebook.com/v2.0/dialog/oauth? [AppID]&&scope=[Scope]…
4. 許可された場合は、リダイレクト（最終）ページへジャンプし
パラメータとして「アクセストークン」を送ってくる
https://www.facebook.com/connect/login_̲success.html#access_̲token=xxxx

20. Facebookアプリ
Xamarin.FormsのWebViewでNavigatedイベントを処理理する
//Uri遷移のイベントを処理理する
webView.Navigated += (s, e) => {
if( 最終ページか? ){
if( アクセストークが取得できたか? )
// 認証成功
else
// 認証失敗
}
//認証継続中
}
いつの間にか増えてた？

21. Facebookアプリ
Cookieが有効だと、ログインがスルーしてしまう・・（ログアウトできない）
public class ExWebView : WebView {
public ExWebView(bool deleteCookie) {
DeleteCookie = deleteCookie;
}
public bool DeleteCookie { get; private set; }
}
拡張WebViewで
クッキー削除のプロパティを追加

22. Facebookアプリ
iOSでは、NSHttpCookieStorage.SharedStorage
public class ExWebViewRenderer : WebViewRenderer {
protected override void OnElementChanged(VisualElementChangedEventArgs e) {
base.OnElementChanged(e);
//Xamarin.Formのコントロール(ExWebView)
var exWebView = e.NewElement as ExWebView;
if (exWebView.DeleteCookie) { //クッキー（ログイン情報）の削除
var storage = NSHttpCookieStorage.SharedStorage;
foreach (var cookie in storage.Cookies) {
storage.DeleteCookie(cookie);
}
}
プラットフォームごとクッキー削除
を機能させる

23. Facebookアプリ
Androidでは、CookieManager.Instance.RemoveAllCookie
public class ExWebViewRenderer : WebViewRenderer {
protected override void
OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e) {
base.OnElementChanged(e);
//Xamarin.Formのコントロール(ExWebView)
var exWebView = e.NewElement as ExWebView;
if (exWebView.DeleteCookie) { //クッキー（ログイン情報）の削除
CookieManager.Instance.RemoveAllCookie();
}
}
}
プラットフォームごとクッキー削除
を機能させる

24. Facebookアプリ
WindowsPhoneでは、JavaScriptも有効に・・・
public class ExWebViewRenderer : WebViewRenderer {
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e) {
base.OnElementChanged(e);
//Xamarin.Formのコントロール(ExWebView)
var exWebView = e.NewElement as ExWebView;
//ネイティブコントロール(Microsoft.Phone.Controls.WebBrowser)
var webBrowser = Control;
webBrowser.IsScriptEnabled = true;
if (exWebView.DeleteCookie) { //クッキー（ログイン情報）の削除
webBrowser.ClearCookiesAsync();
}
}
}
プラットフォームごとクッキー削除
を機能させる
デフォルトでOFFになっている
JavaScriptをONにしないと認証で
きない

25. Facebookアプリ
CookieWebViewを使えば、レンダラーなしで⾏行行けるカモ

26. 画⾯面遷移

27. 画⾯面遷移

28. class App {
MainPage =
NavigationPage(new Page())
画⾯面遷移
メインはNavigationPage

29. Navigation.PushAsync(new Page)
画⾯面遷移
PushAsyncで遷移・⽮矢印でメインへ戻る

30. Navigation.PushModalAsync(new Page())
Navigation.PopModalAsync()
画⾯面遷移
認証画⾯面はモーダルウインド

31. ちょいハマり

32. 画⾯面真っ⽩白
ATS (App Transport Security)
慌てないで、取り敢えず8.ｘで
試すのが吉
ATSへの対策（info.plistなど・・）
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>facebook.com</key>

33. NuGet パッケージの復復元の有効化・が無い
git clone したら参照エラーでコンパイルできない
VS2015にしたから・・・・？

34. 更更新プリグラムで⼀一応復復活
Nuget Package Manager for Visual Studio 2015
微妙に「英語」表記

35. 最新のNuget
packagesフォルダや.nugetフォルダが無くても再構築される
ので .gitignoreに [Pp]ackages/ を追加しました
https://github.com/furuya02/FbSample/

36. FacebookもXamarin.Formsも限界まで挑戦しないで・・・
頑張りすぎないのが吉。
「ネイティブのFacebookアプリが１週間で作成できる！」

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