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

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アプリ開発」

Transcript

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

   View Slide

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

   View Slide

3. 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. 参考文献
   

   View Slide

4. Scadeを知ってますか？
   

   View Slide

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

   View Slide

6. View Slide

7. Scadeとは？
   

   View Slide

8. View Slide

9. EclipseベースのIDE
   

   View Slide

10. View Slide

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

    View Slide

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

    View Slide

13. 連絡してみた
    

    View Slide

14. View Slide

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

    View Slide

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

    View Slide

17. Scadeの歴史を振り返る
    

    View Slide

18. 前に
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. 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
    

    View Slide

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

    View Slide

24. なぜAndroidでSwiftが動くのか ?
    

    View Slide

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

    View Slide

26. コンパイラのお話
    

    View Slide

27. iOS/Android
    apk

    ipa

    ソースコード
 パッケージ

    

    View Slide

28. ソースコード
 中間コード
 ネイティブコード

    apk

    ipa

    パッケージ

    ProGuard/D8

    R8(D8)

    javac

    kotlinc

    Clang
 LLVM

    iOS/Android
    

    View Slide

29. apk

    ipa

    LLVM

    ソースコード
 中間コード
 パッケージ

    KotlinNative
    ProGuard/D8

    R8(D8)

    

    kotlinc

    ネイティブコード

    

    View Slide

30. apk

    ipa

    LLVM

    NDK

    （Clang）

    Flutter
    ソースコード
 中間コード
 パッケージ

    ネイティブコード

    NDK

    （LLVM）

    

    

    View Slide

31. apk

    ipa

    ソースコード
 中間コード
 パッケージ

    Scade
    ネイティブコード

    ?

    ?

    ?

    ?

    

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

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

    View Slide

36. Scadeでのコンパイル
    

    View Slide

37. Android

    iOS

    Example
    Pagable.swift

    

    View Slide

38. この３つに着目する
    

    View Slide

39. .o
    .swiftdoc
    .swiftmodule
    

    View Slide

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

    View Slide

41. Xcode Build
    

    View Slide

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

    View Slide

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

    View Slide

44. さっきの３つがある！
    

    View Slide

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

    View Slide

46. コンパイル結果を比較
    

    View Slide

47. Result
    

    View Slide

48. 中身に微妙に差がある
    

    View Slide

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

    View Slide

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

    View Slide

51. つまり
    

    View Slide

52. apk

    ipa

    LLVM

    ソースコード
 中間コード
 パッケージ

    Scade
    ネイティブコード

    NDK

    （Clang）

    NDK

    （LLVM）

    

    

    View Slide

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

    View Slide

54. UIってどうなってるの？
    

    View Slide

55. 1. GUIで画面を作る
    

    View Slide

56. みんな大好き
    Hello World
    

    View Slide

57. Scade GUI
    

    View Slide

58. Let’s Build!
    

    View Slide

59. ズレてる、、？

    

    View Slide

60. AutoLayoutを使おう！
    

    View Slide

61. View Slide

62. ん？
    

    View Slide

63. Scade GUI Xcode GUI
    

    View Slide

64. Xcodeとだいたい同じだ！
    

    View Slide

65. Android Studio GUI
    Scade GUI
    

    View Slide

66. Android Studioとは微妙に違う
    

    View Slide

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

    View Slide

68. View Slide

69. Let’s Build!
    

    View Slide

70. View Slide

71. AutoLayoutでサクッと解決できた！
    

    View Slide

72. レイアウトの裏側を覗く
    

    View Slide

73. View Slide

74. View Slide

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

    View Slide

76. View XML
    

    View Slide

77. GUI XML
    

    View Slide

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

    View Slide

79. UIのパーツをみる
    

    View Slide

80. 主に３種類に別れる
    

    View Slide

81. 1.Widgets
    

    View Slide

82. 2.Containers
    

    View Slide

83. 3.Layouts
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

87. 2. コードで画面を作る
    

    View Slide

88. みんな大好き
    Hello World 2回目
    

    View Slide

89. Widgets
    

    View Slide

90. ① Widget

    ② Layout

    

    View Slide

91. ①＋② 

    ③

    

    View Slide

92. Let’s Build!
    

    View Slide

93. 寄ってる、、

    

    View Slide

94. Layoutを設定しよう！
    

    View Slide

95. View Slide

96. Let’s Build!
    

    View Slide

97. View Slide

98. コードからサクッとできた！
    

    View Slide

99. 実際どのレベルまで作り込めるの？
    

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

103. ライフサイクルはどうなってるの？
     

     View Slide

104. 起動シーケンスをみる
     

     View Slide

105. iOS
     Scade
     起動

     表示

     表示

     AppDelegate
     (root view)
     起動

     表示

     SCDApplication
     (root view)
     Android
     Application
     起動

     

     View Slide

106. 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
     受取
 受取

     受取
 受取
 受取

     受取

     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

113. Scadeの機能を見る
     

     View Slide

114. Swiftで出来ること
     

     View Slide

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

     View Slide

116. SwiftのFoundation APIが
     そのまま使えちゃう！
     

     View Slide

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

     View Slide

118. iOSだけならUIKitも使える
     

     View Slide

119. Example
     Swift
     

     View Slide

120. Example
     Swift
     UIKit
     

     View Slide

121. Example
     iOS
     

     View Slide

122. Android独自のコンポーネントは？
     

     View Slide

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

     View Slide

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

     View Slide

125. まだ使えないみたい
     

     View Slide

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

     View Slide

127. GUI iOS
     Example
     

     View Slide

128. Example
     GUI Swift
     

     View Slide

129. Example
     

     View Slide

130. この書き方なんか見たことある！
     

     View Slide

131. RxSwift
     Scade
     Example
     

     View Slide

132. RxSwift
     Scade
     Example
     

     View Slide

133. RxSwiftやCombineと同じや！
     

     View Slide

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

     View Slide

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

     View Slide

136. Scade独自のシュミレータ
     

     View Slide

137. ① Scade
 ② iPhone
 ③ Android

     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

142. Swift Package Manager が使える！
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

150. その他
     

     View Slide

151. Scadeで出来ること
     

     View Slide

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

     View Slide

153. Scadeで出来ないこと
     

     View Slide

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

     View Slide

155. Scadeの不安要素
     

     View Slide

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

     View Slide

157. 参考文献
     

     View Slide

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?
     

     View Slide

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
     

     View Slide