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

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

Avatar for おかやまん おかやまん
September 09, 2021
Programming
0
450

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

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

Avatar for おかやまん

おかやまん

September 09, 2021
Tweet

More Decks by おかやまん

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

Other Decks in Programming

See All in Programming
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
290
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
190
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
39
26k
gunshi
Avatar for kazupon kazupon
1
120
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
310
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
140
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
4.4k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
380
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
300
re:Invent 2025 のイケてるサービスを紹介する
Avatar for maroon1st maroon1st
0
150
ゲームの物理 剛体編
Avatar for Fadis fadis
0
380
複雑なUI設計への銀の弾丸 「オブジェクト指向UIデザイン」
Avatar for teamLab teamlab
PRO
2
110

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
120
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
71
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
200
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
65
35k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
120
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
520
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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. ご静聴ありがとうございました