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

Bitkeyのモバイルアプリを進化させるための歩き方 / Walking the evolut...

Bitkeyのモバイルアプリを進化させるための歩き方 / Walking the evolution of Bitkey's mobile apps

登壇者名:Kyo Arayama
登壇したイベントタイトル:TechBrew in 東京 ~モバイルアプリの技術的負債に向き合う~
登壇したイベントのURL:https://findy.connpass.com/event/317998/

More Decks by 株式会社ビットキー / Bitkey Inc.

Other Decks in Technology

Transcript

  1. © 2024 Bitkey Inc. 2 ࣗݾ঺հ ৽ࢁ ڹੜ (͋Β͞Μ) Arayama

    Kyo (Twitter@arasan01_me) 2020.04 2022.09 2023.-- ߹ಉձࣾDMM.comʹ৽ଔೖࣾ ిࢠॻ੶ΞϓϦͷ։ൃ΍Φʔϓϯιʔε׆ಈͱͯ͠όΠ φϦม׵πʔϧdmm-com/Ranasaͷ։ൃΛͨ͠ɻ גࣜձࣾϏοτΩʔʹೖࣾ workhub Appͷ։ൃ΍SwiftΠϕϯτͷاըɾӡӦΛߦ ͏ɻ ϓϥΠϕʔτͰSwift on WindowsΛ৮Γ࢝ΊΔ ݸਓ։ൃͱͯ͠TCA΍GRDB.swiftͷWindowsରԠɺ Windows؀ڥͰͷSwiftར༻ͷ௅ઓΛ࢝ΊΔɻ 2024.05 ࢓ࣄͰ͸workhub App iOSΛओʹվળ͍ͯ͠Δɻ·ͨ ݱࡏ։࠵தͷMicrosoft BuildͰൃද͞ΕͨCopilot+ PC(Windows on Arm)Λিಈతʹϙνͬͯ͠·͏ɻ
  2. © 2024 Bitkey Inc. 5 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ History - 2020೥: workhub

    App for iOSͷ஀ੜ
 ɹReact NativeΛ࠾༻ͯ͠։ൃ͞ΕΔ - 2021೥: workhub App for Androidͷ஀ੜ ɹωΠςΟϒ࣮૷Λ࠾༻ͯ͠։ൃ͞ΕΔ - 2021೥: Swift/SwiftUIͷಋೖ
 ɹReactNativeΛஔ͖׵͑ΔऔΓ૊Έ͕࢝·Δ
 ɹTCA΋ಋೖݕ౼͕ͨ͠৭ʑ͋ͬͯஅ೦͍ͯ͠Δ - 2022೥: RN -> SwiftUIͷஔ͖׵͑
 ɹ·ͩ·ͩऴΘΒͣ - 2023೥: TCAͷಋೖ
 ɹTCAͷਐԽʹΑΓಋೖ͢ΔϝϦοτ͕ߴ͍ͱ൑அ - 2024೥: ϚϧνϞδϡʔϧͷಋೖ
 ɹϏϧυ଎౓ͷ޲্ɺXcode PreviewΛ׆༻ͨ͠։ൃ͕Ͱ͖ΔΑ͏ʹ
  3. © 2024 Bitkey Inc. 6 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ ͳͥReact Native͔ΒSwiftUIϕʔεͷωΠςΟϒΞϓϦͳͷ͔ɺ౰࣌ͷҙࢥܾఆ - Android޲͚ͷ։ൃཁ͕͔݅ͳΓઌͩͬͨ

    - React NativeΛར༻͢Δ͜ͱͰiOSͷΞοϓσʔτ௥ै͕஗ΕΔ/Ͱ͖ͳ͘ͳΔݒ೦ - Ϗϧυ଎౓͕஗͗͢Δ - ར༻͢ΔϥΠϒϥϦ͸͢΂ͯReact NativeΛߟྀ͢Δ͜ͱʹΑΔਏ͞
  4. © 2024 Bitkey Inc. 7 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ ͳͥReact Native͔ΒSwiftUIϕʔεͷωΠςΟϒΞϓϦͳͷ͔ɺ౰࣌ͷҙࢥܾఆ - Android޲͚ͷ։ൃཁ͕͔݅ͳΓઌͩͬͨ

    - ΫϩεϓϥοτϑΥʔϜΛ׆༻͠ͳ͍ͨΊReact NativeΛ࢖͏ϝϦοτ͕͋·Γͳ͍ - ౰࣌͸Webٕज़ʹ໌Δ͍ਓ͕ଟ͔͕ͬͨɺ։ൃऀ͕iOSʹৄ͘͠ͳ͖ͬͯͨ - Android͸React NativeΛ࢖͏ͱܾ·͍ͬͯͳ͔ͬͨ - SwiftUIϕʔεʹͯ͠΋͍͍ - React NativeΛར༻͢Δ͜ͱͰiOSͷΞοϓσʔτ௥ै͕஗ΕΔ/Ͱ͖ͳ͘ͳΔݒ೦ - Ϗϧυ଎౓͕஗͗͢Δ - ར༻͢ΔϥΠϒϥϦ͸͢΂ͯReact NativeΛߟྀ͢Δ͜ͱʹΑΔਏ͞
  5. © 2024 Bitkey Inc. 8 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ ͳͥReact Native͔ΒSwiftUIϕʔεͷωΠςΟϒΞϓϦͳͷ͔ɺ౰࣌ͷҙࢥܾఆ - Android޲͚ͷ։ൃཁ͕͔݅ͳΓઌͩͬͨ

    - React NativeΛར༻͢Δ͜ͱͰiOS/ґଘؔ܎ͷΞοϓσʔτ௥ै͕஗ΕΔ/Ͱ͖ͳ͘ͳΔݒ೦ - ͍͟ͱ͍͏ͱ͖ʹReact Nativeʹରͯ͠௚઀ߩݙ͢Δ͕࣌ؒऔΕͳ͍ - όοΫΤϯυͷܕఆٛΛར༻Ͱ͖Δɺ͔͠͠OpenAPIͳͲͰͷίʔυੜ੒Ͱे෼ - खݩͷόʔδϣϯΞοϓσʔτʹ͢Β௥ैͰ͖ͳ͘ͳ͍ͬͯΔ - iOSΞϓϦͷΈ։ൃ͢ΔͳΒApple७ਖ਼ͷ΋ͷΛ࢖ͬͨ΄͏͕Αͦ͞͏ - Ϗϧυ଎౓͕஗͗͢Δ - ར༻͢ΔϥΠϒϥϦ͸͢΂ͯReact NativeΛߟྀ͢Δ͜ͱʹΑΔਏ͞
  6. © 2024 Bitkey Inc. 9 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ ͳͥReact Native͔ΒSwiftUIϕʔεͷωΠςΟϒΞϓϦͳͷ͔ɺ౰࣌ͷҙࢥܾఆ - Android޲͚ͷ։ൃཁ͕͔݅ͳΓઌͩͬͨ

    - React NativeΛར༻͢Δ͜ͱͰiOSͷΞοϓσʔτ௥ै͕஗ΕΔ/Ͱ͖ͳ͘ͳΔݒ೦ - Ϗϧυ଎౓͕஗͗͢Δ - ͳʹ͔͕க໋తʹ͓͔͠ͳ͜ͱʹͳ͍ͬͯͨɺϑϧϏϧυʹ͔͔̍࣌ؒۙ͘Δʂ - Ϗϧυ଎౓޲্͸গͳ͘ͱ΋ݟࠐΊͦ͏ - ར༻͢ΔϥΠϒϥϦ͸͢΂ͯReact NativeΛߟྀ͢Δ͜ͱʹΑΔਏ͞
  7. © 2024 Bitkey Inc. 10 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ ͳͥReact Native͔ΒSwiftUIϕʔεͷωΠςΟϒΞϓϦͳͷ͔ɺ౰࣌ͷҙࢥܾఆ - Android޲͚ͷ։ൃཁ͕͔݅ͳΓઌͩͬͨ

    - React NativeΛར༻͢Δ͜ͱͰiOSͷΞοϓσʔτ௥ै͕஗ΕΔ/Ͱ͖ͳ͘ͳΔݒ೦ - Ϗϧυ଎౓͕஗͗͢Δ - ར༻͢ΔϥΠϒϥϦ͸͢΂ͯReact NativeΛߟྀ͢Δ͜ͱʹΑΔਏ͞ - BluetoothػೳɺNFCػೳɺإೝࣝͳͲͷػೳ͕ཁ݅ͱͯ͠ڍ͕͍ͬͯΔ - ωΠςΟϒʹ͍ۙػೳ͕ଟ͍ɺ΋͸΍ωΠςΟϒίʔυͰॻ͍ͨ΄͏ָ͕ - ϒϦοδΛॻ͖·͘ΔΑΓSwiftUIͷίʔυΛͦͷ··ViewControllerͰຒΊࠐΜͩΒͲ͏͔ʁ
  8. © 2024 Bitkey Inc. 12 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ Ҡߦ͢Δͱ͖ʹେࣄͳ͜ͱ I/OͳͲͷ֎ͷੈքͱͷ௨৴ ϏδωεϩδοΫ ը໘ϩδοΫ

    ը໘ɾϥΠϑαΠΫϧ Լ͔Βॱ൪ʹҠߦ͢Δ ৽͍͠ը໘ͳͲ্૚Λ࡞Δͱ͖ʹ ద੾ʹԼ૚͕Ҡߦ͞Ε͍ͯΕ͹ Swift͔Β࢝ΊΔ͜ͱ͕Ͱ͖Δ 🙅 ը໘: SwiftUI, ௨৴: axios 🙆 ը໘: RN, ௨৴: URLSession ϝϦοτ ͍ͼͭͳߏ଄͕૿͑ͳ͍
  9. © 2024 Bitkey Inc. 13 ৽نػೳɺطଘػೳվमɺอकӡ༻Λܧଓ͢ΔͨΊͷऔΓ૊Έ Ҡߦ͢Δͱ͖ʹେࣄͳ͜ͱ RootView RootNavigator Screen

    View Component 3/ 4XJGU6*ަޓʹը໘ཁૉ͕ݱΕͳ͍Α͏ʹ͢Δ ҙਤͤͣʹը໘ؒͰड͚౉͢σʔλ͕ܽམ͢Δةݥ͕͋Δ
  10. © 2024 Bitkey Inc. 16 ϞόΠϧΞϓϦͷٕज़બఆ͸Կ͕ਖ਼ղͳͷ͔ ࣗ෼ͨͪʹ͸Կ͕ඞཁͳͷ͔Λߟ͑ΔɺͦΕ͕Ͱ͖Δબ୒Ͱ͋Ε͹໰୊ͳ͍ - SwiftUI -

    React Native - Flutter - etc… Կ͕ಘҙʁԿ͕Ͱ͖Δʁ - Hot Reload - ଞͷٕज़ͱͷ૬ޓӡ༻ੑ (ObjC, C++, JS, Swift, CoreML, Core BluetoothͳͲͳͲ) - ྫ: npmͰͲ͏ͯ͠΋࢖͍͍ͨϥΠϒϥϦ͕͋Δ -> React Native͕࠷ద͔΋͠Εͳ͍ - ίʔυͷ࢖͍·Θ͠ - ܧଓతͳϝϯςφϯε͕͞ΕΔظ଴ײ - ίϛϡχςΟͷ੝Γ্͕Γ
  11. © 2024 Bitkey Inc. 17 ϞόΠϧΞϓϦͷٕज़બఆ͸Կ͕ਖ਼ղͳͷ͔ Bitkeyͷٕज़બఆ workhub (toB) -

    SwiftUI/SwiftʹΑΔωΠςΟϒߏ੒ - Core BluetoothͳͲͷٕज़͸SwiftͰॻ͔ΕͨSDKΛSPMͰ௚઀ར༻ - iOSʹର͢Δద੾ͳ௥ैΛॏࢹ homehub (toC) - FlutterʹΑΔΫϩεϓϥοτϑΥʔϜ - Core BluetoothͳͲͷٕज़͸MethodChannelͳͲΛར༻ͯ͠ΫϩεϓϥοτϑΥʔϜରԠࡁΈ - iOS/Androidؒͷ࢓༷Λۃݶ·Ͱ౷Ұ͢Δ͜ͱΛॏࢹ ͲͪΒ΋ྑ͍ɺͲ͜ʹॏࢹ͢ΔൺॏΛߴΊ͍ͯΔ͔ͷҧ͍͕ݱΕ͍ͯΔ