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

Yumemi.apk #5 ～Kotlin夏祭り～ Session 2

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for おかやまん おかやまん
September 09, 2021
Programming
460
0

Yumemi.apk #5 ～Kotlin夏祭り～ Session 2

https://yumemi.connpass.com/event/219861/

Avatar for おかやまん

おかやまん

September 09, 2021

More Decks by おかやまん

See All by おかやまん
具体と抽象の行き来を意識する
Avatar for おかやまん blendthink
0
510
FlutterKaigi Day1「Dart のこれから」
Avatar for おかやまん blendthink
1
7k
公開している Notion サイトから人名を抽出して、誤って個人情報を記載していないか検出できるようにしてみた
Avatar for おかやまん blendthink
0
550
Yumemi.apk #6 ～ゆめみのAndroidエンジニア 日頃の成果大発表会！～ Session 2
Avatar for おかやまん blendthink
1
730
株式会社ゆめみの Android の採用コーディング試験を公開しました
Avatar for おかやまん blendthink
0
180
Developers Boost Session 6
Avatar for おかやまん blendthink
1
990

Other Decks in Programming

See All in Programming
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
2.6k
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
22
12k
Explore CoroutineScope
Avatar for tomoEng11 tomoeng11
0
180
なぜあなたのコードには「コシ」がないのか？〜AI時代に問う、最後まで美味しい設計と戦略〜 #phpconkagawa / phpconkagawa2026
Avatar for shogogg shogogg
0
150
AgentCore Optimizationを始めよう！
Avatar for matsukada licux
3
230
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
150
ふにゃっとしない名前の付け方 〜哲学で茹で上げる、コシのあるソフトウェア設計〜
Avatar for akshimo shimomura
0
110
実用！Hono RPC2026
Avatar for yodaka yodaka
2
300
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
110
AlarmKitで明後日起きれるアラームアプリを作る
Avatar for Trickart trickart
0
130
AIベース静的検査器の偽陽性率を抑える工夫3選
Avatar for Kuniwak orgachem
PRO
4
450
Spec-Driven Development with AI Agents (Workshop, May 2026)
Avatar for Anton Arhipov antonarhipov
3
330

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
110
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
200
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
800
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
240
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Done Done
Avatar for chrislema chrislema
186
16k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
170
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k

Transcript

  1. Jetpack Compose for Web で ちょっとしたサイトつくってみた 2021.09.10 Yumemi.apk #5 ～Kotlin夏祭り～

  2. おかやまん • Android App Developer • 株式会社ゆめみ（2019年11月入社） • 猫ちゃんを飼いはじめました •

    副業やってます blendthink
  3. None

  4. Jetpack Compose for Web ってなぁに？ • Jetpack Compose を基盤にしているリアクティブ Web

    UI • Web アプリの UI 開発を簡素化・高速化 • 将来的に、Web・デスクトップ・Android アプリの間で UI コードの共通化を狙って いる • タイプセーフに HTML や CSS が書ける • まだアルファ版

  5. https://compose-web.ui.pages.jetbrains.team

  6. チュートリアルやってみる 先ほどの Web サイトの下部にチュートリアルのリン クがあります。 ツールのバージョン要件とかあるのでお気をつけく ださい。 • JDK 11

    以上 • IntelliJ IDEA Community Edition or Ultimate Edition 2020.2 以上

  7. 1. プロジェクト作成

  8. 2. settings.gradle.kts を更新

  9. 3. build.gradle.kts を更新

  10. 3. build.gradle.kts を更新

  11. 4. 必要なフォルダを追加 • src/jsMain/kotlin • src/jsMain/resources

  12. 5. resources に index.html を追加

  13. 6. Main.kt を追加

  14. 7. プロジェクトを実行！ ./gradlew jsBrowserRun

  15. None
  16. None

  17. 実際に、ポートフォリオ作ってみました

  18. 実際のコードへ

  19. ご静聴ありがとうございました