入門!実践!Kotlin Compose Multiplatformでデスクトップアプリ開発! / cmd_01_sample

Transcript

2. ೖ໳!࣮ફ!Kotlin Compose Multiplatform ͰσεΫτοϓ ΞϓϦ։ൃ! FORTE ɹஶ 2023-11-12 ൛ aozora Project ൃߦ 1
3. ͸͡Ίʹ ͜ͷຊΛखʹऔ͍͖ͬͯͨͩͲ͏΋͋Γ͕ͱ͏͍͟͝·͢ɻஶऀͷ FORTE ʢϑΥϧςʣͰ͢ɻࠓճ͸ Compose Multiplatform ͰσεΫτοϓΞϓϦΛ։ ൃ͢ΔྲྀΕΛ঺հ͢Δٕज़ಉਓࢽʹͳΓ·͢ɻࠓ·Ͱ Kotlin ʹؔ͢Δٕज़ಉਓ ࢽ͸αʔόʔαΠυ Kotlin ʹ͍ͭͯॻ͍͖ͯ·͕ͨ͠ωλ੾Εͨ͠ͷͰ͠͹Β ͓͘ٳΈͨ݁͠ՌɺCompose Multiplatform ͕໘നͦ͏ɺεϚϗ޲͚ͷهࣄ͸ ͋Δ͚ͲσεΫτοϓΞϓϦ޲͚͸গͳ͍ (ݸਓతʹεϚϗ͸ωΠςΟϒͷํ͕ ޷͖)ɺͱ͍͏͜ͱͰ Compose Multiplatform ͰσεΫτοϓΞϓϦΛ࡞੒͢Δ ಺༰ͱͳΓ·ͨ͠ɻͦͷͨΊɺαʔόʔαΠυ Kotlin γϦʔζͰ͸ͳ͍Ͱ͕͢ɺ Kotlin γϦʔζͱͯ͠͸ 5 ࡭໨ͷٕज़ಉਓࢽͱͳΓ·͢ɻ ຊஶ΋͜Ε·ͰͷαʔόʔαΠυ Kotlin γϦʔζಉ༷ɺWindowsɺMac ྆ର ԠͰ͢ɻࠓ·Ͱ͸ IntelliJ IDEAɺVS Code ͷ྆ IDE ʹରԠ͖ͯ͠·͕ͨ͠ɺ ࠓճ͸ VS Code ͸෇࿥ͱͳΓ·͢ɻͱ͍͏ͷ΋ Compose Multiplatform Λ࢝ ΊΔͷʹ IntelliJ IDEA ͷํ͕ѹ౗తʹ؆୯ɺ͔ͭɺָͰ VS Code ͩͱͨͩͨ ͩ໘౗ष͍खॱ͕ඞཁʹͳΔͨΊͰ͢ɻͦͷͨΊɺຊஶͰ͸ग़དྷ্͕ͬͨιʔε Λ VS Code Ͱಈ͔͢खॱ͸঺հ͠·͕͢ɺVS Code Ͱͷ։ൃ͸͓͢͢Ί͠·ͤ ΜɻࠓޙɺϓϥάΠϯͳͲͰঢ়گ͕มΘΔ͜ͱ͸͋Δͱࢥ͏ͷͰɺVS Code ೿ͷ ํ͸ΞϯςφΛཱ͓ͯͯ͘ͱྑ͍Ͱ͠ΐ͏ɻ ຊஶͷ಺༰ ຊஶ͸ Compose Multiplatform Ͱͷ։ൃʹ͍ͭͯओʹ࣍ͷ಺༰Λ঺հ͍ͯ͠ ·͢ɻ • Compose Multiplatform ͷ঺հͱؔ࿈ٕज़ʹ͍ͭͯ • Compose Multiplatform ϓϩδΣΫτͷ࡞੒ͱ࣮ߦํ๏ • ओͳ UI ίϯϙʔωϯτͷ࣮૷ํ๏ • ΢Οϯυ΢؅ཧͷ࣮૷ํ๏ • ؆୯ͳσεΫτοϓΞϓϦ։ൃͷྫͱͯ͠σδλϧ࣌ܭΞϓϦͷ։ൃΛ ঺հ • WindowsɺMac ༻ͦΕͧΕͷ࣮ߦϑΝΠϧ࡞੒ํ๏ 2
4. Compose Multiplatform ͷ঺հͱؔ࿈ٕज़ʹ͍ͭͯ ͦ΋ͦ΋ Compose Multiplatform ͱ͸ͳΜͳͷ͔?Ͳ͏͍ͬͨ͜ͱʹ࢖͑Δ ͷ͔?ࣅͨΑ͏ͳϥΠϒϥϦͱͷࠩҟʹ͍ͭͯ΋ղઆ͠·͢ɻ Compose Multiplatform ϓϩδΣΫτͷ࡞੒ํ๏ ΄ͱΜͲެࣜͷ Github ϦϙδτϦͰ঺հ͞Ε͍ͯΔ಺༰Ͱ͸͋Γ·͕͢ɺ࣮ ࡍʹ΍ͬͯΈͨه࿥ͱͯ͠ɺ·ͨ΍ͬͯΈͯಘΒΕͨ஫ҙ఺ͳͲΛ঺հ͠·͢ɻ ओͳ UI ίϯϙʔωϯτͷ࣮૷ํ๏ Compose Multiplatform Ͱ͸ Jetpack Compose Λར༻ͯ͠ UI ίϯϙʔω ϯτΛ࣮૷Ͱ͖·͢ɻ͍͔ͭ͘ͷίϯϙʔωϯτΛ࣮૷ͯ͠Έ࣮ͯࡍʹσεΫ τοϓΞϓϦͱͯ͠දࣔͯ͠Έ·͠ΐ͏ɻ ΢Οϯυ΢؅ཧͷ࣮૷ํ๏ σεΫτοϓΞϓϦ͸௨ৗҰຕͷ΢Οϯυ΢ͱͯ͠දࣔ͞Ε·͢ɻ͜ͷ΢Οϯ υ΢؅ཧͷجຊʹ͍ͭͯ঺հ͠·͢ɻ ؆୯ͳσεΫτοϓΞϓϦ։ൃͷྫͱͯ͠σδλϧ࣌ܭΞϓϦͷ։ൃΛ঺հ ͜͜·Ͱ঺հͨ͠಺༰ͷ·ͱΊͱͯ͠؆୯ͳσεΫτοϓΞϓϦͷ࣮૷ྫΛ঺ հ͠·͢ɻΞϓϦͷ಺༰͸σδλϧ࣌ܭͰ͢ɻݸਓతͳ࿩Ͱ͕͢ɺσεΫτοϓ ͷલ໘ʹৗʹ࣌ܭ͕දࣔ͞Ε͍ͯΔͱศརͩͱײ͍ͯ͡·͢ɻWindows ΋ Mac ΋λεΫόʔ΍ϝχϡʔόʔʹ࣌ܭ͸දࣔͰ͖·͕͢ɺͲͪΒ΋ඇදࣔʹ͍ͯ͠ ΔͱΧʔιϧΛಈ͔͞ͳ͍ͱදࣔͰ͖·ͤΜɻ͔ͱ͍ͬͯ࣌ܭͷͨΊʹͦΕΒΛ ৗʹද͍ࣔͯ͠Δͱ΢Οϯυ΢ͷදࣔྖҬ͕ৗʹগͳ͘ͳͬͯ͠·͍·͢͠ɺ࣌ ܭҎ֎ͷ༨ܭͳ৘ใ΋දࣔ͞Εͯ͠·͍·͢ɻৗʹલ໘ʹ࣌ࠁ͚ͩදࣔ͞Ε͍ͯ ͯཉ͍͠ͱ͍͏ཁ๬Λຬͨ͢ʹ͸σεΫτοϓΞϓϦ͕Ұ൪ͱߟ͍͑ͯ·͢ɻ ͳ͓ɺMac Ͱ͸ࠓޙͷ OS ΞοϓσʔτͰσεΫτοϓʹ΢ΟδΣοτͱͯ͠ ࣌ܭΛઃஔՄೳʹͳΔ༧ఆͩͦ͏Ͱ͕͢ɺσδλϧදه͕Մೳ͔͸ෆ໌Ͱ͢͠ɺ ҠಈՄೳʹ͍ͨ͠ɺৗʹલ໘ද͍ࣔͨ͠ɺअຐͳͱ͖͸Ұ࣌తʹ࠷খԽ͍ͨ͠ͳ Ͳͷࡉ͔ͳ੍ޚ͕Մೳ͔͸෼͔Γ·ͤΜɻWindows Ͱ΋ 11 Ͱ΢ΟδΣοτػೳ ͕௥Ճ͞Ε·͕ͨ͠ɺσδλϧ࣌ܭ͕ଘࡏ͢Δ͔͸෼͔Γ·ͤΜͰͨ͠ɺஶऀ͸ ·ͩ Windows10 ͳͷͰ࣮ࡍʹ֬ೝ΋Ͱ͖ͣɺগ͠άάͬͨఔ౓Ͱ͸σδλϧ࣌ ܭΛදࣔ͢Δํ๏͸ݟ͔ͭΓ·ͤΜͰͨ͠ɻ·ͨԾʹ΢ΟδΣοτͰ௥ՃՄೳͰ ͋ͬͨͱͯ͠΋ Mac ಉ༷ʹࡉ੍͔͍ޚ͕Մೳ͔͸ෆ໌Ͱ͢ɻͦͷͨΊɺࣗ෼޷Έ ʹઃఆͰ͖ΔΑ͏ʹσεΫτοϓΞϓϦͰ։ൃͯ͠Έ·ͨ͠ɻ WindowsɺMac ͦΕͧΕͷ࣮ߦϑΝΠϧ࡞੒ํ๏ ࠷ޙʹ୯ҰͷΞϓϦέʔγϣϯͱͯ͠ WindowsɺMac ͷ྆ OS Ͱ࣮ߦՄೳͳ ϑΝΠϧܗࣜʹม׵͢Δํ๏Λ঺հ͠·͢ɻ͜Ε͸ Gradle ͷػೳΛ࢖࣮ͬͯݱ 3
5. Ͱ͖·͢ɻର৅ͷϑΝΠϧܗࣜ͸ Windows ͸.msiɺMac ͸.dmg ܗࣜͰ͢ɻ ͲΜͳਓ޲͚͔ ຊஶ͸࣍ͷΑ͏ͳํΛର৅ͱͯࣥ͠ච͠·ͨ͠ɻ • Kotlin ʹڵຯ͕͋ΓɺKotlin ͰԿ͔ॻ͍ͯΈ͍ͨ • σεΫτοϓΞϓϦΛ࡞ͬͯΈ͍ͨ • WindowsɾMac ͲͪΒͰ΋ಈ͘ΞϓϦΛ࡞Γ͍ͨ • Compose Multiplatform ͕ؾʹͳ͍ͬͯͨ લఏ஌ࣝ͸ඞཁͳ͍Α͏ʹॻ͍͍ͯ·͕͢ɺKotlin ͱ͸?Έ͍ͨͳجຊతͳ͜ ͱ͸ղઆ͍ͯ͠ͳ͍ͷͰɺKotlin ΍ Gradle ʹ͍ͭͯجૅ͔Βֶͼ͍ͨํ͸੿ஶ ʮೖ໳!࣮ફ!αʔόʔαΠυ KotlinʯΛ͝ཡ͍ͩ͘͞ɺKotlin ॳ৺ऀ޲͚ʹ 1 ͔Β ஸೡʹղઆ͍ͯ͠·͢ɻిࢠ൛͸࣍ͷϦϯΫ͔ QR ίʔυ͔Βɺࢴ൛͸ Amazon ͰߪೖͰ͖·͢ɻ https://fortegp05.booth.pm/items/1560389 ˛ਤ 1 ೖ໳!࣮ફ!αʔόʔαΠυ Kotlin ͜ͷຊͰಘΒΕΔ͜ͱ ͜ͷຊΛಡΉ͜ͱͰ࣍ͷ͜ͱ͕ಘΒΕ·͢ɻ • Compose Multiplatform ͕ͳʹ͔෼͔Δ 4
6. • Compose Multiplatform ͷ։ൃ؀ڥ͕࡞੒Ͱ͖Δ • Jetpack Compose ʹֶ͍ͭͯ΂Δ • WindowsɾMac ͲͪΒͰ΋ಈ͘ΞϓϦΛҰͭͷίʔυͰ࡞੒Ͱ͖ΔΑ͏ ʹͳΔ ͜ͷຊͰ͸ղઆ͠ͳ͍͜ͱ Compose Multiplatform Ͱ͸ Jetpack Compose Λ࢖༻͍ͯ͠·͕͢ɺJet- pack Compose ʹ͍ͭͯৄࡉʹ͸ղઆ͠·ͤΜɻ͋͘·Ͱར༻ํ๏ͷΈɺίʔυ Ͱղઆ͢ΔܗʹͳΓ·͢ɻ ·ͨલड़ͨ͠ͱ͓Γ Kotlin ΍ Gradle ʹ͍ͭͯৄࡉͳղઆ͸͠·ͤΜɻ ຊจதͷ಺༰Ͱෆ໌఺͕͋Ε͹ X(چ Twitter)ʮhttps://twitter.com/FORT Egp05ʯ͔ɺԞ෇ʹهࡌͨ͠ϝʔϧΞυϨε·Ͱ͝࿈བྷ͍ͩ͘͞ɻϕετΤϑΥʔ τͰ͝ճ౴͍ͨ͠·͢ɻ ͜ͷຊͷ࢖͍ํ جຊతʹઌ಄͔ΒಡΈਐΊ͍͚ͯ͹͍͍Ͱ͕͢ɺؾʹͳͬͨͱ͜Ζ͚ͩఠΜͰ ͍͘ܗͰ΋໰୊͋Γ·ͤΜɻಛʹطʹ Compose Multiplatform Λ࢖༻͍ͯ͠Δ ํ͸ΞϓϦ։ൃྫͷ෦෼͚ͩΛಡΜͰ΋͍͍͔΋͠Ε·ͤΜɻ ໔੹ࣄ߲ ຊॻʹهࡌ͢Δ಺༰͸චऀͷॴଐ͢Δ૊৫ͷެࣜݟղͰ͸͋Γ·ͤΜɻ·ͨɺ ຊॻ͸ՄೳͳݶΓਖ਼֬Λظ͢Α͏ʹ౒Ί͍ͯ·͕͢ɺචऀ͕ͦͷ಺༰Λอূ͢Δ ΋ͷͰ͸͋Γ·ͤΜɻͦͷͨΊɺຊॻͷهࡌ಺༰ʹج͍ͮͨಡऀͷߦҝɺٴͼಡ ऀ͕ඃͬͨଛ֐ʹ͍ͭͯචऀ͸ͳΜΒ੹೚Λෛ͏΋ͷͰ͸͋Γ·ͤΜɻ 5
7. ໨࣍ ͸͡Ίʹ 2 ຊஶͷ಺༰ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 ͲΜͳਓ޲͚͔ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 ͜ͷຊͰಘΒΕΔ͜ͱ . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 ͜ͷຊͰ͸ղઆ͠ͳ͍͜ͱ . . . . . . . . . . . . . . . . . . . . . . . . 5 ͜ͷຊͷ࢖͍ํ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ໔੹ࣄ߲ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 ୈ 1 ষ Compose Multiplatform ͱ͸? 8 1.1 Kotlin ͔ΒಘΒΕΔࡾͭͷେ͖ͳϝϦοτ . . . . . . . . . . . . 9 1.1.1 ίʔυهड़ྔ͕ݮΔ . . . . . . . . . . . . . . . . . . . . 9 1.1.2 null ҆શ . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.1.3 Java ࢿ࢈͕࢖͑Δ . . . . . . . . . . . . . . . . . . . . 9 1.2 Jetpack Compose ͔ΒಘΒΕΔೋͭͷେ͖ͳϝϦοτ . . . . . 10 1.2.1 એݴతͳ UI ߏங͕Մೳ . . . . . . . . . . . . . . . . . . 10 1.2.2 ϞμϯͳΞχϝʔγϣϯ . . . . . . . . . . . . . . . . . 10 1.3 Compose Multiplatform ͷؔ࿈ٕज़ʹ͍ͭͯ . . . . . . . . . . 11 1.3.1 Kotlin Multiplatform(KMP) ʹ͍ͭͯ . . . . . . . . . 11 ୈ 2 ষ Compose Multiplatform ϓϩδΣΫτͷ࡞੒ͱ࣮ߦํ๏ 12 2.1 ։ൃ؀ڥͷߏங . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.1.1 ֬ೝ؀ڥ όʔδϣϯͳͲ . . . . . . . . . . . . . . . . . 12 2.1.2 IntelliJ IDEA Community Edition ͷΠϯετʔϧ . . 12 2.2 Compose Multiplatform ϓϩδΣΫτͷ࡞੒ͱ࣮ߦ . . . . . . 15 2.2.1 ϓϩδΣΫτͷ৽ن࡞੒ . . . . . . . . . . . . . . . . . 15 2.2.2 Gradle ͷόʔδϣϯมߋ . . . . . . . . . . . . . . . . . 16 2.2.3 ϓϥάΠϯͷߋ৽ . . . . . . . . . . . . . . . . . . . . . 18 2.2.4 Gradle ͔Β࣮ߦ͢Δ . . . . . . . . . . . . . . . . . . . 19 ୈ 3 ষ ओͳ UI ίϯϙʔωϯτͷ࣮૷ํ๏ 23 3.1 جຊతͳ࣮૷ . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 3.2 Ϙλϯ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 6
8. 3.3 ελΠϧ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 3.4 ϨΠΞ΢τ . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 3.4.1 ԣฒͼϨΠΞ΢τ . . . . . . . . . . . . . . . . . . . . . 26 3.4.2 ॎฒͼϨΠΞ΢τ . . . . . . . . . . . . . . . . . . . . . 26 3.5 ϥϕϧ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 3.6 ςΩετೖྗ . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 3.7 ը૾දࣔ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 3.8 εΫϩʔϧόʔ . . . . . . . . . . . . . . . . . . . . . . . . . . 30 ୈ 4 ষ σδλϧ࣌ܭΞϓϦͷ։ൃ 33 4.1 ϓϩδΣΫτͷ࡞੒ . . . . . . . . . . . . . . . . . . . . . . . . 33 4.1.1 Gradle ͷόʔδϣϯมߋ . . . . . . . . . . . . . . . . . 34 4.1.2 ϓϥάΠϯͷߋ৽ . . . . . . . . . . . . . . . . . . . . . 34 4.2 ࣮૷ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 4.2.1 ΢Οϯυ΢ͷେ͖͞มߋ . . . . . . . . . . . . . . . . . 34 4.2.2 ϨΠΞ΢τͷ௥Ճ . . . . . . . . . . . . . . . . . . . . . 35 4.2.3 എܠͷઃఆ (೚ҙ) . . . . . . . . . . . . . . . . . . . . . 35 4.2.4 ࣌ࠁϥϕϧͷදࣔ . . . . . . . . . . . . . . . . . . . . . 37 4.2.5 ݱࡏ࣌ࠁͷදࣔ . . . . . . . . . . . . . . . . . . . . . . 39 4.2.6 1 ඵ͝ͱʹදࣔΛߋ৽͢Δ . . . . . . . . . . . . . . . . 40 4.2.7 ΢Οϯυ΢੍ޚͷมߋ . . . . . . . . . . . . . . . . . . 40 4.3 ֤ϓϥοτϑΥʔϜ޲͚ͷ࣮ߦϑΝΠϧ࡞੒ . . . . . . . . . . . 41 ෇࿥ A VS Code Ͱ Compose Multiplatform ϓϩδΣΫτͷ࡞੒ 42 A.1 σΟϨΫτϦΛ࡞੒͢Δ . . . . . . . . . . . . . . . . . . . . . 42 A.2 settings.gradle.kts ͷ࡞੒ . . . . . . . . . . . . . . . . . . . . 42 A.3 build.gradle.kts ͷ࡞੒ . . . . . . . . . . . . . . . . . . . . . . 42 A.4 src/main/kotlin/main.kt ͷ࡞੒ . . . . . . . . . . . . . . . . 43 A.5 Gradle ࣮ߦ؀ڥͷߏங . . . . . . . . . . . . . . . . . . . . . . 43 A.5.1 Mac ͷ৔߹ . . . . . . . . . . . . . . . . . . . . . . . . 43 A.5.2 Windows ͷ৔߹ . . . . . . . . . . . . . . . . . . . . . 43 A.6 ΞϓϦέʔγϣϯͷ࣮ߦ . . . . . . . . . . . . . . . . . . . . . 44 A.6.1 Mac ͷ৔߹ . . . . . . . . . . . . . . . . . . . . . . . . 44 A.6.2 Windows ͷ৔߹ . . . . . . . . . . . . . . . . . . . . . 44 ͋ͱ͕͖ 45 ஶऀ঺հ 46 จষ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 7