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

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