Jetpack Composeで自動入力(Autofill)を実装しよう（作成：claude-3.7-sonnet）

Transcript

1. Jetpack Composeで自動入力(Autofill)を実装しよう Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 1
2. 自己紹介 名前：なんとか太郎 職業：Androidエンジニア 好きなもの：Jetpack Compose Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 2
3. 今日のテーマ 1. 自動入力(Autofill)とは 2. Jetpack Composeでの自動入力の実装方法 3. ハマりやすいポイントと解決策 Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 3
4. 自動入力(Autofill)とは パスワード入力欄にカーソルを当てると保存済みまたは生成したパスワードを自動で 入力してくれる機能 Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 4
5. 従来の実装方法（XMLレイアウト） <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:autofillHints="password" /> XMLレイアウトでは android:autofillHints 属性で簡単に実装できていた Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 5
6. Jetpack Composeでの実装方法 Compose UIのバージョンによって実装方法が異なる Compose UI 1.7.x以下：実験的APIのAutofillType Compose UI 1.8.0以降：ContentTypeによる簡単実装（推奨） Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 6
7. 実装手順 1: バージョンアップ // build.gradle.kts(:app) dependencies { implementation("androidx.compose.ui:ui:1.8.0-beta03") } ※ 記事執筆時点ではbeta03を推奨 ※ beta02以前には既知の問題あり Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 7
8. 実装手順 2: contentTypeの設定 ログイン画面の例： Column { TextField( value = username.value, onValueChange = {username.value = it}, modifier = Modifier.semantics { contentType = ContentType.Username } ) TextField( value = password.value, onValueChange = {password.value = it}, modifier = Modifier.semantics { contentType = ContentType.Password } ) } Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 8
9. 自動入力の種類 1. 保存済みパスワードの自動入力： ContentType.Password 2. 新しいパスワードの自動生成： ContentType.NewPassword Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 9
10. 新しいパスワードの自動生成例 Column { TextField( value = newPassword.value, onValueChange = {newPassword.value = it}, modifier = Modifier.semantics { contentType = ContentType.NewPassword } ) TextField( value = newPasswordToConfirm.value, onValueChange = {newPasswordToConfirm.value = it}, modifier = Modifier.semantics { contentType = ContentType.NewPassword } ) } Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 10
11. パスワードを保存する方法 公式ドキュメントでは autofillManager の使用が紹介されています： val autofillManager = LocalAutofillManager.current // Submit button Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") } Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 11
12. 罠：AutoFillManagerが機能しないケース autofillManager?.commit() を呼んでもパスワード保存ダイアログが表示されない場 合がある 条件が厳しい！ 1. NewUsernameとNewPasswordの両方が1つのComposable内にあること 2. ユーザーが両方を操作したこと Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 12
13. 解決策：CredentialManagerを使う Button(onClick = { try { coroutineScope.launch { val credentialManager = CredentialManager.create(context) val request = CreatePasswordRequest(username, newPassword.value) credentialManager.createCredential( request = request, context = context, ) } } catch (e: CreateCredentialException) { println(" Failed to save password: ${e.message}") } }) { Text("Reset credentials") } Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 13
14. CredentialManagerの注意点 android.credentials ：API Level 34以上向け androidx.credentials ：API Level 33以下もサポート（推奨） // build.gradle.kts dependencies { implementation("androidx.credentials:credentials:1.x.x") } Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 14
15. まとめ 1. Compose UIを1.8.0以降にアップデート 2. Modifier.semantics { contentType = ... } を使用 3. パスワード保存は CredentialManager が確実 詳細は公式ドキュメントをチェック： https://developer.android.com/develop/ui/compose/text/autofill Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 15
16. ご清聴ありがとうございました！ 質問がありましたらお願いします！ Jetpack Composeで自動入力機能を実装する © 2025 Android勉強会 16