ComposeでWebアプリを作る技術

Transcript

1. Compose Ͱ Web ΞϓϦΛ࡞Δٕज़ ͯ΂ͯ͢Μ 2025/04/18 Kobweb ͷ঺հ
2. ࣗݾ঺հ • Android ΤϯδχΞ • גࣜձࣾΏΊΈ • Web ϑϩϯτΤϯυ͸ 55఺͘Β͍ ͯ΂ͯ͢Μ
3. ࣗݾ঺հ • Compose, Kotlin ͕େ޷͖ • झຯ • ήςϞϊComposeϥΠϒϥϦͷ঺հ • ि3ͰҰਓΧϥΦέ ͯ΂ͯ͢Μ
4. Compose Ͱ Web αΠτΛ࡞Δٕज़ • Compose Multiplatform • Kobweb 👈 ࠓ೔࿩͢΍ͭ
5. Compose Multiplatform (CMP) Compose Λ͍ΖΜͳ Platform Ͱಈ͔ͤΔΑ͏ʹ͢Δ΍ͭ
6. Compose Multiplatform for Web
7. Compose Multiplatform for Web • Compose UI ͕ͦͷ··ಈ͘΋ͷ (͜͜Ͱ͸CMP UI) ͱ DOM Λग़ྗ͢Δ Compose HTML ͕͋Δ
8. Compose Multiplatform for Web ͷ࢒೦ϙΠϯτ
9. Compose Multiplatform ͷ࢒೦ϙΠϯτ • ύϑΥʔϚϯε໰୊ • Kotlin JS ͸ύϑΥʔϚϯε͕࢒೦ • ͔ͱ͍ͬͯ Wasm ͸ iOS Ͱಈ͔ͳ͍
10. Compose Multiplatform ͷ࢒೦ϙΠϯτ • <canvas> ʹϕλॻ͖ • ΞΫηγϏϦςΟ, SEO ໘Ͱෆར
11. ͨͩ ͜Ε͸࢓ํͳ͍
12. ʢԶ͕ߟ͑ΔʣCMP ͷ͋Δ΂͖࿦ • CMP ͸ ͍ΖΜͳ Platform Ͱ Compose Λͦͷ··ಈ͔͢ ͨΊͷٕज़ • ͍ΖΜͳछྨͷΞϓϦΛ࡞ΔͨΊͷٕज़Ͱ͸ͳ͍ • CMP Λ࢖ͬͯ΋ ֤ Platform ʹدΓఴͬͨ "ྑ͍ΞϓϦ" ͸ ࠓ͸࡞Εͳ͍͠ɺকདྷతʹ΋ແཧ • ͦ΋ͦ΋ Platform ͝ͱʹٻΊΒΕΔ UI ͕ҧ͏
13. Kobweb
14. Kobweb
15. Kobweb • Compose HTML ϕʔεͷ Web ΞϓϦΛ࡞ΔϑϨʔϜϫʔΫ • جຊ͸ HTML Λॻ͘΋ͷͷɺҰ෦ Compose ෩ʹॻ͘͜ͱ΋Ͱ͖Δ
16. Kobweb ͱ CMP (͍ΘΏΔ) CMP Compose HTML
17. Kobweb ͱ CMP Compose HTML
18. Kobweb ͱ CMP (͍ΘΏΔ) CMP Kobweb
19. Kobweb ͱ CMP (͍ΘΏΔ) CMP Kobweb
20. Kobweb ͱ CMP Kobweb
21. Kobweb ͱ CMP
22. ·ͱΊ • Compose Multiplatform for Web Ͱ Web αΠτ͸ࣙΊͱ͚ • CMP ͕ద͢ΔΞϓϦ͸͋Δ͕ɺWeb αΠτͱͯ͠ͷΫΦϦςΟ͸ མͪΔ • Compose × Web ΞϓϦ͸ Kobweb ͕Ξπ͍
23. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ