すまべんLite@関⻄西 #04
Xamarin 2.0 で Android 開発⼊入⾨門シリーズ #4
伊勢  シン
2013/10/08(Tue) @Fenrir Inc. ⼤大阪本社
シリーズの⽬目標
•  Android アプリ開発の、現代の勘所を押さえる
– 画⾯面作成:Fragment、レイアウトXML
– リソースの⼊入れ⽅方
– リークの原因になりやすいコンテキストの取り扱い
– その他もろもろ
•  Xamari...
想定の対象者
•  これまで他のプラットフォームでそれなりに開発してて、
Androidアプリの開発をやってみたい⼈人
•  Javaに苦⼿手意識識があってAndroid開発に踏み出せ
なかった⼈人
•  本当のはじめての⼈人は、周りに聞きなが...
ターゲットプラットフォーム
•  Xamarin 2.0
– Xamarin Studio
– Android SDK
•  Android 4.0
– 最新の環境でやってみるというのが今回の⽬目的の⼀一
つなので。
– ⾼高速エミュレーター ...
スケジュール
•  全56回でじっくりまったりを予定
– #1 Activity/Fragmentのライフサイクル
– #2 画⾯面レイアウトとリソース管理理
– #3 画⾯面遷移・インテント
– #4  通信処理理・Twitter タイムライ...
Xamarin 2.0でAndroid開発⼊入⾨門 #4
Twitterタイムラインビューワの開発
async/await を使った⾮非同期処理理
前回のおさらい
•  Activity 間の遷移は Intent。
– 明⽰示的と暗黙的があります
•  Activity の中で Fragment を遷移させるのは、
FragmentManager を使う
今⽇日の⽬目標
•  Twitterタイムラインビューワをつくる
– ReactiveOAuth を使った
Twitter へのアクセス
– ListView のつかいかた
•  ひな形ダウンロードしてください
– http://sdrv.ms...
どういう実装にするか
•  Reloadボタンを押したとき、
– 認証されていなければ認証画⾯面に移動して認証する。
– 認証画⾯面はWebViewでログイン画⾯面を表⽰示、
•  ログインすると、PINが表⽰示される
– 表⽰示されたPINを...
ひな形の確認
•  MainActivity, MainFragment
MainContainer.axml Main.axml
–  前回、Fragment で遷移させたの構造
–  Main.axml の中は  ListView がありま...
MainFragment
•  3つのインナークラスが定義されています。
– Tweet, User
•  Twitter のツイートを表すオブジェクト。
•  JsonDataContractSerializer で直接パースできるように
D...
Adapter の要:GetView
•  convertView に再利利⽤用できるビューが⼊入っている
なければ Layout から作り出す。
public override View GetView (int position, View...
Configulation クラス:設定値
•  Consumer Key/Consumer Secret を⼊入れましょう
•  設定値の保存には  SharedPreference を使います。
–  読み込み
–  書き込み
public...
AsyncOAuthの初期化処理理
•  ハッシュ計算関数を登録する必要があります。
•  MainActivity の  OnCreate に書いてしまいま
しょう。
protected override void OnCreate (Bun...
認証画⾯面への遷移を作る
•  MainFragment の Reload押したときに、認証されていなければ
認証画⾯面(AuthenticateFragment)へ遷移
–  OnCreateView の  button.Click のイベン...
認証ページの表⽰示処理理
•  認証画⾯面はWebViewでログイン画⾯面を表⽰示
•  認証に使⽤用するフィールド変数を定義します
private OAuthAuthorizer authorizer ;"
private RequestTo...
認証ページの表⽰示処理理
•  AuthenticateFragment の  OnStart に
RequestToken をとり、ページを表⽰示する処理理を書きます。
public override async void OnStart (...
認証ページの表⽰示処理理
•  AuthenticateFragment の  OnStart に
RequestToken をとり、ページを表⽰示する処理理を書きます。
public override async void OnStart (...
そもそも  async/await とは
•  C# に新しく⼊入った⾮非同期処理理を便便利利に書ける仕様
•  対応している⾮非同期処理理を await つきで呼び出すと、
その⾮非同期処理理を実⾏行行した後に処理理が続⾏行行する
–  aw...
認証処理理
•  PINコードを⼊入⼒力力して、ボタンを押したら、
AccessToken を取得し、設定値に保存する。
button.Click += async (sender, e) => {"
    var pinCode = pin...
認証処理理
•  PINコードを⼊入⼒力力して、ボタンを押したら、
AccessToken を取得し、設定値に保存する。
button.Click += async (sender, e) => {"
    var pinCode = pin...
ここまでで認証がとれるようになったはず
•  試してみましょう。
タイムラインを取得する
•  Reloadボタンを押したとき、
– 認証されていれば、タイムラインをロードして表⽰示する。
button.Click += async (sender, e) => {"
    var token = Conf...
タイムラインを取得する
•  Reloadボタンを押したとき、
– 認証されていれば、タイムラインをロードして表⽰示する。
button.Click += async (sender, e) => {"
    var token = Conf...
タイムラインの取得 – 確認
•  この状態で実⾏行行すると、アプリケーション出⼒力力パッ
ドに出ている
しあげ: パースして表⽰示する
•  結果取得を String から Stream に変更更し、
DataContractSerializer でパースする
var client = OAuthUtility.CreateOAuthClient...
しあげ: パースして表⽰示する
•  結果取得を String から Stream に変更更し、
DataContractSerializer でパースする
var client = OAuthUtility.CreateOAuthClient...
完成です!
まとめ
•  Xamarin なら既存の C# のライブラリも使える
– 有料料版にすれば、
それぞれのプラットフォームのネイティブライブラリも使え
る
•  async/await を使えば、
Android でも⾮非同期処理理が簡単
(参考) 既存のC#ライブラリを持ってくる
•  ソースが公開されていて、プラットフォーム⾮非依存で
書かれているものならXamarinにもってこれる
–  PCLの範囲くらいだったらだいたいいける
•  ⼿手順
–  Android Libr...
Upcoming SlideShare
Loading in...5
×

すまべんLite@関西#4

362

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
362
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

すまべんLite@関西#4

  1. 1. すまべんLite@関⻄西 #04 Xamarin 2.0 で Android 開発⼊入⾨門シリーズ #4 伊勢  シン 2013/10/08(Tue) @Fenrir Inc. ⼤大阪本社
  2. 2. シリーズの⽬目標 •  Android アプリ開発の、現代の勘所を押さえる – 画⾯面作成:Fragment、レイアウトXML – リソースの⼊入れ⽅方 – リークの原因になりやすいコンテキストの取り扱い – その他もろもろ •  Xamarin 2.0を使ってC#を⽣生かした開発 – Java苦⼿手なあなたも⼤大丈夫 •  最終回では他PFとのソースコード共有を⽬目指す
  3. 3. 想定の対象者 •  これまで他のプラットフォームでそれなりに開発してて、 Androidアプリの開発をやってみたい⼈人 •  Javaに苦⼿手意識識があってAndroid開発に踏み出せ なかった⼈人 •  本当のはじめての⼈人は、周りに聞きながら。 •  僕も Android はちゃんと理理解できているわけじゃない ので、勉強しながらです。 –  ぼく本来は  iOS アプリエンジニアですし。 •  みんなでわかるまで話し合いながらじっくりやる、 「Lite」なシリーズを⽬目指しましょう。
  4. 4. ターゲットプラットフォーム •  Xamarin 2.0 – Xamarin Studio – Android SDK •  Android 4.0 – 最新の環境でやってみるというのが今回の⽬目的の⼀一 つなので。 – ⾼高速エミュレーター  (HAXM) は⼊入れておきたい。 •  さもなくば実機 •  これまでのAndoridエミュレータは遅すぎる
  5. 5. スケジュール •  全56回でじっくりまったりを予定 – #1 Activity/Fragmentのライフサイクル – #2 画⾯面レイアウトとリソース管理理 – #3 画⾯面遷移・インテント – #4  通信処理理・Twitter タイムラインビューワの開発 – #5  もっと Android らしいアプリに(Service/Alarm) – #6 MvvmCross  を使ったコードの共有化 •  ざっくりこんな感じでしか考えてないので、 進み⽅方次第で前後する可能性があります。
  6. 6. Xamarin 2.0でAndroid開発⼊入⾨門 #4 Twitterタイムラインビューワの開発 async/await を使った⾮非同期処理理
  7. 7. 前回のおさらい •  Activity 間の遷移は Intent。 – 明⽰示的と暗黙的があります •  Activity の中で Fragment を遷移させるのは、 FragmentManager を使う
  8. 8. 今⽇日の⽬目標 •  Twitterタイムラインビューワをつくる – ReactiveOAuth を使った Twitter へのアクセス – ListView のつかいかた •  ひな形ダウンロードしてください – http://sdrv.ms/GEezUe
  9. 9. どういう実装にするか •  Reloadボタンを押したとき、 – 認証されていなければ認証画⾯面に移動して認証する。 – 認証画⾯面はWebViewでログイン画⾯面を表⽰示、 •  ログインすると、PINが表⽰示される – 表⽰示されたPINを⼊入⼒力力して、認証をとる – 認証されていれば、タイムラインをロードして表⽰示する。
  10. 10. ひな形の確認 •  MainActivity, MainFragment MainContainer.axml Main.axml –  前回、Fragment で遷移させたの構造 –  Main.axml の中は  ListView があります ListView は⼀一覧を表⽰示する要素です •  Tweet.axml –  リストに表⽰示する各項⽬目のレイアウト •  AuthenticateFragment Authenticate.axml –  認証画⾯面の Fragment –  WebView (ブラウザ) をおいています •  Configulation –  設定値を書き込むクラスです •  AsyncOAuth.Android –  AsyncOAuth を Xamarin.Android Libraryにもってきたもの。 ※必要な参照設定もすでにいれてあります。
  11. 11. MainFragment •  3つのインナークラスが定義されています。 – Tweet, User •  Twitter のツイートを表すオブジェクト。 •  JsonDataContractSerializer で直接パースできるように DataContract 属性をつけてあります。 – TweetListAdapter : BaseAdapter<Tweet> •  Adapter は、各種リストを  ListView に表⽰示するための中 間実装。 •  ListView は Adapter から⽣生成された View を再利利⽤用し ている。 •  OnActivityCreated で  ListView に   TweetListAdapter をセットしています。
  12. 12. Adapter の要:GetView •  convertView に再利利⽤用できるビューが⼊入っている なければ Layout から作り出す。 public override View GetView (int position, View convertView, " ViewGroup parent)" {"     // 既存のViewがあるかどうか確認する"     View view = convertView;"     if (view == null) {"         view = this.activity.LayoutInflater.Inflate " (Resource.Layout.Tweet, null);"     }"     var userTextView = view.FindViewById<TextView> " (Resource.Id.UserTextView);"     var messageTextView = view.FindViewById<TextView> " (Resource.Id.MessageTextView);" "     userTextView.Text = tweets [position].User.ScreenName;"     messageTextView.Text = tweets [position].Message;" "     return view;" }
  13. 13. Configulation クラス:設定値 •  Consumer Key/Consumer Secret を⼊入れましょう •  設定値の保存には  SharedPreference を使います。 –  読み込み –  書き込み public static string ConsumerKey = “”;" public static string ConsumerSecret = “”; var prefs = PreferenceManager.GetDefaultSharedPreferences " (context);" var val = prefs.GetString ("AccessTokenKey", string.Empty); var prefs = PreferenceManager.GetDefaultSharedPreferences(context) ;" var editor = prefs.Edit ();" editor.PutString ("AccessTokenKey", accessToken);" editor.Commit ();
  14. 14. AsyncOAuthの初期化処理理 •  ハッシュ計算関数を登録する必要があります。 •  MainActivity の  OnCreate に書いてしまいま しょう。 protected override void OnCreate (Bundle bundle)"         {"     base.OnCreate (bundle);" "     // initialize computehash function"     OAuthUtility.ComputeHash = (key, buffer) => { " using (var hmac = new HMACSHA1(key)) { " return hmac.ComputeHash (buffer); " } " };
  15. 15. 認証画⾯面への遷移を作る •  MainFragment の Reload押したときに、認証されていなければ 認証画⾯面(AuthenticateFragment)へ遷移 –  OnCreateView の  button.Click のイベントハンドラを書き⾜足します。 button.Click += async (sender, e) => {"     var token = Configulation.GetAccessTokenKey(this.Activity);"     if (token == null) {"         var transaction = FragmentManager.BeginTransaction();"         transaction.Replace(Resource.Id.fragment_container, " new AuthenticateFragment());"         transaction.AddToBackStack(null);"      transaction.Commit();"     }" };
  16. 16. 認証ページの表⽰示処理理 •  認証画⾯面はWebViewでログイン画⾯面を表⽰示 •  認証に使⽤用するフィールド変数を定義します private OAuthAuthorizer authorizer ;" private RequestToken requestToken;
  17. 17. 認証ページの表⽰示処理理 •  AuthenticateFragment の  OnStart に RequestToken をとり、ページを表⽰示する処理理を書きます。 public override async void OnStart ()" {"     base.OnStart ();" "     // create authorizer"     authorizer = new OAuthAuthorizer(Configulation.ConsumerKey, " Configulation.ConsumerSecret);" "     // get request token"     var tokenResponse = await authorizer.GetRequestToken" ("https://api.twitter.com/oauth/request_token");"     requestToken = tokenResponse.Token;" "     var pinRequestUrl = authorizer.BuildAuthorizeUrl" ("https://api.twitter.com/oauth/authorize", requestToken);" "     webView.LoadUrl (pinRequestUrl);" }
  18. 18. 認証ページの表⽰示処理理 •  AuthenticateFragment の  OnStart に RequestToken をとり、ページを表⽰示する処理理を書きます。 public override async void OnStart ()" {"     base.OnStart ();" "     // create authorizer"     authorizer = new OAuthAuthorizer(Configulation.ConsumerKey, " Configulation.ConsumerSecret);" "     // get request token"     var tokenResponse = await authorizer.GetRequestToken" ("https://api.twitter.com/oauth/request_token");"     requestToken = tokenResponse.Token;" "     var pinRequestUrl = authorizer.BuildAuthorizeUrl" ("https://api.twitter.com/oauth/authorize", requestToken);" "     webView.LoadUrl (pinRequestUrl);" } async にする 認証クラスを作る リクエストトークンを取得 認証ページへのURLを 作る WebViewで表⽰示
  19. 19. そもそも  async/await とは •  C# に新しく⼊入った⾮非同期処理理を便便利利に書ける仕様 •  対応している⾮非同期処理理を await つきで呼び出すと、 その⾮非同期処理理を実⾏行行した後に処理理が続⾏行行する –  await を書いたところでコンパイラがメソッドを分割したりして いい感じにしてくれている。 •  await を使うメソッドは、 async キーワードをつける必要がある。
  20. 20. 認証処理理 •  PINコードを⼊入⼒力力して、ボタンを押したら、 AccessToken を取得し、設定値に保存する。 button.Click += async (sender, e) => {"     var pinCode = pinEditText.Text;"     var accessTokenResponse = await authorizer.GetAccessToken(" "https://api.twitter.com/oauth/access_token","                                          requestToken, pinCode);" "     // save access token."     var accessToken = accessTokenResponse.Token;"     Console.WriteLine("Key:" + accessToken.Key);"     Console.WriteLine("Secret:" + accessToken.Secret);"     Configulation.SetAccessTokenKey(Activity, accessToken.Key);"     Configulation.SetAccessTokenSecret(Activity, accessToken.Secret);"                 "     Toast.MakeText(Activity, Resource.String.authenticated, " ToastLength.Short).Show();" "     FragmentManager.PopBackStack();" };
  21. 21. 認証処理理 •  PINコードを⼊入⼒力力して、ボタンを押したら、 AccessToken を取得し、設定値に保存する。 button.Click += async (sender, e) => {"     var pinCode = pinEditText.Text;"     var accessTokenResponse = await authorizer.GetAccessToken(" "https://api.twitter.com/oauth/access_token","                                          requestToken, pinCode);" "     // save access token."     var accessToken = accessTokenResponse.Token;"     Console.WriteLine("Key:" + accessToken.Key);"     Console.WriteLine("Secret:" + accessToken.Secret);"     Configulation.SetAccessTokenKey(Activity, accessToken.Key);"     Configulation.SetAccessTokenSecret(Activity, accessToken.Secret);"                 "     Toast.MakeText(Activity, Resource.String.authenticated, " ToastLength.Short).Show();" "     FragmentManager.PopBackStack();" }; async にする テキスト⼊入⼒力力の値をとる PINコードを使って AccessToken取得 AccessToken を保存 元の画⾯面に戻る
  22. 22. ここまでで認証がとれるようになったはず •  試してみましょう。
  23. 23. タイムラインを取得する •  Reloadボタンを押したとき、 – 認証されていれば、タイムラインをロードして表⽰示する。 button.Click += async (sender, e) => {"     var token = Configulation.GetAccessTokenKey(this.Activity);"     if (token == null) {"         // さっき書いた、認証画⾯面に遷移する処理理"     }"     else {"         var accessToken = new AccessToken(" Configulation.GetAccessTokenKey(Activity),"              Configulation.GetAccessTokenSecret(Activity));"         var client = OAuthUtility.CreateOAuthClient(" Configulation.ConsumerKey, Configulation.ConsumerSecret, "                                                      accessToken);"         var json = await client.GetStringAsync(" "http://api.twitter.com/1.1/statuses/home_timeline.json"); "         Console.WriteLine(json);"     }" };
  24. 24. タイムラインを取得する •  Reloadボタンを押したとき、 – 認証されていれば、タイムラインをロードして表⽰示する。 button.Click += async (sender, e) => {"     var token = Configulation.GetAccessTokenKey(this.Activity);"     if (token == null) {"         // さっき書いた、認証画⾯面に遷移する処理理"     }"     else {"         var accessToken = new AccessToken(" Configulation.GetAccessTokenKey(Activity),"              Configulation.GetAccessTokenSecret(Activity));"         var client = OAuthUtility.CreateOAuthClient(" Configulation.ConsumerKey, Configulation.ConsumerSecret, "                                                      accessToken);"         var json = await client.GetStringAsync(" "http://api.twitter.com/1.1/statuses/home_timeline.json"); "         Console.WriteLine(json);"     }" }; 設定からToken作成 Client作成 ⽂文字列列で取得して いったんコンソールに書いてみる
  25. 25. タイムラインの取得 – 確認 •  この状態で実⾏行行すると、アプリケーション出⼒力力パッ ドに出ている
  26. 26. しあげ: パースして表⽰示する •  結果取得を String から Stream に変更更し、 DataContractSerializer でパースする var client = OAuthUtility.CreateOAuthClient(" Configulation.ConsumerKey, Configulation.ConsumerSecret, " accessToken);" " var stream = await client.GetStreamAsync(" "http://api.twitter.com/1.1/statuses/home_timeline.json"); " var serializer = new DataContractJsonSerializer(typeof(List<Tweet>));" var result = serializer.ReadObject(stream) as List<Tweet>;" " this.tweets.Clear();" this.tweets.AddRange(result);" " (listView.Adapter as TweetListAdapter).NotifyDataSetChanged();
  27. 27. しあげ: パースして表⽰示する •  結果取得を String から Stream に変更更し、 DataContractSerializer でパースする var client = OAuthUtility.CreateOAuthClient(" Configulation.ConsumerKey, Configulation.ConsumerSecret, " accessToken);" " var stream = await client.GetStreamAsync(" "http://api.twitter.com/1.1/statuses/home_timeline.json"); " var serializer = new DataContractJsonSerializer(typeof(List<Tweet>));" var result = serializer.ReadObject(stream) as List<Tweet>;" " this.tweets.Clear();" this.tweets.AddRange(result);" " (listView.Adapter as TweetListAdapter).NotifyDataSetChanged(); 結果をStreamでとる DataContractSerializer で パースする Listの内容を⼊入れかえ Adapterの更更新通知
  28. 28. 完成です!
  29. 29. まとめ •  Xamarin なら既存の C# のライブラリも使える – 有料料版にすれば、 それぞれのプラットフォームのネイティブライブラリも使え る •  async/await を使えば、 Android でも⾮非同期処理理が簡単
  30. 30. (参考) 既存のC#ライブラリを持ってくる •  ソースが公開されていて、プラットフォーム⾮非依存で 書かれているものならXamarinにもってこれる –  PCLの範囲くらいだったらだいたいいける •  ⼿手順 –  Android Library Project を追加 –  既存ライブラリのソースをプロジェクトに追加 –  ビルドして⾜足りてない参照をがんばって⾜足していく
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×