Slide 1
Slide 1 text
ComposeでWidgetを実装できるライブ
ラリ「Glance」がbetaになったので触っ
てみる
ZOZO Tech Meetup - iOS/Android (2023/07/11)
株式会社ZOZO
ブランドソリューション開発本部 フロントエンド部 WEARAndroidブロック
ブロック長
野々村 樹
Copyright © ZOZO, Inc.
1
Slide 2
Slide 2 text
© ZOZO, Inc.
株式会社ZOZO
ブランドソリューション開発本部 フロントエンド部 WEARAndroidブロッ
ク
ブロック長
野々村 樹
Twitter：@nono_develop
2023年入社
3歳の娘がいます
趣味はゲーム、謎解き
2
Slide 3
Slide 3 text
© ZOZO, Inc.
話すこと
3
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 4
Slide 4 text
© ZOZO, Inc.
話さないこと
4
● 従来のWidgetについての詳細
● Jetpack Composeに関する説明
Slide 5
Slide 5 text
© ZOZO, Inc.
話すこと
5
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 6
Slide 6 text
© ZOZO, Inc.
Widget使ってますか？
6
Slide 7
Slide 7 text
© ZOZO, Inc.
7
Android版 WEARアプリのWidget
Slide 8
Slide 8 text
© ZOZO, Inc.
従来のWidgetについてざっくりと
● レイアウトをXMLで定義する
○ レイアウトはRemoteViewsをベースとしている
● AppWidgetProviderクラスでWidgetのブロードキャストを処理する
8
Slide 9
Slide 9 text
© ZOZO, Inc.
話すこと
9
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 10
Slide 10 text
© ZOZO, Inc.
話すこと
10
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 11
Slide 11 text
© ZOZO, Inc.
Glanceとは
● Compose RuntimeのAPI
● Composeと同様の構文でWidgetを作成することができる
○ 内部的にRemoteViewに変換
11
Slide 12
Slide 12 text
© ZOZO, Inc.
話すこと
12
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 13
Slide 13 text
© ZOZO, Inc.
話すこと
13
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 14
Slide 14 text
© ZOZO, Inc.
14
実際にGlanceを使って作成したWidget
Slide 15
Slide 15 text
© ZOZO, Inc.
dependencies {
implementation("androidx.glance:glance-appwidget:1.0.0-beta01")
}
15
依存関係の宣言
Slide 16
Slide 16 text
© ZOZO, Inc.
class MyGlanceAppWidget : GlanceAppWidget() {
override suspend fun provideGlance(context: Context, id: GlanceId) {
// Widgetのレンダリングに必要なデータを読み込む
// 時間がかかる操作を実行する場合はwithContextで別スレッドに切り替えること
provideContent {
// ComposeでWidgetを作成
HelloGlance()
}
}
}
16
GlanceAppWidget
Slide 17
Slide 17 text
© ZOZO, Inc.
@Composable
fun HelloGlance() {
Box(
modifier = GlanceModifier.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = "Hello Glance!",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 24.sp
)
)
}
}
17
Compose部分
Slide 18
Slide 18 text
© ZOZO, Inc.
@Composable
fun HelloGlance() {
Box(
modifier = GlanceModifier.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = "Hello Glance!",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 24.sp
)
)
}
}
18
Compose部分
import androidx.glance.text.Text
Slide 19
Slide 19 text
© ZOZO, Inc.
class MyGlanceAppWidgetReceiver : GlanceAppWidgetReceiver() {
override val glanceAppWidget: GlanceAppWidget
get() = MyGlanceAppWidget()
}
19
GlanceAppWidgetReceiver
Slide 20
Slide 20 text
© ZOZO, Inc.
20
AndroidManifest.xml
Slide 21
Slide 21 text
© ZOZO, Inc.
21
メタデータ追加
Slide 22
Slide 22 text
© ZOZO, Inc.
initialLayout
22
@layout/glance_default_loading_layout
指定なし
Slide 23
Slide 23 text
© ZOZO, Inc.
話すこと
23
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 24
Slide 24 text
© ZOZO, Inc.
話すこと
24
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 25
Slide 25 text
© ZOZO, Inc.
GlanceTheme
@Composable
fun GlanceTheme(
colors: ColorProviders = LocalColors.current,
content: @GlanceComposable @Composable () -> Unit
) {
CompositionLocalProvider(
LocalColors provides colors,
content = content
)
}
25
GlanceTheme.kt
引用 : https://android.googlesource.com/platform/frameworks/support/+/bd66997874293bcf20cfaf6e7d20633d15cefb62/glance/glance/src/main/java/androidx/glance/GlanceTheme.kt
Slide 26
Slide 26 text
© ZOZO, Inc.
GlanceTheme
dependencies {
// Material 2
implementation "androidx.glance:glance-material:1.0.0-beta01"
// Material 3
implementation "androidx.glance:glance-material3:1.0.0-beta01"
}
26
Slide 27
Slide 27 text
© ZOZO, Inc.
FontFamilyのサポート
Cursive
27
Monospace
Slide 28
Slide 28 text
© ZOZO, Inc.
FontFamilyのサポート
SansSerif
28
Serif
Slide 29
Slide 29 text
© ZOZO, Inc.
更新のメカニズムをWorkManagerに移行
Widget更新の際に、セッション管理にWorkManager
が使用されるようになった
29
Slide 30
Slide 30 text
© ZOZO, Inc.
更新のメカニズムをWorkManagerに移行
internal suspend fun update(
context: Context,
appWidgetId: Int,
options: Bundle? = null,
) {
Tracing.beginGlanceAppWidgetUpdate()
val glanceId = AppWidgetId(appWidgetId)
if (!sessionManager.isSessionRunning(context, glanceId.toSessionKey())) {
sessionManager.startSession(context, AppWidgetSession(this, glanceId, options))
} else {
val session = sessionManager.getSession(glanceId.toSessionKey()) as AppWidgetSession
session.updateGlance()
}
}
30
GlanceAppWidget.kt
引用 : https://android.googlesource.com/platform/frameworks/support/+/bd66997874293bcf20cfaf6e7d20633d15cefb62/glance/glance-appwidget/src/main/java/androidx/glance/appwidget/GlanceAppWidget.kt
Slide 31
Slide 31 text
© ZOZO, Inc.
更新のメカニズムをWorkManagerに移行
override suspend fun startSession(context: Context, session: Session) {
if (DEBUG) Log.d(TAG, "startSession(${session.key})")
synchronized(sessions) {
sessions.put(session.key, session)
}?.close()
val workRequest = OneTimeWorkRequest.Builder(workerClass)
.setInputData(
workDataOf(
keyParam to session.key
)
)
.build()
WorkManager.getInstance(context)
.enqueueUniqueWork(session.key, ExistingWorkPolicy.REPLACE, workRequest)
.result.await()
enqueueDelayedWorker(context)
}
31
SessionManager.kt
引用 : https://android.googlesource.com/platform/frameworks/support/+/bd66997874293bcf20cfaf6e7d20633d15cefb62/glance/glance/src/main/java/androidx/glance/session/SessionManager.kt
Slide 32
Slide 32 text
© ZOZO, Inc.
更新のメカニズムをWorkManagerに移行
これに伴って、Widget描画のエントリーポイントが変更
32
class MyGlanceAppWidget : GlanceAppWidget() {
@Composable
override fun Content() {
HelloGlance()
}
}
class MyGlanceAppWidget : GlanceAppWidget() {
override suspend fun provideGlance(context: Context, id: GlanceId) {
provideContent {
HelloGlance()
}
}
}
alpha beta
Slide 33
Slide 33 text
© ZOZO, Inc.
話すこと
33
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 34
Slide 34 text
© ZOZO, Inc.
話すこと
34
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 35
Slide 35 text
© ZOZO, Inc.
AppWidgetProviderのonUpdate()無限ループ問題について
AppWidgetProvider.onUpdate()でWorkManagerを起動す
ると、onUpdate()が呼び出され無限ループに陥る
35
https://issuetracker.google.com/issues/115575872
Slide 36
Slide 36 text
© ZOZO, Inc.
AppWidgetProviderのonUpdate()無限ループ問題について
36
AppWidgetProvider
onUpdate()
WorkManager
起動
RescheduleReceiver
スケジューリング
ACTION_PACKAGE_CHANGEDがブロードキャストされ、onUpdate()が発火
Slide 37
Slide 37 text
© ZOZO, Inc.
AppWidgetProviderのonUpdate()無限ループ問題について
37
AppWidgetProvider
onUpdate()
WorkManager
起動
RescheduleReceiver
スケジューリング
ACTION_PACKAGE_CHANGEDがブロードキャストされ、onUpdate()が発火
Slide 38
Slide 38 text
© ZOZO, Inc.
対応策
● onUpdate()ではなくonEnabled()で定期実行する
● Pending状態のリクエストを用意しておく
○ 遠い未来に実行されるダミーのリクエストをonEnabled()
で実行する
38
Slide 39
Slide 39 text
© ZOZO, Inc.
Glanceでは…？
GlanceAppWidgetReceiverはAppWidgetProviderを継承して
いる
39
無限ループ問題が発生するはずだが…
Slide 40
Slide 40 text
© ZOZO, Inc.
Glanceでは…？
GlanceAppWidgetReceiverはAppWidgetProviderを継承して
いる
40
無限ループ問題が発生するかと思いきや…
実験した限りでは発生しなかった…！
けどソースコードを見る限りは
修正されていなさそう
怪
しい
Slide 41
Slide 41 text
© ZOZO, Inc.
話すこと
41
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 42
Slide 42 text
© ZOZO, Inc.
話すこと
42
● 従来のWidgetについてざっくりと
● Glanceとは
● 実際にGlanceを触ってみる
● betaの変更点
● 更新処理の無限ループ問題
● まとめ
Slide 43
Slide 43 text
© ZOZO, Inc.
まとめ
● GlanceはComposeでWidgetを構成することができるよ
● ただし使えるCompose APIはGlance専用のものになるので、多
少制限はあるよ
● まだbetaなので、stableが楽しみ
43
Slide 44
Slide 44 text
© ZOZO, Inc.
ご清聴ありがとうございました
44
Slide 45
Slide 45 text
No content