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.

DroidKaigi アプリの内部を見る

2,804 views

Published on

「GDG Shikoku - DroidKaigi 2018 参加報告会」
https://gdgshikoku.connpass.com/event/78616/
発表資料

Published in: Software
  • Login to see the comments

DroidKaigi アプリの内部を見る

  1. 1. DroidKaigi アプリの内部を見る GDG Shikoku DroidKaigi 2018 参加報告会 2018/02/25
  2. 2. Agenda 2 • Android アプリのコードを読んでいく手順 • DroidKaigi アプリで使われているライブラリ • 使われているライブラリの確認と用途紹介 • 設計とデータフロー • 使われているプラグイン • プラグインの確認と用途紹介
  3. 3. Android アプリのコードを 読んでいく手順
  4. 4. Android アプリのコードを読んでいく手順 • まずはソースコードを clone • Android Studio で開く • Web でも読めますが、Android Studio のような IDE のほうが便利 • 使われているライブラリを確認 • 使われている設計(データの流れ)を確認 4
  5. 5. 使われているライブラリ
  6. 6. 使われているライブラリ • app/build.gradle(.kts) を見てみる • dependencies に依存ライブラリが記述されている 6
  7. 7. 使われているライブラリ • Kotlin • Support Library • Network • Structure • UI • Debug • Test 7 ※app/build.gradle のコメントセクションタイトルによる分類
  8. 8. 使われているライブラリ • Kotlin • org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.21 • 標準ライブラリ • androidx.core:core-ktx:0.1 • 拡張関数ライブラリ 8 Kotlin が使える! Kotlin をより便利 に使う!
  9. 9. KTX • Kotlin の標準ライブラリには含まれていないが、便利な関数群 • 記述がよりシンプルになる 9 https://android- developers.googleblog.com/2018/02/i ntroducing-android-ktx-even- sweeter.html
  10. 10. KTX • https://android-developers.googleblog.com/2018/02/introducing- android-ktx-even-sweeter.html 10
  11. 11. KTX • https://android-developers.googleblog.com/2018/02/introducing- android-ktx-even-sweeter.html 11 DroidKaigi の3日前!!
  12. 12. KTX • https://github.com/DroidKaigi/conference-app-2018/pull/615 12
  13. 13. KTX • https://github.com/DroidKaigi/conference-app-2018/pull/615 13 DroidKaigi の2日前!!
  14. 14. KTX • https://github.com/DroidKaigi/conference-app-2018/pull/615 14 DroidKaigi の2日前!! リリース前でも 活発なリポジトリ!
  15. 15. 使われているライブラリ • Support Library • com.android.support:support-v4 • com.android.support:appcompat-v7 • com.android.support:design • com.android.support:cardview-v7 • com.android.support:customtabs • com.android.support.constraint:constraint-layout • com.android.support:multidex • com.android.support:support-emoji-appcompat • com.android.support:preference-v7 • com.android.support:preference-v14 15 ざっくり… ・下位互換担保 ・UI パーツ が中心
  16. 16. 使われているライブラリ • Support Library • com.android.support:support-v4 • com.android.support:appcompat-v7 • com.android.support:design • com.android.support:cardview-v7 • com.android.support:customtabs • com.android.support.constraint:constraint-layout • com.android.support:multidex • com.android.support:support-emoji-appcompat • com.android.support:preference-v7 • com.android.support:preference-v14 16 ざっくり… ・下位互換担保 ・UI パーツ が中心
  17. 17. ConstraintLayout • View の位置を制約で記述 • iOS の AutoLayout と同概念 • Android Studio の Graphical Editor が便利! 17
  18. 18. ConstraintLayout • View の位置を制約で記述 • iOS の AutoLayout と同概念 • Android Studio の Graphical Editor が便利! 18
  19. 19. ConstraintLayout • View の位置を制約で記述 • iOS の AutoLayout と同概念 • Android Studio の Graphical Editor が便利! 19 xml 書かけなくても View が作れる
  20. 20. LayoutView の登場ランキング • ConstraintLayout:49回 • FrameLaoyut:14回 • LinearLaoyut:10回 • RelativeLayout:1回 20
  21. 21. LayoutView の登場ランキング • ConstraintLayout:49回 • FrameLaoyut:14回 • LinearLaoyut:10回 • RelativeLayout:1回 21
  22. 22. Emoji Compat 22https://developer.android.com/guide/topics/ui/look-and-feel/emoji-compat.html 古い端末の TextView でも 絵文字が使えるよ うになる!
  23. 23. Emoji Compat(余談) 23 https://www.youtube.com/watch?v=BH33_MhxDOY
  24. 24. Emoji Compat(余談) 24 https://www.youtube.com/watch?v=BH33_MhxDOY Tofu (豆腐)
  25. 25. 使われているライブラリ • Network • com.squareup.okhttp3:logging-interceptor • 通信ログを出力 • Retrofit • com.squareup.retrofit2:retrofit • 通信ライブラリ • com.squareup.retrofit2:converter-moshi • 通信結果の json からモデル変換に変換してくれるライブラリ • com.squareup.retrofit2:adapter-rxjava2 • 非同期通信結果を Rx(Java2) で受け取るライブラリ 25
  26. 26. Retrofit 26 http://square.github.io/retrofit/ API 呼び出しが少 ないコード量で行 える!
  27. 27. RxJava • Java でリアクティブプログラミングをするためのライブラリ 27
  28. 28. RxJava • Java でリアクティブプログラミングをするためのライブラリ 28
  29. 29. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 29
  30. 30. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。 • 購読者1: • 購読者2: 30
  31. 31. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。 • 購読者1: • 購読者2: 31 購読開始 (フォロー) 購読開始 (フォロー)
  32. 32. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。 • 購読者1: • 購読者2: 32
  33. 33. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。 • 購読者1: 昼食なう。 • 購読者2: 昼食なう。 33
  34. 34. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。飲み会なう。 • 購読者1: 昼食なう。 • 購読者2: 昼食なう。 34
  35. 35. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。飲み会なう。 • 購読者1: 昼食なう。飲み会なう。 • 購読者2: 昼食なう。飲み会なう。 35
  36. 36. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。飲み会なう。 • 購読者1: 昼食なう。飲み会なう。 • 購読者2: 昼食なう。飲み会なう。 36 購読終了 (アンフォロー)
  37. 37. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。飲み会なう。二日酔いなう。… • 購読者1: 昼食なう。飲み会なう。 • 購読者2: 昼食なう。飲み会なう。 37 購読終了 (アンフォロー)
  38. 38. 雑にリアクティブを • 発信者:何かのきっかけで発信する。 • 購読者:発信を受けたら何かする。購読開始/終了ができる。 • 例)Twitter • 発信者:朝飯なう。昼飯なう。飲み会なう。二日酔いなう。… • 購読者1: 昼食なう。飲み会なう。 • 購読者2: 昼食なう。飲み会なう。二日酔いなう。… 38 購読終了 (アンフォロー) 購読終了 (アンフォロー) してないので表示される
  39. 39. RxJava • Java でリアクティブプログラミングをするためのライブラリ • データやイベントが流れてきて、それを加工して処理する 39 【発火】クリック! ↓(イベント通知) 【加工】 今の値を取得 ↓(数字) 【加工】 :値+1 ↓(数字) 【購読】:流れて来た数字で表示を更新 ←イベントのコールバックで手続きを書く ←データが流れて来たら どう加工するか記述 購読者:何を表示するか知らせてね。 (加工手順は関心がない) 【Rx】
  40. 40. 通信で RxJava • API 呼び出し ↓ • API レスポンス取得 ↓(コールバック通知) • レスポンスデータを DB に保存 ↓(データの加工) • View に表示を反映(購読) 40 流れ 購読者 値が変わったら、反映するから、 そのタイミングで値を教えてね。
  41. 41. 使われているライブラリ • Structure • Kotshi:Kotlin での json パーサー • Lifecycle:ライフサイクルを扱いやすくしたライブラリ • Room:データベース。SQLite を便利にしたやつ • RxJava:リアクティブプログラミングを実現するためのライブラリ • DataBinding:データと View を紐付けるライブラリ(自動更新) • PlayService.map:Google Map 表示 • Firebase:アプリを迅速に開発できるモバイルプラットフォーム • Threetenadp:Java8 の日付周りの便利な関数が使えるライブラリ • Kotpref:端末キャッシュの SharedPreferences を扱いやすく 41
  42. 42. Lifecycle(android.arch.lifecycle) • Google I/O 2017 で発表された、よりよい設計実現のライブ ラリの Android Architecture Components の1つ • ライフサイクルを感知するコンポーネント • ライフサイクルの例 • onCreate:作られた • onResume:最前面に来た • onPause:バックグラウンドに行った • onDestroy:破棄された • ライフサイクルを持つオブジェクトは LifecycleOwner 42
  43. 43. Lifecycle(android.arch.lifecycle) • ライフサイクルを見て、よしなに購読 on / off してくれる LiveData がある • 画面回転してもデータを保持してくれる ViewModel もある 43 従来のスコープ ←ちゃんとケアしないと 画面回転時にデータが保持されなかった。。。 ViewModel に LiveData を持たしておくとよい
  44. 44. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 44 Lifecycle(android.arch.lifecycle) 用事が発生着信 対応可能 発信者 購読者
  45. 45. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 45 Lifecycle(android.arch.lifecycle) 用事が発生 対応可能 (購読中) 発信者 購読者 購読開始 購読終了 用があったらどうぞ! 続きはまた明日! 自分で購読開始・終了しなければいけない (よく終了し忘れる)
  46. 46. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 46 Lifecycle(android.arch.lifecycle) 用事が発生着信 対応可能 (購読中) 発信者 購読者 購読終了忘れ 帰宅したにも関わらず 電話が掛かってくる・・・
  47. 47. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 47 Lifecycle(android.arch.lifecycle) 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い!
  48. 48. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 48 Lifecycle(android.arch.lifecycle) 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い!
  49. 49. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 49 Lifecycle(android.arch.lifecycle) 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い!
  50. 50. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 50 Lifecycle(android.arch.lifecycle) 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い!
  51. 51. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 51 Lifecycle(android.arch.lifecycle) 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い!
  52. 52. • 例えば人の一日 • 起きた • 仕事始め • 仕事終わり • 寝た 52 Lifecycle(android.arch.lifecycle) 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い!
  53. 53. • Android Architecture Components の1つ • SQLite をパワフルにしたライブラリ • SQL 文をアノテーションで記述してシンプルなコードに! • RxJava2 対応 • テーブルに変更があったら通知してくれる 53 Room(android.arch.persistence)
  54. 54. 54 Room(android.arch.persistence) ←SQL はアノテーションに記述 ←関数の定義だけでOK (実体はビルド時に自動生成)
  55. 55. 設計とデータフロー 55 ライブラリの話の途中ですが、 「設計とデータフロー」の詳細を
  56. 56. ここまでの部分の組み合わせ • 例)スポンサー一覧画面 56 LifecycleOwner • Mixi GROUP • XFLAG • Minimo • Diverse • nohana • mericari : : LiveData Room • Mixi GROUP • XFLAG • Minimo • Diverse • nohana • mericari : : APIサーバ RetrofitRx Moshi Kotshi
  57. 57. ここまでの部分の組み合わせ • 例)スポンサー一覧画面 57 LifecycleOwner • Mixi GROUP • XFLAG • Minimo • Diverse • nohana • mericari : : LiveData Room • Mixi GROUP • XFLAG • Minimo • Diverse • nohana • mericari : : APIサーバ RetrofitRx Kotshi Activity/Fragment AAC ViewModel Repository ライブラリ名 設計上のレイヤー名
  58. 58. それがこの図のこと 58https://github.com/DroidKaigi/conference-app-2018#architecture
  59. 59. それがこの図のこと 59https://github.com/DroidKaigi/conference-app-2018#architecture Observable/Flowable は RxJava2 での変更通知 LiveData による変更通知
  60. 60. 設計とデータフロー • データは全て Result 型で扱われる (実データはラップされている) • Result は次の3種( seald class ) • InProgress:取得中 • Success:取得成功(実データが取れる) • Failure:取得失敗 60 LiveData<Result>
  61. 61. 設計とデータフロー • ViewModel の変更通知を受けるとき 61 // 【読み込み中】 // ぐるぐる表示 // 【取得完了】 // ぐるぐるを消して // データの処理 // 【取得失敗】 // ぐるぐるを消す // 必要ならエラー表示
  62. 62. 設計とデータフロー 62 • Repository ->API, Repository ->DB • https://github.com/DroidKaigi/conference-app-2018#repository---api-repository---db • DB ->Repository • https://github.com/DroidKaigi/conference-app-2018#db---repository • Repository ->ViewModel • https://github.com/DroidKaigi/conference-app-2018#repository---viewmodel 参照下さい。
  63. 63. 使われているライブラリ 63 話題を戻します。
  64. 64. Firebase • アプリを迅速に開発できるモバイルプラットフォーム 64 https://firebase.google.com/?hl=ja
  65. 65. アプリ内での Firebase の使われ方 • Firestore • マイセッション 匿名認証で個人ごとの設定を保持 • お知らせ • Messaging • 通知(Notification) 65
  66. 66. Firebase Cloud Firestore • https://firebase.google.com/docs/firestore/quickstart?hl=ja • クラウド上にあるデータベース • リアルタイムで同期が可能 66
  67. 67. Firebase Cloud Messaging • https://firebase.google.com/docs/cloud-messaging/?hl=ja • アプリに通知を送ることができる 67
  68. 68. 使われているライブラリ • UI • com.github.bumptech.glide:glide • 画像表示ライブラリ • com.xwray:groupie • RecyclerView (リスト表示)を簡単に扱うライブラリ • com.github.takahirom.downloadable.calligraphy • フォント適用ライブラリ 68
  69. 69. 使われているライブラリ • Debug • com.facebook.stetho:stetho • 画面構成や端末内の情報をブラウザで見ることができるライブラリ • com.crashlytics.sdk.android:crashlytics • クラッシュ状況を Web で確認できるライブラリ • com.jakewharton.timber:timber • ログ出力を柔軟に・良い感じにできるライブラリ • com.squareup.leakcanary:leakcanary-android • メモリリークを検出できるライブラリ 69
  70. 70. Stetho • http://facebook.github.io/stetho/ 70
  71. 71. Crashlytics • https://fabric.io/kits/android/crashlytics 71 クラッシュ状況がわかる 端末情報もわかる
  72. 72. 使われているプラグイン
  73. 73. 使われているプラグイン • app/build.gralde(.kts) の plugins に記述されている 73
  74. 74. 使われているプラグイン • (標準的なモノは省略) • org.jlleitschuh.gradle.ktlint • Kotlin コードのスタイルチェック • com.google.gms.oss.licenses.plugin • 使っているライブラリのライセンス表記画面を作ってくれるライブラリ • com.github.ben-manes.versions • 使っているライブラリの最新版がないかチェック • deploygate • テスト版配信プラットフォーム • com.github.triplet.play • Google Play へのデプロイツール 74
  75. 75. Ktlint • https://github.com/JLLeitschuh/ktlint-gradle 751行に100文字以上入っているという指摘コメントが自動で入る
  76. 76. oss.licenses • https://developers.google.com/android/guides/opensource 76 この画面を自動生成してくれる
  77. 77. まとめ
  78. 78. まとめ • 2017年以降の最新技術満載のアプリ • 色んな最新技術を同時に学べるアプリ (こんなに最新技術が盛り合わせのオープンソースのアプリはなかなかない!) • ライブラリが何をやっているか把握しよう • データの流れ(設計)を把握しよう • 今回は Architecture Components を使った設計 • ソースが公開されているので、見てみよう・触ってみよう! 78

×