Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ComposeでWebアプリを作る技術

Avatar for てべすてん てべすてん
April 18, 2025
Programming
0
210

 ComposeでWebアプリを作る技術

Avatar for てべすてん

てべすてん

April 18, 2025
Tweet

More Decks by てべすてん

See All by てべすてん
ててべんす独演会〜Flowの全てを語ります〜
Avatar for てべすてん tbsten
1
230
Kotlin の煩雑な データコピーを どうにかする
Avatar for てべすてん tbsten
0
95
脱 Material3 ?! lumo ui の紹介
Avatar for てべすてん tbsten
0
130
衝撃を受けた OSS Androidアプリ
Avatar for てべすてん tbsten
0
200
CameraXとCompose
Avatar for てべすてん tbsten
0
150

Other Decks in Programming

See All in Programming
そのpreloadは必要？見過ごされたpreloadが技術的負債として爆発した日
Avatar for mugi mugitti9
2
3.4k
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
250
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
230
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
3.3k
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
240
CSC509 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
ソフトウェア設計の実践的な考え方
Avatar for 増田 亨 masuda220
PRO
4
580
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
160
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
170
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
170
2分台で1500examples完走！爆速CIを支える環境構築術 - Kaigi on Rails 2025
Avatar for Hayato OKUMOTO falcon8823
3
3.6k
uniqueパッケージの内部実装を支えるweak pointerの話
Avatar for magavel magavel
0
1k

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
56
6.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
Done Done
Avatar for chrislema chrislema
185
16k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
3
380
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ