Compose Multiplatform で Bluesky のクライアント作ってみた / Bluesky client with Compose Multiplatform

Transcript

1. $PNQPTF
   .VMUJQMBUGPSN
   Ͱ
   #MVFTLZ
   ͷΫϥΠΞϯτ࡞ͬͯΈͨ yanzm
2. ZBO[N
   ʢ΍Μ͟Ήʣ w !ZBO[NCTLZTPDJBM
   w ݹʢ͍ʹ͑͠ʣͷ"OESPJEFS
   w ݄೔ʹ
   ,PKJSB
   ͞Μʹট଴ίʔυ΋Βͬͯ
   CMVFTLZ
   ͸͡Ί·ͨ͠ɻ৽ถͰ ͢ɻ
3. ,PUMJO w ʢ΋ͱ΋ͱ͸ʣ+7.
   ݴޠ
   w CFUUFS
   +BWB
   తͳ
   w ೥͔Β
   "OESPJE
   ͷެࣜαϙʔτݴޠͷҰͭ
4. ,PUMJO
   .VMUJQMBUGPSN
   ,.1 w ,PUMJO
   ͷίʔυΛ
   XFC
   +T
   ͱ͔
   OBUJWF
   EFTLUPQ
   ͱ͔ͷόΠφϦʹϏϧυ
   w ಉ͡
   ,PUMJO
   ͷίʔυͰෳ਺ͷ
   1MBUGPSN
   ʹରԠ
   w J04΋ରԠ
   w ͨͩ͠ɺ6*͸ͦΕͧΕͷ
   1MBUGPSN
   /BUJWF
   ͳ෦෼Ͱ࣮૷
5. +FUQBDL
   $PNQPTF w "OESPJE
   ͷωΠςΟϒ
   6*
   Λߏங͢ΔͨΊͷ࠷৽ͷπʔϧΩοτ
   w એݴత
   6* Row { Icon( imageVector = Icons.Default.Star, contentDescription = null ) Column { Text( text = "username" ) Text( text = "description" ) } Button( onClick = onClickFollow ) { Text("follow") } }
6. $PNQPTF
   GPS
   %FTLUPQ w ೥݄
   w +FUQBDL
   $PNQPTF
   Ͱ
   ,PUMJO
   .VMUJQMBUGPSN
   ͷ
   EFTLUPQ
   ͷ
   6*
   ͕࡞ΕΔ
7. $PNQPTF
   .VUMJQMBUGPSN
   6*
   'SBNFXPSL w IUUQTXXXKFUCSBJOTDPNMQDPNQPTFNVMUJQMBUGPSN
   w ೥݄೔ͷ
   ,PUMJO
   $POG
   Ͱൃද
   w EFTLUPQ
   ͚ͩ͡Όͳ͘
   J04
   "MQIB
   ,PUMJO/BUJWF
   ΍
   8FC
   &YQFSJNFOUBM
   ,PUMJO8BTN
   ΋αϙʔτ
8. #MVFTLZ
   ͷΫϥΠΞϯτΞϓϦΛ
   $PNQPTF
   .VMUJQMBUGPSN
   Ͱ࡞Δ https://github.com/yanzm/Rayleigh
9. 4UFQ
   
   ϕʔεͷϓϩδΣΫτΛ࡞Δ w +FU#SBJOT
   ͷ
   HJUIVC
   ʹ
   DPNQPTF
   NVMUJQMBUGPSN
   ͷςϯϓϨʔτ͕͋Δ
   w IUUQTHJUIVCDPN+FU#SBJOTDPNQPTFNVMUJQMBUGPSNJPTBOESPJE UFNQMBUF
10. 4UFQ
    
    ௨৴Ͱ͖ΔΑ͏ʹ͢Δ w 4FJVO
    ͞Μ͸
    3FUSP fi U
    Λ࢖͍͚ͬͯͨͲ
    ,.1
    Ͱ͸࢖͑ͳ͍
    w ,UPS
    w IUUQTLUPSJP
    w ,PUMJO$POG`
    ͷηογϣϯͰग़͖ͯͨ
    $PNQPTF
    .VMUJQMBUGPSN
    Ͱνϟο τ͢ΔΞϓϦ͕ࢀߟʹͳͬͨ
    w IUUQTHJUIVCDPNTWUL,$$IBU"QQ
    w ,UPS
    
    ,PUMJOY
    4FSJBMJ[BUJPO
    ͱ͔
11. 4UFQ
    
    ϩάΠϯը໘ͷ6*Λ࡞Δ
12. 4UFQ
    
    ϩάΠϯը໘ͷ6*Λ࡞Δ w SE
    QBSUZ
    DMJFOU
    ͸
    "QQ
    1BTTXPSE
    ͰϩάΠϯ͢ΔΑ͏ʹͳ͔ͬͨΒɺΞΧ ΢ϯτͷ࡞੒ϩάΠϯ΍
    "QQ
    1BTTXPSE
    ͷ࡞੒͸ϒϥ΢βΛ։͍ͯ
    IUUQT TUBHJOHCTLZBQQ
    Λද͍ࣔͨ͠
    w "OESPJE
    J04
    ͦΕͧΕͷ
    QMBUGPSN
    ͷॲཧ͕ඞཁ
13. @Composable fun App( onOpenBrowser: (String) -> Unit = {} ) { RayleighTheme { … LoginScreen( viewModel = viewModel, onOpenBrowser = onOpenBrowser, ) } } shared/commonMain
14. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainView( onOpenBrowser = { startActivity( Intent(Intent.ACTION_VIEW, Uri.parse(it)) ) } ) } } @Composable fun MainView( onOpenBrowser: (String) -> Unit ) { App( onOpenBrowser = onOpenBrowser ) } androidApp/ shared/androidMain Android
15. struct ComposeView: UIViewControllerRepresentable { func makeUIViewController(context: Context) -> UIViewController { Main_iosKt.MainViewController( onOpenBrowser: { let url = URL(string:$0)! UIApplication.shared.open(url, options: [:], completionHandler: nil) } ) } func updateUIViewController(_ uiViewController: UIViewController, context: Context) {} } fun MainViewController( onOpenBrowser: (String) -> Unit ) = ComposeUIViewController { App( onOpenBrowser = onOpenBrowser ) } iosApp/iosApp/ContentView.swift shared/iosMain iOS
16. 4UFQ
    ϩάΠϯ͢Δ w "1*
    Λୟ͍ͯฦ͖ͬͯͨ
    UPLFO
    Λอଘ͠ͳ͍ͱ͍͚ͳ͍
    w NVMUJQMBUGPSN
    TFUUJOHT
    Λ࢖͏͜ͱʹ͢Δ
    w IUUQTHJUIVCDPNSVTTIXPMGNVMUJQMBUGPSNTFUUJOHT
    w ϓϥοτϑΥʔϜ͝ͱʹ
    4FUUJOHT
    ͷੜ੒Πϯελϯε͕ҟͳΔ
    w %*
    ͕ͳ͍ͱͭΒ͍
17. 4UFQ
    
    %FQFOEFODZ
    *OKFDUJPO w "OESPJE
    Ͱ͸
    EBHHFS
    IJMU
    ͕σϑΝΫτ͕ͩ
    ,.1
    Ͱ͸࢖͑ͳ͍
    w ,PJO
    w LPJODPSF
    ͸
    ,.1
    ʹରԠ͍ͯ͠Δ͕
    w LPJODPNQPTF
    ͸
    $PNQPTF
    .VMUJQMBUGPSN
    ʹ·ͩରԠ͍ͯ͠ͳ͍
    w l$PVME
    OPU
    fi OE
    JPJOTFSULPJOLPJODPNQPTFJPTBSNz
    ͱౖΒΕ Δ
    w IUUQTJOTFSULPJOJPEPDTSFGFSFODFLPJODPNQPTFNVMUJQMBUGPSN
    ͸ 8*1
18. class AppComponent : KoinComponent { val authRepository: AuthRepository by inject() } shared/commonMain @Composable fun App( appComponent: AppComponent, onOpenBrowser: (String) -> Unit = {} ) { RayleighTheme { val appViewModel = remember { AppViewModel(appComponent.authRepository) } … } }
19. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainView( appComponent = AppComponent(), onOpenBrowser = { startActivity( Intent(Intent.ACTION_VIEW, Uri.parse(it)) ) @Composable fun MainView( appComponent: AppComponent, onOpenBrowser: (String) -> Unit ) { App( appComponent = appComponent, onOpenBrowser = onOpenBrowser ) } androidApp/ shared/androidMain Android
20. struct ComposeView: UIViewControllerRepresentable { let appComponent = AppComponent() func makeUIViewController(context: Context) -> UIViewController { Main_iosKt.MainViewController( appComponent: appComponent, onOpenBrowser: { let url = URL(string:$0)! UIApplication.shared.open(url, options: [:], completionHandler: nil) } ) } fun MainViewController( appComponent: AppComponent, onOpenBrowser: (String) -> Unit ) = ComposeUIViewController { App( appComponent = appComponent, onOpenBrowser = onOpenBrowser ) } iosApp/iosApp/ContentView.swift shared/iosMain iOS
21. 4UFQ
    λΠϜϥΠϯΛऔಘ͢Δ w ϩάΠϯ࣌ʹऔಘͨ͠
    5PLFO
    Λ
    CFBSFS
    BVUIFOUJDBUJPO
    ʹηοτ͢Δ
    w ,UPS
    ͷ
    "VUI
    QMVHJO
    ࢖͏͚ͩ
    w IUUQTLUPSJPEPDTCFBSFSDMJFOUIUNM
    w UZQF
    ͰΦϒδΣΫτ͕มΘΔ
    3FDPSE
    ͱ͔͸
    $MBTT
    EJTDSJNJOBUPS
    GPS
    QPMZNPSQIJTN
    ࢖͏
    w IUUQTHJUIVCDPN,PUMJOLPUMJOYTFSJBMJ[BUJPOCMPCNBTUFSEPDT KTPONEDMBTTEJTDSJNJOBUPSGPSQPMZNPSQIJTN
23. ·ͱΊ
    
    ࠓޙ w /BWJHBUJPO
    Ͳ͏ͨ͠Β͍͍ͷͩʜ
    w %FDPNQPTF
    
    IUUQTHJUIVCDPNBSLJWBOPW%FDPNQPTF
    w %*
    ͕ͭΒ͍ʜ
    w LPJODPNQPTF
    ͕ରԠͨ͠ΒָʹͳΔ͔΋ʁ
    w 5FYU'JFME
    ͷڍಈ͕
    J04
    4JNVMBUPS
    Ͱ͓͔͍͠ʜ
    w $PNQPTF
    Ͱී௨ʹ
    J04
    ͷ
    6*
    ͕Ͱ͖͍ͯ͢͝ͷͰɺ͍Ζ͍Ζ΍Γ͍ͨ