$30 off During Our Annual Pro Sale. View Details »

ComposeでWebアプリを作る技術

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

 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
110
脱 Material3 ?! lumo ui の紹介
Avatar for てべすてん tbsten
0
140
衝撃を受けた OSS Androidアプリ
Avatar for てべすてん tbsten
0
200
CameraXとCompose
Avatar for てべすてん tbsten
0
150

Other Decks in Programming

See All in Programming
生成AI時代を勝ち抜くエンジニア組織マネジメント
Avatar for coconala_engineer coconala_engineer
0
2.5k
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
410
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
Avatar for uki00a uki00a
0
160
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
130
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
170
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
610
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
130
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
340
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
210
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
280
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
120

Featured

See All Featured
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.1k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
0
170
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
New Earth Scene 8
Avatar for Sydney Stone popppiees
0
1.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
400
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
60
38k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
160
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
1.9k

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