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

1. DroidKaigi アプリの内部を見る
GDG Shikoku
DroidKaigi 2018 参加報告会
2018/02/25

2. Agenda
2
• Android アプリのコードを読んでいく手順
• DroidKaigi アプリで使われているライブラリ
• 使われているライブラリの確認と用途紹介
• 設計とデータフロー
• 使われているプラグイン
• プラグインの確認と用途紹介

3. Android アプリのコードを
読んでいく手順

4. Android アプリのコードを読んでいく手順
• まずはソースコードを clone
• Android Studio で開く
• Web でも読めますが、Android Studio のような IDE のほうが便利
• 使われているライブラリを確認
• 使われている設計（データの流れ）を確認
4

5. 使われているライブラリ

6. 使われているライブラリ
• app/build.gradle(.kts) を見てみる
• dependencies に依存ライブラリが記述されている
6

7. 使われているライブラリ
• Kotlin
• Support Library
• 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. KTX
• https://android-developers.googleblog.com/2018/02/introducing-
android-ktx-even-sweeter.html
10

11. KTX
• https://android-developers.googleblog.com/2018/02/introducing-
android-ktx-even-sweeter.html
11
DroidKaigi の3日前！！

12. KTX
• https://github.com/DroidKaigi/conference-app-2018/pull/615
12

13. KTX
• https://github.com/DroidKaigi/conference-app-2018/pull/615
13
DroidKaigi の2日前！！

14. KTX
• https://github.com/DroidKaigi/conference-app-2018/pull/615
14
DroidKaigi の2日前！！
リリース前でも
活発なリポジトリ！

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. Emoji Compat
22https://developer.android.com/guide/topics/ui/look-and-feel/emoji-compat.html
古い端末の
TextView でも
絵文字が使えるよ
うになる！

23. Emoji Compat（余談）
23
https://www.youtube.com/watch?v=BH33_MhxDOY

24. Emoji Compat（余談）
24
https://www.youtube.com/watch?v=BH33_MhxDOY
Tofu
（豆腐）

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. Retrofit
26
http://square.github.io/retrofit/
API 呼び出しが少
ないコード量で行
える！

27. RxJava
• Java でリアクティブプログラミングをするためのライブラリ
27

28. RxJava
• Java でリアクティブプログラミングをするためのライブラリ
28

29. 雑にリアクティブを
• 発信者：何かのきっかけで発信する。
• 購読者：発信を受けたら何かする。購読開始/終了ができる。
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/O 2017 で発表された、よりよい設計実現のライブ
ラリの 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 Architecture Components の1つ
• SQLite をパワフルにしたライブラリ
• SQL 文をアノテーションで記述してシンプルなコードに！
• RxJava2 対応
• テーブルに変更があったら通知してくれる
53
Room（android.arch.persistence）

54. 54
Room（android.arch.persistence）
←SQL はアノテーションに記述
←関数の定義だけでOK
（実体はビルド時に自動生成）

55. 設計とデータフロー
55
ライブラリの話の途中ですが、
「設計とデータフロー」の詳細を

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
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. それがこの図のこと
58https://github.com/DroidKaigi/conference-app-2018#architecture

59. それがこの図のこと
59https://github.com/DroidKaigi/conference-app-2018#architecture
Observable/Flowable
は RxJava2 での変更通知
LiveData による変更通知

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. 使われているライブラリ
63
話題を戻します。

64. Firebase
• アプリを迅速に開発できるモバイルプラットフォーム
64
https://firebase.google.com/?hl=ja

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. Stetho
• http://facebook.github.io/stetho/
70

71. Crashlytics
• https://fabric.io/kits/android/crashlytics
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. Ktlint
• https://github.com/JLLeitschuh/ktlint-gradle
751行に100文字以上入っているという指摘コメントが自動で入る

76. oss.licenses
• https://developers.google.com/android/guides/opensource
76
この画面を自動生成してくれる

77. まとめ

78. まとめ
• 2017年以降の最新技術満載のアプリ
• 色んな最新技術を同時に学べるアプリ
（こんなに最新技術が盛り合わせのオープンソースのアプリはなかなかない！）
• ライブラリが何をやっているか把握しよう
• データの流れ（設計）を把握しよう
• 今回は Architecture Components を使った設計
• ソースが公開されているので、見てみよう・触ってみよう！
78