Pro Yearly is on sale from $80 to $50! »

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

80d2fc532ffcaba52ff614bb12a30336?s=47 amay077
February 07, 2019

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

DroidKaigi 2019 Day1 roomC 16:30〜

80d2fc532ffcaba52ff614bb12a30336?s=128

amay077

February 07, 2019
Tweet

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Ͱ࣮૷ʜ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $༻ϥού $༻ϥού $ "OESPJE4%, J044%,
  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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠$