クロスプラットフォームモバイルアプリ開発ツール総ざらい2019 〜Titanium Mobile から Kotlin/Native まで〜 #droidkaigi

Transcript

1. 1.

   ΫϩεϓϥοτϑΥʔϜ
 ϞόΠϧΞϓϦ։ൃπʔϧ
 ૯͟Β͍2019 2019.2.7 DroidKaigi2019 @amay077 ʙTitanium Mobile͔ΒKotlin/Native·Ͱʙ

2. 2.

   About me • Ԟࢁ ༟ਈ - @amay077ʢ͋Ί͍ʣ • Android, iOS,

   Xamarin, TypeScript AWS, Azure… • Ѫ஌ݝࡏॅͷϑϧϦϞʔτϫʔΧʔ • ஍ཧ৘ใγεςϜɺҐஔ৘ใϓϩάϥϛϯά • DroidKaigi2017ొஃˠٕज़ॻయ2→঎ۀຊԽ(ڞஶ)
   
3. 3.

   Work for
    • B2B޲͚PaaSɺ૔ݿ؅ཧɾӡૹۀ޲͚SaaS • AWS, Elasticsearch, Cassandra,

   Lambda, etc • શһ͕ϑϧϦϞʔτϫʔΧʔ ͓࢓ࣄ಺༰΍ϦϞʔτͰͷಇ͖ํͳͲڵຯ͋Δํɺؾܰʹฉ͍͍ͯͩ͘͞
4. 4.

   ࠓ೔͓͸ͳ͢͠Δ͜ͱ Android ͱ iOS ޲͚ͷʮωΠςΟϒΞϓϦʯ͕
 ։ൃͰ͖Δπʔϧʹ͍ͭͯ ΨϫωΠςΟϒ΍WebΞϓϦͱͷൺֱ ࠓ೔͓͸ͳ͠͠ͳ͍ࣄ ϕετϓϥΫςΟε ήʔϜܥ

   ੩తϥΠϒϥϦ(.a) Β΁Μ
   
5. 5.

   ༻ޠ୹ॖ͠·͢ ΫϩεϓϥοτϑΥʔϜˠ X-Plat ϓϥοτϑΥʔϜ → PF R/N → React Native

   K/N → Kotlin Native Multi Platform Project → MPP
   
6. 6.

   Agenda 1. ͳͥX-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ 2. X-Plat։ൃπʔϧྲྀߦͷྺ࢙ 3. X-Plat։ൃπʔϧͷ෼ྨ 4. Kotlin/NativeͷՄೳੑ 5.

   VS WebΞϓϦ
   
7. 7.

   ͳͥ
 X-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ

8. 8.

   A:ʮແݶͷϚχʔ͕ͳ͍͔ΒͰ͢ʯ

9. 9.

   X-Plat։ൃπʔϧ͸ 
 ʮඞཁѱʯ Ͱ͢

10. 10.

    ͳͥX-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ ʢۀ຿γεςϜ։ൃऀͷཱ৔͔Βʣ 1. ࣾһ20ਓதɺϞόΠϧ୲౰͕1ʙ2ਓ͔͠ډͳ͍ 2. Ϧʔυސ٬ͷཁٻʹԠͯ͡ɺਝ଎ʹϓϩτλΠϓ Λ࡞Δඞཁ͕͋Δ(Android? iOS? ͍΍྆ํ) 3.

    Android൛Λೲ඼ͨ͠ޙͰɺiOS൛ͷ։ൃґཔ͕ དྷΔˠͦͷޙͷอकΛ̍ਓͰ΍Δ͜ͱʹ
    
11. 11.

    ͳͥX-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ ʢݸਓϓϩάϥϚͷཱ৔͔Βʣ 1. झຯͰAndroidΞϓϦΛ3ϲ݄͘Β͍͔͚ͯ࡞ͬͨ 2. ετΞʹϦϦʔεͨ͠ΒׂͱߴධՁͩͬͨ 3. iOS൛΋ཉ͍͠ͱݴΘΕͨ 4. ͍͟

    iOS൛ ։ൃʹணख͕ͨ͠ɺ·ͨ3ϲ݄͔͚ͯ ಉ͜͡ͱΛ΍Δͷ͔ʔʢઓҙ૕ࣦ
    
12. 12.

    X-Plat։ൃπʔϧ͚ͩͲX-Plat͡Όͳ͍ ޮ཰Α͘։ൃͰ͖Δϛυϧ΢ΣΞͱͯ͠ͷX-Plat։ൃπʔϧ AndroidϚϯ͚ͩͲReactNativeͰiOS൛Ͱ͖·ͨ͠ iOSΨʔϧ͚ͩͲFlutterͰAndroid൛Ͱ͖·ͨ͠ AndroidϚϯ͚ͩͲXamarin.FormsͰAndroid൛͚ͩ࡞Γ ·ͨ͠ →⭕ʮ͓·͡ͳ͍ʯ΍ʮ͓࡞๏ʯ͕ڞ௨APIʹ࣮૷ࡁΈ
    

13. 13.

    X-Plat։ൃπʔϧ ྲྀߦͷྺ࢙ ⏰45

14. 14.

    Titanium Mobile by Appcelerator • ྲྀߦ೥: 2011೥ʙ ※Զ؍ଌ஋ʹΑΔ • JavaScript

    Ͱ iOS ͱ Android ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • ݩτϨλͷ @masuidrive ͞Μ͕ΤϰΝϯδΣϦετͯͨ͠ • Zaim ͷॳظόʔδϣϯ͸ίϨ੡ͩͬͨ • ࢲධ:ʮiOSͰ͔͠ಈ͔ͳ͍APIଟ͗͢ϫϩλʯ
    
15. 15.

    AIR for Mobile by Adobe • ྲྀߦ(ͯ͠ͳ͍Ͷ)೥: 2012೥ʙ • ActionScript

    ͰҎԼಉจ • Adobe FlashܥͳͷͰʮUIಠࣗඳըํࣜʯΛ࠾༻ • Α͘΋ѱ͘΋ʮFlashͬΆ͍ʯΞϓϦʹͳͬͨ • ࢲධ:ʮ΋ͬ͞Γͯ͠΍͕Δ…த՚ϑΥϯτ…ʯ
    
16. 16.

    RubyMotion by Scratchwork • ྲྀߦ೥: 2013೥ʙ • Ruby Ͱ iOS

    ͱ Android(ޙൃ) ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • iOS·ͨ͸AndroidͷAPI͕Ruby͔Βݺͼग़ͤΔͱ͍͏
 PFͷAPIϥούΛఏڙ • ݩ͸ͯͳCTOͷਓ͕ rebuild.fmͰ෍ڭ? • ࢲධ:ʮWebܥRubyistʹ΋ͬͱ࢖ΘΕΔ͔ͱࢥ͚ͬͨͲͶ…ʯ
    
17. 17.

    Delphi/C++Builder by Embarcadero • 2013೥ʙ • Delphi/C++ Ͱ iOSͱAndroidɺWin/Mac޲͚ΞϓϦ͕։ൃՄ •

    Adobe Airͱಉ͘͡ʮUIಠࣗඳըํࣜʯΛ࠾༻ • ׌ͭɺiOS·ͨ͸AndroidͷAPIͷAPIϥούʔ΋ఏڙ • ࢲධ:ϚχΞ͕બͿʰ΋ͬͱධՁ͞ΕͯΑ͍։ൃπʔϧNo.1ʱ
    
18. 18.

    Xamarin by Mircosoft • ྲྀߦ೥: 2016೥ʙ • C#/.NET Ͱ iOS

    ͱ AndroidɺWin޲͚ΞϓϦ͕։ൃՄ • Android/iOS APIͷϥούʔʹՃ͑ɺ
 .NET FrameworkͷҰ෦ػೳΛڞ௨APIͱͯ͠ఏڙ • ը໘։ൃʹ͸ɺڞ௨API(Xamarin.Forms)Λఏڙ • ࢲධ:ʮ࠷ۙฉ͔ͳ͍ʁ.NETͷҰ෦ͱͯ͠ਁಁ͠·ͨ͠ɻʯ
    
19. 19.

    ReactNative by Facebook • ྲྀߦ೥: 2016೥ʙ • React Ͱ iOS

    ͱ AndroidɺWeb޲͚ΞϓϦ͕։ൃՄ • ڞ௨APIͱڞ௨ͷը໘ఆٛ(JSX)Λఏڙ • AirBnB͕Ϧʔυͨ͠ྲྀߦظͱݬ໓ظΛܦͯ҆ఆظʹʁ • Skype ΋ ReactNative(ReactXP)੡
    
20. 20.

    Flutter by Google • ྲྀߦ೥: 2017೥ʙ • Dart Ͱ iOS

    ͱ Android޲͚ΞϓϦ͕։ൃՄ(Web͸͜Ε͔Β) • ಠࣗඳըํࣜʹΑΓAndroidͰ΋iOSͰ΋MaterialͳUIΛఏڙ (iOS-style ΋͋Γ) • HotReloadʹΑΔര଎ը໘։ൃ͕ߴධՁ • ौ୩ͷJKͷ60%͕ʮDartͰͳ͚Ε͹…ʯͱճ౴
    
21. 21.

    Kotlin/Native with MPP by JetBrains • ྲྀߦ೥: 2018೥?ʙ • Kotlin/Native

    • Kotlin ͔Β iOS(౳ͷଞPF)ͷ API ͕࢖͑Δ • iOS/Android/Web౳޲͚ ωΠςΟϒ ϥΠϒϥϦ͕ϏϧυͰ͖Δ • MPP(Multi Platform Project) • ڞ௨APIΛ࡞Δ࢓૊Έ(expect:ڞ௨API, actual:PFຖͷ࣮૷)
    
22. 22.

    X-Plat։ൃπʔϧ ͷ෼ྨ ⏰45

23. 23.

    ը໘ඳըํࣜʹΑΔ෼ྨ 1. PFʹҕৡ ϓϥοτϑΥʔϜͷUIύʔπ͕࢖༻͞ΕΔ ʢAndroid:TextView, iOS:UILabel ౳ʣ 2. ಠࣗඳը UIύʔπΛCanvasʹࣗྗͰඳը

    
    
24. 24.

    PFʹҕৡํࣜͷಛ௃ ⭕ωΠςΟϒͰ࡞ͬͨUIͱ׬શʹಉ͡UXͰ͋Δ ⭕PF޲͚ͷOSSΛར༻͠΍͍͢ ❌ରԠPF͕૿͑Δͱɺͦͷ౎౓࣮૷͕ඞཁ ❌PFຖʹػೳ͕ҟͳΔͱڞ௨Խ͕ͮ͠Β͍ ྫ:iOSͷTextFieldʹ͸auto-size͕͋Δ͚Ͳ…
    

25. 25.

    ಠࣗඳըํࣜͷಛ௃ ⭕εΩϯΛม͑Δ͚ͩͰPFͬΆ͍ݟͨ໨ʹͳΔ ⭕1ͭͷ࣮૷ͰଞPFʹରԠՄೳ ❌PF޲͚ͷOSSϥΠϒϥϦΛར༻ͮ͠Β͍ WebView, MapͳͲͳͲ ❌CJK(ςΩετඳըɾೖྗ)पΓͰτϥϒϧى͖͕ͪ
    

26. 26.

    APIఏڙํࣜʹΑΔ෼ྨ 1. PFͷAPIϥούΛఏڙ͠ͳ͍ 2. PFͷAPIϥούΛఏڙ͢Δ Ruby͔ΒActivityΫϥε͕࢖͑Δ
    ,PUMJO͔ΒUIViewController͕࢖͑Δ
    

27. 27.

    X-Plat։ൃπʔϧͰͷ࣮૷ͷجຊ 1. X-Plat։ൃπʔϧͷݴޠͷඪ४API,ΫϥεΛ࢖͏ 2. X-Plat։ൃπʔϧ༻ͷڞ௨APIΛ࢖͏
 Core “Flutter” primitives ͳͲ 3.

    1 ΋ 2 ʹ΋໨తͷAPI͕ͳ͚Ε͹ڞ௨APIΛࣗ࡞͢Δ
     1→2→3ͷॱʹ࠶ར༻ੑ͸མ͍ͪͯ͘ͷͰɺͳΔ΂͘1ͰؤுΔ ͕࣮ࡍ໰୊ͱͯ͠ 3. ͸ඞਢͳͷͰڞ௨APIͷࣗ࡞ͷ͠΍͕͢͞ॏཁ
28. 28.

    ڞ௨APIͷجຊతͳߟ͑ํ
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ

    actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ※΋ͬͱϩʔϨϕϧͳจࣈྻʹΑΔ Invoke Λ࠾༻͢ΔX-Plat΋͋Γ
29. 29.

    ڞ௨APIͷجຊతͳߟ͑ํ
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ

    actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ͜͜ΛԿݴޠͰ
 ॻ͘ͷ͔ʁ
30. 30.

    ReactNative ͷ৔߹
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ


    ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ +BWB4DSJQU ,PUMJO 4XJGU ڮ౉͠ͷઃఆ +BWB4DSJQU
31. 31.

    Xamarinͷ৔߹
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ

    actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $ $
32. 32.

    Kotlin/Native with MPPͷ৔߹
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠)

    *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ,PUMJO ,PUMJO ,PUMJO
33. 33.

    PFͷAPIϥούͷଘࡏ
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ

    6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $༻ϥού $༻ϥού $ "OESPJE
    4%, J04
    4%,
34. 34.

    ڞ௨APIͷࣗ࡞ͷ͠΍͢͞
 ʙPFͷAPIͷϥούʔ͕ͳ͍৔߹ʙ 1'ݻ༗"1*Λ࢖͏ʹ͸,PUMJO΍4XJGUͰϥΠϒϥϦ Λ࣮૷͠ɺ91MBUଆͱڮ౉͢͠Δ͔͠ͳ͍
    FlutterͷPlatformChannel, R/NͷNative Modules ͳͲ ❌ʮڮ౉͠ʯͰτϥϒϧى͖͕ͪ ❌ϥΠϒϥϦͱΞϓϦͰϓϩδΣΫτ͕෼அ͞ΕΔ

    σόοάͮ͠Β͍
    
35. 35.

    ڞ௨APIͷࣗ࡞ͷ͠΍͢͞
 ʙPFͷAPIͷϥούʔ͕͋Δ৔߹ʙ ⭕Kotlin΍SwiftΛ࢖Θͳͯ͘΋PFͷAPIΛར༻Ͱ͖Δ ⭕ΞϓϦͱಉ͡ϓϩδΣΫτͱͯ͠σόοάͰ͖Δ ❌PF޲͚ͷϥΠϒϥϦΛ࢖͏ʹ͸ʮڮ౉͠ʯ͢Δ͠ ͔ͳ͍ ❌APIʹ΋ஶ࡞ݖ͕͋ΔΜͰ͚ͨͬ͠
    

36. 36.

    ը໘ඳըํࣜͱAPIఏڙํࣜʹΑΔ෼ྨ
     ↑PFʹҕৡ ↓ಠࣗඳը ←PFͷAPIϥού༗ PFͷAPIϥούແˠ Titanium Mobile Air

    for Mobile RubyMotion※ Delphi Flutter Xamarin Kotlin/Native※ React Native ※ը໘ఆٛΛڞ௨Խ͢Δػೳ͸ͳ͍
37. 37.

    Kotlin/Native ͷՄೳੑ

38. 38.

    Xamarin(.NET) vs Kotlin/Native(+MPP) ྫ: C#͔ΒActivityΫϥε͕࢖͑ΔɺRuby͔Β UIViewController͕࢖͑Δ ⭕Kotlin΍SwiftΛ࢖Θͳͯ͘΋PFͷAPIΛར༻Ͱ͖Δ ⭕ΞϓϦͱಉ͡ϓϩδΣΫτͱͯ͠σόοάͰ͖Δ ❌PF޲͚ͷϥΠϒϥϦΛ࢖͏ʹ͸ʮڮ౉͠ʯ͢Δ͔͠ͳ͍ ❌APIʹ΋ஶ࡞ݖ͕͋ΔΜͰ͚ͨͬ͠

    
     9BNBSJO ,PUMJO 1'ͷ"1*ϥού ͋Γ ͋Γ ඪ४"1*ɺ
 Ϋϥεͷ਺ ๛෋ গͳΊ ରԠ1' αʔόʔαΠυɺ
 σεΫτοϓ αʔόʔαΠυɺ
    8FC ଞݴޠ͔Βͷར༻ ෆՄೳ Մೳ
39. 39.

    Kotlin/Native ͕ීٴ͢Δʹ͸ MPPରԠOSS͸์͓͍ͬͯͯ΋૿͍͑ͯͩ͘Ζ͏ Ͱ΋ඪ४API͕΋ͬͱ֦ॆ͞Εͯ΄͍͠ ೔෇ܕ͢Β OSS(klock) ʹཔΔΜ͡Ό… ϞόΠϧ޲͚ͷڞ௨APIηοτ(Xamarin.EssentialsͷΑ͏ͳ)΋ཉ͍͠
 ྫ: val

    photo = camera.takePhoto() ͷ1ߦͰ Android/iOSͲͪΒ΋ ࣸਅࡱӨͰ͖Δతͳ Ͳ͔͜ʹങऩ͞Εͳ͍͜ͱΛفΔ
    
40. 40.

    VS WebΞϓϦ ʙ࠶ߟʂΨϫωΠςΟϒʙ

41. 41.

    ΨϫωΠςΟϒΞϓϦͱ͸ ωΠςΟϒΞϓϦ͕ͩɺը໘ʹ͸WebView͔͠ͳ͘ɺ΋ͬͺ Βͦͷதʹදࣔͨ͠WebαΠτΛΞϓϦͱͯ͠ݟ͍ͤͯΔ͚ͩ
 (ʹΨϫ͚ͩωΠςΟϒ)ͳΞϓϦ UI΍UX͕ωΠςΟϒͱ͔͚཭Ε͍ͯΔɺಡΈࠐΈ͕සൃ͠ετ ϨεϑϧɺͳͲͷཧ༝ͰسΈݏΘΕ͖ͯͨ ͕ɺPWAͷ੎ྗ͕֦େ͢Δͳ͔Ͱݟ௚͠ඞࢸʢݸਓͷݟղʣ
    

42. 42.

    ࠶ߟʂΨϫωΠςΟϒ Α͘Ͱ͖ͨPWA͸ωΠςΟϒΞϓϦʹ͍ۙUXΛఏڙ͢Δ
 (Twitter, Facebook, GoogleMapsͳͲ) ΨϫωΠςΟϒͷதʹʮΑ͘Ͱ͖ͨPWAʯ͕ຒΊࠐ·Ε͍ͯͨ ΒɺͦΕ͸ωΠςΟϒΞϓϦͱൺ΂ͯ΋Ḯ৭ͳ͍ ʮͦΕPWAͰΑ͘ͳ͍ʁʯˠʮηϯαʔ࢖͏ʁͳΒΨϫωΠςΟ ϒͰʯˠʮΞϓϦʹձࣾੜ໋ݒ͚ΔʁͳΒωΠςΟϒͰ͢Ͷʯ ͑ͬͱɺ͡Ό͋

    Cordova, Monaca ͳͲͷग़൪Ͱ͔͢ʁ
    
43. 43.

    ΨϫωΠςΟϒͷΨϫͰ࢖͏X-Plat։ൃπʔϧ ΍ͬͺΓ੩తܕ෇͚ݴޠΛ࢖͍͍ͨ Ώ͘Ώ͘͸ʮ׬શωΠςΟϒʯʹҠߦ͢Δ͔΋ PFͷAPIϥού͕͋ΔX-PlatͳΒPFݻ༗ػೳ΁ͷ ΞΫηε΋ΑΓ؆୯ WebView಺JavaScriptͱͷ࿈ܞ͸ඞਢ
    

44. 44.

    ࣄྫ1:Nintendo Switch Online ΞϓϦ Xamarin.FormsʹΑΔΨϫωΠςΟ ϒΞϓϦ ίϯςϯπ͸WebΞϓϦ(͸ͯͳ੡) ௨஌ɺϘΠενϟοτ(WebRTC)ͳ Ͳ͸ωΠςΟϒ࣮૷
    

    
45. 45.

    αϯϓϧ2:঎඼ݕࡧγεςϜ(ฐࣾࣄྫ)
     ͱ͋ΔCRMͷWebϖʔδ WebView “Ψϫ”͸Xamarin.Forms Χϝϥىಈ ঎඼ίʔυ: BIJ002A 1.

    JavaScript→C#࿈ܞ 2. ڞ௨APIͰΧϝϥىಈɺ঎඼ΛࡱӨ 3. PFͷAPIϥούΛ࢖͍ɺ Android:Tensorflow
 iOS:CoreML Ͱը૾͔Β঎඼Λݕग़ 4. ঎඼ίʔυΛC#→JavaScript࿈ܞͰ Webϖʔδʹฦ٫ ݕࡧ
46. 46.

    ·ͱΊ

47. 47.

    ·ͱΊ X-Plat։ൃπʔϧ͸ඞཁѱ Ͳͷπʔϧ΋ΦϫίϯͰ͸ͳ͍ K/Nʹ͸ݴޠͷนΛ௒͑ΒΕΔັྗ͕͋Δ PFͱͦͷݴޠ΁ͷϦεϖΫτΛ๨Εͣʹ WebΞϓϦͱ΋஥ྑ͘΍͍ͬͯ͜͏
    

48. 48.

    ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠$