AndroidアプリのUIをGeminiで生成する

1. AndroidアプリのUIを で生成する
2. 自己紹介 👋 • Name: Muccho (ヤズジュ ムーサー) • Androidも書く iOS Developer at Voicy Inc. • Android歴はまだまだ勉強中 @Mucchooooo
3. Androidエンジニア 積極採用中！
4. https://io.google/2024/ Google I/O 2024にて…
5. Gemini Chat機能で Androidアプリ開発 を助ける機能！
6. Android Studioに実 装されたGemini は Android projectの 内容を理解してくれ るらしい。。。 😘
7. Jetpack composeのcodeをデザイン画像から生 成する能力を披露 https://www.youtube.com/watch?v=ddcZnW1HKUY&t=1770s
8. Prompt: For the image provided, use Jetpack Compose to build the screen so that the Compose Preview is as close to this image as possible. Also make sure to include imports, use Material 3.
13. 🤔🤔🤔
14. ✅ コンパイルが通る ✅ それぞれのアイテムの 特徴を理解 ✅ 適切なUI Component ❌ 細部のデザインに違い Before After
15. Before After ✅ コンパイルが通る ✅ それぞれのアイテムの 特徴を理解 ✅ 適切なUI Component ❌ 細部のデザインに違い 生産性向上間違いなし！
16. やってみよう！
17. Step 1: Gemini tabを開く
18. Step 2: プロンプトを入れる
19. あれ、画像を入れるオプションがない 🤯
20. とりあえず Web版を使う プロンプト : For the image provided, use Jetpack Compose to build the screen so that the Compose Preview is as close to this image as possible. Also make sure to include imports, use Material 3.
21. Gemini Advanced Google’s most capable AI models
22. 結果は...
24. Java?
25. 複数のコンパイル エラー 🥺
26. コンパイルエラーは Geminiに伝えたら すぐ直してもらえた
27. UIの結果は...
28. 🤯
30. Before After Google’s showcase ✅ コンパイルが通る ✅ それぞれのアイテムの 特徴を理解 ✅ 適切なUI Component ❌ 細部のデザインに違い
31. ❌ コンパイルできない ❌ テキストを捉えてない ❌ 画像が消えている ❌ デザインが全然違う Before After Real
32. Level 1 https://www.vecteezy.com/vector-art/8295021- simple-store-drink-ui-design-template-vector-s uitable-designing-application-for-android-and-i os-clean-style-app-mobile Level 3 https://www.uistore.design/items/trackizer-free -app-ui-kit-for-figma/ Level 2 https://www.uistore.design/items/trackizer-free -app-ui-kit-for-figma/ ❌ Failed
33. ❌ 50行程度のコード • Imports • Composables Code Comparison ✅ 200行程度のコード • Imports • MainActivity • Composable • Preview Google’s showcase Real
34. なぜ? 🤔
35. 違うAIモデルを使っている のか? 🤔
36. いいえ、同じです。 Gemini 1.5 Pro
37. Gemini Advanced Gemini 1.5 Pro 1M token context window
38. Fake…? Before After
39. このshowcaseでGeminiが生成したコードは、本当に Gemini が生成したのか、事前に用意されたのか
40. Before After まだ開発中の最先 端AIモデルかもし れません
41. Googleからのアップデートを待ちましょう！
42. Thank you!