Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Jetpack Compose for Web ってなぁに？ ● Jetpack Compose を基盤にしているリアクティブ Web UI ● Web アプリの UI 開発を簡素化・高速化 ● 将来的に、Web・デスクトップ・Android アプリの間で UI コードの共通化を狙って いる ● タイプセーフに HTML や CSS が書ける ● まだアルファ版

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

チュートリアルやってみる 先ほどの Web サイトの下部にチュートリアルのリン クがあります。 ツールのバージョン要件とかあるのでお気をつけく ださい。 ● JDK 11 以上 ● IntelliJ IDEA Community Edition or Ultimate Edition 2020.2 以上

Slide 7

Slide 7 text

1. プロジェクト作成

Slide 8

Slide 8 text

2. settings.gradle.kts を更新

Slide 9

Slide 9 text

3. build.gradle.kts を更新

Slide 10

Slide 10 text

3. build.gradle.kts を更新

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

5. resources に index.html を追加

Slide 13

Slide 13 text

6. Main.kt を追加

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

実際のコードへ

Slide 19

Slide 19 text

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