OSC2011 Androidハンズオン

1. Android アプリを作ってみよう 2011年3月19日日本Androidの会　大分支部この資料は http://goo.gl/mqLhB からダウンロードすることができます

3. HelloWorldの作成

4. 日本Androidの会の紹介

5. Androidアプリの開発について

6. ハンズオンで作るアプリについて

7. 機能を細かく分けて作ってみる

8. Twitterアプリの作成

10. メニューから[Window] -> [Android SDK and AVD Manager]を選択

12. Target: Android 1.6 - API Lebel 4

13. SD Card - Size : 10MiB

14. Skin - Built-in : HVGA

16. MENUボタン -> 開いたメニューからSettings

17. Locale & text を選択

18. Select localeを選択

19. Japaneseを選択

21. さっそくですが HelloWorld を作りましょう

23. Build Target : Android 1.6

24. Application name : こんにちは Android ( 任意 )

25. Package name : osc11ot.android.hello

26. Create Activity : HelloActivity

28. メニューから Run -> Run

29. Android Application を選択してOKをクリック

30. 動きました？

31. 日本Androidの会の紹介 http://www.android-group.jp/

32. 日本Androidの会大分支部について http://www.facebook.com/android.oita

33. 入会方法はMLに登録するだけ！？日本 Android の会 http://groups.google.com/group/android-group-japan http://goo.gl/HGn56 大分支部 http://groups.google.com/group/android-group-japan-oita http://goo.gl/B8BK5

34. Androidアプリの開発について http://goo.gl/91RNS http://goo.gl/rRXEC ANDROID developersに最新の情報が載っています。一部日本語に訳されていますが、情報が古かったりするのでご注意ください。ひとまず、開発ガイドの「Androidの基本」には目を通しておいたほうがいい感じです。「ソフトウェア技術ドキュメントを勝手に翻訳」さんで勝手に日本語訳をしてくれていたりします。

36. タイムラインの表示 Twitter との連携部分には、 Twitter4J というライブラリを使用します。 Twitter4J を使用することで API の詳細を気にせずにアプリを作ることが出来ます。

38. タイムラインの表示：タイムラインを取得して一覧表示

39. 一覧画面と入力画面の画面遷移

40. サーバとのやりとり： Twitter API の使用まずは、それぞれの機能に必要な要素に分けて、プログラムを作ってみましょう。

41. テキスト入力とボタンツイートする機能を作るのに必要な、テキスト入力とボタンを扱うプログラムを作成します。ボタンを押すと入力内容をダイアログに表示させます。

42. プロジェクトの作成 eclipse を起動メニューから [File] - [New] - [Project..] を選択「 Android Project 」を選択して [Next >]

44. Application name : 入力サンプル

45. Package name : osc11ot.android.inputsample

46. Create Activity : InputActivity

47. Min SDK Version : 4

49. [Form Widgets]のEditTextを画面にドラッグ＆ドロップ

50. [Form Widgets]のButtonを画面にドラッグ＆ドロップ

51. こんな感じ

53. 右クリック->[Edit Text...]

54. [New String]をクリック

55. String : こんにちは

56. New R.string. : greeting

57. [OK]をクリック

58. 一覧に[greeting]が追加されているので、選択して[OK]をクリック

60. [Edit ID...]を選択

61. IDを入力してOKをクリック id : editText1

64. onCreateメソッドを以下のようにコードを追記 public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout. main ); final EditText editText = (EditText) findViewById(R.id. editText1 ); Button button = (Button) findViewById(R.id. button1 ); button.setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { AlertDialog.Builder builder = new AlertDialog.Builder( InputActivity. this ); builder.setMessage(editText.getText()); builder.create().show(); } }); }

66. 戻るボタンやキーボードの[ESC]でダイアログが閉じます

67. 日本語の入力はエディットテキストを長押し

68. 入力方法 -> Japanese IME を選択

69. リスト表示タイムラインを表示するのに必要なリスト表示を行うプログラムを作ります。ボタンを押すと、リストに現在時刻を追加します。

70. プロジェクトの作成 eclipse を起動メニューから [File] - [New] - [Project..] を選択「 Android Project 」を選択して [Next >]

72. Application name : 一覧表示

73. Package name : osc11ot.android.listviewsample

74. Create Activity : ListActivity

77. [Form Widgets]のButtonを画面にドラッグ＆ドロップ

78. [Composite]のListViewを画面のドラッグ＆ドロップ

79. こんな感じ

81. 右クリック->[Edit Text...]

82. [New String]をクリック

83. String : 追加

84. New R.string. : add

85. [OK]をクリック

86. 一覧に[add]が追加されているので、選択して[OK]をクリック

88. [Edit ID...]を選択

89. IDを入力してOKをクリック id : button1

92. メンバ変数を定義 public class ListActivity extends Activity { private ArrayList<String> arrayList ; private ArrayAdapter<String> arrayAdapter ;

96. たくさん追加してリストが長くなってもスムーズにスクロールします。

97. 画面遷移 Androidアプリケーションの画面遷移はアクティビティの切替によって行われます。アクティビティの切替にはインテントを使用します。一覧画面と入力画面を用意して、入力画面で入力した内容を一覧画面に追加します。

99. Application name : インテントのサンプル

100. Package name : osc11ot.android.intentsample

101. Create Activity : MainActivity

104. ButtonとListViewにIDを設定します。複数のボタンを使用するので分り易いIDにしておきます。 ButtonのID : showInputButton ListViewのID : listView1

105. ボタンのテキストを適当に設定します。

107. File : input What type of... : Layout

109. ButtonとEditTextにIDを設定します。 ButtonのID : addButton ButtonのID : cancelButton EditTextのID : editText

111. addButton : 追加 cancelButton : キャンセル酷い画面ですが気にせずに続けます

113. Superclass : android.app.Activity

114. Interfaces : android.view.View.OnClickListener

115. プログラムの実装 public class InputActivity extends Activity implements OnClickListener { private Button addButton ; private Button cancelButton ; private EditText editText ; @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout. input ); addButton = (Button) findViewById(R.id. addButton ); cancelButton = (Button) findViewById(R.id. cancelButton ); editText = (EditText) findViewById(R.id. editText1 ); addButton .setOnClickListener( this ); cancelButton .setOnClickListener( this ); }

116. プログラムの実装 @Override public void onClick(View view) { if (view == addButton ) { Intent intent = new Intent(); intent.putExtra( "text" , editText .getText()); setResult( RESULT_OK , intent); finish(); } else if (view == cancelButton ) { setResult( RESULT_CANCELED ); finish(); } }

118. メンバ変数を定義 public class MainActivity extends Activity { private ArrayList<String> arrayList ; private ArrayAdapter<String> arrayAdapter ;

122. AndroidManifest.xml に Activity を登録しないといけません

123. <? xml version = "1.0" encoding = "utf-8" ?> < manifest xmlns:android = "http://schemas.android.com/apk/res/android" package = "osc11ot.android.intentsample" android:versionCode = "1" android:versionName = "1.0" > < uses-sdk android:minSdkVersion = "4" /> < application android:icon = "@drawable/icon" android:label = "@string/app_name" > < activity android:name = ".MainActivity" android:label = "@string/app_name" > < intent-filter > < action android:name = "android.intent.action.MAIN" /> < category android:name = "android.intent.category.LAUNCHER" /> </ intent-filter > </ activity > < activity android:name = "InputActivity" /> </ application > </ manifest >

124. Twitterアプリの作成最後に Twitter アプリを作ります。ログインとツイートとタイムラインの表示だけ行えます

125. Twitterアカウントの確認動作確認に Twitter アカウントが必要になります。 Twitter アカウントを持っていない人や、開発用に別のアカウントを用意したい人は、アカウントを作成してください。アカウント作るのが面倒な人は、共用のアカウントを使用してください。 ID : oitand_handson パスワード : osc11othandson

128. Java Build Pathを選択

131. ButtonのID : loginButton ButtonのID : showInputButton ButtonのID : reloadButton ListViewのID : listView1

132. ボタンのテキストを適当に設定します。こんな感じ、これまた酷い！！けど、一先ず続けます

134. File : input What type of... : Layout

136. ButtonとEditTextにIDを設定します。 ButtonのID : addButton ButtonのID : cancelButton EditTextのID : editText

138. addButton : 追加 cancelButton : キャンセル

141. ログイン Twitter ではログインに OAuth という仕組みを使っています。ちょっと面倒なので、一先ず何も気にせずに MainActivity にコードをコピペしてください。

142. ログイン public class MainActivity extends Activity { private static final String CONSUMER_KEY = "yKpNTNfzgBArazXD4YYqQ" ; private static final String CONSUMER_SERCRET = "UOq30kqYI8jWhMO06Jzufbo0B8s9S6hBUXK1GvT2Ayo" ; private static final String CALLBACK_URL = "osc11ot://oauthcallback" ; private static final String PREF_TOKEN = "token" ; private static final String PREF_SECRET = "tokenSecret" ; private static final String TAG = "osc11ot" ; private Twitter twitter ; private RequestToken requestToken ; @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout. main ); AccessToken token = loadAccessToken(); if (token != null ) { twitter = new TwitterFactory().getInstance(); twitter .setOAuthConsumer( CONSUMER_KEY , CONSUMER_SERCRET ); twitter .setOAuthAccessToken(token); } }

143. protected void doOAuthLogin() { try { twitter = new TwitterFactory().getInstance(); twitter .setOAuthConsumer( CONSUMER_KEY , CONSUMER_SERCRET ); requestToken = twitter .getOAuthRequestToken( CALLBACK_URL ); String url = requestToken .getAuthorizationURL(); startActivity( new Intent(Intent. ACTION_VIEW , Uri. parse (url))); } catch (Exception e) { Log. e ( TAG , "login error" , e); } } @Override protected void onNewIntent(Intent intent) { super .onNewIntent(intent); Uri uri = intent.getData(); if (uri != null && uri.toString().startsWith( CALLBACK_URL )) { String verifier = uri.getQueryParameter( "oauth_verifier" ); try { AccessToken token = twitter .getOAuthAccessToken( requestToken , verifier); saveAccessToken(token); Toast. makeText ( this , "OAuth に成功しました " , Toast. LENGTH_SHORT ).show(); } catch (TwitterException e) { Log. e ( TAG , "login error" , e); } } }

144. private void saveAccessToken(AccessToken token) { SharedPreferences pref = getSharedPreferences( PREF_TOKEN , MODE_PRIVATE ); SharedPreferences.Editor editor = pref.edit(); editor.putString( PREF_TOKEN , token.getToken()); editor.putString( PREF_TOKEN , token.getTokenSecret()); editor.commit(); } private AccessToken loadAccessToken() { AccessToken result = null ; SharedPreferences pref = getSharedPreferences( PREF_TOKEN , MODE_PRIVATE ); String token = pref.getString( PREF_TOKEN , null ); String secret = pref.getString( PREF_SECRET , null ); if (token != null && secret != null ) { result = new AccessToken(token, secret); } return result; } }

145. ログインログインするときは doOAuthLogin メソッドを呼んでもらえれば OK!

146. AndroidManifest.xmlの設定 InputActivity を追加。 MainActivity の intent-filter を追加します。 <? xml version = "1.0" encoding = "utf-8" ?> < manifest xmlns:android = "http://schemas.android.com/apk/res/android" package = "osc11ot.android.twittersample" android:versionCode = "1" android:versionName = "1.0" > < uses-sdk android:minSdkVersion = "4" /> < uses-permission android:name = "android.permission.INTERNET" /> < application android:icon = "@drawable/icon" android:label = "@string/app_name" > < activity android:name = ".MainActivity" android:label = "@string/app_name" android:launchMode = "singleTask" > < intent-filter > < action android:name = "android.intent.action.MAIN" /> < category android:name = "android.intent.category.LAUNCHER" /> </ intent-filter > < intent-filter > < action android:name = "android.intent.action.VIEW" /> < category android:name = "android.intent.category.DEFAULT" /> < category android:name = "android.intent.category.BROWSABLE" /> < data android:scheme = "osc11ot" android:host = "oauthcallback" /> </ intent-filter > </ activity > < activity android:name = ".InputActivity" /> </ application > </ manifest >

147. ツイート！ twitter .updateStatus(String) で新しくツイートしますエラー発生時に、例外が起きるので以下のような例外処理を行います。 try { twitter .updateStatus(tweet); } catch (TwitterException e) { Log. w ( TAG , "error" , e); Toast. makeText ( this , “ 新しいツイートに失敗しました” , Toast. LENGTH_LONG ); }

148. タイムラインの表示 twitter .getFriendsTimeline() で最新のタイムラインが取得できます。 twitter4j.Status の List で返ってきます (List<Status>) Status#getUser() でユーザオブジェクトが取得できます。 User#getName() でユーザ名が取得できます。 Status#getText() でツイート内容が取得できます。 Status#getCreatedAt() でツイートした時刻が取得できます。こんな感じで、リストに追加する文字列を生成できます。 String. format ( "%s: %s %tF %tT" , status.getUser() .getName(), status.getText(), status.getCreatedAt(), status.getCreatedAt())

149. 残りの部分をやってみよう！時間が余った人は、酷いレイアウトを改善してみてください :- )

OSC2011 Androidハンズオン

Recomendados

Recomendados

Más contenido relacionado

Similar a OSC2011 Androidハンズオン

Similar a OSC2011 Androidハンズオン (20)

Más de Katsumi Honda

Más de Katsumi Honda (15)

OSC2011 Androidハンズオン