狠狠撸

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

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

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

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

使われているライブラリ

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

? Kotlin
? Support Library
? Network
? Structure
? UI
? Debug
? Test
7
※app/build.gradle のコメントセクションタイトルによる分類

? Kotlin
? org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.21
? 標準ライブラリ
? androidx.core:core-ktx:0.1
? 拡張関数ライブラリ
8
Kotlin が使える！
Kotlin をより便利
に使う！

KTX
? Kotlin の標準ライブラリには含まれていないが、便利な関数群
? 記述がよりシンプルになる
9
https://android-
developers.googleblog.com/2018/02/i
ntroducing-android-ktx-even-
sweeter.html

KTX
? https://android-developers.googleblog.com/2018/02/introducing-
android-ktx-even-sweeter.html
10

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

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

KTX
13

KTX
14
リリース前でも
活発なリポジトリ！

? 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
15
ざっくり…
?下位互換担保
?UI パーツ
が中心

? 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
16
ざっくり…
?下位互換担保
?UI パーツ
が中心

ConstraintLayout
? View の位置を制約で記述
? iOS の AutoLayout と同概念
? Android Studio の Graphical Editor が便利！
17

ConstraintLayout
18

ConstraintLayout
19
xml 書かけなくても
View が作れる

LayoutView の登場ランキング
? ConstraintLayout：49回
? FrameLaoyut：14回
? LinearLaoyut：10回
? RelativeLayout：1回
20

LayoutView の登場ランキング
? ConstraintLayout：49回
? FrameLaoyut：14回
? LinearLaoyut：10回
? RelativeLayout：1回
21

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

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

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

? 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

Retrofit
26
http://square.github.io/retrofit/
API 呼び出しが少
ないコード量で行
える！

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

RxJava
28

雑にリアクティブを
? 発信者：何かのきっかけで発信する。
? 購読者：発信を受けたら何かする。購読開始/終了ができる。
29

? 例）Twitter
? 発信者：朝飯なう。
? 購読者１：
? 購読者２：
30

? 例）Twitter
? 発信者：朝飯なう。
? 購読者１：
? 購読者２：
31
購読開始
（フォロー）
購読開始
（フォロー）

? 例）Twitter
? 発信者：朝飯なう。昼飯なう。
? 購読者１：
? 購読者２：
32

? 例）Twitter
? 発信者：朝飯なう。昼飯なう。
? 購読者１：昼食なう。
? 購読者２：昼食なう。
33

? 例）Twitter
? 発信者：朝飯なう。昼飯なう。飲み会なう。
? 購読者１：昼食なう。
? 購読者２：昼食なう。
34

? 例）Twitter
? 購読者１：昼食なう。飲み会なう。
? 購読者２：昼食なう。飲み会なう。
35

? 例）Twitter
36
購読終了
（アンフォロー）

? 例）Twitter
? 発信者：朝飯なう。昼飯なう。飲み会なう。二日酔いなう。…
37
購読終了

? 例）Twitter
? 発信者：朝飯なう。昼飯なう。飲み会なう。二日酔いなう。…
? 購読者２：昼食なう。飲み会なう。二日酔いなう。…
38
購読終了
購読終了
してないので表示される

RxJava
? データやイベントが流れてきて、それを加工して処理する
39
【発火】クリック！
↓（イベント通知）
【加工】今の値を取得
↓（数字）
【加工】：値+1
↓（数字）
【購読】：流れて来た数字で表示を更新
←イベントのコールバックで手続きを書く
←データが流れて来たら
どう加工するか記述
購読者：何を表示するか知らせてね。
（加工手順は関心がない）
【Rx】

通信で RxJava
? API 呼び出し
↓
? API レスポンス取得
↓（コールバック通知）
? レスポンスデータを DB に保存
↓（データの加工）
? View に表示を反映（購読）
40
流れ
購読者
値が変わったら、反映するから、
そのタイミングで値を教えてね。

? Structure
? Kotshi：Kotlin での json パーサー
? Lifecycle：ライフサイクルを扱いやすくしたライブラリ
? Room：データベース。SQLite を便利にしたやつ
? RxJava：リアクティブプログラミングを実現するためのライブラリ
? DataBinding：データと View を紐付けるライブラリ（自動更新）
? PlayService.map：Google Map 表示
? Firebase：アプリを迅速に開発できるモバイルプラットフォーム
? Threetenadp：Java8 の日付周りの便利な関数が使えるライブラリ
? Kotpref：端末キャッシュの SharedPreferences を扱いやすく
41

Lifecycle（android.arch.lifecycle）
? Google I/O 2017 で発表された、よりよい設計実現のライブ
ラリの Android Architecture Components の1つ
? ライフサイクルを感知するコンポーネント
? ライフサイクルの例
? onCreate：作られた
? onResume：最前面に来た
? onPause：バックグラウンドに行った
? onDestroy：破棄された
? ライフサイクルを持つオブジェクトは LifecycleOwner
42

? ライフサイクルを見て、よしなに購読 on / off してくれる
LiveData がある
? 画面回転してもデータを保持してくれる ViewModel もある
43
従来のスコープ
←ちゃんとケアしないと
画面回転時にデータが保持されなかった。。。
ViewModel に LiveData を持たしておくとよい

? 例えば人の一日
? 起きた
? 仕事始め
? 仕事終わり
? 寝た
44
用事が発生着信
対応可能
発信者
購読者

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
45
用事が発生
対応可能
（購読中）
発信者
購読者
購読開始
購読終了
用があったらどうぞ！
続きはまた明日！
自分で購読開始?終了しなければいけない
（よく終了し忘れる）

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
46
用事が発生着信
対応可能
（購読中）
発信者
購読者
購読終了忘れ
帰宅したにも関わらず
電話が掛かってくる???

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
47
対応可能
発信者
購読者
LifecycleOwner
LiveData
LiveData を使うと
Lifecycle の状態
をみて自動で購読
開始?終了してく
れる。
購読者のライフサイクルが
変わるタイミングで
購読の開始?終了をしなくて良い！

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
48
対応可能
発信者
購読者
LifecycleOwner
LiveData
Lifecycle の状態
れる。

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
49
対応可能
発信者
購読者
LifecycleOwner
LiveData
Lifecycle の状態
れる。

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
50
対応可能
発信者
購読者
LifecycleOwner
LiveData
Lifecycle の状態
れる。

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
51
対応可能
発信者
購読者
LifecycleOwner
LiveData
Lifecycle の状態
れる。

? 起きた
? 仕事始め
? 仕事終わり
? 寝た
52
対応可能
発信者
購読者
LifecycleOwner
LiveData
Lifecycle の状態
れる。

? Android Architecture Components の1つ
? SQLite をパワフルにしたライブラリ
? SQL 文をアノテーションで記述してシンプルなコードに！
? RxJava2 対応
? テーブルに変更があったら通知してくれる
53
Room（android.arch.persistence）

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

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

ここまでの部分の組み合わせ
? 例）スポンサー一覧画面
56
LifecycleOwner
? Mixi GROUP
? XFLAG
? Minimo
? Diverse
? nohana
? mericari
：
：
LiveData Room
? Mixi GROUP
? XFLAG
? Minimo
? Diverse
? nohana
? mericari
：
：
APIサーバ
RetrofitRx
Moshi
Kotshi

ここまでの部分の組み合わせ
? 例）スポンサー一覧画面
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
ライブラリ名設計上のレイヤー名

それがこの図のこと
58https://github.com/DroidKaigi/conference-app-2018#architecture

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

? データは全て Result 型で扱われる
（実データはラップされている）
? Result は次の3種（ seald class ）
? InProgress：取得中
? Success：取得成功（実データが取れる）
? Failure：取得失敗
60
LiveData<Result>

? ViewModel の変更通知を受けるとき
61
// 【読み込み中】
// ぐるぐる表示
// 【取得完了】
// ぐるぐるを消して
// データの処理
// 【取得失敗】
// ぐるぐるを消す
// 必要ならエラー表示

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
話題を戻します。

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

アプリ内での Firebase の使われ方
? Firestore
? マイセッション
匿名認証で個人ごとの設定を保持
? お知らせ
? Messaging
? 通知（Notification）
65

Firebase Cloud Firestore
? https://firebase.google.com/docs/firestore/quickstart?hl=ja
? クラウド上にあるデータベース
? リアルタイムで同期が可能
66

Firebase Cloud Messaging
? https://firebase.google.com/docs/cloud-messaging/?hl=ja
? アプリに通知を送ることができる
67

? UI
? com.github.bumptech.glide:glide
? 画像表示ライブラリ
? com.xwray:groupie
? RecyclerView （リスト表示）を簡単に扱うライブラリ
? com.github.takahirom.downloadable.calligraphy
? フォント適用ライブラリ
68

? Debug
? com.facebook.stetho:stetho
? 画面構成や端末内の情報をブラウザで見ることができるライブラリ
? com.crashlytics.sdk.android:crashlytics
? クラッシュ状況を Web で確認できるライブラリ
? com.jakewharton.timber:timber
? ログ出力を柔軟に?良い感じにできるライブラリ
? com.squareup.leakcanary:leakcanary-android
? メモリリークを検出できるライブラリ
69

Stetho
? http://facebook.github.io/stetho/
70

Crashlytics
? https://fabric.io/kits/android/crashlytics
71
クラッシュ状況がわかる
端末情報もわかる

使われているプラグイン

? app/build.gralde(.kts) の plugins に記述されている
73

? （標準的なモノは省略）
? org.jlleitschuh.gradle.ktlint
? Kotlin コードのスタイルチェック
? com.google.gms.oss.licenses.plugin
? 使っているライブラリのライセンス表記画面を作ってくれるライブラリ
? com.github.ben-manes.versions
? 使っているライブラリの最新版がないかチェック
? deploygate
? テスト版配信プラットフォーム
? com.github.triplet.play
? Google Play へのデプロイツール
74

Ktlint
? https://github.com/JLLeitschuh/ktlint-gradle
751行に100文字以上入っているという指摘コメントが自動で入る

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

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

DroidKaigi アプリの内部を見る

狠狠撸

DroidKaigi アプリの内部を見る

More Related Content

DroidKaigi アプリの内部を見る