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
410

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
440
FlutterKaigi Day1「Dart のこれから」
Avatar for おかやまん blendthink
1
6.3k
公開している Notion サイトから人名を抽出して、誤って個人情報を記載していないか検出できるようにしてみた
Avatar for おかやまん blendthink
0
480
Yumemi.apk #6 ～ゆめみのAndroidエンジニア 日頃の成果大発表会！～ Session 2
Avatar for おかやまん blendthink
1
650
株式会社ゆめみの Android の採用コーディング試験を公開しました
Avatar for おかやまん blendthink
0
120
Developers Boost Session 6
Avatar for おかやまん blendthink
1
920

Other Decks in Programming

See All in Programming
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
Avatar for uvb_76 uvb_76
0
160
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
Avatar for tris tris5572
2
470
Feature Flag 自動お掃除のための TypeScript プログラム変換
Avatar for azarashi azrsh
PRO
4
540
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
200
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
Avatar for Kei Oyama oyamakei
0
450
バランスを見極めよう！実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
Avatar for whatasoda whatasoda
2
700
“技術カンファレンスで何か変わる？” ──RubyKaigi後の自分とチームを振り返る
Avatar for shun ssagara00
0
200
Cache Strategies with Redisson & Exposed
Avatar for Sunghyouk Bae debop
0
120
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
100
生成AI時代のフルスタック開発
Avatar for Kenn Ejima kenn
9
2k
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
Avatar for nrs nrslib
4
470
Boast Code Party / RubyKaigi 2025 After Event
Avatar for はる lemonade_37
0
300

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
570
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
180
53k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k

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