Build widgets with Glance kintone開発チーム 藤⽥ 真輔

概要 u 取り上げる動画「Build widgets with Glace」 https://youtu.be/jI1LKN7jBVk?si=zRH4o2LCwB7oxX6y

Jetpack Glanceとは︖ u Jetpack Compose Runtime上に 構築されたフレームワークで Kotlin APIを使⽤してウィジェッ トを開発できる（簡単に⾔うと、 Jetpack Composeを使ってウィ ジェットが作成可能、Googleが 推奨する⽅法）

Jetpack Glanceとは︖ u AppWidgetsやRemoteViewsの制限を受けるので、Jetpack Composeとは異なる コンポーザブルを使⽤する(つまり既存のJetpack Composeとは共存出来ない) u Material3のカラーシステムを利⽤可能なGlanceThemeがある u CompileSdk >= 34を要求されるっぽい

Glance⽤のComposableを使う必要があ る 実際にTextコンポーザブルを共存させようとしたりMaterial3のTextコン ポーザブルを使おうとすると、「java.lang.IllegalStateException」が発 ⽣した。

Jetpack Glanceの歴史 バージョン リリース⽇ 1.0.0-alpha01 2021/12/15 1.0.0-beta01 2023/03/10 1.0.0-rc01 2023/07/26 1.0.0 2023/09/06 1.1.0-alpha01 2024/02/07 1.1.0-beta01 2024/04/03 1.1.0-rc01 2024/05/14

Jetpack Glanceでウィジェット作る 1. setup 2. AppWidgetをManifestで宣⾔する 3. AppWidgetProviderInfoメタデータを追加する 4. GlanceAppWidgetを定義する 5. UIを作成する

Jetpack Glanceでウィジェット作る 1. setup Glanceの依存関係を追加（Compose Compilerも有効にします） dependencies { // For AppWidgets support implementation( "androidx.glance:glance-appwidget:1.0.0" ) // For interop APIs with Material 2 implementation( "androidx.glance:glance-material:1.0.0" ) // For interop APIs with Material 3 implementation( "androidx.glance:glance-material3:1.0.0" ) }

Jetpack Glanceでウィジェット作る 2. AppWidgetをManifestで宣⾔する 2-1. AppWidgetをManifestで宣⾔する

Jetpack Glanceでウィジェット作る 2. AppWidgetをManifestで宣⾔する 2-2. GlanceAppWidgetReceiverを拡張する class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = GlanceWidget() }

Jetpack Glanceでウィジェット作る 3. AppWidgetProviderInfoメタデータを追加する メタデータの詳細は以下。 https://developer.android.com/develop/ui/views/appwidgets#other- attributes minWidth/minHeightやresizeMode、 targetCellWidth/targetCellHeight(ウィジェットの初期サイズ)などが 指定できる

Jetpack Glanceでウィジェット作る 4. GlanceAppWidgetを定義する class MyAppWidget : GlanceAppWidget() { override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { // create your AppWidget here GlanceTheme { GlanceContent() } } } }

Jetpack Glanceでウィジェット作る 5. UIを作成する(Glance⽤のComposableを使う) @Composable private fun GlanceContent() { Column( modifier = GlanceModifier.fillMaxSize().background(GlanceTheme.colors.background), verticalAlignment = Alignment.Top, horizontalAlignment = Alignment.CenterHorizontally ) { Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp)) Row(horizontalAlignment = Alignment.CenterHorizontally) { Button(text = "Home", onClick = actionStartActivity()) Button(text = "Work", onClick = actionStartActivity()) } } }

ユーザー操作を処理する 1. アクティビティの起動 2. サービスの起動 3. ブロードキャストイベントを送信 4. カスタム操作を実⾏ 1. ラムダアクションを実⾏ 2. ActionCallbackを実⾏ 5. アクションにパラメータを指定する

ユーザー操作を処理する u GlanceはActionクラスを介してユーザー操作の処理を簡素化している u Actionクラスはユーザーが実⾏できるアクションを定義しアクションに 応じて実⾏するオペレーションを指定できます （actionStartActivity/actionService/actionSendBroadcast/actionRunCal lなど） u GlanceModifier.clickableメソッドを使⽤してActionを定義する u ActionParametersでアクションに追加情報を指定できる

ユーザー操作を処理する u Activity起動+アクションパラメータの例 @Composable fun MyContent() { // .. Button( text = "Go Home", onClick = actionStartActivity( actionParameterOf(key to “parameter”) ) ) }

ウィジェットの追加⽅法 1. ウィジェットピッカーを使⽤する 2. アプリからホーム画⾯に追加する 3. アプリアイコンのショートカットから追加する

Jetpack Glanceでウィジェット作る Demo（ウィジェットピッカーから作る）

ウィジェットの追加⽅法 Demo（アプリからホーム画⾯に追加する） AppWidgetManager#requestAppWidget(ComponentName, Bundle, PendingIntent) を実⾏する

ウィジェットの追加⽅法 Demo（アプリアイコンのショートカットから追加する）

ウィジェットの更新 1. ホーム画⾯にウィジェットが配置された後に更新するの はアプリケーションの責任となる 2. glanceIdを取得して、update()を呼ぶ必要がある val manager = GlanceAppWidgetManager(context) val widget = GlanceWidget() val glanceIds = manager.getGlanceIds(widget.javaClass) glanceIds.forEach { glanceId -> widget.update(context, glanceId) }

ウィジェットの更新 Demo（ウィジェットの更新）

ウィジェットのテスト dependencies testImplementation "androidx.glance:glance-testing:1.1.0-rc01" testImplementation "androidx.glance:glance-appwidget- testing:1.1.0-rc01"

引⽤ https://developer.android.com/develop/ui/compose/glance https://developer.android.com/develop/ui/views/appwidgets?hl=ja#other- attributes