Firebase Studioで始めるモバイルアプリ開発入門

This document describes the features and development experience of mobile app development using Firebase Studio, based on actual hands-on experience.

Transcript

1. Firebase StudioͰ࢝Ί ΔϞόΠϧΞϓϦ։ൃೖ ໳
2. Firebase Studioͱ͸ʁ 2025/4/14 ϓϨϏϡʔ൛ͱͯ͠ϦϦʔεɺҎԼͷཁૉΛ౷߹ͨ͠։ൃ؀ڥͰ͢ • Project IDX: Ϋϥ΢υIDE, VSCodeϕʔε • Firebase: mBaaS • Genkit: AIΛ׆༻ͨ͠ΞϓϦ΍ػೳΛߏஙͰ͖ΔΑ͏ʹઃܭ ͞ΕͨϑϨʔϜϫʔΫ • Gemini: Google͕։ൃͨ͠ର࿩ܕੜ੒AI
3. Firebase StudioͰ࢝ ΊΔΞϓϦ։ൃ • App Prototyping AgentʢNext.jsʣ • طଘͷϓϩδΣΫτΛΠϯϙʔτ • ςϯϓϨʔτ͔Β࢝ΊΔ
4. Firebase StudioͰ࢝ ΊΔΞϓϦ։ൃ • App Prototyping AgentʢNext.jsʣ • طଘͷϓϩδΣΫτΛΠϯϙʔτ • ςϯϓϨʔτ͔Β࢝ΊΔ
5. Firebase StudioͰ࢝ ΊΔΞϓϦ։ൃ • App Prototyping AgentʢNext.jsʣ • طଘͷϓϩδΣΫτΛΠϯϙʔτ • ςϯϓϨʔτ͔Β࢝ΊΔ
6. Firebase StudioͰ࢝ ΊΔΞϓϦ։ൃ • App Prototyping AgentʢNext.jsʣ • طଘͷϓϩδΣΫτΛΠϯϙʔτ • ςϯϓϨʔτ͔Β࢝ΊΔ ← ࠓ೔͸͜ Ε
7. Firebase StudioͰ࡞ΔϞόΠϧΞϓ Ϧ Firebase StudioͰ༻ҙ͞ΕͯΔςϯϓϨʔτʹ͸ҎԼͷ͕̎ͭ ͋Γ·͢ • Flutter • React Native + Expo
8. App Prototyping Agent
9. App Prototyping Agent
10. ຊ୊ʢϞόΠϧΞϓϦ։ൃʣʹҠΓ·͢
11. ϞόΠϧΞϓϦΛ։ൃͨ͜͠ͱ͕ͳ͍ਓ
12. ॳֶऀ޲͚ͷઆ໌ ౰೔ͷࢀՃऀ࣍ୈͰεΩοϓ͠·͢ ͜ͷ͋ͨΓͷ༻ޠ஌ͬͯΔʁ - iPhone / Android - ωΠςΟϒΞϓϦ - ϚϧνϓϥοτϑΥʔϜϑϨʔϜϫʔΫ
13. ϞόΠϧΞϓϦͬͯԿʁ ࠓ೔͜ͷ৔Ͱ࿩͢ϞόΠϧΞϓϦ͸iPhone΍AndroidͳͲͷ εϚʔτϑΥϯ୺຤޲͚ʹ഑৴͞ΕΔΞϓϦͷࣄ
14. ωΠςΟϒΞϓϦ Apple΍Googleͱ͍ͬͨεϚʔτϑΥϯ༻ͷOSΛఏڙͯ͠Δձ͕ࣾެࣜʹఏڙͯ͠ΔAPI΍ݴޠɺπʔ ϧΛ࢖ͬͯ։ൃ͞Ε͍ͯΔΞϓϦͷࣄʢͱ͓͖ͯ͠·͢ʣ Apple Google OS iOS(iPhone)/iPadOS/watchOS/ tvOS/visonOS/macOS/etc Android/Android for Tablets/ Android TV/Android Auto/Wear OS/etc ݴޠ Swift/Objective-C Kotlin/Java IDE Xcode Android Studio ※ ਖ਼֬ʹ͸Android͸OSͰ෼͚ͯΔΘ͚Ͱ͸͋Γ·ͤΜ
15. ϚϧνϓϥοτϑΥʔϜϑϨʔϜϫʔ Ϋ ҰͭͷίʔυϕʔεͰiOS / Androidͷ྆ํͷϓϥοτϑΥʔϜ ΁ಉ͡ΞϓϦΛ഑৴͢ΔͨΊʹ࡞ΒΕͨϑϨʔϜϫʔΫ ΫϩεϓϥοτϑΥʔϜϑϨʔϜϫʔΫͱ΋ݴ͏ Flutter / React Native / Ionic / Cordova / .NET MAUI(Xamarin) / Kotlin Multiplatform + Compose Multiplatoform / Skip / Lynx / etc
16. ຊ೔ͷߏ੒ Firebase Studio + React Native + Expo
17. React Nativeͱ͸ Meta͕ࣾ։ൃͨ͠ϚϧνϓϥοτϑΥʔϜϑϨʔϜϫʔΫ - javascript / Typescript Ͱͷ࣮૷͕Մೳ - ωΠςΟϒͷUIίϯϙʔωϯτΛ࢖༻͢ΔͷͰߴ଎ - Hot reloadʹΑΓεϐʔσΟͳ։ൃ͕Մೳ
18. Expoͱ͸ React NativeΞϓϦͷ։ൃΛߴ଎͔ͭ؆୯ʹ͢ΔͨΊͷπʔϧ νΣʔϯ͓ΑͼϥΠϒϥϦ • ωΠςΟϒػೳʢΧϝϥ΍ηϯαʔͳͲʣͷAPIݺͼग़͠ͷ ͨΊͷػೳ͕ఏڙ͞Ε͍ͯΔ • Expo CLI & EAS(Expo Application Services)ͰϏϧυˍσϓ ϩΠ͕؆୯ • Expo GoΞϓϦʹΑΓετΞਃ੥Λ௨ͣ͞։ൃ࣌ͷ࣮ػ֬ೝ ͕Մೳ
19. React Native + Expo on Firebase Studio Firebase StudioͷςϯϓϨʔτ͔ΒReact Native + ExpoΛબ୒
21. Geminiͷ׆༻ • ίʔυੜ੒ͱఏҊ • ґଘੑͷղܾ • Τϥʔղܾ • υΩϡϝϯτ࡞੒ • ୯ମςετੜ੒
22. νϟοτͰGeminiΛ ࢖͏ νϟοτ͸ϚϧνϞʔμϧͳϓϩϯϓτ Λαϙʔτ͍ͯ͠·͢ • ը૾ɾඳըʢͦͷ৔Ͱඳ͘ʣ • ϑΝΠϧ • ⚠ MCPαϙʔτͯ͠·ͤΜ
23. ΠϯϥΠϯϔϧϓͰGeminiΛ࢖͏ ⌘ + IͰΤσΟλ্͔ΒGeminiʹΑΔฤू͕Մೳ
24. ࢖༻ՄೳͳϞσϧ Built-in Gemini ModelҎ֎Λ࢖͏৔߹͸APIKeyͷઃఆ͕ඞཁ • Built-in Gemini Model (த਎͸ଟ෼Gemini-2.0-flash) • Gemini-2.5-flash-preview • Gemini-2.5-pro-preview
25. airules CursorͳͲͱಉ͡Α͏ʹrulesϑΝΠϧ ΛγεςϜΠϯετϥΫγϣϯ΍ίϯς Ωετͱͯ͠ઃఆͰ͖·͢ - rulesϑΝΠϧ͸./idx/഑Լ͠·͢ - ϫʔΫεϖʔεͷ࠶Ϗϧυ͔load airules.mdΛGeminiʹґཔ͢Δͱ൓ө ͞Ε·͢
26. aiexclude .aiexcludeϑΝΠϧΛ࢖ͬͯGemini͔Βର৅ͷίʔυΛϑΝ Πϧ୯ҐͰඇදࣔʹͰ͖·͢ - .gitignoreͰແࢹ͞ΕͯΔϑΝΠϧ͸Gemini͔Β΋ແࢹ͞Ε ·͢ - .gitignoreͱߏจ͸΄΅Ұॹ
27. ϫʔΫεϖʔεͷ؀ڥઃఆ ϫʔΫϓϨʔεͷ؀ڥߏ੒ʹ͸Nixͱ͍͏७ਮؔ਺ܕύοέʔδ Ϛωʔδϟ͕࢖ΘΕ͍ͯ·͢ • γεςϜπʔϧʢݴޠ΍πʔϧɺύοέʔδϚωʔ δϟʔʣɺ؀ڥม਺ɺVSCodeͷ֦ு • ϫʔΫεϖʔεͷઃఆʢonCreate, onStart࣌ͷίϚϯυઃఆ ͳͲʣ • ϓϨϏϡʔͷදࣔઃఆ
28. Preview IDE্ʹWeb/AndroidͷϓϨϏϡʔΛදࣔͰ͖·͢ WebϓϨϏϡʔ͸ڞ༗ϦϯΫ ! Ͱ؆୯ʹγΣΞ͢Δ͜ͱ΋Մೳ Ͱ͢ ReactNative + Expoͷ৔߹͸Expo GoΞϓϦΛ࢖࣮ͬͯػͰ֬ ೝͨ͠ํ͕ߴ଎ʹϓϨϏϡʔͰ͖·͢
29. Preview
30. Preview Expo GoΞϓϦΛ࢖͏ͱ࣮ػͰߴ଎ʹϓϨϏϡʔͰ͖·͢
31. Debugging • console.logʢඇਪ঑ʣ ݕূؒʹ߹Θͳ͔ͬͨͰ͢ !" ໌Β͔ͳΤϥʔͳͲ͸Τϥʔը ໘ͱελοΫτϨʔε͕ग़ΔͷͰ໰୊ͳ͘ରԠͰ͖·͕͢ɺϒ ϨʔΫϙΠϯτΛషͬͯॲཧΛࢭΊΔͱ͍ͬͨλΠϓͷσόο ά͕Firebase Studio্Ͱ΋Մೳͳͷ͔͸ࠓޙ֬ೝ͠·͢
32. खݩͰಈ͔͢·Ͱ͕ૣ͍ 1. ςϯϓϨʔτ͔ΒॳظϓϩδΣΫτੜ੒ 2. Geminiʹ࡞Γ͍ͨΞϓϦͷϓϩϯϓτ౤͛Δ 3. Expo GoͰ֬ೝʢExpo GoΠϯετʔϧͱQRεΩϟϯ͚ͩͰ ࢝ΊΕΔʣ 4. 2,3Λͷ܁Γฦ͠ ※ QRίʔυͷεΩϟϯ͸Ұ౓Ͱྑ͍
33. Cline / Cursor / Windsurfͱൺ΂ͯ Ͳ͏͔ʁ ! ίʔυͷมߋ΍ίϚϯυͷ࣮ߦ͸ϑΝΠϧ୯ҐͰຖճ֬ೝͱ ঝೝ͕ඞཁͩͬͨʢଞͷAI Agentͩͱ͋Δఔ౓ઌ·ͰਐΊͯ ߦͬͪΌ͏ʣ ⭕ ଞΤσΟλͱಉ༷ʹVSCodeϕʔεͰѻ͍΍͍֦͢͠ு΋Ұ෦ ࢖͑Δ ⭕ Ϋϥ΢υIDEͳͷͰ͋·Γ؀ڥʹࠨӈ͞Εͳ͍ ⭕ Googleͷ΄͔αʔϏεͱͷ࿈ܞ͕γʔϜϨεʹߦ͑Δ
34. ॴײ TODO: ޱ಄Ͱ৭ʑ࿩͢
35. ͕࣌ؒ͋ͬͨΒ࿩͢
36. Submit WebΞϓϦͰ͋Ε͹Firebase HostingͳͲΛ࢖ͬͯPublish͢Δ ͱ͜Ζ·Ͱαϙʔτ͍ͯ͠·͕͢ɺϞόΠϧΞϓϦʹؔͯ͠͸ ετΞ΁ͷਃ੥͸αϙʔτ͞Εͯͳ͍Α͏Ͱ͢ ReactNative + Expoͷ৔߹͸EAS BuildͳͲͷ࢓૊ΈΛ࢖ͬͯਃ ੥Λߦ͏ඞཁ͕͋Γ·͢
37. Environment Variables • idx.nixͷenvʹهड़͢Δͱάϩʔόϧͳ؀ڥม਺ͱͯ͠࢖͑ Δ • .envϑΝΠϧΛ͓͍ͯ΋࢖͑Δ
38. Extensions • idx.nixʹॻ͘ʢϓϩδΣΫτڞ௨ͷ΋ͷʣ • IDEͷExtensionsͷઃఆ͔ΒΠϯετʔϧ͢Δʢ௨ৗͷ VSCodeͱಉ౳ɺݸਓͷ޷ΈͰ࢖͏΋ͷʣ
39. Tips γʔΫϨοτͳͲ͸ϦϙδτϦʹίϛοτͨ͘͠ͳ͍͸ͣͰ͢ ͕idx.nixͷenvʹॻ͍ͯ͠·͏ͱίϛοτର৅ʹͳΔͨΊ৔߹͸ Google Secret ManagerΛ࢖͏ͱྑͦ͞͏Ͱ͢ GSM͔ΒγʔΫϨοτΛऔಘ͢ΔࡍͷϓϥΫςΟεͱͯ͠͸ Cloud RunͳͲΛ࢖ͬͯAPIΛୟ͘ํ๏ͳͲ͕͋Γ·͢ɻʢࠓ೔ ͷൃදͰ͸ৄ͘͠࿩͠·ͤΜʣ
40. Tips ChromeͷwebΞϓϦԽ͓ͯ͘͠ͱϒϥ΢β͔Β੾Γ཭ͯ͠Ξϓ Ϧͱͯ͠࢖͑ΔͷͰ࢖͍উख͕গ͠Α͘ͳΓ·͢ https://support.google.com/chrome/answer/9658361? hl=ja&co=GENIE.Platform%3DDesktop
41. Tips ؀ڥͷϦϏϧυ΍expo startͷ࠶࣮ߦͳͲ͸onStartΛಡΜͩΓ ͢Δํָ͕ • Rebuild Environment • onLaunch • onStart
42. Tips • IDE͸VSCodeΛ΋ͱʹͯ͋͠Γɺ֦ுػೳ΋ΠϯετʔϧՄ ೳ͕֦ͩுػೳͷϚʔέοτϓϨʔε͕Open VSX Registryʹ ͳ͍ͬͯΔͨΊීஈखݩͷVSCodeͰ࢖༻͍ͯ͠Δ֦ு͕࢖ ͑Δͱ͸ݶΒͳ͍ɻGithub Copilot࢖͑·ͤΜ͕Cline΍Roo Code͸ΠϯετʔϧͰ͖ΔΑ͏Ͱ͢ɻ Open VSX RegistryʹೖΕͯ͘Εͱ͍͏ཁ๬͸͋ΔΈ͍ͨ https://github.com/orgs/community/discussions/35832
43. ࢀߟࢿྉ • https://firebase.google.com/docs/studio?authuser=0&hl=ja • https://zenn.dev/yhatt/scraps/876f6fe83c901d
44. EOF