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

by amay077

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About me • Ԟࢁ ༟ਈ - @amay077ʢ͋Ί͍ʣ • Android, iOS, Xamarin, TypeScript AWS, Azure… • Ѫ஌ݝࡏॅͷϑϧϦϞʔτϫʔΧʔ • ஍ཧ৘ใγεςϜɺҐஔ৘ใϓϩάϥϛϯά • DroidKaigi2017ొஃˠٕज़ॻయ2→঎ۀຊԽ(ڞஶ)

Slide 3

Slide 3 text

Work for • B2B޲͚PaaSɺ૔ݿ؅ཧɾӡૹۀ޲͚SaaS • AWS, Elasticsearch, Cassandra, Lambda, etc • શһ͕ϑϧϦϞʔτϫʔΧʔ ͓࢓ࣄ಺༰΍ϦϞʔτͰͷಇ͖ํͳͲڵຯ͋Δํɺؾܰʹฉ͍͍ͯͩ͘͞

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

༻ޠ୹ॖ͠·͢ ΫϩεϓϥοτϑΥʔϜˠ X-Plat ϓϥοτϑΥʔϜ → PF R/N → React Native K/N → Kotlin Native Multi Platform Project → MPP

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Titanium Mobile by Appcelerator • ྲྀߦ೥: 2011೥ʙ ※Զ؍ଌ஋ʹΑΔ • JavaScript Ͱ iOS ͱ Android ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • ݩτϨλͷ @masuidrive ͞Μ͕ΤϰΝϯδΣϦετͯͨ͠ • Zaim ͷॳظόʔδϣϯ͸ίϨ੡ͩͬͨ • ࢲධ:ʮiOSͰ͔͠ಈ͔ͳ͍APIଟ͗͢ϫϩλʯ

Slide 15

Slide 15 text

AIR for Mobile by Adobe • ྲྀߦ(ͯ͠ͳ͍Ͷ)೥: 2012೥ʙ • ActionScript ͰҎԼಉจ • Adobe FlashܥͳͷͰʮUIಠࣗඳըํࣜʯΛ࠾༻ • Α͘΋ѱ͘΋ʮFlashͬΆ͍ʯΞϓϦʹͳͬͨ • ࢲධ:ʮ΋ͬ͞Γͯ͠΍͕Δ…த՚ϑΥϯτ…ʯ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Delphi/C++Builder by Embarcadero • 2013೥ʙ • Delphi/C++ Ͱ iOSͱAndroidɺWin/Mac޲͚ΞϓϦ͕։ൃՄ • Adobe Airͱಉ͘͡ʮUIಠࣗඳըํࣜʯΛ࠾༻ • ׌ͭɺiOS·ͨ͸AndroidͷAPIͷAPIϥούʔ΋ఏڙ • ࢲධ:ϚχΞ͕બͿʰ΋ͬͱධՁ͞ΕͯΑ͍։ൃπʔϧNo.1ʱ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ReactNative by Facebook • ྲྀߦ೥: 2016೥ʙ • React Ͱ iOS ͱ AndroidɺWeb޲͚ΞϓϦ͕։ൃՄ • ڞ௨APIͱڞ௨ͷը໘ఆٛ(JSX)Λఏڙ • AirBnB͕Ϧʔυͨ͠ྲྀߦظͱݬ໓ظΛܦͯ҆ఆظʹʁ • Skype ΋ ReactNative(ReactXP)੡

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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ຖͷ࣮૷)

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

X-Plat։ൃπʔϧͰͷ࣮૷ͷجຊ 1. X-Plat։ൃπʔϧͷݴޠͷඪ४API,ΫϥεΛ࢖͏ 2. X-Plat։ൃπʔϧ༻ͷڞ௨APIΛ࢖͏  Core “Flutter” primitives ͳͲ 3. 1 ΋ 2 ʹ΋໨తͷAPI͕ͳ͚Ε͹ڞ௨APIΛࣗ࡞͢Δ 1→2→3ͷॱʹ࠶ར༻ੑ͸མ͍ͪͯ͘ͷͰɺͳΔ΂͘1ͰؤுΔ ͕࣮ࡍ໰୊ͱͯ͠ 3. ͸ඞਢͳͷͰڞ௨APIͷࣗ࡞ͷ͠΍͕͢͞ॏཁ

Slide 28

Slide 28 text

ڞ௨APIͷجຊతͳߟ͑ํ $BNFSB   UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ  ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ※΋ͬͱϩʔϨϕϧͳจࣈྻʹΑΔ Invoke Λ࠾༻͢ΔX-Plat΋͋Γ

Slide 29

Slide 29 text

ڞ௨APIͷجຊతͳߟ͑ํ $BNFSB   UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ  ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ͜͜ΛԿݴޠͰ  ॻ͘ͷ͔ʁ

Slide 30

Slide 30 text

ReactNative ͷ৔߹ $BNFSB   UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ  ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ +BWB4DSJQU ,PUMJO 4XJGU ڮ౉͠ͷઃఆ +BWB4DSJQU

Slide 31

Slide 31 text

Xamarinͷ৔߹ $BNFSB   UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ  ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $ $

Slide 32

Slide 32 text

Kotlin/Native with MPPͷ৔߹ $BNFSB   UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ  ΧϝϥΛىಈʜ actual:Android޲͚ͷ࣮૷ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ actual:iOS޲͚ͷ࣮૷ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ ,PUMJO ,PUMJO ,PUMJO

Slide 33

Slide 33 text

PFͷAPIϥούͷଘࡏ $BNFSB   UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮૷ແ͠) *OUFOUΛ౤͛ͯ  ΧϝϥΛىಈʜ 6**NBHF1JDLFS$POU SPMMFSͰ࣮૷ʜ ࣮૷͕஫ೖ͞ΕΔ ΞϓϦ $ $ $༻ϥού $༻ϥού $ "OESPJE4%, J044%,

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ը໘ඳըํࣜͱAPIఏڙํࣜʹΑΔ෼ྨ ↑PFʹҕৡ ↓ಠࣗඳը ←PFͷAPIϥού༗ PFͷAPIϥούແˠ Titanium Mobile Air for Mobile RubyMotion※ Delphi Flutter Xamarin Kotlin/Native※ React Native ※ը໘ఆٛΛڞ௨Խ͢Δػೳ͸ͳ͍

Slide 37

Slide 37 text

Kotlin/Native ͷՄೳੑ

Slide 38

Slide 38 text

Xamarin(.NET) vs Kotlin/Native(+MPP) ྫ: C#͔ΒActivityΫϥε͕࢖͑ΔɺRuby͔Β UIViewController͕࢖͑Δ ⭕Kotlin΍SwiftΛ࢖Θͳͯ͘΋PFͷAPIΛར༻Ͱ͖Δ ⭕ΞϓϦͱಉ͡ϓϩδΣΫτͱͯ͠σόοάͰ͖Δ ❌PF޲͚ͷϥΠϒϥϦΛ࢖͏ʹ͸ʮڮ౉͠ʯ͢Δ͔͠ͳ͍ ❌APIʹ΋ஶ࡞ݖ͕͋ΔΜͰ͚ͨͬ͠ 9BNBSJO ,PUMJO 1'ͷ"1*ϥού ͋Γ ͋Γ ඪ४"1*ɺ  Ϋϥεͷ਺ ๛෋ গͳΊ ରԠ1' αʔόʔαΠυɺ  σεΫτοϓ αʔόʔαΠυɺ 8FC ଞݴޠ͔Βͷར༻ ෆՄೳ Մೳ

Slide 39

Slide 39 text

Kotlin/Native ͕ීٴ͢Δʹ͸ MPPରԠOSS͸์͓͍ͬͯͯ΋૿͍͑ͯͩ͘Ζ͏ Ͱ΋ඪ४API͕΋ͬͱ֦ॆ͞Εͯ΄͍͠ ೔෇ܕ͢Β OSS(klock) ʹཔΔΜ͡Ό… ϞόΠϧ޲͚ͷڞ௨APIηοτ(Xamarin.EssentialsͷΑ͏ͳ)΋ཉ͍͠  ྫ: val photo = camera.takePhoto() ͷ1ߦͰ Android/iOSͲͪΒ΋ ࣸਅࡱӨͰ͖Δతͳ Ͳ͔͜ʹങऩ͞Εͳ͍͜ͱΛفΔ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

αϯϓϧ2:঎඼ݕࡧγεςϜ(ฐࣾࣄྫ) ͱ͋ΔCRMͷWebϖʔδ WebView “Ψϫ”͸Xamarin.Forms Χϝϥىಈ ঎඼ίʔυ: BIJ002A 1. JavaScript→C#࿈ܞ 2. ڞ௨APIͰΧϝϥىಈɺ঎඼ΛࡱӨ 3. PFͷAPIϥούΛ࢖͍ɺ Android:Tensorﬂow  iOS:CoreML Ͱը૾͔Β঎඼Λݕग़ 4. ঎඼ίʔυΛC#→JavaScript࿈ܞͰ Webϖʔδʹฦ٫ ݕࡧ

Slide 46

Slide 46 text

·ͱΊ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠$