OSC2011 Androidハンズオン

1,841 views

Published on

オープンソースカンファレンス2011大分のハンズオンセッションの資料です。シンプルなAndroid用Twitterクライアントを作ります

Published in: Self Improvement, Technology
  • Be the first to comment

OSC2011 Androidハンズオン

  1. 1. Android アプリを作ってみよう 2011年3月19日 日本Androidの会 大分支部 この資料は http://goo.gl/mqLhB からダウンロードすることができます
  2. 2. 本日の予定 <ul><li>開発環境セットアップの確認
  3. 3. HelloWorldの作成
  4. 4. 日本Androidの会の紹介
  5. 5. Androidアプリの開発について
  6. 6. ハンズオンで作るアプリについて
  7. 7. 機能を細かく分けて作ってみる
  8. 8. Twitterアプリの作成 </li></ul>
  9. 9. 開発環境セットアップの確認 <ul><li>Eclipseを起動
  10. 10. メニューから[Window] -> [Android SDK and AVD Manager]を選択
  11. 11. 仮想デバイスを作成 </li><ul><li>Name: 任意( android1.6)
  12. 12. Target: Android 1.6 - API Lebel 4
  13. 13. SD Card - Size : 10MiB
  14. 14. Skin - Built-in : HVGA </li></ul></ul>
  15. 15. 開発環境セットアップの確認 <ul><li>作った仮想デバイスを選択して起動 </li><ul><li>起動オプションでデフォルトのままでOK </li></ul><li>ロケールを日本語に設定する </li><ul><li>MENUボタンを押してロック解除
  16. 16. MENUボタン -> 開いたメニューからSettings
  17. 17. Locale & text を選択
  18. 18. Select localeを選択
  19. 19. Japaneseを選択
  20. 20. ホームボタンを押してホーム画面に戻る </li></ul><li>ホーム画面からブラウザを開いてネットに繋がることを確認 </li></ul>
  21. 21. さっそくですが HelloWorld を作りましょう
  22. 22. HelloWorldの作成 <ul><li>メニューから File -> New -> Android Project </li><ul><li>Project name : HelloAndroid
  23. 23. Build Target : Android 1.6
  24. 24. Application name : こんにちは Android ( 任意 )
  25. 25. Package name : osc11ot.android.hello
  26. 26. Create Activity : HelloActivity
  27. 27. Min SDK Version : 4 </li></ul><li>EclipseのPackage ExplolerでHelloAndroidプロジェクトを選択
  28. 28. メニューから Run -> Run
  29. 29. Android Application を選択してOKをクリック
  30. 30. 動きました? </li></ul>
  31. 31. 日本Androidの会の紹介 http://www.android-group.jp/
  32. 32. 日本Androidの会 大分支部について http://www.facebook.com/android.oita
  33. 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. 34. Androidアプリの開発について http://goo.gl/91RNS http://goo.gl/rRXEC ANDROID developersに最新の情報が載っています。 一部日本語に訳されていますが、情報が古かったりするのでご注意ください。 ひとまず、開発ガイドの「Androidの基本」には目を通しておいたほうがいい感じです。 「ソフトウェア技術ドキュメントを勝手に翻訳」さんで勝手に日本語訳をしてくれていたりします。
  35. 35. ハンズオンで作るアプリについて このハンズオンでは、 Twitter アプリを作ります。 時間があまりないので、とてもシンプルなアプリです。 以下の機能しか使えません。 <ul><li>ツイートする
  36. 36. タイムラインの表示 </li></ul>Twitter との連携部分には、 Twitter4J というライブラリを使用します。 Twitter4J を使用することで API の詳細を気にせずにアプリを作ることが出来ます。
  37. 37. 機能を細かく分けて作ってみる アプリのそれぞれの機能は以下のようになります。 <ul><li>ツイート:文字を入力して、入力内容を送信する
  38. 38. タイムラインの表示:タイムラインを取得して一覧表示
  39. 39. 一覧画面と入力画面の画面遷移
  40. 40. サーバとのやりとり: Twitter API の使用 </li></ul>まずは、それぞれの機能に必要な要素に分けて、プログラムを作ってみましょう。
  41. 41. テキスト入力とボタン ツイートする機能を作るのに必要な、テキスト入力とボタンを扱うプログラムを作成します。 ボタンを押すと入力内容をダイアログに表示させます。
  42. 42. プロジェクトの作成 eclipse を起動 メニューから [File] - [New] - [Project..] を選択 「 Android Project 」を選択して [Next >]
  43. 43. プロジェクトの作成 New Android Projectの画面で以下の入力を行って[Finish] <ul><li>Project name : InputSample
  44. 44. Application name : 入力サンプル
  45. 45. Package name : osc11ot.android.inputsample
  46. 46. Create Activity : InputActivity
  47. 47. Min SDK Version : 4 </li></ul>
  48. 48. 画面レイアウト <ul><li>Package Explorerから InputSample -> res -> layout -> main.xml を開く
  49. 49. [Form Widgets]のEditTextを画面にドラッグ&ドロップ
  50. 50. [Form Widgets]のButtonを画面にドラッグ&ドロップ
  51. 51. こんな感じ </li></ul>
  52. 52. 画面レイアウト <ul><li>ボタンのテキストを変更する </li><ul><li>画面に配置したボタンをクリックして選択
  53. 53. 右クリック->[Edit Text...]
  54. 54. [New String]をクリック
  55. 55. String : こんにちは
  56. 56. New R.string. : greeting
  57. 57. [OK]をクリック
  58. 58. 一覧に[greeting]が追加されているので、選択して[OK]をクリック </li></ul></ul>
  59. 59. 画面レイアウト <ul><li>ウィジェットにIDを設定する </li><ul><li>エディットテキストを選択して右クリック
  60. 60. [Edit ID...]を選択
  61. 61. IDを入力してOKをクリック id : editText1
  62. 62. ボタンも同様にIDを設定する id : button1 </li></ul><li>main.xmlを保存する </li><ul><li>ctrl + s やツールバーの保存ボタン、メニューのSave等 </li></ul></ul>
  63. 63. プログラムの実装 <ul><li>Package Explorerから InputSample->[パッケージ名]->InputActivity.java を開く
  64. 64. onCreateメソッドを以下のようにコードを追記 </li></ul>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(); } }); }
  65. 65. 実行してみる <ul><li>メニューから Run->Runやツールバーの実行ボタンなどなど
  66. 66. 戻るボタンやキーボードの[ESC]でダイアログが閉じます
  67. 67. 日本語の入力はエディットテキストを長押し
  68. 68. 入力方法 -> Japanese IME を選択 </li></ul>
  69. 69. リスト表示 タイムラインを表示するのに必要なリスト表示を行うプログラムを作ります。 ボタンを押すと、リストに現在時刻を追加します。
  70. 70. プロジェクトの作成 eclipse を起動 メニューから [File] - [New] - [Project..] を選択 「 Android Project 」を選択して [Next >]
  71. 71. プロジェクトの作成 Eclipse から新しいプロジェクトを作成します <ul><li>Project name : ListViewSample
  72. 72. Application name : 一覧表示
  73. 73. Package name : osc11ot.android.listviewsample
  74. 74. Create Activity : ListActivity
  75. 75. Min SDK Version : 4 </li></ul>
  76. 76. 画面レイアウト <ul><li>Package Explorerから InputSample -> res -> layout -> main.xml を開く
  77. 77. [Form Widgets]のButtonを画面にドラッグ&ドロップ
  78. 78. [Composite]のListViewを画面のドラッグ&ドロップ
  79. 79. こんな感じ </li></ul>
  80. 80. 画面レイアウト <ul><li>ボタンのテキストを変更する </li><ul><li>画面に配置したボタンをクリックして選択
  81. 81. 右クリック->[Edit Text...]
  82. 82. [New String]をクリック
  83. 83. String : 追加
  84. 84. New R.string. : add
  85. 85. [OK]をクリック
  86. 86. 一覧に[add]が追加されているので、選択して[OK]をクリック </li></ul></ul>
  87. 87. 画面レイアウト <ul><li>ウィジェットにIDを設定する </li><ul><li>ボタンを選択して右クリック
  88. 88. [Edit ID...]を選択
  89. 89. IDを入力してOKをクリック id : button1
  90. 90. リストビューも同様にIDを設定する id : listView1 </li></ul><li>main.xmlを保存する </li><ul><li>ctrl + s やツールバーの保存ボタン、メニューのSave等 </li></ul></ul>
  91. 91. プログラムの実装 <ul><li>Package Explorerから ListViewSample->[パッケージ名]->ListActivity.java を開く
  92. 92. メンバ変数を定義 </li></ul>public class ListActivity extends Activity { private ArrayList<String> arrayList ; private ArrayAdapter<String> arrayAdapter ;
  93. 93. プログラムの実装 <ul><li>インナークラスとしてOnClickLisnerを作ってみる OnCreateメソッドの下あたりに、コードを追加する </li></ul>class AddButtonOnClickListner implements OnClickListener { @Override public void onClick(View v) { arrayList .add(String. format ( &quot;%tT&quot; , new Date())); arrayAdapter .notifyDataSetChanged(); } }
  94. 94. プログラムの実装 <ul><li>onCreateメソッドを以下のようにコードを追記 </li></ul>public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout. main ); arrayList = new ArrayList<String>(); arrayAdapter = new ArrayAdapter<String>( this , android.R.layout. simple_list_item_1 , arrayList ); ListView listView = (ListView) findViewById(R.id. listView1 ); listView.setAdapter( arrayAdapter ); Button button = (Button)findViewById(R.id. button1 ); button.setOnClickListener( new AddButtonOnClickListner()); }
  95. 95. 実行してみる <ul><li>メニューから Run->Runやツールバーの実行ボタンなどなど
  96. 96. たくさん追加してリストが長くなってもスムーズにスクロールします。 </li></ul>
  97. 97. 画面遷移 Androidアプリケーションの画面遷移はアクティビティの切替によって行われます。 アクティビティの切替にはインテントを使用します。 一覧画面と入力画面を用意して、入力画面で入力した内容を一覧画面に追加します。
  98. 98. プロジェクトの作成 Eclipse から新しいプロジェクトを作成します <ul><li>Project name : IntentSample
  99. 99. Application name : インテントのサンプル
  100. 100. Package name : osc11ot.android.intentsample
  101. 101. Create Activity : MainActivity
  102. 102. Min SDK Version : 4 </li></ul>
  103. 103. 画面レイアウト <ul><li>先程のリスト表示と同じように、ButtonとListViewを配置します。
  104. 104. ButtonとListViewにIDを設定します。 複数のボタンを使用するので分り易いIDにしておきます。 ButtonのID : showInputButton ListViewのID : listView1
  105. 105. ボタンのテキストを適当に設定します。 </li></ul>
  106. 106. 画面レイアウト <ul><li>入力画面を追加します。 File->New->Android XML File を選択
  107. 107. File : input What type of... : Layout </li></ul>
  108. 108. 画面レイアウト <ul><li>input.xmlを開いてButtonを2つ、EditTextを1つ配置します。
  109. 109. ButtonとEditTextにIDを設定します。 ButtonのID : addButton ButtonのID : cancelButton EditTextのID : editText
  110. 110. ボタンのテキストを適当に設定します。
  111. 111. addButton : 追加 cancelButton : キャンセル 酷い画面ですが気にせずに続けます </li></ul>
  112. 112. プログラムの実装 <ul><li>入力画面のアクティビティを作る File->New->Class を選択 </li><ul><li>Name : InputActivity
  113. 113. Superclass : android.app.Activity
  114. 114. Interfaces : android.view.View.OnClickListener </li></ul></ul>
  115. 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. 116. プログラムの実装 @Override public void onClick(View view) { if (view == addButton ) { Intent intent = new Intent(); intent.putExtra( &quot;text&quot; , editText .getText()); setResult( RESULT_OK , intent); finish(); } else if (view == cancelButton ) { setResult( RESULT_CANCELED ); finish(); } }
  117. 117. プログラムの実装 <ul><li>Package Explorerから IntentSample->[パッケージ名]->MainActivity.java を開く
  118. 118. メンバ変数を定義 </li></ul>public class MainActivity extends Activity { private ArrayList<String> arrayList ; private ArrayAdapter<String> arrayAdapter ;
  119. 119. プログラムの実装 <ul><li>onCreateメソッドを以下のようにコードを追記 (今回はイベントリスナに無名(匿名)クラス) </li></ul>public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout. main ); arrayList = new ArrayList<String>(); arrayAdapter = new ArrayAdapter<String>( this , android.R.layout. simple_list_item_1 , arrayList ); ListView listView = (ListView) findViewById(R.id. listView1 ); listView.setAdapter( arrayAdapter ); Button showInputButton = (Button) findViewById(R.id. showInputButton ); showInputButton.setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity. this , InputActivity. class ); startActivityForResult(intent, 0); } }); }
  120. 120. プログラムの実装 <ul><li>startActivityForResultの結果を受け取るためにonActivityResultを実装する </li></ul>@Override protected void onActivityResult( int requestCode, int resultCode, Intent data) { super .onActivityResult(requestCode, resultCode, data); if (requestCode == 0 && resultCode == RESULT_OK ) { CharSequence text = data.getCharSequenceExtra( &quot;text&quot; ); if (text != null ) { arrayList .add(text.toString()); arrayAdapter .notifyDataSetChanged(); } } }
  121. 121. 実行してみる <ul><li>追加ボタンを押すとエラーになっちゃいます X-( </li></ul>
  122. 122. AndroidManifest.xml に Activity を登録しないといけません
  123. 123. <? xml version = &quot;1.0&quot; encoding = &quot;utf-8&quot; ?> < manifest xmlns:android = &quot;http://schemas.android.com/apk/res/android&quot; package = &quot;osc11ot.android.intentsample&quot; android:versionCode = &quot;1&quot; android:versionName = &quot;1.0&quot; > < uses-sdk android:minSdkVersion = &quot;4&quot; /> < application android:icon = &quot;@drawable/icon&quot; android:label = &quot;@string/app_name&quot; > < activity android:name = &quot;.MainActivity&quot; android:label = &quot;@string/app_name&quot; > < intent-filter > < action android:name = &quot;android.intent.action.MAIN&quot; /> < category android:name = &quot;android.intent.category.LAUNCHER&quot; /> </ intent-filter > </ activity > < activity android:name = &quot;InputActivity&quot; /> </ application > </ manifest >
  124. 124. Twitterアプリの作成 最後に Twitter アプリを作ります。 ログインとツイートとタイムラインの表示だけ行えます
  125. 125. Twitterアカウントの確認 動作確認に Twitter アカウントが必要になります。 Twitter アカウントを持っていない人や、開発用に別のアカウントを用意したい人は、アカウントを作成してください。 アカウント作るのが面倒な人は、共用のアカウントを使用してください。 ID : oitand_handson パスワード : osc11othandson
  126. 126. Twitter4Jのセットアップ <ul><li>プロジェクト作成
  127. 127. libsフォルダ作成 </li><ul><li>File->New->Folder でプロジェクトの直ぐ下にlibsフォルダを作成 </li></ul><li>jarファイルコピー </li><ul><li>libsフォルダに twitter4j-core-***.jar をコピー </li></ul><li>ビルドパス設定 </li><ul><li>プロジェクトのプロパティを表示
  128. 128. Java Build Pathを選択
  129. 129. LibrariesのApp JARsをクリックして、twitter4j-core-***.jarを追加 </li></ul><li>パーミッションの設定 </li><ul><li>AndroidManifest.xmlにandroid.permission.INTERNETを追加 </li></ul></ul>
  130. 130. 画面レイアウト <ul><li>main.xmlを開いて、リスト表示と同じように、ButtonとListViewを配置します。 </li><ul><li>ボタンはログイン、入力画面表示、TLリロード用の3つを配置 </li></ul><li>ButtonとListViewにIDを設定します。
  131. 131. ButtonのID : loginButton ButtonのID : showInputButton ButtonのID : reloadButton ListViewのID : listView1
  132. 132. ボタンのテキストを適当に設定します。 </li></ul>こんな感じ、これまた酷い!!けど、一先ず続けます
  133. 133. 画面レイアウト <ul><li>入力画面を追加します。 File->New->Android XML File を選択
  134. 134. File : input What type of... : Layout </li></ul>
  135. 135. 画面レイアウト <ul><li>input.xmlを開いてButtonを2つ、EditTextを1つ配置します。 (IntentSample と同じです)
  136. 136. ButtonとEditTextにIDを設定します。 ButtonのID : addButton ButtonのID : cancelButton EditTextのID : editText
  137. 137. ボタンのテキストを適当に設定します。
  138. 138. addButton : 追加 cancelButton : キャンセル </li></ul>
  139. 139. 入力画面の実装 <ul><li>入力画面のアクティビティを作る File->New->Class を選択 </li><ul><li>Name : InputActivity
  140. 140. Superclass : android.app.Activity </li></ul><li>コードはIntentSampleのInputActivityと同じで大丈夫です。 </li></ul>
  141. 141. ログイン Twitter ではログインに OAuth という仕組みを使っています。 ちょっと面倒なので、一先ず何も気にせずに MainActivity にコードをコピペしてください。
  142. 142. ログイン public class MainActivity extends Activity { private static final String CONSUMER_KEY = &quot;yKpNTNfzgBArazXD4YYqQ&quot; ; private static final String CONSUMER_SERCRET = &quot;UOq30kqYI8jWhMO06Jzufbo0B8s9S6hBUXK1GvT2Ayo&quot; ; private static final String CALLBACK_URL = &quot;osc11ot://oauthcallback&quot; ; private static final String PREF_TOKEN = &quot;token&quot; ; private static final String PREF_SECRET = &quot;tokenSecret&quot; ; private static final String TAG = &quot;osc11ot&quot; ; 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. 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 , &quot;login error&quot; , 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( &quot;oauth_verifier&quot; ); try { AccessToken token = twitter .getOAuthAccessToken( requestToken , verifier); saveAccessToken(token); Toast. makeText ( this , &quot;OAuth に成功しました &quot; , Toast. LENGTH_SHORT ).show(); } catch (TwitterException e) { Log. e ( TAG , &quot;login error&quot; , e); } } }
  144. 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. 145. ログイン ログインするときは doOAuthLogin メソッドを 呼んでもらえれば OK!
  146. 146. AndroidManifest.xmlの設定 InputActivity を追加。 MainActivity の intent-filter を追加します。 <? xml version = &quot;1.0&quot; encoding = &quot;utf-8&quot; ?> < manifest xmlns:android = &quot;http://schemas.android.com/apk/res/android&quot; package = &quot;osc11ot.android.twittersample&quot; android:versionCode = &quot;1&quot; android:versionName = &quot;1.0&quot; > < uses-sdk android:minSdkVersion = &quot;4&quot; /> < uses-permission android:name = &quot;android.permission.INTERNET&quot; /> < application android:icon = &quot;@drawable/icon&quot; android:label = &quot;@string/app_name&quot; > < activity android:name = &quot;.MainActivity&quot; android:label = &quot;@string/app_name&quot; android:launchMode = &quot;singleTask&quot; > < intent-filter > < action android:name = &quot;android.intent.action.MAIN&quot; /> < category android:name = &quot;android.intent.category.LAUNCHER&quot; /> </ intent-filter > < intent-filter > < action android:name = &quot;android.intent.action.VIEW&quot; /> < category android:name = &quot;android.intent.category.DEFAULT&quot; /> < category android:name = &quot;android.intent.category.BROWSABLE&quot; /> < data android:scheme = &quot;osc11ot&quot; android:host = &quot;oauthcallback&quot; /> </ intent-filter > </ activity > < activity android:name = &quot;.InputActivity&quot; /> </ application > </ manifest >
  147. 147. ツイート! twitter .updateStatus(String) で新しくツイートします エラー発生時に、例外が起きるので以下のような例外処理を行います。 try { twitter .updateStatus(tweet); } catch (TwitterException e) { Log. w ( TAG , &quot;error&quot; , e); Toast. makeText ( this , “ 新しいツイートに失敗しました” , Toast. LENGTH_LONG ); }
  148. 148. タイムラインの表示 twitter .getFriendsTimeline() で最新のタイムラインが取得できます。 twitter4j.Status の List で返ってきます (List<Status>) Status#getUser() でユーザオブジェクトが取得できます。 User#getName() でユーザ名が取得できます。 Status#getText() でツイート内容が取得できます。 Status#getCreatedAt() でツイートした時刻が取得できます。 こんな感じで、リストに追加する文字列を生成できます。 String. format ( &quot;%s: %s %tF %tT&quot; , status.getUser() .getName(), status.getText(), status.getCreatedAt(), status.getCreatedAt())
  149. 149. 残りの部分をやってみよう! 時間が余った人は、 酷いレイアウトを改善してみてください :- )

×