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

7a0bc9670ff654b04d4361a9afd1bba8?s=47 h.crane
February 21, 2020

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

7a0bc9670ff654b04d4361a9afd1bba8?s=128

h.crane

February 21, 2020
Tweet

Transcript

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

  2. 〈Company〉 - every, inc. / DELISH KITCHEN 〈Role〉 - iOS

    Developer 〈Account〉 - Twitter: @hcrane14 - Qiita: H_Crane - note: hcrane About me
  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. 参考文献
  4. Scadeを知ってますか?

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

  6. None
  7. Scadeとは?

  8. None
  9. EclipseベースのIDE

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

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

    CEO About Founder
  13. 連絡してみた

  14. None
  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. 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
  23. なんだかんだで 現在も開発が続いてるっぽい!

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

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

  26. コンパイラのお話

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


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


    Clang
 LLVM
 iOS/Android
  29. apk
 ipa
 LLVM
 ソースコード
 中間コード
 パッケージ
 KotlinNative ProGuard/D8
 R8(D8)
 


    kotlinc
 ネイティブコード

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


    NDK
 (LLVM)
 

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


    ?

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

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

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

  36. Scadeでのコンパイル

  37. Android
 iOS
 Example Pagable.swift


  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. apk
 ipa
 LLVM
 ソースコード
 中間コード
 パッケージ
 Scade ネイティブコード
 NDK
 (Clang)


    NDK
 (LLVM)
 

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

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

  55. 1. GUIで画面を作る

  56. みんな大好き Hello World

  57. Scade GUI

  58. Let’s Build!

  59. ズレてる、、?


  60. AutoLayoutを使おう!

  61. None
  62. ん?

  63. Scade GUI Xcode GUI

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

  65. Android Studio GUI Scade GUI

  66. Android Studioとは微妙に違う

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

  68. None
  69. Let’s Build!

  70. None
  71. AutoLayoutでサクッと解決できた!

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

  73. None
  74. None
  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を設定しよう!

  95. None
  96. Let’s Build!

  97. None
  98. コードからサクッとできた!

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

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

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

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

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

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

  105. iOS Scade 起動
 表示
 表示
 AppDelegate (root view) 起動
 表示


    SCDApplication (root view) Android Application 起動

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

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

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

  109. Android / Activity iOS / UIViewController Scade / SCDLatticePageAdapter load(_:)

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

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

    SCDLatticePageAdapter onRestart load(_:) activate(_:) show(_:data:) onEnter onExit SCDWidgets EnterEventHandler SCDWidgets ExitEventHandler
  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. Quote : https://docs.scade.io/docs/modal-dialogs Example

  125. まだ使えないみたい

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

  127. GUI iOS Example

  128. Example GUI Swift

  129. Example

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

  131. RxSwift Scade Example

  132. RxSwift Scade Example

  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. Quote : https://medium.com/@SCADE/extending-your-swift-on-android-project-with-c-libraries-560d3c452370 Example

  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