DroidKaigi2020 - Scadeを使って「Swift」で始めるAndroidアプリ開発

37.5K Views

March 08, 21

スライド概要

Many cross-platform development tools have appeared.

Xamarin, React Native, and Flutter are currently known, but in recent years Kotlin / Native has become widely known.

Did you know that Scade was developed since 2017?

In this session, we will introduce “Scade” that can be used for cross-platform development using “Swift”.

The draft table of contents considers the following:
-Comparison with existing tools
-Advantages of development using Swift
-What you can / can't do with Scade

..etc

2020/2/20-21 DroidKaigi2020
「Scadeを使って「Swift」で始めるAndroidアプリ開発」

- DroidKaigi2020で登壇する予定だった人の裏話
https://note.com/hcrane/n/nf7274ab0f1fe

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Scadeを使って「Swift」で始める Androidアプリ開発 HiromuTsuruta

2.

About me 〈Company〉 - every, inc. / DELISH KITCHEN 〈Role〉 - iOS Developer 〈Account〉 - Twitter: @hcrane14 Qiita: H_Crane note: hcrane

3.

3. 3.1. 3.2. Agenda 1. Scadeを知る 1.1. Scadeとは 1.1.1. 1.1.2. 1.1.3. 1.2. Scadeのライフサイクル 4. Scadeの機能 4.1. 主な機能 Founderについて Scadeの歴史 Swift 4.1.1. 4.1.2. なぜAndroidでSwiftが動くのか 1.2.1. 1.2.2. 起動シーケンス 画面のライフサイクル 4.1.3. 4.1.4. コンパイラ Scadeでのコンパイル 4.2. Simulator 4.2.1. 2. 4.3. Scadeの実装 2.1. 2.1.1. 2.1.2. 2.1.3. 2.2. コードベース 2.2.1. 2.3. Autolayout レイアウトの裏側 UIのパーツ 4.3.2. 5. 5.1. 補足事項 5.1.1. Layout DroidKaigi2020のコピーアプリ Swift Package Manager Multiplatform Library その他 5.1.2. Scadeを使ったアプリ 2.3.1. Scade Simulator Library 4.3.1. GUIベース Foundation API UIKit Android Component Data Binding 5.1.3. 5.2. Scadeで出来ること Scadeで出来ないこと Scadeの不安要素 参考文献

4.

Scadeを知ってますか?

5.

今あるマルチプラットフォーム

7.

Scadeとは?

9.

EclipseベースのIDE

11.

主な機能 - Swiftを用いたマルチプラットフォーム開発 - Swiftを用いた共通ライブラリ開発 - Swift+Kituraを用いたサーバーサイド開発

12.

About Founder 〈Person〉 - Frank Langel 〈Company〉 - Scade Ltd. 〈Role〉 - CEO

13.

連絡してみた

15.

タダでは何も教えてくれないらしい

16.

Quote : https://www.scade.io/pricing/

17.

Scadeの歴史を振り返る

18.

前に

19.

iOSからAndroidへの開発は Scadeが流星のごとく現れたわけではなく 以前から存在していた

20.

History of Multiplatform Based on iOS . . . ? 2011 2015 2017

21.

結局、開発が終わってしまったりして 現在は後発のScadeが細々と残っている

22.

Change Log of Scade - Swift4 - Swift Foundation 80% - Code UI - Animation API - Swift3.1 - WebView BETA3 BETA4 BETA5 BETA6a v0.9.8.1 BETA6b v0.9.8.2 BETA6c - Camera - Page Container - SideBar 5 7 - Server Side Swift - Xcode10 - Foreground - Background - Swift4.1 - Swift Foundation 100% - Unified Build System v0.9.9.0 4 5 6 2018 8 v0.9.10.0 12 2019 2 - Android 64bit - Multiple Build - Xcode11 - Swift5 - Dialog v0.9.13.0 v0.9.16.0 v0.9.17.0 v0.9.14.0 v0.9.15.0 v0.9.15.1 - Swift4.2.1 - Video Capture - Deeplink - Swift Package Manager - Xcode Autocomplete - Logging API 11 - Autolayout - Xcode10.2.1 v0.9.18.0 - Animation - Keyboard Notificaiton - Binding 5 6 7 8 10 1 2020

23.

なんだかんだで 現在も開発が続いてるっぽい!

24.

なぜAndroidでSwiftが動くのか ?

25.

Quote : https://docs.scade.io/docs/how-scade-works

26.

コンパイラのお話

27.

iOS/Android apk ipa ソースコード パッケージ

28.

iOS/Android ソースコード javac kotlinc ProGuard/D8 R8(D8) apk Clang LLVM ipa 中間コード ネイティブコード パッケージ

29.

KotlinNative kotlinc ソースコード 中間コード ProGuard/D8 R8(D8) apk LLVM ipa ネイティブコード パッケージ

30.

Flutter NDK (LLVM) NDK (Clang) apk ipa LLVM ソースコード 中間コード ネイティブコード パッケージ

31.

Scade ? ? ソースコード 中間コード ? apk ? ipa ネイティブコード パッケージ

32.

なんでかわからんけど動く

34.

と、言うわけにもいかないので、、

35.

コンパイルされたものを覗く

36.

Scadeでのコンパイル

37.

Example Android Pagable.swift iOS

38.

この3つに着目する

39.

.o .swiftdoc .swiftmodule

40.

Xcodeでのビルドプロセスを見てみる

41.

Xcode Build

42.

さっきのコード を XcodeのCompilerを使って コンパイルしてみる

43.

Compiler Quote : https://qiita.com/rintaro/items/3ad640e3938207218c20

44.

さっきの3つがある!

45.

ScadeはiOSのコンパイラをベースに コンパイルされてそう!

46.

コンパイル結果を比較

47.

Result

48.

中身に微妙に差がある

49.

それぞれのプラットフォームに ネイティブコンパイルされてそう

50.

Quote :https://docs.scade.io/docs/how-scade-works

51.

つまり

52.

Scade NDK (LLVM) NDK (Clang) apk ipa LLVM ソースコード 中間コード ネイティブコード パッケージ

53.

コンパイル(AOT)の流れは だいたいFlutterと同じっぽい?

54.

UIってどうなってるの?

55.

1. GUIで画面を作る

56.

みんな大好き Hello World

57.

Scade GUI

58.

Let’s Build!

59.

ズレてる、、?

60.

AutoLayoutを使おう!

62.

ん?

63.

Scade GUI Xcode GUI

64.

Xcodeとだいたい同じだ!

65.

Scade GUI Android Studio GUI

66.

Android Studioとは微妙に違う

67.

AutoLayoutを付けると GUIにも反映される

69.

Let’s Build!

71.

AutoLayoutでサクッと解決できた!

72.

レイアウトの裏側を覗く

75.

XMLがレイアウトになっている

76.

View XML

77.

GUI XML

78.

GUIを使わなくても XMLでレイアウトを組めちゃう!

79.

UIのパーツをみる

80.

主に3種類に別れる

81.

1.Widgets

82.

2.Containers

83.

3.Layouts

84.

GUIで用意されているものは少ない! コードベースではUIパーツがたくさんある

85.

Quote :https://docs.scade.io/docs/how-scade-works

86.

用意されたUIパーツを使用すると 対応するネイティブのコンポーネントを 使用してくれるみたい

87.

2. コードで画面を作る

88.

みんな大好き Hello World 2回目

89.

Widgets

90.

① Widget ② Layout

91.

①+② ③

92.

Let’s Build!

93.

寄ってる、、

94.

Layoutを設定しよう!

96.

Let’s Build!

98.

コードからサクッとできた!

99.

実際どのレベルまで作り込めるの?

100.

GUIベースでDroidKaigi2020の コピーアプリを作りました

101.

Example GUI iOS https://github.com/crane-hiromu/ScadeKaigi2020

102.

「Swift」でマルチプラットフォーム開発をしよう! https://qiita.com/H_Crane/items/ea445c65a903c42ce86e

103.

ライフサイクルはどうなってるの?

104.

起動シーケンスをみる

105.

Android 起動 Application 表示 Scade 起動 SCDApplication (root view) 表示 iOS 起動 AppDelegate (root view) 表示

106.

Android - Active Terminate Background Foreground Scade - URL Scheme - Push etc. - Active Terminate Background Foreground - URL Scheme - Push etc. - Active Terminate Background Foreground - URL Scheme - Push etc. 起動 起動 起動 受取 Process LifecycleOwner 受取 受取 Application 表示 Activity LifecycleCallbacks iOS Service 受取 SCDApplication (root view) 表示 受取 受取 AppDelegate (root view) 表示

107.

iOSよりな設計になっている

108.

画面のライフサイクルをみる

109.

Android / Activity Scade / SCDLatticePageAdapter load(_:) onEnter activate(_:) show(_:data:) show(_:) onExit iOS / UIViewController

110.

Android / Activity Scade / SCDLatticePageAdapter iOS / UIViewController load(_:) onEnter activate(_:) show(_:data:) show(_:) onExit ※ nearly equal

111.

Android / Activity Scade / SCDLatticePageAdapter load(_:) onRestart SCDWidgets EnterEventHandler onEnter activate(_:) show(_:data:) show(_:) onExit SCDWidgets ExitEventHandler iOS / UIViewController

112.

全く同じと言うわけにはいかないが Scadeにも同じような ライフサイクルがある!

113.

Scadeの機能を見る

114.

Swiftで出来ること

115.

Quote : https://medium.com/@SCADE/swift-foundation-4-0-for-android-b6274fb9c322

116.

SwiftのFoundation APIが そのまま使えちゃう!

117.

- Numbers, Data, and Basic Values - Strings and Text - Collections - Dates and Times - Units and Measurement - Data Formatting - Filters and Sorting

118.

iOSだけならUIKitも使える

119.

Example Swift

120.

Example Swift UIKit

121.

Example iOS

122.

Android独自のコンポーネントは?

123.

Quote : https://docs.scade.io/docs/use-conditional-compilation-to-leverage-platform-specific-api

124.

Example Quote : https://docs.scade.io/docs/modal-dialogs

125.

まだ使えないみたい

126.

データバインディングが使える

127.

Example GUI iOS

128.

Example GUI Swift

129.

Example

130.

この書き方なんか見たことある!

131.

Example Scade RxSwift

132.

Example Scade RxSwift

133.

RxSwiftやCombineと同じや!

134.

リアクティブプログラミングが 内包されている!

135.

独自のビルド高速化システム

136.

Scade独自のシュミレータ

137.

① Scade ② iPhone ③ Android

138.

なぜか旧iPhoneみたいなデザイン

139.

端末ビルドよりは早いが 他のマルチプラットフォームにある ホットリロードほど早くない

140.

ライブラリのインストール

141.

Quote : https://medium.com/@SCADE/develop-cryptoswift-applications-on-android-and-ios-7df6b208b156

142.

Swift Package Manager が使える!

143.

Quote : https://docs.scade.io/docs/swift-package-manager

144.

Cで書かれたライブラリや PureなSwiftのライブラリである必要がある

145.

Example Quote : https://medium.com/@SCADE/extending-your-swift-on-android-project-with-c-libraries-560d3c452370

146.

メジャーなライブラリで ビルドできるものはそんなに多くない

147.

マルチプラットフォーム向けの 共通ライブラリ開発

148.

Quote : https://docs.scade.io/docs/how-scade-works

149.

Quote : https://medium.com/@SCADE/boosting-apple-swift-developer-productivity-with-a-unified-build-system-for-cross-platform-ios-and-578bc00341c5

150.

その他

151.

Scadeで出来ること

152.

- カメラ制御 - 地図制御 - Deeplink遷移 - WebView表示 - カスタムフォント表示 - SVGアニメーション - フォアグラウンド・バックグラウンドのハンドリング - タップ・スワイプ のジェスチャーハンドリング - JsonからAPIのコード生成ジェネレータ and so on...

153.

Scadeで出来ないこと

154.

- 動画表示 - Push通知制御 - Bluetooth制御 - 遷移アニメーションのカスタマイズ - 細かいライフサイクルのハンドリング - テストコードの実行 - タブレット対応(固有のViewを出せない) - Java / Kotlinの呼び出し - Cocoapods / Carthage の使用 and so on...

155.

Scadeの不安要素

156.

- 一部ビルドできないAndroid端末がある - 可変デザインだとAutolayoutがAndroid崩れることがある - Queue管理周りでAndroidのみクラッシュすることがある - 大量の画像はAndroidでクラッシュすることがある → 内部的にViewを使い回す機構になってない模様 - 一部のネイティブAPIが非対応 - eclipseベースなのでエディタが重い - アニメーション周りのサポートがまだまだ弱い - 内部エラーのクラッシュは何も対処できない (※ Scadeに限らずマルチプラットフォームの問題)

157.

参考文献

158.

iOS Multiplatform History - Apportable Converts iOS Apps For Android - objective-c · GitHub Topics - Fire: Your place to cook up great apps - RemObjects Silver: The Swift Language for .NET and Java/Android - “Silver” brings Apple’s Swift language to the .NET and Java worlds - Swiftで無料iOS/Android/.NET開発ができる新 IDE Fireと新Swiftコンパイラ Silver Android Compiler - Android Native Development Kit - 概念 | Android NDK - Fig. 3. Major development tools of the Android platform and the... - インテル ® Atom™ プロセッサー・ベースのプラットフォームにおける Android* アプリケーションの開発と最適化 - AndroidもJVMで動いてると思ってた。。。 - dexファイルってなんだっけ - R8/ProGuard 徹底比較 - PreEmptive Blog Swift Compiler - Swift コンパイラのアーキテクチャ - コマンドラインから直接 Swiftコンパイラを使ってビルドする方法 Flutter Compiler - Flutter Compilation Process - DEV Community 👩‍💻👨‍💻 - Google Flutter: Lessons Learned Writing a Flutter App - What's Revolutionary about Flutter - By - Flutter - How does it work behind the scenes?

159.

iOS Lifecycle - UIViewControllerのライフサイクル - AppDelegate Android Lifecycle - Activity Lifecycle - (Android) アプリの background/foregroundを検知する - アプリのバックグラウンド⇆フォアグラウンドを検知する。 ProcessLifecycleOwnerの導入 - iOS と Android で画面表示時のコールバックを比較する - Androidエンジニアのための iOSのUIViewControllerのライフサイクルと AndroidのActivityのライフサイクル比較 Scade Infomation - SCADE.io - SCADE Guidline - Swift Foundation 4.0 for Android 18 1 Cross Platform App Development with Apple Swift - Use conditional compilation - Boosting Apple Swift developer productivity with a unified build system for cross platform iOS and… - Develop CryptoSwift applications on Android and iOS - Swift Package Manager Guide - Extending your Swift on Android project with C libraries