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

DroidKaigi 2019 Day1 roomC 16:30〜

Transcript

1. ΫϩεϓϥοτϑΥʔϜ
 ϞόΠϧΞϓϦ։ൃπʔϧ
 ૯͟Β͍2019 2019.2.7 DroidKaigi2019 @amay077 ʙTitanium Mobile͔ΒKotlin/Native·Ͱʙ
2. About me • Ԟࢁ ༟ਈ - @amay077ʢ͋Ί͍ʣ • Android, iOS, Xamarin, TypeScript AWS, Azure… • Ѫ஌ݝࡏॅͷϑϧϦϞʔτϫʔΧʔ • ஍ཧ৘ใγεςϜɺҐஔ৘ใϓϩάϥϛϯά • DroidKaigi2017ొஃˠٕज़ॻయ2→঎ۀຊԽ(ڞஶ)
   
3. Work for
    • B2B޲͚PaaSɺ૔ݿ؅ཧɾӡૹۀ޲͚SaaS • AWS, Elasticsearch, Cassandra, Lambda, etc • શһ͕ϑϧϦϞʔτϫʔΧʔ ͓࢓ࣄ಺༰΍ϦϞʔτͰͷಇ͖ํͳͲڵຯ͋Δํɺؾܰʹฉ͍͍ͯͩ͘͞
4. ࠓ೔͓͸ͳ͢͠Δ͜ͱ Android ͱ iOS ޲͚ͷʮωΠςΟϒΞϓϦʯ͕
 ։ൃͰ͖Δπʔϧʹ͍ͭͯ ΨϫωΠςΟϒ΍WebΞϓϦͱͷൺֱ ࠓ೔͓͸ͳ͠͠ͳ͍ࣄ ϕετϓϥΫςΟε ήʔϜܥ ੩తϥΠϒϥϦ(.a) Β΁Μ
   
5. ༻ޠ୹ॖ͠·͢ ΫϩεϓϥοτϑΥʔϜˠ X-Plat ϓϥοτϑΥʔϜ → PF R/N → React Native K/N → Kotlin Native Multi Platform Project → MPP
   
6. Agenda 1. ͳͥX-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ 2. X-Plat։ൃπʔϧྲྀߦͷྺ࢙ 3. X-Plat։ൃπʔϧͷ෼ྨ 4. Kotlin/NativeͷՄೳੑ 5. VS WebΞϓϦ
   
7. ͳͥ
 X-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ
8. A:ʮແݶͷϚχʔ͕ͳ͍͔ΒͰ͢ʯ
9. X-Plat։ൃπʔϧ͸ 
 ʮඞཁѱʯ Ͱ͢
10. ͳͥX-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ ʢۀ຿γεςϜ։ൃऀͷཱ৔͔Βʣ 1. ࣾһ20ਓதɺϞόΠϧ୲౰͕1ʙ2ਓ͔͠ډͳ͍ 2. Ϧʔυސ٬ͷཁٻʹԠͯ͡ɺਝ଎ʹϓϩτλΠϓ Λ࡞Δඞཁ͕͋Δ(Android? iOS? ͍΍྆ํ) 3. Android൛Λೲ඼ͨ͠ޙͰɺiOS൛ͷ։ൃґཔ͕ དྷΔˠͦͷޙͷอकΛ̍ਓͰ΍Δ͜ͱʹ
    
11. ͳͥX-Plat։ൃπʔϧΛ࢖͏ͷ͔ʁ ʢݸਓϓϩάϥϚͷཱ৔͔Βʣ 1. झຯͰAndroidΞϓϦΛ3ϲ݄͘Β͍͔͚ͯ࡞ͬͨ 2. ετΞʹϦϦʔεͨ͠ΒׂͱߴධՁͩͬͨ 3. iOS൛΋ཉ͍͠ͱݴΘΕͨ 4. ͍͟ iOS൛ ։ൃʹணख͕ͨ͠ɺ·ͨ3ϲ݄͔͚ͯ ಉ͜͡ͱΛ΍Δͷ͔ʔʢઓҙ૕ࣦ
    
12. X-Plat։ൃπʔϧ͚ͩͲX-Plat͡Όͳ͍ ޮ཰Α͘։ൃͰ͖Δϛυϧ΢ΣΞͱͯ͠ͷX-Plat։ൃπʔϧ AndroidϚϯ͚ͩͲReactNativeͰiOS൛Ͱ͖·ͨ͠ iOSΨʔϧ͚ͩͲFlutterͰAndroid൛Ͱ͖·ͨ͠ AndroidϚϯ͚ͩͲXamarin.FormsͰAndroid൛͚ͩ࡞Γ ·ͨ͠ →⭕ʮ͓·͡ͳ͍ʯ΍ʮ͓࡞๏ʯ͕ڞ௨APIʹ࣮૷ࡁΈ
    
13. X-Plat։ൃπʔϧ ྲྀߦͷྺ࢙ ⏰45
14. Titanium Mobile by Appcelerator • ྲྀߦ೥: 2011೥ʙ ※Զ؍ଌ஋ʹΑΔ • JavaScript Ͱ iOS ͱ Android ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • ݩτϨλͷ @masuidrive ͞Μ͕ΤϰΝϯδΣϦετͯͨ͠ • Zaim ͷॳظόʔδϣϯ͸ίϨ੡ͩͬͨ • ࢲධ:ʮiOSͰ͔͠ಈ͔ͳ͍APIଟ͗͢ϫϩλʯ
    
15. AIR for Mobile by Adobe • ྲྀߦ(ͯ͠ͳ͍Ͷ)೥: 2012೥ʙ • ActionScript ͰҎԼಉจ • Adobe FlashܥͳͷͰʮUIಠࣗඳըํࣜʯΛ࠾༻ • Α͘΋ѱ͘΋ʮFlashͬΆ͍ʯΞϓϦʹͳͬͨ • ࢲධ:ʮ΋ͬ͞Γͯ͠΍͕Δ…த՚ϑΥϯτ…ʯ
    
16. RubyMotion by Scratchwork • ྲྀߦ೥: 2013೥ʙ • Ruby Ͱ iOS ͱ Android(ޙൃ) ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • iOS·ͨ͸AndroidͷAPI͕Ruby͔Βݺͼग़ͤΔͱ͍͏
 PFͷAPIϥούΛఏڙ • ݩ͸ͯͳCTOͷਓ͕ rebuild.fmͰ෍ڭ? • ࢲධ:ʮWebܥRubyistʹ΋ͬͱ࢖ΘΕΔ͔ͱࢥ͚ͬͨͲͶ…ʯ
    
17. Delphi/C++Builder by Embarcadero • 2013೥ʙ • Delphi/C++ Ͱ iOSͱAndroidɺWin/Mac޲͚ΞϓϦ͕։ൃՄ • Adobe Airͱಉ͘͡ʮUIಠࣗඳըํࣜʯΛ࠾༻ • ׌ͭɺiOS·ͨ͸AndroidͷAPIͷAPIϥούʔ΋ఏڙ • ࢲධ:ϚχΞ͕બͿʰ΋ͬͱධՁ͞ΕͯΑ͍։ൃπʔϧNo.1ʱ
    
18. Xamarin by Mircosoft • ྲྀߦ೥: 2016೥ʙ • C#/.NET Ͱ iOS ͱ AndroidɺWin޲͚ΞϓϦ͕։ൃՄ • Android/iOS APIͷϥούʔʹՃ͑ɺ
 .NET FrameworkͷҰ෦ػೳΛڞ௨APIͱͯ͠ఏڙ • ը໘։ൃʹ͸ɺڞ௨API(Xamarin.Forms)Λఏڙ • ࢲධ:ʮ࠷ۙฉ͔ͳ͍ʁ.NETͷҰ෦ͱͯ͠ਁಁ͠·ͨ͠ɻʯ
    
19. ReactNative by Facebook • ྲྀߦ೥: 2016೥ʙ • React Ͱ iOS ͱ AndroidɺWeb޲͚ΞϓϦ͕։ൃՄ • ڞ௨APIͱڞ௨ͷը໘ఆٛ(JSX)Λఏڙ • AirBnB͕Ϧʔυͨ͠ྲྀߦظͱݬ໓ظΛܦͯ҆ఆظʹʁ • Skype ΋ ReactNative(ReactXP)੡
    
20. Flutter by Google • ྲྀߦ೥: 2017೥ʙ • Dart Ͱ iOS ͱ Android޲͚ΞϓϦ͕։ൃՄ(Web͸͜Ε͔Β) • ಠࣗඳըํࣜʹΑΓAndroidͰ΋iOSͰ΋MaterialͳUIΛఏڙ (iOS-style ΋͋Γ) • HotReloadʹΑΔര଎ը໘։ൃ͕ߴධՁ • ौ୩ͷJKͷ60%͕ʮDartͰͳ͚Ε͹…ʯͱճ౴
    
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. X-Plat։ൃπʔϧ ͷ෼ྨ ⏰45
23. ը໘ඳըํࣜʹΑΔ෼ྨ 1. PFʹҕৡ ϓϥοτϑΥʔϜͷUIύʔπ͕࢖༻͞ΕΔ ʢAndroid:TextView, iOS:UILabel ౳ʣ 2. ಠࣗඳը UIύʔπΛCanvasʹࣗྗͰඳը
    
24. PFʹҕৡํࣜͷಛ௃ ⭕ωΠςΟϒͰ࡞ͬͨUIͱ׬શʹಉ͡UXͰ͋Δ ⭕PF޲͚ͷOSSΛར༻͠΍͍͢ ❌ରԠPF͕૿͑Δͱɺͦͷ౎౓࣮૷͕ඞཁ ❌PFຖʹػೳ͕ҟͳΔͱڞ௨Խ͕ͮ͠Β͍ ྫ:iOSͷTextFieldʹ͸auto-size͕͋Δ͚Ͳ…
    
25. ಠࣗඳըํࣜͷಛ௃ ⭕εΩϯΛม͑Δ͚ͩͰPFͬΆ͍ݟͨ໨ʹͳΔ ⭕1ͭͷ࣮૷ͰଞPFʹରԠՄೳ ❌PF޲͚ͷOSSϥΠϒϥϦΛར༻ͮ͠Β͍ WebView, MapͳͲͳͲ ❌CJK(ςΩετඳըɾೖྗ)पΓͰτϥϒϧى͖͕ͪ
    
26. APIఏڙํࣜʹΑΔ෼ྨ 1. PFͷAPIϥούΛఏڙ͠ͳ͍ 2. PFͷAPIϥούΛఏڙ͢Δ Ruby͔ΒActivityΫϥε͕࢖͑Δ
    ,PUMJO͔ΒUIViewController͕࢖͑Δ
    
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. ڞ௨APIͷجຊతͳߟ͑ํ
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ※΋ͬͱϩʔϨϕϧͳจࣈྻʹΑΔ Invoke Λ࠾༻͢ΔX-Plat΋͋Γ
29. ڞ௨APIͷجຊతͳߟ͑ํ
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ͜͜ΛԿݴޠͰ
 ॻ͘ͷ͔ʁ
30. ReactNative ͷ৔߹
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ +BWB4DSJQU ,PUMJO 4XJGU ڮ౉͠ͷઃఆ +BWB4DSJQU
31. Xamarinͷ৔߹
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $ $
32. Kotlin/Native with MPPͷ৔߹
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ,PUMJO ,PUMJO ,PUMJO
33. PFͷAPIϥούͷଘࡏ
     $BNFSB
    ŠŠŠŠŠŠŠŠ
 UBLF1IPUP 
    *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ
 ΧϝϥΛىಈʜ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $༻ϥού $༻ϥού $ "OESPJE
    4%, J04
    4%,
34. ڞ௨APIͷࣗ࡞ͷ͠΍͢͞
 ʙPFͷAPIͷϥούʔ͕ͳ͍৔߹ʙ 1'ݻ༗"1*Λ࢖͏ʹ͸,PUMJO΍4XJGUͰϥΠϒϥϦ Λ࣮૷͠ɺ91MBUଆͱڮ౉͢͠Δ͔͠ͳ͍
    FlutterͷPlatformChannel, R/NͷNative Modules ͳͲ ❌ʮڮ౉͠ʯͰτϥϒϧى͖͕ͪ ❌ϥΠϒϥϦͱΞϓϦͰϓϩδΣΫτ͕෼அ͞ΕΔ σόοάͮ͠Β͍
    
35. ڞ௨APIͷࣗ࡞ͷ͠΍͢͞
 ʙPFͷAPIͷϥούʔ͕͋Δ৔߹ʙ ⭕Kotlin΍SwiftΛ࢖Θͳͯ͘΋PFͷAPIΛར༻Ͱ͖Δ ⭕ΞϓϦͱಉ͡ϓϩδΣΫτͱͯ͠σόοάͰ͖Δ ❌PF޲͚ͷϥΠϒϥϦΛ࢖͏ʹ͸ʮڮ౉͠ʯ͢Δ͠ ͔ͳ͍ ❌APIʹ΋ஶ࡞ݖ͕͋ΔΜͰ͚ͨͬ͠
    
36. ը໘ඳըํࣜͱAPIఏڙํࣜʹΑΔ෼ྨ
     ↑PFʹҕৡ ↓ಠࣗඳը ←PFͷAPIϥού༗ PFͷAPIϥούແˠ Titanium Mobile Air for Mobile RubyMotion※ Delphi Flutter Xamarin Kotlin/Native※ React Native ※ը໘ఆٛΛڞ௨Խ͢Δػೳ͸ͳ͍
37. Kotlin/Native ͷՄೳੑ
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. Kotlin/Native ͕ීٴ͢Δʹ͸ MPPରԠOSS͸์͓͍ͬͯͯ΋૿͍͑ͯͩ͘Ζ͏ Ͱ΋ඪ४API͕΋ͬͱ֦ॆ͞Εͯ΄͍͠ ೔෇ܕ͢Β OSS(klock) ʹཔΔΜ͡Ό… ϞόΠϧ޲͚ͷڞ௨APIηοτ(Xamarin.EssentialsͷΑ͏ͳ)΋ཉ͍͠
 ྫ: val photo = camera.takePhoto() ͷ1ߦͰ Android/iOSͲͪΒ΋ ࣸਅࡱӨͰ͖Δతͳ Ͳ͔͜ʹങऩ͞Εͳ͍͜ͱΛفΔ
    
40. VS WebΞϓϦ ʙ࠶ߟʂΨϫωΠςΟϒʙ
41. ΨϫωΠςΟϒΞϓϦͱ͸ ωΠςΟϒΞϓϦ͕ͩɺը໘ʹ͸WebView͔͠ͳ͘ɺ΋ͬͺ Βͦͷதʹදࣔͨ͠WebαΠτΛΞϓϦͱͯ͠ݟ͍ͤͯΔ͚ͩ
 (ʹΨϫ͚ͩωΠςΟϒ)ͳΞϓϦ UI΍UX͕ωΠςΟϒͱ͔͚཭Ε͍ͯΔɺಡΈࠐΈ͕සൃ͠ετ ϨεϑϧɺͳͲͷཧ༝ͰسΈݏΘΕ͖ͯͨ ͕ɺPWAͷ੎ྗ͕֦େ͢Δͳ͔Ͱݟ௚͠ඞࢸʢݸਓͷݟղʣ
    
42. ࠶ߟʂΨϫωΠςΟϒ Α͘Ͱ͖ͨPWA͸ωΠςΟϒΞϓϦʹ͍ۙUXΛఏڙ͢Δ
 (Twitter, Facebook, GoogleMapsͳͲ) ΨϫωΠςΟϒͷதʹʮΑ͘Ͱ͖ͨPWAʯ͕ຒΊࠐ·Ε͍ͯͨ ΒɺͦΕ͸ωΠςΟϒΞϓϦͱൺ΂ͯ΋Ḯ৭ͳ͍ ʮͦΕPWAͰΑ͘ͳ͍ʁʯˠʮηϯαʔ࢖͏ʁͳΒΨϫωΠςΟ ϒͰʯˠʮΞϓϦʹձࣾੜ໋ݒ͚ΔʁͳΒωΠςΟϒͰ͢Ͷʯ ͑ͬͱɺ͡Ό͋ Cordova, Monaca ͳͲͷग़൪Ͱ͔͢ʁ
    
43. ΨϫωΠςΟϒͷΨϫͰ࢖͏X-Plat։ൃπʔϧ ΍ͬͺΓ੩తܕ෇͚ݴޠΛ࢖͍͍ͨ Ώ͘Ώ͘͸ʮ׬શωΠςΟϒʯʹҠߦ͢Δ͔΋ PFͷAPIϥού͕͋ΔX-PlatͳΒPFݻ༗ػೳ΁ͷ ΞΫηε΋ΑΓ؆୯ WebView಺JavaScriptͱͷ࿈ܞ͸ඞਢ
    
44. ࣄྫ1:Nintendo Switch Online ΞϓϦ Xamarin.FormsʹΑΔΨϫωΠςΟ ϒΞϓϦ ίϯςϯπ͸WebΞϓϦ(͸ͯͳ੡) ௨஌ɺϘΠενϟοτ(WebRTC)ͳ Ͳ͸ωΠςΟϒ࣮૷
    
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. ·ͱΊ
47. ·ͱΊ X-Plat։ൃπʔϧ͸ඞཁѱ Ͳͷπʔϧ΋ΦϫίϯͰ͸ͳ͍ K/Nʹ͸ݴޠͷนΛ௒͑ΒΕΔັྗ͕͋Δ PFͱͦͷݴޠ΁ͷϦεϖΫτΛ๨Εͣʹ WebΞϓϦͱ΋஥ྑ͘΍͍ͬͯ͜͏
    
48. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠$