Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
クロスプラットフォームモバイルアプリ開発ツール総ざらい2019 〜Titanium Mobile から Kotlin/Native まで〜 #droidkaigi
Search
amay077
February 07, 2019
Programming
11
9.7k
クロスプラットフォームモバイルアプリ開発ツール総ざらい2019 〜Titanium Mobile から Kotlin/Native まで〜 #droidkaigi
DroidKaigi 2019 Day1 roomC 16:30〜
amay077
February 07, 2019
Tweet
Share
More Decks by amay077
See All by amay077
愛知県新型コロナ対策サイト(非公式)の紹介
amay077
0
230
愛知県コロナ対策サイトが立ち上がってから
amay077
0
62
Xamarin.Forms Hot Reload のススメ
amay077
0
800
ハムスター検出器を1日で作ってみた #NGK2018B
amay077
1
920
App Center から Azure Pipeline に乗り換えた話
amay077
0
1.3k
Xamarin.Forms.GoogleMaps について
amay077
0
1.3k
Xamarin.Android で始めるクロスプラットフォームモバイルアプリ開発 #jaghama
amay077
0
540
Xamarin.Android で始めるクロスプラットフォームモバイルアプリ開発 #jxug
amay077
0
820
Xamarin.Android で始めるクロスプラットフォームモバイルアプリ開発 #droidkaigi #droidkaigi1
amay077
3
3.3k
Other Decks in Programming
See All in Programming
Are Your .NET 8 Applications Resilient for the Chaos-proof?
selcukusta
1
200
AFUP Day Lyon 2024 - DDD !== Archi hexagonale
bgalati
0
190
Good first issues of TypeProf
mame
4
2.8k
Does Ruby Parser dream of highly expressive grammar?
andpad
0
110
esbuild 最適化芸人
exoego
2
950
Kubernetes Code Contribution入門
bells17
3
700
メッセージとイベントを中核に置いたシステム設計の有用性について
j5ik2o
PRO
8
600
「ソフトウェア設計」のドメイン - 「データモデリングでドメインを駆動する」を読んで
hidenorigoto
6
1.9k
Community-driven RBS repository
pocke
2
390
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
630
RubyGems on ruby.wasm
kateinoigakukun
0
630
EduBlocksでPythonのブロックプログラミング体験!
ueponx
0
160
Featured
See All Featured
Facilitating Awesome Meetings
lara
43
5.7k
Faster Mobile Websites
deanohume
300
30k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.4k
Six Lessons from altMBA
skipperchong
22
3.1k
Writing Fast Ruby
sferik
623
60k
Designing Experiences People Love
moore
136
23k
The Invisible Side of Design
smashingmag
294
49k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
KATA
mclloyd
16
12k
Making Projects Easy
brettharned
109
5.6k
4 Signs Your Business is Dying
shpigford
176
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
4
190
Transcript
ΫϩεϓϥοτϑΥʔϜ ϞόΠϧΞϓϦ։ൃπʔϧ ૯͟Β͍2019 2019.2.7 DroidKaigi2019 @amay077 ʙTitanium Mobile͔ΒKotlin/Native·Ͱʙ
About me • Ԟࢁ ༟ਈ - @amay077ʢ͋Ί͍ʣ • Android, iOS,
Xamarin, TypeScript AWS, Azure… • ѪݝࡏॅͷϑϧϦϞʔτϫʔΧʔ • ཧใγεςϜɺҐஔใϓϩάϥϛϯά • DroidKaigi2017ొஃˠٕज़ॻయ2→ۀຊԽ(ڞஶ)
Work for • B2B͚PaaSɺݿཧɾӡૹۀ͚SaaS • AWS, Elasticsearch, Cassandra,
Lambda, etc • શһ͕ϑϧϦϞʔτϫʔΧʔ ͓ࣄ༰ϦϞʔτͰͷಇ͖ํͳͲڵຯ͋Δํɺؾܰʹฉ͍͍ͯͩ͘͞
ࠓ͓ͳ͢͠Δ͜ͱ Android ͱ iOS ͚ͷʮωΠςΟϒΞϓϦʯ͕ ։ൃͰ͖Δπʔϧʹ͍ͭͯ ΨϫωΠςΟϒWebΞϓϦͱͷൺֱ ࠓ͓ͳ͠͠ͳ͍ࣄ ϕετϓϥΫςΟε ήʔϜܥ
੩తϥΠϒϥϦ(.a) ΒΜ
༻ޠॖ͠·͢ ΫϩεϓϥοτϑΥʔϜˠ X-Plat ϓϥοτϑΥʔϜ → PF R/N → React Native
K/N → Kotlin Native Multi Platform Project → MPP
Agenda 1. ͳͥX-Plat։ൃπʔϧΛ͏ͷ͔ʁ 2. X-Plat։ൃπʔϧྲྀߦͷྺ࢙ 3. X-Plat։ൃπʔϧͷྨ 4. Kotlin/NativeͷՄೳੑ 5.
VS WebΞϓϦ
ͳͥ X-Plat։ൃπʔϧΛ͏ͷ͔ʁ
A:ʮແݶͷϚχʔ͕ͳ͍͔ΒͰ͢ʯ
X-Plat։ൃπʔϧ ʮඞཁѱʯ Ͱ͢
ͳͥX-Plat։ൃπʔϧΛ͏ͷ͔ʁ ʢۀγεςϜ։ൃऀͷཱ͔Βʣ 1. ࣾһ20ਓதɺϞόΠϧ୲͕1ʙ2ਓ͔͠ډͳ͍ 2. Ϧʔυސ٬ͷཁٻʹԠͯ͡ɺਝʹϓϩτλΠϓ Λ࡞Δඞཁ͕͋Δ(Android? iOS? ͍྆ํ) 3.
Android൛Λೲͨ͠ޙͰɺiOS൛ͷ։ൃґཔ͕ དྷΔˠͦͷޙͷอकΛ̍ਓͰΔ͜ͱʹ
ͳͥX-Plat։ൃπʔϧΛ͏ͷ͔ʁ ʢݸਓϓϩάϥϚͷཱ͔Βʣ 1. झຯͰAndroidΞϓϦΛ3ϲ݄͘Β͍͔͚ͯ࡞ͬͨ 2. ετΞʹϦϦʔεͨ͠ΒׂͱߴධՁͩͬͨ 3. iOS൛ཉ͍͠ͱݴΘΕͨ 4. ͍͟
iOS൛ ։ൃʹணख͕ͨ͠ɺ·ͨ3ϲ݄͔͚ͯ ಉ͜͡ͱΛΔͷ͔ʔʢઓҙࣦ
X-Plat։ൃπʔϧ͚ͩͲX-Plat͡Όͳ͍ ޮΑ͘։ൃͰ͖ΔϛυϧΣΞͱͯ͠ͷX-Plat։ൃπʔϧ AndroidϚϯ͚ͩͲReactNativeͰiOS൛Ͱ͖·ͨ͠ iOSΨʔϧ͚ͩͲFlutterͰAndroid൛Ͱ͖·ͨ͠ AndroidϚϯ͚ͩͲXamarin.FormsͰAndroid൛͚ͩ࡞Γ ·ͨ͠ →⭕ʮ͓·͡ͳ͍ʯʮ͓࡞๏ʯ͕ڞ௨APIʹ࣮ࡁΈ
X-Plat։ൃπʔϧ ྲྀߦͷྺ࢙ ⏰45
Titanium Mobile by Appcelerator • ྲྀߦ: 2011ʙ ※Զ؍ଌʹΑΔ • JavaScript
Ͱ iOS ͱ Android ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • ݩτϨλͷ @masuidrive ͞Μ͕ΤϰΝϯδΣϦετͯͨ͠ • Zaim ͷॳظόʔδϣϯίϨͩͬͨ • ࢲධ:ʮiOSͰ͔͠ಈ͔ͳ͍APIଟ͗͢ϫϩλʯ
AIR for Mobile by Adobe • ྲྀߦ(ͯ͠ͳ͍Ͷ): 2012ʙ • ActionScript
ͰҎԼಉจ • Adobe FlashܥͳͷͰʮUIಠࣗඳըํࣜʯΛ࠾༻ • Α͘ѱ͘ʮFlashͬΆ͍ʯΞϓϦʹͳͬͨ • ࢲධ:ʮͬ͞Γ͕ͯ͠Δ…த՚ϑΥϯτ…ʯ
RubyMotion by Scratchwork • ྲྀߦ: 2013ʙ • Ruby Ͱ iOS
ͱ Android(ޙൃ) ΞϓϦ͕࡞ΕΔͱ͍͏৮ΕࠐΈ • iOS·ͨAndroidͷAPI͕Ruby͔Βݺͼग़ͤΔͱ͍͏ PFͷAPIϥούΛఏڙ • ݩͯͳCTOͷਓ͕ rebuild.fmͰڭ? • ࢲධ:ʮWebܥRubyistʹͬͱΘΕΔ͔ͱࢥ͚ͬͨͲͶ…ʯ
Delphi/C++Builder by Embarcadero • 2013ʙ • Delphi/C++ Ͱ iOSͱAndroidɺWin/Mac͚ΞϓϦ͕։ൃՄ •
Adobe Airͱಉ͘͡ʮUIಠࣗඳըํࣜʯΛ࠾༻ • ͭɺiOS·ͨAndroidͷAPIͷAPIϥούʔఏڙ • ࢲධ:ϚχΞ͕બͿʰͬͱධՁ͞ΕͯΑ͍։ൃπʔϧNo.1ʱ
Xamarin by Mircosoft • ྲྀߦ: 2016ʙ • C#/.NET Ͱ iOS
ͱ AndroidɺWin͚ΞϓϦ͕։ൃՄ • Android/iOS APIͷϥούʔʹՃ͑ɺ .NET FrameworkͷҰ෦ػೳΛڞ௨APIͱͯ͠ఏڙ • ը໘։ൃʹɺڞ௨API(Xamarin.Forms)Λఏڙ • ࢲධ:ʮ࠷ۙฉ͔ͳ͍ʁ.NETͷҰ෦ͱͯ͠ਁಁ͠·ͨ͠ɻʯ
ReactNative by Facebook • ྲྀߦ: 2016ʙ • React Ͱ iOS
ͱ AndroidɺWeb͚ΞϓϦ͕։ൃՄ • ڞ௨APIͱڞ௨ͷը໘ఆٛ(JSX)Λఏڙ • AirBnB͕Ϧʔυͨ͠ྲྀߦظͱݬ໓ظΛܦͯ҆ఆظʹʁ • Skype ReactNative(ReactXP)
Flutter by Google • ྲྀߦ: 2017ʙ • Dart Ͱ iOS
ͱ Android͚ΞϓϦ͕։ൃՄ(Web͜Ε͔Β) • ಠࣗඳըํࣜʹΑΓAndroidͰiOSͰMaterialͳUIΛఏڙ (iOS-style ͋Γ) • HotReloadʹΑΔരը໘։ൃ͕ߴධՁ • ौ୩ͷJKͷ60%͕ʮDartͰͳ͚Ε…ʯͱճ
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ຖͷ࣮)
X-Plat։ൃπʔϧ ͷྨ ⏰45
ը໘ඳըํࣜʹΑΔྨ 1. PFʹҕৡ ϓϥοτϑΥʔϜͷUIύʔπ͕༻͞ΕΔ ʢAndroid:TextView, iOS:UILabel ʣ 2. ಠࣗඳը UIύʔπΛCanvasʹࣗྗͰඳը
PFʹҕৡํࣜͷಛ ⭕ωΠςΟϒͰ࡞ͬͨUIͱશʹಉ͡UXͰ͋Δ ⭕PF͚ͷOSSΛར༻͍͢͠ ❌ରԠPF͕૿͑Δͱɺͦͷ࣮͕ඞཁ ❌PFຖʹػೳ͕ҟͳΔͱڞ௨Խ͕ͮ͠Β͍ ྫ:iOSͷTextFieldʹauto-size͕͋Δ͚Ͳ…
ಠࣗඳըํࣜͷಛ ⭕εΩϯΛม͑Δ͚ͩͰPFͬΆ͍ݟͨʹͳΔ ⭕1ͭͷ࣮ͰଞPFʹରԠՄೳ ❌PF͚ͷOSSϥΠϒϥϦΛར༻ͮ͠Β͍ WebView, MapͳͲͳͲ ❌CJK(ςΩετඳըɾೖྗ)पΓͰτϥϒϧى͖͕ͪ
APIఏڙํࣜʹΑΔྨ 1. PFͷAPIϥούΛఏڙ͠ͳ͍ 2. PFͷAPIϥούΛఏڙ͢Δ Ruby͔ΒActivityΫϥε͕͑Δ ,PUMJO͔ΒUIViewController͕͑Δ
X-Plat։ൃπʔϧͰͷ࣮ͷجຊ 1. X-Plat։ൃπʔϧͷݴޠͷඪ४API,ΫϥεΛ͏ 2. X-Plat։ൃπʔϧ༻ͷڞ௨APIΛ͏ Core “Flutter” primitives ͳͲ 3.
1 2 ʹతͷAPI͕ͳ͚Εڞ௨APIΛࣗ࡞͢Δ 1→2→3ͷॱʹ࠶ར༻ੑམ͍ͪͯ͘ͷͰɺͳΔ͘1ͰؤுΔ ͕࣮ࡍͱͯ͠ 3. ඞਢͳͷͰڞ௨APIͷࣗ࡞ͷ͕͢͠͞ॏཁ
ڞ௨APIͷجຊతͳߟ͑ํ $BNFSB UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮ແ͠) *OUFOUΛ͛ͯ ΧϝϥΛىಈʜ
actual:Android͚ͷ࣮ 6**NBHF1JDLFS$POU SPMMFSͰ࣮ʜ actual:iOS͚ͷ࣮ ࣮͕ೖ͞ΕΔ ΞϓϦ ※ͬͱϩʔϨϕϧͳจࣈྻʹΑΔ Invoke Λ࠾༻͢ΔX-Plat͋Γ
ڞ௨APIͷجຊతͳߟ͑ํ $BNFSB UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮ແ͠) *OUFOUΛ͛ͯ ΧϝϥΛىಈʜ
actual:Android͚ͷ࣮ 6**NBHF1JDLFS$POU SPMMFSͰ࣮ʜ actual:iOS͚ͷ࣮ ࣮͕ೖ͞ΕΔ ΞϓϦ ͜͜ΛԿݴޠͰ ॻ͘ͷ͔ʁ
ReactNative ͷ߹ $BNFSB UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮ແ͠) *OUFOUΛ͛ͯ
ΧϝϥΛىಈʜ actual:Android͚ͷ࣮ 6**NBHF1JDLFS$POU SPMMFSͰ࣮ʜ actual:iOS͚ͷ࣮ ࣮͕ೖ͞ΕΔ ΞϓϦ +BWB4DSJQU ,PUMJO 4XJGU ڮ͠ͷઃఆ +BWB4DSJQU
Xamarinͷ߹ $BNFSB UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮ແ͠) *OUFOUΛ͛ͯ ΧϝϥΛىಈʜ
actual:Android͚ͷ࣮ 6**NBHF1JDLFS$POU SPMMFSͰ࣮ʜ actual:iOS͚ͷ࣮ ࣮͕ೖ͞ΕΔ ΞϓϦ $ $ $ $
Kotlin/Native with MPPͷ߹ $BNFSB UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮ແ͠)
*OUFOUΛ͛ͯ ΧϝϥΛىಈʜ actual:Android͚ͷ࣮ 6**NBHF1JDLFS$POU SPMMFSͰ࣮ʜ actual:iOS͚ͷ࣮ ࣮͕ೖ͞ΕΔ ΞϓϦ ,PUMJO ,PUMJO ,PUMJO
PFͷAPIϥούͷଘࡏ $BNFSB UBLF1IPUP *NH ڞ௨APIఆٛ(expected:࣮ແ͠) *OUFOUΛ͛ͯ ΧϝϥΛىಈʜ
6**NBHF1JDLFS$POU SPMMFSͰ࣮ʜ ࣮͕ೖ͞ΕΔ ΞϓϦ $ $ $༻ϥού $༻ϥού $ "OESPJE4%, J044%,
ڞ௨APIͷࣗ࡞ͷ͢͠͞ ʙPFͷAPIͷϥούʔ͕ͳ͍߹ʙ 1'ݻ༗"1*Λ͏ʹ,PUMJO4XJGUͰϥΠϒϥϦ Λ࣮͠ɺ91MBUଆͱڮ͢͠Δ͔͠ͳ͍ FlutterͷPlatformChannel, R/NͷNative Modules ͳͲ ❌ʮڮ͠ʯͰτϥϒϧى͖͕ͪ ❌ϥΠϒϥϦͱΞϓϦͰϓϩδΣΫτ͕அ͞ΕΔ
σόοάͮ͠Β͍
ڞ௨APIͷࣗ࡞ͷ͢͠͞ ʙPFͷAPIͷϥούʔ͕͋Δ߹ʙ ⭕KotlinSwiftΛΘͳͯ͘PFͷAPIΛར༻Ͱ͖Δ ⭕ΞϓϦͱಉ͡ϓϩδΣΫτͱͯ͠σόοάͰ͖Δ ❌PF͚ͷϥΠϒϥϦΛ͏ʹʮڮ͠ʯ͢Δ͠ ͔ͳ͍ ❌APIʹஶ࡞ݖ͕͋ΔΜͰ͚ͨͬ͠
ը໘ඳըํࣜͱAPIఏڙํࣜʹΑΔྨ ↑PFʹҕৡ ↓ಠࣗඳը ←PFͷAPIϥού༗ PFͷAPIϥούແˠ Titanium Mobile Air
for Mobile RubyMotion※ Delphi Flutter Xamarin Kotlin/Native※ React Native ※ը໘ఆٛΛڞ௨Խ͢Δػೳͳ͍
Kotlin/Native ͷՄೳੑ
Xamarin(.NET) vs Kotlin/Native(+MPP) ྫ: C#͔ΒActivityΫϥε͕͑ΔɺRuby͔Β UIViewController͕͑Δ ⭕KotlinSwiftΛΘͳͯ͘PFͷAPIΛར༻Ͱ͖Δ ⭕ΞϓϦͱಉ͡ϓϩδΣΫτͱͯ͠σόοάͰ͖Δ ❌PF͚ͷϥΠϒϥϦΛ͏ʹʮڮ͠ʯ͢Δ͔͠ͳ͍ ❌APIʹஶ࡞ݖ͕͋ΔΜͰ͚ͨͬ͠
9BNBSJO ,PUMJO 1'ͷ"1*ϥού ͋Γ ͋Γ ඪ४"1*ɺ Ϋϥεͷ ๛ গͳΊ ରԠ1' αʔόʔαΠυɺ σεΫτοϓ αʔόʔαΠυɺ 8FC ଞݴޠ͔Βͷར༻ ෆՄೳ Մೳ
Kotlin/Native ͕ීٴ͢Δʹ MPPରԠOSS์͓͍ͬͯͯ૿͍͑ͯͩ͘Ζ͏ Ͱඪ४API͕ͬͱ֦ॆ͞Εͯ΄͍͠ ܕ͢Β OSS(klock) ʹཔΔΜ͡Ό… ϞόΠϧ͚ͷڞ௨APIηοτ(Xamarin.EssentialsͷΑ͏ͳ)ཉ͍͠ ྫ: val
photo = camera.takePhoto() ͷ1ߦͰ Android/iOSͲͪΒ ࣸਅࡱӨͰ͖Δతͳ Ͳ͔͜ʹങऩ͞Εͳ͍͜ͱΛفΔ
VS WebΞϓϦ ʙ࠶ߟʂΨϫωΠςΟϒʙ
ΨϫωΠςΟϒΞϓϦͱ ωΠςΟϒΞϓϦ͕ͩɺը໘ʹWebView͔͠ͳ͘ɺͬͺ Βͦͷதʹදࣔͨ͠WebαΠτΛΞϓϦͱͯ͠ݟ͍ͤͯΔ͚ͩ (ʹΨϫ͚ͩωΠςΟϒ)ͳΞϓϦ UIUX͕ωΠςΟϒͱ͔͚Ε͍ͯΔɺಡΈࠐΈ͕සൃ͠ετ ϨεϑϧɺͳͲͷཧ༝ͰسΈݏΘΕ͖ͯͨ ͕ɺPWAͷྗ͕֦େ͢Δͳ͔Ͱݟ͠ඞࢸʢݸਓͷݟղʣ
࠶ߟʂΨϫωΠςΟϒ Α͘Ͱ͖ͨPWAωΠςΟϒΞϓϦʹ͍ۙUXΛఏڙ͢Δ (Twitter, Facebook, GoogleMapsͳͲ) ΨϫωΠςΟϒͷதʹʮΑ͘Ͱ͖ͨPWAʯ͕ຒΊࠐ·Ε͍ͯͨ ΒɺͦΕωΠςΟϒΞϓϦͱൺͯḮ৭ͳ͍ ʮͦΕPWAͰΑ͘ͳ͍ʁʯˠʮηϯαʔ͏ʁͳΒΨϫωΠςΟ ϒͰʯˠʮΞϓϦʹձࣾੜ໋ݒ͚ΔʁͳΒωΠςΟϒͰ͢Ͷʯ ͑ͬͱɺ͡Ό͋
Cordova, Monaca ͳͲͷग़൪Ͱ͔͢ʁ
ΨϫωΠςΟϒͷΨϫͰ͏X-Plat։ൃπʔϧ ͬͺΓ੩తܕ͚ݴޠΛ͍͍ͨ Ώ͘Ώ͘ʮશωΠςΟϒʯʹҠߦ͢Δ͔ PFͷAPIϥού͕͋ΔX-PlatͳΒPFݻ༗ػೳͷ ΞΫηεΑΓ؆୯ WebViewJavaScriptͱͷ࿈ܞඞਢ
ࣄྫ1:Nintendo Switch Online ΞϓϦ Xamarin.FormsʹΑΔΨϫωΠςΟ ϒΞϓϦ ίϯςϯπWebΞϓϦ(ͯͳ) ௨ɺϘΠενϟοτ(WebRTC)ͳ ͲωΠςΟϒ࣮
αϯϓϧ2:ݕࡧγεςϜ(ฐࣾࣄྫ) ͱ͋ΔCRMͷWebϖʔδ WebView “Ψϫ”Xamarin.Forms Χϝϥىಈ ίʔυ: BIJ002A 1.
JavaScript→C#࿈ܞ 2. ڞ௨APIͰΧϝϥىಈɺΛࡱӨ 3. PFͷAPIϥούΛ͍ɺ Android:Tensorflow iOS:CoreML Ͱը૾͔ΒΛݕग़ 4. ίʔυΛC#→JavaScript࿈ܞͰ Webϖʔδʹฦ٫ ݕࡧ
·ͱΊ
·ͱΊ X-Plat։ൃπʔϧඞཁѱ ͲͷπʔϧΦϫίϯͰͳ͍ K/NʹݴޠͷนΛ͑ΒΕΔັྗ͕͋Δ PFͱͦͷݴޠͷϦεϖΫτΛΕͣʹ WebΞϓϦͱྑ͍ͬͯ͘͜͏
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠$