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

ComposeでWebアプリを作る技術

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

 ComposeでWebアプリを作る技術

Avatar for てべすてん

てべすてん

April 18, 2025
Tweet

More Decks by てべすてん

See All by てべすてん
ててべんす独演会〜Flowの全てを語ります〜
Avatar for てべすてん tbsten
1
250
Kotlin の煩雑な データコピーを どうにかする
Avatar for てべすてん tbsten
0
100
脱 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
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
Avatar for hkws kwahiro
12
5.9k
仕様がそのままテストになる！Javaで始める振る舞い駆動開発
Avatar for uutan1108 ohmori_yusuke
8
4.2k
「10分以内に機能を消せる状態」 の実現のためにやっていること
Avatar for おぎ togishima
1
300
Dive into Triton Internals
Avatar for Liam Jongsu Kim appleparan
0
490
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
240
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
1
620
All(?) About Point Sets
Avatar for hole hole
0
140
Rails Girls Sapporo 2ndの裏側―準備の日々から見えた、私が得たもの / SAPPORO ENGINEER BASE #11
Avatar for はる lemonade_37
2
160
高単価案件で働くための心構え
Avatar for Katsuma Narisawa nullnull
0
130
Java_プロセスのメモリ監視の落とし穴_NMT_で見抜けない_glibc_キャッシュ問題_.pdf
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
190
FlutterKaigi 2025 システム裏側
Avatar for Ryotaro Onoue yumnumm
0
1.1k
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
Avatar for haru860 haru860
0
150

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
670
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
24
1.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
320
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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