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

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

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

おかやまん

September 09, 2021
Tweet

More Decks by おかやまん

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. 4. 必要なフォルダを追加

    src/jsMain/kotlin

    src/jsMain/resources

    View Slide

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

    View Slide

  13. 6. Main.kt を追加

    View Slide

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

    View Slide

  15. View Slide

  16. View Slide

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

    View Slide

  18. 実際のコードへ

    View Slide

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

    View Slide