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
420

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

Other Decks in Programming

See All in Programming
slogパッケージの深掘り
Avatar for やーびー integral0515
0
160
Prompt Engineeringの再定義「Context Engineering」とは
Avatar for ツルオカ htsuruo
0
110
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
Avatar for Takuto Wada twada
PRO
35
10k
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
3
1.8k
Reactの歴史を振り返る
Avatar for つちのこ tutinoko
1
150
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
1
440
Workers を定期実行する方法は一つじゃない
Avatar for rokuosan rokuosan
0
130
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
4
710
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
Avatar for のんちゃん non0113
2
240
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
0
210
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
Avatar for Masahiko Sakakibara rdlabo
0
380
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
Avatar for Akira Suenami a_suenami
7
1k

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
43
7.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.6k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k

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