Slide 1
Slide 1 text
Scadeを使って「Swift」で始める
Androidアプリ開発
HiromuTsuruta
Slide 2
Slide 2 text
〈Company〉
- every, inc. / DELISH KITCHEN
〈Role〉
- iOS Developer
〈Account〉
- Twitter: @hcrane14
- Qiita: H_Crane
- note: hcrane
About me
Slide 3
Slide 3 text
1. Scadeを知る
1.1. Scadeとは
1.1.1. 主な機能
1.1.2. Founderについて
1.1.3. Scadeの歴史
1.2. なぜAndroidでSwiftが動くのか
1.2.1. コンパイラ
1.2.2. Scadeでのコンパイル
2. Scadeの実装
2.1. GUIベース
2.1.1. Autolayout
2.1.2. レイアウトの裏側
2.1.3. UIのパーツ
2.2. コードベース
2.2.1. Layout
2.3. Scadeを使ったアプリ
2.3.1. DroidKaigi2020のコピーアプリ
Agenda
3. Scadeのライフサイクル
3.1. 起動シーケンス
3.2. 画面のライフサイクル
4. Scadeの機能
4.1. Swift
4.1.1. Foundation API
4.1.2. UIKit
4.1.3. Android Component
4.1.4. Data Binding
4.2. Simulator
4.2.1. Scade Simulator
4.3. Library
4.3.1. Swift Package Manager
4.3.2. Multiplatform Library
5. その他
5.1. 補足事項
5.1.1. Scadeで出来ること
5.1.2. Scadeで出来ないこと
5.1.3. Scadeの不安要素
5.2. 参考文献
Slide 4
Slide 4 text
Scadeを知ってますか？
Slide 5
Slide 5 text
今あるマルチプラットフォーム
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Scadeとは？
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
EclipseベースのIDE
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
主な機能
- Swiftを用いたマルチプラットフォーム開発
- Swiftを用いた共通ライブラリ開発
- Swift+Kituraを用いたサーバーサイド開発
Slide 12
Slide 12 text
〈Person〉
- Frank Langel
〈Company〉
- Scade Ltd.
〈Role〉
- CEO
About Founder
Slide 13
Slide 13 text
連絡してみた
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
タダでは何も教えてくれないらしい
Slide 16
Slide 16 text
Quote : https://www.scade.io/pricing/
Slide 17
Slide 17 text
Scadeの歴史を振り返る
Slide 18
Slide 18 text
前に
Slide 19
Slide 19 text
iOSからAndroidへの開発は
Scadeが流星のごとく現れたわけではなく
以前から存在していた
Slide 20
Slide 20 text
History of Multiplatform Based on iOS . . . ?
2011 2015 2017
Slide 21
Slide 21 text
結局、開発が終わってしまったりして
現在は後発のScadeが細々と残っている
Slide 22
Slide 22 text
BETA3
5
2018 2019
11
7
2020
4 8
5 6 12 5
2 6 7 8 10
- Swift3.1
- WebView
- Camera
- Page Container
- SideBar
- Swift4
- Swift Foundation 80%
- Code UI
- Animation API
BETA4 BETA5 BETA6a
BETA6b
BETA6c
v0.9.8.1 v0.9.9.0
v0.9.8.2
v0.9.10.0 v0.9.13.0
v0.9.14.0
v0.9.15.0
v0.9.15.1
v0.9.17.0
- Swift4.1
- Swift Foundation 100%
- Unified Build System
- Swift Package Manager
- Xcode Autocomplete
- Logging API
- Server Side Swift
- Xcode10
- Foreground
- Background
Change Log of Scade
- Swift4.2.1
- Video Capture
- Deeplink
- Autolayout
- Xcode10.2.1
- Binding
- Swift5
- Dialog
- Android 64bit
- Multiple Build
- Xcode11
1
- Animation
- Keyboard Notificaiton
v0.9.18.0
v0.9.16.0
Slide 23
Slide 23 text
なんだかんだで
現在も開発が続いてるっぽい！
Slide 24
Slide 24 text
なぜAndroidでSwiftが動くのか ?
Slide 25
Slide 25 text
Quote : https://docs.scade.io/docs/how-scade-works
Slide 26
Slide 26 text
コンパイラのお話
Slide 27
Slide 27 text
iOS/Android
apk
ipa
ソースコード
パッケージ
Slide 28
Slide 28 text
ソースコード
中間コード
ネイティブコード
apk
ipa
パッケージ
ProGuard/D8
R8(D8)
javac
kotlinc
Clang
LLVM
iOS/Android
Slide 29
Slide 29 text
apk
ipa
LLVM
ソースコード
中間コード
パッケージ
KotlinNative
ProGuard/D8
R8(D8)
kotlinc
ネイティブコード
Slide 30
Slide 30 text
apk
ipa
LLVM
NDK
（Clang）
Flutter
ソースコード
中間コード
パッケージ
ネイティブコード
NDK
（LLVM）
Slide 31
Slide 31 text
apk
ipa
ソースコード
中間コード
パッケージ
Scade
ネイティブコード
?
?
?
?
Slide 32
Slide 32 text
なんでかわからんけど動く
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
と、言うわけにもいかないので、、
Slide 35
Slide 35 text
コンパイルされたものを覗く
Slide 36
Slide 36 text
Scadeでのコンパイル
Slide 37
Slide 37 text
Android
iOS
Example
Pagable.swift
Slide 38
Slide 38 text
この３つに着目する
Slide 39
Slide 39 text
.o
.swiftdoc
.swiftmodule
Slide 40
Slide 40 text
Xcodeでのビルドプロセスを見てみる
Slide 41
Slide 41 text
Xcode Build
Slide 42
Slide 42 text
さっきのコード を
XcodeのCompilerを使って
コンパイルしてみる
Slide 43
Slide 43 text
Compiler
Quote : https://qiita.com/rintaro/items/3ad640e3938207218c20
Slide 44
Slide 44 text
さっきの３つがある！
Slide 45
Slide 45 text
ScadeはiOSのコンパイラをベースに
コンパイルされてそう！
Slide 46
Slide 46 text
コンパイル結果を比較
Slide 47
Slide 47 text
Result
Slide 48
Slide 48 text
中身に微妙に差がある
Slide 49
Slide 49 text
それぞれのプラットフォームに
ネイティブコンパイルされてそう
Slide 50
Slide 50 text
Quote :https://docs.scade.io/docs/how-scade-works
Slide 51
Slide 51 text
つまり
Slide 52
Slide 52 text
apk
ipa
LLVM
ソースコード
中間コード
パッケージ
Scade
ネイティブコード
NDK
（Clang）
NDK
（LLVM）
Slide 53
Slide 53 text
コンパイル(AOT)の流れは
だいたいFlutterと同じっぽい？
Slide 54
Slide 54 text
UIってどうなってるの？
Slide 55
Slide 55 text
1. GUIで画面を作る
Slide 56
Slide 56 text
みんな大好き
Hello World
Slide 57
Slide 57 text
Scade GUI
Slide 58
Slide 58 text
Let’s Build!
Slide 59
Slide 59 text
ズレてる、、？
Slide 60
Slide 60 text
AutoLayoutを使おう！
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
ん？
Slide 63
Slide 63 text
Scade GUI Xcode GUI
Slide 64
Slide 64 text
Xcodeとだいたい同じだ！
Slide 65
Slide 65 text
Android Studio GUI
Scade GUI
Slide 66
Slide 66 text
Android Studioとは微妙に違う
Slide 67
Slide 67 text
AutoLayoutを付けると
GUIにも反映される
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Let’s Build!
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
AutoLayoutでサクッと解決できた！
Slide 72
Slide 72 text
レイアウトの裏側を覗く
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
XMLがレイアウトになっている
Slide 76
Slide 76 text
View XML
Slide 77
Slide 77 text
GUI XML
Slide 78
Slide 78 text
GUIを使わなくても
XMLでレイアウトを組めちゃう！
Slide 79
Slide 79 text
UIのパーツをみる
Slide 80
Slide 80 text
主に３種類に別れる
Slide 81
Slide 81 text
1.Widgets
Slide 82
Slide 82 text
2.Containers
Slide 83
Slide 83 text
3.Layouts
Slide 84
Slide 84 text
GUIで用意されているものは少ない！
コードベースではUIパーツがたくさんある
Slide 85
Slide 85 text
Quote :https://docs.scade.io/docs/how-scade-works
Slide 86
Slide 86 text
用意されたUIパーツを使用すると
対応するネイティブのコンポーネントを
使用してくれるみたい
Slide 87
Slide 87 text
2. コードで画面を作る
Slide 88
Slide 88 text
みんな大好き
Hello World 2回目
Slide 89
Slide 89 text
Widgets
Slide 90
Slide 90 text
① Widget
② Layout
Slide 91
Slide 91 text
①＋②
③
Slide 92
Slide 92 text
Let’s Build!
Slide 93
Slide 93 text
寄ってる、、
Slide 94
Slide 94 text
Layoutを設定しよう！
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Let’s Build!
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
コードからサクッとできた！
Slide 99
Slide 99 text
実際どのレベルまで作り込めるの？
Slide 100
Slide 100 text
GUIベースでDroidKaigi2020の
コピーアプリを作りました
Slide 101
Slide 101 text
GUI iOS
Example
https://github.com/crane-hiromu/ScadeKaigi2020
Slide 102
Slide 102 text
「Swift」でマルチプラットフォーム開発をしよう！
https://qiita.com/H_Crane/items/ea445c65a903c42ce86e
Slide 103
Slide 103 text
ライフサイクルはどうなってるの？
Slide 104
Slide 104 text
起動シーケンスをみる
Slide 105
Slide 105 text
iOS
Scade
起動
表示
表示
AppDelegate
(root view)
起動
表示
SCDApplication
(root view)
Android
Application
起動
Slide 106
Slide 106 text
iOS
Scade
起動
表示
表示
Service
AppDelegate
(root view)
- URL Scheme
- Push
etc.
- Active
- Terminate
- Background
- Foreground
起動
表示
SCDApplication
(root view)
- URL Scheme
- Push
etc.
- Active
- Terminate
- Background
- Foreground
Android
Application
起動
- URL Scheme
- Push
etc.
- Active
- Terminate
- Background
- Foreground
Activity
LifecycleCallbacks
Process
LifecycleOwner
受取
受取
受取
受取
受取
受取
Slide 107
Slide 107 text
iOSよりな設計になっている
Slide 108
Slide 108 text
画面のライフサイクルをみる
Slide 109
Slide 109 text
Android / Activity iOS / UIViewController
Scade / SCDLatticePageAdapter
load(_:)
activate(_:)
show(_:data:)
show(_:)
onEnter
onExit
Slide 110
Slide 110 text
Android / Activity iOS / UIViewController
Scade / SCDLatticePageAdapter
load(_:)
activate(_:)
show(_:data:)
show(_:)
onEnter
onExit
※ nearly equal
Slide 111
Slide 111 text
show(_:)
show(_:)
Android / Activity iOS / UIViewController
Scade / SCDLatticePageAdapter
onRestart
load(_:)
activate(_:)
show(_:data:)
onEnter
onExit
SCDWidgets
EnterEventHandler
SCDWidgets
ExitEventHandler
Slide 112
Slide 112 text
全く同じと言うわけにはいかないが
Scadeにも同じような
ライフサイクルがある！
Slide 113
Slide 113 text
Scadeの機能を見る
Slide 114
Slide 114 text
Swiftで出来ること
Slide 115
Slide 115 text
Quote : https://medium.com/@SCADE/swift-foundation-4-0-for-android-b6274fb9c322
Slide 116
Slide 116 text
SwiftのFoundation APIが
そのまま使えちゃう！
Slide 117
Slide 117 text
- Numbers, Data, and Basic Values
- Strings and Text
- Collections
- Dates and Times
- Units and Measurement
- Data Formatting
- Filters and Sorting
Slide 118
Slide 118 text
iOSだけならUIKitも使える
Slide 119
Slide 119 text
Example
Swift
Slide 120
Slide 120 text
Example
Swift
UIKit
Slide 121
Slide 121 text
Example
iOS
Slide 122
Slide 122 text
Android独自のコンポーネントは？
Slide 123
Slide 123 text
Quote : https://docs.scade.io/docs/use-conditional-compilation-to-leverage-platform-specific-api
Slide 124
Slide 124 text
Quote : https://docs.scade.io/docs/modal-dialogs
Example
Slide 125
Slide 125 text
まだ使えないみたい
Slide 126
Slide 126 text
データバインディングが使える
Slide 127
Slide 127 text
GUI iOS
Example
Slide 128
Slide 128 text
Example
GUI Swift
Slide 129
Slide 129 text
Example
Slide 130
Slide 130 text
この書き方なんか見たことある！
Slide 131
Slide 131 text
RxSwift
Scade
Example
Slide 132
Slide 132 text
RxSwift
Scade
Example
Slide 133
Slide 133 text
RxSwiftやCombineと同じや！
Slide 134
Slide 134 text
リアクティブプログラミングが
内包されている！
Slide 135
Slide 135 text
独自のビルド高速化システム
Slide 136
Slide 136 text
Scade独自のシュミレータ
Slide 137
Slide 137 text
① Scade
② iPhone
③ Android
Slide 138
Slide 138 text
なぜか旧iPhoneみたいなデザイン
Slide 139
Slide 139 text
端末ビルドよりは早いが
他のマルチプラットフォームにある
ホットリロードほど早くない
Slide 140
Slide 140 text
ライブラリのインストール
Slide 141
Slide 141 text
Quote : https://medium.com/@SCADE/develop-cryptoswift-applications-on-android-and-ios-7df6b208b156
Slide 142
Slide 142 text
Swift Package Manager が使える！
Slide 143
Slide 143 text
Quote : https://docs.scade.io/docs/swift-package-manager
Slide 144
Slide 144 text
Cで書かれたライブラリや
PureなSwiftのライブラリである必要がある
Slide 145
Slide 145 text
Quote : https://medium.com/@SCADE/extending-your-swift-on-android-project-with-c-libraries-560d3c452370
Example
Slide 146
Slide 146 text
メジャーなライブラリで
ビルドできるものはそんなに多くない
Slide 147
Slide 147 text
マルチプラットフォーム向けの
共通ライブラリ開発
Slide 148
Slide 148 text
Quote : https://docs.scade.io/docs/how-scade-works
Slide 149
Slide 149 text
Quote : https://medium.com/@SCADE/boosting-apple-swift-developer-productivity-with-a-unified-build-system-for-cross-platform-ios-and-578bc00341c5
Slide 150
Slide 150 text
その他
Slide 151
Slide 151 text
Scadeで出来ること
Slide 152
Slide 152 text
- カメラ制御
- 地図制御
- Deeplink遷移
- WebView表示
- カスタムフォント表示
- SVGアニメーション
- フォアグラウンド・バックグラウンドのハンドリング
- タップ・スワイプ のジェスチャーハンドリング
- JsonからAPIのコード生成ジェネレータ
and so on...
Slide 153
Slide 153 text
Scadeで出来ないこと
Slide 154
Slide 154 text
- 動画表示
- Push通知制御
- Bluetooth制御
- 遷移アニメーションのカスタマイズ
- 細かいライフサイクルのハンドリング
- テストコードの実行
- タブレット対応（固有のViewを出せない）
- Java / Kotlinの呼び出し
- Cocoapods / Carthage の使用
and so on...
Slide 155
Slide 155 text
Scadeの不安要素
Slide 156
Slide 156 text
- 一部ビルドできないAndroid端末がある
- 可変デザインだとAutolayoutがAndroid崩れることがある
- Queue管理周りでAndroidのみクラッシュすることがある
- 大量の画像はAndroidでクラッシュすることがある
→ 内部的にViewを使い回す機構になってない模様
- 一部のネイティブAPIが非対応
- eclipseベースなのでエディタが重い
- アニメーション周りのサポートがまだまだ弱い
- 内部エラーのクラッシュは何も対処できない (※ Scadeに限らずマルチプラットフォームの問題
)
Slide 157
Slide 157 text
参考文献
Slide 158
Slide 158 text
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?
Slide 159
Slide 159 text
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