Save 37% off PRO during our Black Friday Sale! »

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

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

7e5089310d68eca7e2ad404a1c8f2292?s=128

おかやまん

September 09, 2021
Tweet

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