Download to read offline
Uploaded byKenichi Tatsuhama
DroidKaigi アプリの内部を見る
「GDG Shikoku - DroidKaigi 2018 参加報告会」 https://gdgshikoku.connpass.com/event/78616/ 発表資料
![[Jagys3]android執筆書籍紹介](https://cdn.slidesharecdn.com/ss_thumbnails/jagys3android-130420032303-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
DroidKaigi アプリの内部を見る
- 1. DroidKaigi アプリの内部を見る GDG Shikoku DroidKaigi2018 参加報告会 2018/02/25
- 2. Agenda 2 • Android アプリのコードを読んでいく手順 •DroidKaigi アプリで使われているライブラリ • 使われているライブラリの確認と用途紹介 • 設計とデータフロー • 使われているプラグイン • プラグインの確認と用途紹介
- 3.
- 4. Android アプリのコードを読んでいく手順 • まずはソースコードをclone • Android Studio で開く • Web でも読めますが、Android Studio のような IDE のほうが便利 • 使われているライブラリを確認 • 使われている設計（データの流れ）を確認 4
- 5.
- 6. 使われているライブラリ • app/build.gradle(.kts) を見てみる •dependencies に依存ライブラリが記述されている 6
- 7. 使われているライブラリ • Kotlin • SupportLibrary • Network • Structure • UI • Debug • Test 7 ※app/build.gradle のコメントセクションタイトルによる分類
- 8. 使われているライブラリ • Kotlin • org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.21 •標準ライブラリ • androidx.core:core-ktx:0.1 • 拡張関数ライブラリ 8 Kotlin が使える！ Kotlin をより便利 に使う！
- 9. KTX • Kotlin の標準ライブラリには含まれていないが、便利な関数群 •記述がよりシンプルになる 9 https://android- developers.googleblog.com/2018/02/i ntroducing-android-ktx-even- sweeter.html
- 10.
- 11.
- 12.
- 13.
- 14.
- 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. 使われているライブラリ • 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. ConstraintLayout • View の位置を制約で記述 •iOS の AutoLayout と同概念 • Android Studio の Graphical Editor が便利！ 17
- 18. ConstraintLayout • View の位置を制約で記述 •iOS の AutoLayout と同概念 • Android Studio の Graphical Editor が便利！ 18
- 19. ConstraintLayout • View の位置を制約で記述 •iOS の AutoLayout と同概念 • Android Studio の Graphical Editor が便利！ 19 xml 書かけなくても View が作れる
- 20. LayoutView の登場ランキング • ConstraintLayout：49回 •FrameLaoyut：14回 • LinearLaoyut：10回 • RelativeLayout：1回 20
- 21. LayoutView の登場ランキング • ConstraintLayout：49回 •FrameLaoyut：14回 • LinearLaoyut：10回 • RelativeLayout：1回 21
- 22.
- 23.
- 24.
- 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.
- 27.
- 28.
- 29.
- 30. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。 • 購読者１： • 購読者２： 30
- 31. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。 • 購読者１： • 購読者２： 31 購読開始 （フォロー） 購読開始 （フォロー）
- 32. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。 • 購読者１： • 購読者２： 32
- 33. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。 • 購読者１： 昼食なう。 • 購読者２： 昼食なう。 33
- 34. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。飲み会なう。 • 購読者１： 昼食なう。 • 購読者２： 昼食なう。 34
- 35. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。飲み会なう。 • 購読者１： 昼食なう。飲み会なう。 • 購読者２： 昼食なう。飲み会なう。 35
- 36. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。飲み会なう。 • 購読者１： 昼食なう。飲み会なう。 • 購読者２： 昼食なう。飲み会なう。 36 購読終了 （アンフォロー）
- 37. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。飲み会なう。二日酔いなう。… • 購読者１： 昼食なう。飲み会なう。 • 購読者２： 昼食なう。飲み会なう。 37 購読終了 （アンフォロー）
- 38. 雑にリアクティブを • 発信者：何かのきっかけで発信する。 • 購読者：発信を受けたら何かする。購読開始/終了ができる。 •例）Twitter • 発信者：朝飯なう。昼飯なう。飲み会なう。二日酔いなう。… • 購読者１： 昼食なう。飲み会なう。 • 購読者２： 昼食なう。飲み会なう。二日酔いなう。… 38 購読終了 （アンフォロー） 購読終了 （アンフォロー） してないので表示される
- 39. RxJava • Java でリアクティブプログラミングをするためのライブラリ •データやイベントが流れてきて、それを加工して処理する 39 【発火】クリック！ ↓（イベント通知） 【加工】 今の値を取得 ↓（数字） 【加工】 ：値+1 ↓（数字） 【購読】：流れて来た数字で表示を更新 ←イベントのコールバックで手続きを書く ←データが流れて来たら どう加工するか記述 購読者：何を表示するか知らせてね。 （加工手順は関心がない） 【Rx】
- 40. 通信で RxJava • API呼び出し ↓ • API レスポンス取得 ↓（コールバック通知） • レスポンスデータを DB に保存 ↓（データの加工） • View に表示を反映（購読） 40 流れ 購読者 値が変わったら、反映するから、 そのタイミングで値を教えてね。
- 41. 使われているライブラリ • Structure • Kotshi：Kotlinでの json パーサー • Lifecycle：ライフサイクルを扱いやすくしたライブラリ • Room：データベース。SQLite を便利にしたやつ • RxJava：リアクティブプログラミングを実現するためのライブラリ • DataBinding：データと View を紐付けるライブラリ（自動更新） • PlayService.map：Google Map 表示 • Firebase：アプリを迅速に開発できるモバイルプラットフォーム • Threetenadp：Java8 の日付周りの便利な関数が使えるライブラリ • Kotpref：端末キャッシュの SharedPreferences を扱いやすく 41
- 42. Lifecycle（android.arch.lifecycle） • Google I/O2017 で発表された、よりよい設計実現のライブ ラリの Android Architecture Components の1つ • ライフサイクルを感知するコンポーネント • ライフサイクルの例 • onCreate：作られた • onResume：最前面に来た • onPause：バックグラウンドに行った • onDestroy：破棄された • ライフサイクルを持つオブジェクトは LifecycleOwner 42
- 43. Lifecycle（android.arch.lifecycle） • ライフサイクルを見て、よしなに購読 on/ off してくれる LiveData がある • 画面回転してもデータを保持してくれる ViewModel もある 43 従来のスコープ ←ちゃんとケアしないと 画面回転時にデータが保持されなかった。。。 ViewModel に LiveData を持たしておくとよい
- 44. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 44 Lifecycle（android.arch.lifecycle） 用事が発生着信 対応可能 発信者 購読者
- 45. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 45 Lifecycle（android.arch.lifecycle） 用事が発生 対応可能 （購読中） 発信者 購読者 購読開始 購読終了 用があったらどうぞ！ 続きはまた明日！ 自分で購読開始・終了しなければいけない （よく終了し忘れる）
- 46. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 46 Lifecycle（android.arch.lifecycle） 用事が発生着信 対応可能 （購読中） 発信者 購読者 購読終了忘れ 帰宅したにも関わらず 電話が掛かってくる・・・
- 47. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 47 Lifecycle（android.arch.lifecycle） 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い！
- 48. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 48 Lifecycle（android.arch.lifecycle） 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い！
- 49. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 49 Lifecycle（android.arch.lifecycle） 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い！
- 50. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 50 Lifecycle（android.arch.lifecycle） 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い！
- 51. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 51 Lifecycle（android.arch.lifecycle） 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い！
- 52. • 例えば人の一日 • 起きた •仕事始め • 仕事終わり • 寝た 52 Lifecycle（android.arch.lifecycle） 対応可能 発信者 購読者 LifecycleOwner LiveData LiveData を使うと Lifecycle の状態 をみて自動で購読 開始・終了してく れる。 購読者のライフサイクルが 変わるタイミングで 購読の開始・終了をしなくて良い！
- 53. • Android ArchitectureComponents の1つ • SQLite をパワフルにしたライブラリ • SQL 文をアノテーションで記述してシンプルなコードに！ • RxJava2 対応 • テーブルに変更があったら通知してくれる 53 Room（android.arch.persistence）
- 54.
- 55.
- 56. ここまでの部分の組み合わせ • 例）スポンサー一覧画面 56 LifecycleOwner • MixiGROUP • XFLAG • Minimo • Diverse • nohana • mericari ： ： LiveData Room • Mixi GROUP • XFLAG • Minimo • Diverse • nohana • mericari ： ： APIサーバ RetrofitRx Moshi Kotshi
- 57. ここまでの部分の組み合わせ • 例）スポンサー一覧画面 57 LifecycleOwner • MixiGROUP • XFLAG • Minimo • Diverse • nohana • mericari ： ： LiveData Room • Mixi GROUP • XFLAG • Minimo • Diverse • nohana • mericari ： ： APIサーバ RetrofitRx Kotshi Activity/Fragment AAC ViewModel Repository ライブラリ名 設計上のレイヤー名
- 58.
- 59.
- 60. 設計とデータフロー • データは全て Result型で扱われる （実データはラップされている） • Result は次の3種（ seald class ） • InProgress：取得中 • Success：取得成功（実データが取れる） • Failure：取得失敗 60 LiveData<Result>
- 61. 設計とデータフロー • ViewModel の変更通知を受けるとき 61 //【読み込み中】 // ぐるぐる表示 // 【取得完了】 // ぐるぐるを消して // データの処理 // 【取得失敗】 // ぐるぐるを消す // 必要ならエラー表示
- 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.
- 64.
- 65. アプリ内での Firebase の使われ方 •Firestore • マイセッション 匿名認証で個人ごとの設定を保持 • お知らせ • Messaging • 通知（Notification） 65
- 66. Firebase Cloud Firestore •https://firebase.google.com/docs/firestore/quickstart?hl=ja • クラウド上にあるデータベース • リアルタイムで同期が可能 66
- 67. Firebase Cloud Messaging •https://firebase.google.com/docs/cloud-messaging/?hl=ja • アプリに通知を送ることができる 67
- 68. 使われているライブラリ • UI • com.github.bumptech.glide:glide •画像表示ライブラリ • com.xwray:groupie • RecyclerView （リスト表示）を簡単に扱うライブラリ • com.github.takahirom.downloadable.calligraphy • フォント適用ライブラリ 68
- 69. 使われているライブラリ • Debug • com.facebook.stetho:stetho •画面構成や端末内の情報をブラウザで見ることができるライブラリ • com.crashlytics.sdk.android:crashlytics • クラッシュ状況を Web で確認できるライブラリ • com.jakewharton.timber:timber • ログ出力を柔軟に・良い感じにできるライブラリ • com.squareup.leakcanary:leakcanary-android • メモリリークを検出できるライブラリ 69
- 70.
- 71.
- 72.
- 73. 使われているプラグイン • app/build.gralde(.kts) のplugins に記述されている 73
- 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.
- 76.
- 77.
- 78. まとめ • 2017年以降の最新技術満載のアプリ • 色んな最新技術を同時に学べるアプリ （こんなに最新技術が盛り合わせのオープンソースのアプリはなかなかない！） •ライブラリが何をやっているか把握しよう • データの流れ（設計）を把握しよう • 今回は Architecture Components を使った設計 • ソースが公開されているので、見てみよう・触ってみよう！ 78