Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Tokushima.app #6
Android アプリハンズオン
〜通貨計算アプリをつくる〜
2015/12/13(日)
@Aizyu Tokushima Basement
辰濱健一
はじめに
• Tokushima.app 初の試みで、ハンズオンやります。
• 作るモノは、簡単な通貨計算アプリ
• ソースコードは下記で公開済み
• https://github.com/tatsuhama/CurrencyConverter...
進め方
• Android Studio でイチから作るも可
• Github 上の各コミットを見て打ったりコピペしたりする
• Github から clone して進める
• SourceTree を使うと、わかりやすいです
完成イメージ
使うライブラリ
• ButterKnife : http://jakewharton.github.io/butterknife/
• Retrofit : http://square.github.io/retrofit/
• OkHttp ...
自分で打つ人向け準備
Android Studio で NewProject
• 値はなんでもいいです。
Target Android Devices
• 今回はデフォルト(Phone and Tablet)のままで
• 最低限、使う機種では動くように…
Add an activity to Mobile
• Empty Activity で
Customize the Activity
• デフォルトのままで、Finish
Git から clone する人向け準備
• clone する(どちらかの方法)
• ターミナルで
• git clone git@github.com:tatsuhama/CurrencyConverterAndroid.git
• Sour...
AndroidStudio の画面
緑三角で実行
画面レイアウトを作る
• 完成形
TextView
TextView
EditText
画面レイアウトを作る
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/d
87c5348254573b13dd749f73bf36210f77a1667
参照
実行結果
View との関連づけ
• xml で定義した View とコードを関連づける
• 変数へのマッピング
• onClick イベントのハンドリング
• 確認のためにトーストを出してみる
• ButterKnife を使って記述する
View との関連づけ
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/b
0bbb64225add5ef63971fbf815f3e90e28b2a16
参照
• ...
実行結果
• ボタンクリックで、仕込んだ
トーストが表示されれば OK
通貨ボタンをタップで別画面を呼び出す
• ひとまず、Activity のスケルトンを呼び出す
• CodeChooserActivity という名前で。
• 何らかのレイアウトファイルも作っておく
• Intent を作って CodeChoos...
通貨ボタンをタップで別画面を呼び出す
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/7
dccc7939c80be0f302b1fc95194613c38c727c...
実行結果
通貨選択画面の実装
• 通貨単位を enum で定義する
• Enum 一覧を ListView に表示させる
通貨選択画面の実装
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/d
336570b2e4750c16951eac8a47e3a2da72cfcce
参照
実行結果
• まだタップしたときの処理を
記述していない…
通貨選択処理
• ListView に OnItemClickListener を設定する
• onItemClick で
• 呼び出し元画面に選択結果を送る
• Intent の Bundle にデータを積んで setResult する
• ...
通貨選択処理
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/5
ceed0f957facc1b22a5bd9a39a89415f54be57f
参照
実行結果
元画面での結果受け取り
• 通貨選択画面で選択した結果をボタンに反映する
• onActivityResult で結果を受け取る
• requestCode で呼び出し元画面を識別する
• requestCode で区別して、適切なボタンに値を...
現在の為替を取得
• http://api.aoikujira.com/kawase/
を使う
• 通信ライブラリは Retrofit
• クラスを定義するのが良いが、HashMap で受け取る。
• 通貨の選択肢が多く、クラス作ると Gett...
現在の為替を取得
↓JSON 形式で、USD 基準で取得した結果
現在の為替を取得
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/b
f3284eea3d4eeecb73382b314a42123d0a3366a
参照
• and...
API から取得した値を使って、計算結果
を表示
• HashMap<String, String> から欲しい値を取得
• “API_URL”: http://api.aoikujira.com/kawase/
• “basecode”: “...
API から取得した値を使って、計算結果
を表示
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/5
12cc0da8b4fc488f114cefc9d7e6bf0f...
初級編終了!
中級編へ…
Stetho を使って通信状況をみる
• Chrome で通信状況が確認できる
• Stetho をアプリに組み込んでおく
• chrome://inspect/#devices を開いて、inspect を開く
Stetho を使って通信状況をみる
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/f0
c9429d1ce139c31084b43a00b8cc2b29199ec...
実行結果
• chrome://inspect/#devices を開いて、inspect を開く
• アプリで通信操作を実行する
実行結果
取得したい値を指定して、通信量削減
• 今は使わない色んな結果も返ってきている。
• リクエストパラメータにどの国に変換するかを設定することで、
結果を絞ることができる
• Retrofit の Api Interface を修正する
API 仕様
これを指定する
取得したい値を指定して、通信量削減
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/f
be3dc1f712011e2e64073e7b42d50743880361c...
実行結果
• Stetho で確認してみよう!
Before
After
通信結果を Realm にキャッシュ
• 今は、計算する度に通信を実行している
• 100円 → ???$、1,000円 → ???$
• そんなに為替計数が頻繁に変わるわけじゃないので、不要な通
信をさせないために、前回の通信結果を DB に...
通信結果を Realm にキャッシュ
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ef
a9ee895108cf97a00d918fe8b41267df9f2ca...
実行結果
• デバッグや Stetho を使って不要な通信が行われないことを確認
• DB にキャッシュがあれば、オフラインでも実行可能
Stetho-Realm で Realm のテーブルを見る
• Stetho で通信を見たのと同様に、Realm のテーブルを見る
• Stetho-Realm をアプリに組み込む
Stetho-Realm で Realm のテーブルを見る
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ef
a9ee895108cf97a00d918fe8b4...
実行結果
余談
• Realm 0.86 & Stetho-Realm だと、Stetho でテーブルを開こうとす
るとクラッシュ
• 原因は、Realm 0.86 で大きな内部変更が入り、Stetho-Realm が
それに追従できていないんだとか。。。
爆速回答
爆速解決
中級編終了
上級編
【課題】メインスレッドで
データの加工や DB 操作をしている…
このぐらいなら、パフォーマンスに与える影響は軽微だけど…
RxAndroid を使ってバックグラウンドで処
理&メインスレッドへコールバック
• Retrofit の API で Observable<?> を返す
• subscribeOn(Schedulers.newThread())
• バック...
RxAndroid を使ってバックグラウンドで処
理&メインスレッドへコールバック
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/4
4edddbb708a666b...
実行結果
• デバッグ実行で、意図したスレッドで実行できているか確認
実行結果
• デバッグ実行で、意図したスレッドで実行できているか確認
Retrolambda を使ってラムダ式を使う
• コールバックがシンプルに書ける
• Java8 が必要
Retrolambda を使ってラムダ式を使う
• https://github.com/tatsuhama/CurrencyConverterAndroid/commit/2
7fbf0b02eee5547c2dfb6b1f288f827c5...
Retrolambda を使ってラムダ式を使う
• 「ラムダ式で書けるよ!」って所は、Android Studio が教えてく
れる
Retrolambda を使ってラムダ式を使う
• それだけじゃなく、変換もやってくれる
Retrolambda を使ってラムダ式を使う
• 変換後
上級編終了
• お疲れさまでした!
次回ハンズオン
• これを Kotlin or Swift でやる(かも?)
Upcoming SlideShare
Loading in …5
×

20151213 tokushimaapp

633 views

Published on

Tokushima.app #6 Android アプリハンズオン

Published in: Software
  • Be the first to comment

20151213 tokushimaapp

  1. 1. Tokushima.app #6 Android アプリハンズオン 〜通貨計算アプリをつくる〜 2015/12/13(日) @Aizyu Tokushima Basement 辰濱健一
  2. 2. はじめに • Tokushima.app 初の試みで、ハンズオンやります。 • 作るモノは、簡単な通貨計算アプリ • ソースコードは下記で公開済み • https://github.com/tatsuhama/CurrencyConverterAndroid • 色んなライブラリを使う練習です • デザイン的な事は気にしていません。 • ※後半は中・上級者向け内容になってしまいました。。。
  3. 3. 進め方 • Android Studio でイチから作るも可 • Github 上の各コミットを見て打ったりコピペしたりする • Github から clone して進める • SourceTree を使うと、わかりやすいです
  4. 4. 完成イメージ
  5. 5. 使うライブラリ • ButterKnife : http://jakewharton.github.io/butterknife/ • Retrofit : http://square.github.io/retrofit/ • OkHttp : http://square.github.io/okhttp/ • RxAndroid : https://github.com/ReactiveX/RxAndroid • Realm : https://realm.io/jp/ • Stetho : http://facebook.github.io/stetho/ • Stetho-OkHttp : https://github.com/facebook/stetho/tree/master/stetho- okhttp • Stetho-Realm : https://github.com/uPhyca/stetho-realm • Retrolambda : https://github.com/orfjackal/retrolambda
  6. 6. 自分で打つ人向け準備
  7. 7. Android Studio で NewProject • 値はなんでもいいです。
  8. 8. Target Android Devices • 今回はデフォルト(Phone and Tablet)のままで • 最低限、使う機種では動くように…
  9. 9. Add an activity to Mobile • Empty Activity で
  10. 10. Customize the Activity • デフォルトのままで、Finish
  11. 11. Git から clone する人向け準備 • clone する(どちらかの方法) • ターミナルで • git clone git@github.com:tatsuhama/CurrencyConverterAndroid.git • SourceTree で • ??? • Android Studio で開く • File – open • CurrencyConverterAndroid/build.gradle を開く
  12. 12. AndroidStudio の画面 緑三角で実行
  13. 13. 画面レイアウトを作る • 完成形 TextView TextView EditText
  14. 14. 画面レイアウトを作る • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/d 87c5348254573b13dd749f73bf36210f77a1667 参照
  15. 15. 実行結果
  16. 16. View との関連づけ • xml で定義した View とコードを関連づける • 変数へのマッピング • onClick イベントのハンドリング • 確認のためにトーストを出してみる • ButterKnife を使って記述する
  17. 17. View との関連づけ • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/b 0bbb64225add5ef63971fbf815f3e90e28b2a16 参照 • 【参考】ButterKnife を使わなかった場合の記述 https://github.com/tatsuhama/CurrencyConverterAndroid/commit/e7 46eaa81f2e69b3430944a88562d4bfbd16af28
  18. 18. 実行結果 • ボタンクリックで、仕込んだ トーストが表示されれば OK
  19. 19. 通貨ボタンをタップで別画面を呼び出す • ひとまず、Activity のスケルトンを呼び出す • CodeChooserActivity という名前で。 • 何らかのレイアウトファイルも作っておく • Intent を作って CodeChooserActivityを start させる • AndroidManifest.xml への追加
  20. 20. 通貨ボタンをタップで別画面を呼び出す • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/7 dccc7939c80be0f302b1fc95194613c38c727c8 参照
  21. 21. 実行結果
  22. 22. 通貨選択画面の実装 • 通貨単位を enum で定義する • Enum 一覧を ListView に表示させる
  23. 23. 通貨選択画面の実装 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/d 336570b2e4750c16951eac8a47e3a2da72cfcce 参照
  24. 24. 実行結果 • まだタップしたときの処理を 記述していない…
  25. 25. 通貨選択処理 • ListView に OnItemClickListener を設定する • onItemClick で • 呼び出し元画面に選択結果を送る • Intent の Bundle にデータを積んで setResult する • 通貨選択画面を閉じる • finish() 呼び出し
  26. 26. 通貨選択処理 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/5 ceed0f957facc1b22a5bd9a39a89415f54be57f 参照
  27. 27. 実行結果
  28. 28. 元画面での結果受け取り • 通貨選択画面で選択した結果をボタンに反映する • onActivityResult で結果を受け取る • requestCode で呼び出し元画面を識別する • requestCode で区別して、適切なボタンに値を setText する
  29. 29. 現在の為替を取得 • http://api.aoikujira.com/kawase/ を使う • 通信ライブラリは Retrofit • クラスを定義するのが良いが、HashMap で受け取る。 • 通貨の選択肢が多く、クラス作ると Getter と enum とのマッピングが辛いため • リフレクションを使えば、(ry • 計算ボタンをタップすると通信実行
  30. 30. 現在の為替を取得 ↓JSON 形式で、USD 基準で取得した結果
  31. 31. 現在の為替を取得 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/b f3284eea3d4eeecb73382b314a42123d0a3366a 参照 • android.permission.INTERNET を忘れずに
  32. 32. API から取得した値を使って、計算結果 を表示 • HashMap<String, String> から欲しい値を取得 • “API_URL”: http://api.aoikujira.com/kawase/ • “basecode”: “USD” • “result”: “ok” • “update”: “2015-12-13 04:14:59” • “JPY”: “120.92791” • “ARS”: “9.76907” • “AUD”: “1.39131” • String → Double の変換をして計算する
  33. 33. API から取得した値を使って、計算結果 を表示 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/5 12cc0da8b4fc488f114cefc9d7e6bf0f1a2102d 参照
  34. 34. 初級編終了!
  35. 35. 中級編へ…
  36. 36. Stetho を使って通信状況をみる • Chrome で通信状況が確認できる • Stetho をアプリに組み込んでおく • chrome://inspect/#devices を開いて、inspect を開く
  37. 37. Stetho を使って通信状況をみる • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/f0 c9429d1ce139c31084b43a00b8cc2b29199ec9 参照
  38. 38. 実行結果 • chrome://inspect/#devices を開いて、inspect を開く • アプリで通信操作を実行する
  39. 39. 実行結果
  40. 40. 取得したい値を指定して、通信量削減 • 今は使わない色んな結果も返ってきている。 • リクエストパラメータにどの国に変換するかを設定することで、 結果を絞ることができる • Retrofit の Api Interface を修正する
  41. 41. API 仕様 これを指定する
  42. 42. 取得したい値を指定して、通信量削減 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/f be3dc1f712011e2e64073e7b42d50743880361c 参照
  43. 43. 実行結果 • Stetho で確認してみよう! Before After
  44. 44. 通信結果を Realm にキャッシュ • 今は、計算する度に通信を実行している • 100円 → ???$、1,000円 → ???$ • そんなに為替計数が頻繁に変わるわけじゃないので、不要な通 信をさせないために、前回の通信結果を DB に保存 • 比較的最近(サンプルでは10分)前の結果があれば利用して不 要な通信をしないようにした
  45. 45. 通信結果を Realm にキャッシュ • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ef a9ee895108cf97a00d918fe8b41267df9f2ca8 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ff 43caac690c98490aba2326f38aecd1dd008a2a 参照 • 注意:Relam の最新版は 0.86 ですが、後に使う Stetho-Realm と の相性問題のために 0.85.1 を使用する
  46. 46. 実行結果 • デバッグや Stetho を使って不要な通信が行われないことを確認 • DB にキャッシュがあれば、オフラインでも実行可能
  47. 47. Stetho-Realm で Realm のテーブルを見る • Stetho で通信を見たのと同様に、Realm のテーブルを見る • Stetho-Realm をアプリに組み込む
  48. 48. Stetho-Realm で Realm のテーブルを見る • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ef a9ee895108cf97a00d918fe8b41267df9f2ca8 参照
  49. 49. 実行結果
  50. 50. 余談 • Realm 0.86 & Stetho-Realm だと、Stetho でテーブルを開こうとす るとクラッシュ • 原因は、Realm 0.86 で大きな内部変更が入り、Stetho-Realm が それに追従できていないんだとか。。。
  51. 51. 爆速回答 爆速解決
  52. 52. 中級編終了
  53. 53. 上級編
  54. 54. 【課題】メインスレッドで データの加工や DB 操作をしている… このぐらいなら、パフォーマンスに与える影響は軽微だけど…
  55. 55. RxAndroid を使ってバックグラウンドで処 理&メインスレッドへコールバック • Retrofit の API で Observable<?> を返す • subscribeOn(Schedulers.newThread()) • バックグラウンドスレッドで実行 • map • 変換処理 • observeOn(AndroidSchedulers.mainThread()) • メインスレッドで実行
  56. 56. RxAndroid を使ってバックグラウンドで処 理&メインスレッドへコールバック • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/4 4edddbb708a666b00e4df4d5c47ac9518a23722 参照
  57. 57. 実行結果 • デバッグ実行で、意図したスレッドで実行できているか確認
  58. 58. 実行結果 • デバッグ実行で、意図したスレッドで実行できているか確認
  59. 59. Retrolambda を使ってラムダ式を使う • コールバックがシンプルに書ける • Java8 が必要
  60. 60. Retrolambda を使ってラムダ式を使う • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/2 7fbf0b02eee5547c2dfb6b1f288f827c53c8df2 参照
  61. 61. Retrolambda を使ってラムダ式を使う • 「ラムダ式で書けるよ!」って所は、Android Studio が教えてく れる
  62. 62. Retrolambda を使ってラムダ式を使う • それだけじゃなく、変換もやってくれる
  63. 63. Retrolambda を使ってラムダ式を使う • 変換後
  64. 64. 上級編終了 • お疲れさまでした!
  65. 65. 次回ハンズオン • これを Kotlin or Swift でやる(かも?)

×