Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ComposeでWebアプリを作る技術
Search
てべすてん
April 18, 2025
Programming
0
160
ComposeでWebアプリを作る技術
てべすてん
April 18, 2025
Tweet
Share
More Decks by てべすてん
See All by てべすてん
脱 Material3 ?! lumo ui の紹介
tbsten
0
110
衝撃を受けた OSS Androidアプリ
tbsten
0
190
CameraXとCompose
tbsten
0
130
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
GoのGenericsによるslice操作との付き合い方
syumai
3
690
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
430
Gleamという選択肢
comamoca
6
760
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
570
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
Select API from Kotlin Coroutine
jmatsu
1
190
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
220
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Facilitating Awesome Meetings
lara
54
6.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Site-Speed That Sticks
csswizardry
10
660
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Code Reviewing Like a Champion
maltzj
524
40k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Designing for humans not robots
tammielis
253
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Transcript
Compose Ͱ Web ΞϓϦΛ࡞Δٕज़ ͯͯ͢Μ 2025/04/18 Kobweb ͷհ
ࣗݾհ • Android ΤϯδχΞ • גࣜձࣾΏΊΈ • Web ϑϩϯτΤϯυ 55͘Β͍
ͯͯ͢Μ
ࣗݾհ • Compose, Kotlin ͕େ͖ • झຯ • ήςϞϊComposeϥΠϒϥϦͷհ •
ि3ͰҰਓΧϥΦέ ͯͯ͢Μ
Compose Ͱ Web αΠτΛ࡞Δٕज़ • Compose Multiplatform • Kobweb 👈
ࠓͭ͢
Compose Multiplatform (CMP) Compose Λ͍ΖΜͳ Platform Ͱಈ͔ͤΔΑ͏ʹ͢Δͭ
Compose Multiplatform for Web
Compose Multiplatform for Web • Compose UI ͕ͦͷ··ಈ͘ͷ (͜͜ͰCMP UI)
ͱ DOM Λग़ྗ͢Δ Compose HTML ͕͋Δ
Compose Multiplatform for Web ͷ೦ϙΠϯτ
Compose Multiplatform ͷ೦ϙΠϯτ • ύϑΥʔϚϯε • Kotlin JS ύϑΥʔϚϯε͕೦ •
͔ͱ͍ͬͯ Wasm iOS Ͱಈ͔ͳ͍
Compose Multiplatform ͷ೦ϙΠϯτ • <canvas> ʹϕλॻ͖ • ΞΫηγϏϦςΟ, SEO ໘Ͱෆར
ͨͩ ͜Εํͳ͍
ʢԶ͕ߟ͑ΔʣCMP ͷ͋Δ͖ • CMP ͍ΖΜͳ Platform Ͱ Compose Λͦͷ··ಈ͔͢
ͨΊͷٕज़ • ͍ΖΜͳछྨͷΞϓϦΛ࡞ΔͨΊͷٕज़Ͱͳ͍ • CMP Λͬͯ ֤ Platform ʹدΓఴͬͨ "ྑ͍ΞϓϦ" ࠓ࡞Εͳ͍͠ɺকདྷతʹແཧ • ͦͦ Platform ͝ͱʹٻΊΒΕΔ UI ͕ҧ͏
Kobweb
Kobweb
Kobweb • Compose HTML ϕʔεͷ Web ΞϓϦΛ࡞ΔϑϨʔϜϫʔΫ • جຊ HTML
Λॻ͘ͷͷɺҰ෦ Compose ෩ʹॻ͘͜ͱͰ͖Δ
Kobweb ͱ CMP (͍ΘΏΔ) CMP Compose HTML
Kobweb ͱ CMP Compose HTML
Kobweb ͱ CMP (͍ΘΏΔ) CMP Kobweb
Kobweb ͱ CMP (͍ΘΏΔ) CMP Kobweb
Kobweb ͱ CMP Kobweb
Kobweb ͱ CMP
·ͱΊ • Compose Multiplatform for Web Ͱ Web αΠτࣙΊͱ͚ •
CMP ͕ద͢ΔΞϓϦ͋Δ͕ɺWeb αΠτͱͯ͠ͷΫΦϦςΟ མͪΔ • Compose × Web ΞϓϦ Kobweb ͕Ξπ͍
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ