Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AndroidアプリのUIをGeminiで生成する
Search
ムッチョ
July 19, 2024
0
85
AndroidアプリのUIをGeminiで生成する
ムッチョ
July 19, 2024
Tweet
Share
More Decks by ムッチョ
See All by ムッチョ
Architecture Design for Local Database ~ Realm, CoreData, SwiftData ~
musayazuju
0
100
Generate Android App UI with Gemini
musayazuju
2
110
Databaseのことを考えずにiOSアプリを作る ローカルデータベースを使うときの アーキテクチャ設計
musayazuju
1
160
CoreDataからSwiftDataへの移行
musayazuju
1
100
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Become a Pro
speakerdeck
PRO
29
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Language of Interfaces
destraynor
158
25k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
AndroidアプリのUIを で生成する
自己紹介 👋 • Name: Muccho (ヤズジュ ムーサー) • Androidも書く iOS
Developer at Voicy Inc. • Android歴はまだまだ勉強中 @Mucchooooo
Androidエンジニア 積極採用中!
https://io.google/2024/ Google I/O 2024にて…
Gemini Chat機能で Androidアプリ開発 を助ける機能!
Android Studioに実 装されたGemini は Android projectの 内容を理解してくれ るらしい。。。 😘
Jetpack composeのcodeをデザイン画像から生 成する能力を披露 https://www.youtube.com/watch?v=ddcZnW1HKUY&t=1770s
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.
None
None
None
None
🤔🤔🤔
✅ コンパイルが通る ✅ それぞれのアイテムの 特徴を理解 ✅ 適切なUI Component ❌ 細部のデザインに違い
Before After
Before After ✅ コンパイルが通る ✅ それぞれのアイテムの 特徴を理解 ✅ 適切なUI Component
❌ 細部のデザインに違い 生産性向上間違いなし!
やってみよう!
Step 1: Gemini tabを開く
Step 2: プロンプトを入れる
あれ、画像を入れるオプションがない 🤯
とりあえず 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.
Gemini Advanced Google’s most capable AI models
結果は...
None
Java?
複数のコンパイル エラー 🥺
コンパイルエラーは Geminiに伝えたら すぐ直してもらえた
UIの結果は...
🤯
None
Before After Google’s showcase ✅ コンパイルが通る ✅ それぞれのアイテムの 特徴を理解 ✅
適切なUI Component ❌ 細部のデザインに違い
❌ コンパイルできない ❌ テキストを捉えてない ❌ 画像が消えている ❌ デザインが全然違う Before After
Real
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
❌ 50行程度のコード • Imports • Composables Code Comparison ✅ 200行程度のコード
• Imports • MainActivity • Composable • Preview Google’s showcase Real
なぜ? 🤔
違うAIモデルを使っている のか? 🤔
いいえ、同じです。 Gemini 1.5 Pro
Gemini Advanced Gemini 1.5 Pro 1M token context window
Fake…? Before After
このshowcaseでGeminiが生成したコードは、本当に Gemini が生成したのか、事前に用意されたのか
Before After まだ開発中の最先 端AIモデルかもし れません
Googleからのアップデートを待ちましょう!
Thank you!