Slide 1

Slide 1 text

ランチタイムLT会 #1 ©2023 RAKUS Co., Ltd. KMMで始めるマルチプラットフォーム開発 @akkiee76 ランチタイムLT会 #1

Slide 2

Slide 2 text

ランチタイムLT会 #1 Akihiko Sato / 株式会社ラクス Lead Engineer / @akkiee76 SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android) 上流工程、コードレビュー、チームの課題改善など コールドブリューコーヒー☕ / パン作り🍞 / あんバターフランス🥐 自己紹介

Slide 3

Slide 3 text

ランチタイムLT会 #1 会社紹介 株式会社ラクス 「ITサービスで企業の成長を継続的に支援します」 をミッションに、お客様の課題解決やビジネスの成 長をを継続的に支援するクラウドサービスを提供し ています。

Slide 4

Slide 4 text

ランチタイムLT会 #1 今日伝えたいこと Kotlin Multiplatform for Mobile (KMM)  を活用したクロスプラットフォーム開発の導入

Slide 5

Slide 5 text

ランチタイムLT会 #1 クロスプラットフォーム開発とは? 1つのコードベースを使用して複数のモバイルプラットフォーム向けに アプリを開発する手法。開発者は、異なるプラットフォームごとに独立したア プリを作成する必要がなくなり、開発時間とリソースを節約することも。 ・ React Native ・ Flutter ・ Unity

Slide 6

Slide 6 text

ランチタイムLT会 #1 クロスプラットフォーム開発とは? メリット ・ 開発 / メンテコストの削減 👑 デメリット ・ ネイティブアプリ固有の機能が実装しにくい     ・ プラグインが必要だったり・・・    ・ UIがネイティブに劣る

Slide 7

Slide 7 text

ランチタイムLT会 #1 クロスプラットフォーム開発の悩み 1. 開発速度・コスト重視でクロスプラットフォームを選定 2. 片手落ち感があっても、ひとまずリリース 3. ネイティブの機能要求が増えて来る 4. プラグインだと機能拡張に限界を感じる(EOLを迎えることも) 5. やっぱりネイティブにしよう

Slide 8

Slide 8 text

ランチタイムLT会 #1 Kotlin Multiplatform for Mobile (KMM) JetBrainsが開発したKotlinベースのクロスプラットフォーム 開発フレームワーク。1つの共通のKotlinコードベースを使用して、 iOSとAndroidの両方のプラットフォーム向けにネイティブアプリを 開発することができる点が特徴。

Slide 9

Slide 9 text

ランチタイムLT会 #1 Kotlin Multiplatform for Mobile (KMM) フレームワークイメージ

Slide 10

Slide 10 text

ランチタイムLT会 #1 Kotlin Multiplatform for Mobile (KMM) アーキテクチャイメージ Compose Multiplatform

Slide 11

Slide 11 text

ランチタイムLT会 #1 ここからは導入手順を紹介します

Slide 12

Slide 12 text

ランチタイムLT会 #1 KMM開発に必要な環境 ・ macOS ・ Android Studio ・ Xcode ・ JDK ・ Kotlin Multiplatform Mobile plugin ・ Kotlin plugin あとは brew install kdoctor を実行するだけ brew install kdoctor

Slide 13

Slide 13 text

ランチタイムLT会 #1 Android Studio からプロジェクト作成

Slide 14

Slide 14 text

ランチタイムLT会 #1 プロジェクト構成

Slide 15

Slide 15 text

ランチタイムLT会 #1 プロジェクトビルド

Slide 16

Slide 16 text

ランチタイムLT会 #1 KMMによって出力されたコード(Android) class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyApplicationTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { GreetingView(Greeting().greet()) } } } } } @Composable fun GreetingView(text: String) { Text(text = text) } MainActivity.kt

Slide 17

Slide 17 text

ランチタイムLT会 #1 KMMによって出力されたコード(iOS) ContentView.swift import SwiftUI import shared struct ContentView: View { let greet = Greeting().greet() var body: some View { Text(greet) } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

Slide 18

Slide 18 text

ランチタイムLT会 #1 KMMによって出力されたコード(iOS) Shared.h __attribute__((objc_subclassing_restricted)) __attribute__((swift_name("Greeting"))) @interface SharedGreeting : SharedBase - (instancetype)init __attribute__((swift_name("init()"))) __attribute__((objc_designated_initializer)); + (instancetype)new __attribute__((availability(swift, unavailable, message="use object initializers instead"))); - (NSString *)greet __attribute__((swift_name("greet()"))); @end

Slide 19

Slide 19 text

ランチタイムLT会 #1 KMMによって出力されたコード(shared) /commonMain/kotlin class Greeting { private val platform: Platform = getPlatform() fun greet(): String { return "Hello, ${platform.name}!" } } interface Platform { val name: String } expect fun getPlatform(): Platform class IOSPlatform: Platform { override val name: String = UIDevice.currentDevice.systemName() + " " + UIDevice.currentDevice.systemVersion } actual fun getPlatform(): Platform = IOSPlatform() class AndroidPlatform : Platform { override val name: String = "Android ${android.os.Build.VERSION.SDK_INT}" } actual fun getPlatform(): Platform = AndroidPlatform() /iosMain/kotlin /kotlin

Slide 20

Slide 20 text

ランチタイムLT会 #1 個人的な初感 ・ Jetpack Compose、Swift UI といったモダンフレームワークが採用 ・ Kotlinで実装する共通ロジックは、柔軟に設計ができる ・ Android、iOS 両方のアーキテクチャの知見が必要 ・ これまでのマルチプラットフォーム開発より難易度高い印象 ・ 使いこなせたら生産性が爆上がりしそう

Slide 21

Slide 21 text

ランチタイムLT会 #1 まとめ KMMは今後も期待が高まるフレームワークです。 使いこなす難易度は高そうですが、 新規開発の機会があれば導入を検討しようと思います!

Slide 22

Slide 22 text

ランチタイムLT会 #1 ご静聴ありがとうございました