2021/06/16(水) 【Sansan Tech Meetup】Androidエンジニアが振り返るGoogle I/O～ Google I/O 2021 RECAP ～

1. Androidエンジニアが振り返る
Google I/O
Sansan株式会社
Sansan事業部 プロダクト開発部 古川 真次
Sansan Tech Meetup

2. 自己紹介
● 古川 真次（ふるしん）
● Sansan,Inc. Android Engineer
● 大阪府在住
● 趣味：勉強会の主催
○ GDG Osaka オーガナイザー
○ Kansai.kt オーガナイザー
@furusin_oriver
オンライン
名刺です

3. Androidエンジニアとしてピクッと反応した発表たち
● Android 12
● Jetpack
● Jetpack Compose
● Wear OS by Google
● Firebase
Agenda

4. Android 12

5. Splash API

6. Splash API

7. Splash API

8. Android 12 デベロッパー プレビュー 3 をリリースしました
https://android-developers-jp.googleblog.com/2021/04/android-12-developer-preview-3.html

9. Android 12 デベロッパー プレビュー 3 をリリースしました
https://android-developers-jp.googleblog.com/2021/04/android-12-developer-preview-3.html

10. Android 12 デベロッパー プレビュー 3 をリリースしました
https://android-developers-jp.googleblog.com/2021/04/android-12-developer-preview-3.html

11. Android 12 デベロッパー プレビュー 3 をリリースしました
https://android-developers-jp.googleblog.com/2021/04/android-12-developer-preview-3.html

12. Android 12 デベロッパー プレビュー 3 をリリースしました
https://android-developers-jp.googleblog.com/2021/04/android-12-developer-preview-3.html

13. Android 12 デベロッパー プレビュー 3 をリリースしました
https://android-developers-jp.googleblog.com/2021/04/android-12-developer-preview-3.html

14. 試しに動かしてみよう

15. 試しに動かしてみよう
● 何も実装しなくても勝手にスプラッシュ画面が出てる
● アプリが起動していない（Cold Start）もしくはActivityが生
成されていない場合にスプラッシュ画面が表示される
● https://developer.android.com/about/versions/12/features/splash-screen#customize-animation
● アプリが起動できるようになったら勝手にスプラッシュ画面
が閉じる

16. 色々試してみよう

17. themes.xml
<item name="android:windowSplashScreenBackground">@color/blue</item>
検証1. スプラッシュの背景色を変えてみる

18. 検証1. スプラッシュのアイコン画像を変えてみる
検証2. スプラッシュのアイコン画像を変えてみる
themes.xml
<item name="android:windowSplashScreenAnimatedIcon">@drawable/image</item>

19. 検証3. ブランドアイコンを追加してみる
themes.xml
<item name="android:windowSplashScreenBrandingImage">@drawable/image</item>

20. // Set up an OnPreDrawListener to the root view.
val content: View = findViewById(android.R.id.content)
content.viewTreeObserver.addOnPreDrawListener(
object : ViewTreeObserver.OnPreDrawListener {
override fun onPreDraw(): Boolean {
// Check if the initial data is ready.
return if (viewModel.isReady) {
// The content is ready; start drawing.
content.viewTreeObserver.removeOnPreDrawListener(this)
true
} else {
// The content is not ready; suspend.
false
}
}
}
)
}
このスプラッシュを使って色々実装できるらしい

21. // Set up an OnPreDrawListener to the root view.
val content: View = findViewById(android.R.id.content)
content.viewTreeObserver.addOnPreDrawListener(
object : ViewTreeObserver.OnPreDrawListener {
override fun onPreDraw(): Boolean {
// Check if the initial data is ready.
return if (viewModel.isReady) {
// The content is ready; start drawing.
content.viewTreeObserver.removeOnPreDrawListener(this)
true
} else {
// The content is not ready; suspend.
false
}
}
}
)
}
このスプラッシュを使って色々実装できるらしい

22. スプラッシュの閉じ方のアニメーションも作れる
splashScreen.setOnExitAnimationListener { splashScreenView ->
lifecycleScope.launch {
// do something
delay(1000)
splashScreenView.remove()
}
}

23. ← 自動で出てくるスプラッシュ
setOnExitAnimationListenerで
Delayさせた→
ちょっと気づいた

24. ● 背景色とか色々変えられそう
● ドキュメントを読む限りだと「そもそもOFFにする」みたいなものは無さ
そう（今後生えるかも？）
● 既存で作ってるスプラッシュ画面からの置き換えが必要そう
○ ただし既存のSplachActivity的なのは残してよさそう
Splash API軽くまとめ

25. Easier burs, color filters,
and other effects

26. Easier blurs, color filters, and other effects
50f,50f, Shader.TileMode.MIRROR
0f,500f, Shader.TileMode.REPEAT
View.setRenderEffect(RenderEffect)
imageView.setRenderEffect(RenderEffect.createBlurEffect(0f,0f, Shader.TileMode))

27. Easier burs, color filters, and other effects
https://www.youtube.com/watch?v=D2cU_itNDAI&list=PLOU2XLYxmsIJhsF3up2ueu2pRealr9raD&index=12

28. Jetpack

29. DataStore
● SharedPreferencesに代わる新たなデータ保存の機構
● Coroutine Flowで保存・読み込み
● Preferences DataStore と Proto DataStoreの２種類がある

30. SharedPreferences vs DataStore
https://android-developers.googleblog.com/2020/09/prefer-storing-data-with-jetpa
ck.html

31. Macrobenchmark

32. ● アプリの起動にどれくらい時間がかかってるかがわかる
● スクロールやアニメーションフレームのパフォーマンスのベンチマークを測定で
きる
Macrobenchmark
https://www.youtube.com/watch?v=0adLO2VRJtc

33. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

34. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

35. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

36. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

37. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

38. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

39. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark
https://www.youtube.com/watch?v=0adLO2VRJtc

40. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

41. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

42. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark
https://www.youtube.com/watch?v=0adLO2VRJtc

43. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark

44. @get:Rule
val benchmarkRule = MacrobenchmarkRule()
@Test
fun startup() = benchmarkRule.measureRepeated(
packageName = "mypackage.myapp",
metrics = listOf(StartupTimingMetric()),
iterations = 5,
startupMode = StartupMode.COLD
) { // this = MacrobenchmarkScope
pressHome()
val intent = Intent()
intent.setPackage("mypackage.myapp")
intent.setAction("mypackage.myapp.myaction")
startActivityAndWait(intent)
}
Macrobenchmark
https://www.youtube.com/watch?v=0adLO2VRJtc

45. Macrobenchmark
https://www.youtube.com/watch?v=0adLO2VRJtc

46. Macrobenchmark
https://www.youtube.com/watch?v=0adLO2VRJtc

47. ● アプリ起動くらいならサクッとテスト追加できそう
● 「なんかカクつくなぁ」の調査がやりやすそう
● CIでMacrobenchmarkのテストを常に回すこともできるらしい
● もしかしてFirebase Performancesと組み合わせたら最強では？
Macrobenchmarkまとめ

48. ● 5/18にStableになりました 🎉
○ 詳しくは前にやったイベントでZOZO Technologiesの堀江さんが
喋ってくれた資料を御覧ください
○ https://sansan.connpass.com/event/197084/
Dagger Hilt

49. ● 3.0がStableになりました
○ 以前「2.0だとつらい事が多いからPaging Library使うの辞めたけど3.0なら解決で
きるかも」って話をした
○ https://sansan.connpass.com/event/197084/
Paging Library

50. Jetpack Compose

51. Jetpack Compose
● ConstraintLayout Available
「What's new in Jetpack Compose | Session」
https://youtu.be/7Mf2175h3RQ

52. Jetpack Compose
● Interactive Preview
○ プレビューする際にボタンのアニメーションも見れる
「What's new in Jetpack Compose | Session」
https://youtu.be/7Mf2175h3RQ

53. ● Deploy to device
Jetpack Compose
「What's new in Jetpack Compose | Session」
https://youtu.be/7Mf2175h3RQ

54. ● XMLとの共存
Jetpack Compose
「What's new in Jetpack Compose | Session」
https://youtu.be/7Mf2175h3RQ

55. Wear OS by Google

56. ● 画面を作るためのAPIが増えた
○ 最新の天気予報を確認したり、タイマーを開始したりすることが可能
● システム UI の一部
○ Activityや XML レイアウトなど、おなじみの Android プログラミングのコンセプトに
はアクセスできません
○ ？？？？？ ↑ちゃんと見てみる
● Codelab あります
○ https://developer.android.com/codelabs/wear-tiles#0
Tiles
「Create your first Tile in Wear OS」
https://developer.android.com/codelabs/wear-tiles#0

57. ● TileProviderService
○ onTileRequest(requestParams: TileRequest?) : ListenableFuture<Tile>
○ onResourcesRequest(requestParams: ResourcesRequest?):
ListenableFuture<Resources>
■ onTileRequestで返されるTileに必要な画像を返却
Tiles

58. ● Hello Worldを表示
Tiles
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {
Tile.builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTimeline(
Timeline.builder().addTimelineEntry(
TimelineEntry.builder().setLayout(
Layout.builder().setRoot(
Text.builder().setText("hello world!")
)
)
)
).build()
}
override fun onResourcesRequest(requestParams: ResourcesRequest) = serviceScope.future {
Resources.builder()
.setVersion(RESOURCES_VERSION)
.build()
}

59. ● Hello Worldを表示
Tiles
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {
Tile.builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTimeline(
Timeline.builder().addTimelineEntry(
TimelineEntry.builder().setLayout(
Layout.builder().setRoot(
Text.builder().setText("hello world!")
)
)
)
).build()
}
override fun onResourcesRequest(requestParams: ResourcesRequest) = serviceScope.future {
Resources.builder()
.setVersion(RESOURCES_VERSION)
.build()
}

60. ● Hello Worldを表示
Tiles
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {
Tile.builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTimeline(
Timeline.builder().addTimelineEntry(
TimelineEntry.builder().setLayout(
Layout.builder().setRoot(
Text.builder().setText("hello world!")
)
)
)
).build()
}
override fun onResourcesRequest(requestParams: ResourcesRequest) = serviceScope.future {
Resources.builder()
.setVersion(RESOURCES_VERSION)
.build()
}

61. ● Hello Worldを表示
Tiles
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {
Tile.builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTimeline(
Timeline.builder().addTimelineEntry(
TimelineEntry.builder().setLayout(
Layout.builder().setRoot(
Text.builder().setText("hello world!")
)
)
)
).build()
}
override fun onResourcesRequest(requestParams: ResourcesRequest) = serviceScope.future {
Resources.builder()
.setVersion(RESOURCES_VERSION)
.build()
}

62. Tiles
https://developer.android.com/codelabs/wear-tiles#2

63. ● 簡単にテキストを表示することもできる
● 表示するフォントスタイルも用意されている
Tiles

64. ● 表示するフォントスタイルも用意されている
Tiles
FontStyles.display2

65. ● 表示するフォントスタイルも用意されている
Tiles
FontStyles.display2
FontStyles.title3

66. ● LayoutElementBuilders.FontStyles
○ body1, 2
○ title1, 2, 3
○ caption1, 2
○ display1, 2, 3
○ button
Tiles

67. ● 画像をセットすることもできます
Tiles

68. ● 画像をセットすることもできます
Tiles
.addContent(
Image.builder()
.setWidth(BUTTON_SIZE)
.setHeight(BUTTON_SIZE)
.setResourceId(ID_IMAGE_START_RUN)
.setModifiers(
Modifiers.builder()
.setPadding(
Padding.builder()
.setStart(BUTTON_PADDING)
.setEnd(BUTTON_PADDING)
.setTop(BUTTON_PADDING)
.setBottom(BUTTON_PADDING)
)
.setBackground(
Background.builder()
.setCorner(Corner.builder().setRadius(BUTTON_RADIUS))
.setColor(
argb(
ContextCompat.getColor(
this,
R.color.primaryDark
)
)
)
)
)
.build()
)

69. ● 画像をセットすることもできます
Tiles
.addContent(
Image.builder()
.setWidth(BUTTON_SIZE)
.setHeight(BUTTON_SIZE)
.setResourceId(ID_IMAGE_START_RUN)
.setModifiers(
Modifiers.builder()
.setPadding(
Padding.builder()
.setStart(BUTTON_PADDING)
.setEnd(BUTTON_PADDING)
.setTop(BUTTON_PADDING)
.setBottom(BUTTON_PADDING)
)
.setBackground(
Background.builder()
.setCorner(Corner.builder().setRadius(BUTTON_RADIUS))
.setColor(
argb(
ContextCompat.getColor(
this,
R.color.primaryDark
)
)
)
)
)
.build()
)
override fun onResourcesRequest(requestParams: ResourcesRequest) = serviceScope.future {
Resources.builder()
.setVersion(RESOURCES_VERSION)
.addIdToImageMapping(
ID_IMAGE_START_RUN,
ImageResource.builder()
.setAndroidResourceByResId(
AndroidImageResourceByResId.builder()
.setResourceId(R.drawable.ic_run)
)
)
.build()
}

70. ● ClickListenerもセットできる
○ Modifierにセットする
Tiles
Image.builder()
.setWidth(BUTTON_SIZE)
.setHeight(BUTTON_SIZE)
.setResourceId(ID_IMAGE_START_RUN)
.setModifiers(
Modifiers.builder()
.setClickable(
Clickable.builder()
.setId(ID_CLICK_START_RUN)
.setOnClick(ActionBuilders.LoadAction.builder())
)
)
.build()

71. ● 結構簡単に画面を作ることが可能
● ハマりどころが結構多い
● Builderパターンのオンパレード
Wear OS by GoogleのTilesまとめ

72. Firebase

73. Firebase
「What's new in Firebase | Keynote」
https://youtu.be/fKZqT-S6wuo

74. Firebase
「What's new in Firebase | Keynote」
https://youtu.be/fKZqT-S6wuo

75. おまけ

76. おまけ
「What's new in Android | Keynote」
https://youtu.be/D2cU_itNDAI