1. すまべんLite@関⻄西 #04
Xamarin 2.0 で Android 開発⼊入⾨門シリーズ #4
伊勢 シン
2013/10/08(Tue) @Fenrir Inc. ⼤大阪本社

2. シリーズの⽬目標
• Android アプリ開発の、現代の勘所を押さえる
– 画⾯面作成：Fragment、レイアウトXML
– リソースの⼊入れ⽅方
– リークの原因になりやすいコンテキストの取り扱い
– その他もろもろ
• Xamarin 2.0を使ってC#を⽣生かした開発
– Java苦⼿手なあなたも⼤大丈夫
• 最終回では他PFとのソースコード共有を⽬目指す

3. 想定の対象者
• これまで他のプラットフォームでそれなりに開発してて、
Androidアプリの開発をやってみたい⼈人
• Javaに苦⼿手意識識があってAndroid開発に踏み出せ
なかった⼈人
• 本当のはじめての⼈人は、周りに聞きながら。
• 僕も Android はちゃんと理理解できているわけじゃない
ので、勉強しながらです。
– ぼく本来は iOS アプリエンジニアですし。
• みんなでわかるまで話し合いながらじっくりやる、
「Lite」なシリーズを⽬目指しましょう。

4. ターゲットプラットフォーム
• Xamarin 2.0
– Xamarin Studio
– Android SDK
• Android 4.0
– 最新の環境でやってみるというのが今回の⽬目的の⼀一
つなので。
– ⾼高速エミュレーター (HAXM) は⼊入れておきたい。
• さもなくば実機
• これまでのAndoridエミュレータは遅すぎる

5. スケジュール
• 全56回でじっくりまったりを予定
– #1 Activity/Fragmentのライフサイクル
– #2 画⾯面レイアウトとリソース管理理
– #3 画⾯面遷移・インテント
– #4 通信処理理・Twitter タイムラインビューワの開発
– #5 もっと Android らしいアプリに(Service/Alarm)
– #6 MvvmCross を使ったコードの共有化
• ざっくりこんな感じでしか考えてないので、
進み⽅方次第で前後する可能性があります。

6. Xamarin 2.0でAndroid開発⼊入⾨門 #4
Twitterタイムラインビューワの開発
async/await を使った⾮非同期処理理

7. 前回のおさらい
• Activity 間の遷移は Intent。
– 明⽰示的と暗黙的があります
• Activity の中で Fragment を遷移させるのは、
FragmentManager を使う

8. 今⽇日の⽬目標
• Twitterタイムラインビューワをつくる
– ReactiveOAuth を使った
Twitter へのアクセス
– ListView のつかいかた
• ひな形ダウンロードしてください
– http://sdrv.ms/GEezUe

9. どういう実装にするか
• Reloadボタンを押したとき、
– 認証されていなければ認証画⾯面に移動して認証する。
– 認証画⾯面はWebViewでログイン画⾯面を表⽰示、
• ログインすると、PINが表⽰示される
– 表⽰示されたPINを⼊入⼒力力して、認証をとる
– 認証されていれば、タイムラインをロードして表⽰示する。

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. MainFragment
• 3つのインナークラスが定義されています。
– Tweet, User
• Twitter のツイートを表すオブジェクト。
• JsonDataContractSerializer で直接パースできるように
DataContract 属性をつけてあります。
– TweetListAdapter : BaseAdapter<Tweet>
• Adapter は、各種リストを ListView に表⽰示するための中
間実装。
• ListView は Adapter から⽣生成された View を再利利⽤用し
ている。
• OnActivityCreated で ListView に
TweetListAdapter をセットしています。

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. 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. 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. 認証画⾯面への遷移を作る
• 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. 認証ページの表⽰示処理理
• 認証画⾯面はWebViewでログイン画⾯面を表⽰示
• 認証に使⽤用するフィールド変数を定義します
private OAuthAuthorizer authorizer ;"
private RequestToken requestToken;

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. 認証ページの表⽰示処理理
• 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. そもそも async/await とは
• C# に新しく⼊入った⾮非同期処理理を便便利利に書ける仕様
• 対応している⾮非同期処理理を await つきで呼び出すと、
その⾮非同期処理理を実⾏行行した後に処理理が続⾏行行する
– await を書いたところでコンパイラがメソッドを分割したりして
いい感じにしてくれている。
• await を使うメソッドは、
async キーワードをつける必要がある。

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. 認証処理理
• 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. ここまでで認証がとれるようになったはず
• 試してみましょう。

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. タイムラインを取得する
• 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. タイムラインの取得 – 確認
• この状態で実⾏行行すると、アプリケーション出⼒力力パッ
ドに出ている

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. しあげ: パースして表⽰示する
• 結果取得を 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. 完成です！

29. まとめ
• Xamarin なら既存の C# のライブラリも使える
– 有料料版にすれば、
それぞれのプラットフォームのネイティブライブラリも使え
る
• async/await を使えば、
Android でも⾮非同期処理理が簡単

30. (参考) 既存のC#ライブラリを持ってくる
• ソースが公開されていて、プラットフォーム⾮非依存で
書かれているものならXamarinにもってこれる
– PCLの範囲くらいだったらだいたいいける
• ⼿手順
– Android Library Project を追加
– 既存ライブラリのソースをプロジェクトに追加
– ビルドして⾜足りてない参照をがんばって⾜足していく