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

ComposeでWebアプリを作る技術

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

 ComposeでWebアプリを作る技術

Avatar for てべすてん

てべすてん

April 18, 2025
Tweet

More Decks by てべすてん

See All by てべすてん
脱 Material3 ?! lumo ui の紹介
Avatar for てべすてん tbsten
0
100
衝撃を受けた OSS Androidアプリ
Avatar for てべすてん tbsten
0
190
CameraXとCompose
Avatar for てべすてん tbsten
0
130

Other Decks in Programming

See All in Programming
ビカム・ア・コパイロット
Avatar for Kento.Yamada ymd65536
1
190
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
Avatar for Yui Sakamoto yuisakamoto
6
810
クラシルリワードにおける
iOSアプリ開発の取り組み
Avatar for fumito nakazawa funzin
1
720
JVM の仕組みを理解して PHP で実装してみよう
Avatar for memory m3m0r7
PRO
1
230
Design Pressure
Avatar for Hynek Schlawack hynek
0
1.4k
マイコンでもRustのtestがしたい/KernelVM Kansai 11
Avatar for Toshifumi NISHINAGA tnishinaga
1
1k
Investigating Multithreaded PostgreSQL
Avatar for Thomas Munro macdice
0
120
知識0からカンファレンスやってみたらこうなった！
Avatar for syossan27 syossan27
5
310
『Python → TypeScript』オンボーディング奮闘記
Avatar for takumi_tatsuno takumi_tatsuno
1
110
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Feature Flag 自動お掃除のための TypeScript プログラム変換
Avatar for azarashi azrsh
PRO
4
540

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Done Done
Avatar for chrislema chrislema
184
16k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
178
9.7k

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