「Swift」でマルチプラットフォーム開発をしよう！


追記 2020/6/15
**DroidKaigi2020の登壇資料を公開しました！**

追記 2020/8/28
**DroidKaigi Liteのセッションを公開しました！**

・資料

[![thumbnail](https://speakerd.s3.amazonaws.com/presentations/a30bc0d74ce54f3685a9ea2b8a8439d5/slide_0.jpg?15653429)](https://speakerdeck.com/hcrane/droidkaigi2020-scadewoshi-tute-swift-deshi-meruandroidapurikai-fa)
[DroidKaigi2020 - Scadeを使って「Swift」で始めるAndroidアプリ開発](https://speakerdeck.com/hcrane/droidkaigi2020-scadewoshi-tute-swift-deshi-meruandroidapurikai-fa)

・セッション

[![](https://img.youtube.com/vi/cUzA4YThK7s/0.jpg)](https://www.youtube.com/watch?v=cUzA4YThK7s)

# 前置き

この記事自体は2019年10月に書き終わっていたのですが、、、

**DroidKaigi2020**に応募したCFP 
**[「Scadeを使って「Swift」で始めるAndroidアプリ開発」](https://droidkaigi.jp/2020/timetable/155408)**
が通ったため、だいぶ温めてからの公開になりました、、笑

~~残念ながら開催は見送られてしまいましたが、、、
開催週に登壇の**前座資料**として、元々この記事を公開予定だったので公開しています！
（登壇資料はまだ開催予定を信じて公開は致しませんmm）~~

## 内容

登壇内容ほど詳しくは載せていませんが、みなさんがSwiftを使ってScadeでアプリ開発できるように

```
- Scadeのライトな説明
- 環境設定方法
- 開発トラベルシューティング
```

周りを記載しています。

# What is Scade ?

![スクリーンショット 2020-02-17 23.26.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/deec93df-357f-660a-e041-7bd3c091da7a.png)

**Swiftをベース**にiOS/Android向けのアプリを開発できる**統合開発環境**です。

## どんな物が作れる？ 

**DroidKaigi2020のコピーアプリ**をScadeを使って作りました。

<img width="1990" alt="74605697-c2a15880-510d-11ea-8edf-7c0883e3eaa2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/465cdc44-d89b-4b40-bd6e-fcd24237513d.png">

といっても、検索フィルターなど**一部の画面・機能は未実装**です。
（単純に自分のコミット不足で実装しきれなかった）

また、リリースしたいと考えていたので（結局してないけど笑）
申請のリジェクトリスクを恐れて**デザインは少し変更**しています。
デザイン自体はDroidKaigi2020のアプリをベースにしています。

**[アプリのリポジトリ](https://github.com/crane-hiromu/ScadeKaigi2020)**を用意してあるので、詳しくはそのReadmeを見れいただけると！

（一部動作はぬるっとしてたりします。特にAndroidは、、泣）

# 開発環境構築

[Scade公式のMacへのインストール方法](https://docs.scade.io/docs/installation#section-set-the-vm-parameter-if-you-have-multiple-java-frameworks)

公式サイトにあるものは、**英語**なのと**古い**ので、改めて以下の手順で行うと良いかと。

## 1. インストール

多いですが、iOS/Android双方へアプリをビルドする必要があるため、以下を全てインストールします。

- [Java 8 SDKのダウンロード(ミラー)](https://cdn.azul.com/zulu/bin/zulu8.38.0.13-ca-jdk8.0.212-macosx_x64.dmg)
- [Android NDKのダウンロード(ミラー)](https://dl.google.com/android/repository/android-ndk-r17c-darwin-x86_64.zip)
- [Android Studioのダウンロード](https://developer.android.com/studio/#downloads)
- [Xcodeのダウンロード](https://developer.apple.com/download/more/)（Xcode11以降）
- [Scadeのダウンロード](https://www.scade.io/download/)

複数のJREがインストールされている場合は、指定してあげるための対応が必要です。
(上記の公式サイトを参照してください)

## 2. Androidでビルドできるようにする

### ① Android Studioを起動
<img width="400" alt="00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/64f18e19-2268-0936-2a3f-ce57b756ee25.png">

プロジェクトを開くか or 空のプロジェクトを作成してください

### ② 対応バージョンを入れる

<img width="400" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/9b5eb5f6-543f-1d24-97f2-8b288396b505.png">

[Android Studio] > [Preferences] > [Android SDK] 
と進み、Android 6.0 にチェックを入れてインストールします。

### ③ 必要なSDKをインストールする

<img width="400" alt="22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/60d38fc3-70db-c714-1d62-4317f242db0f.png">


いくつかはデフォルトでインストールされているが、以下はないのでインストールします。
- Google Play services
- NDK

### ④ シュミレータのインストール

Android Studioをインストールしただけでは、何もシュミレータが入っていないので、自分で入れる必要があります。例では、Pixelを選択していますが、好きな端末を選んでインストールしていただければ。

<img width="3094" alt="a.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/84658466-8769-239f-418a-35b310a81b30.png">


## 3. iOSでビルドできるようにする

(こちらは後で行うことになるので一旦飛ばしても大丈夫です)

Xcode周りでは特に設定は必要ないです。

ただ、証明書がないとビルドできません。
（回避方法があるかも？現状見つけていない）

![スクリーンショット 2020-01-13 19.02.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/c20b41ab-deb2-44c6-c1dd-c4f26ca0435a.png)

Scadeのプロジェクト作成時にできる**build.yaml**に証明書を設定する部分があるので設定します。
（証明書ファイル名前は適当ですので、確実すきな名前にしてください）

<img width="570" alt="スクリーンショット 2020-01-14 0.52.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/19880382-f6e1-66e7-4713-b29605d5e381.png">

とりあえず動かしたいという方は、証明書を作成する際にApple Developerでアプリ名をワイルドカードにすると良いでしょう。


## 4. Scadeのセットアップ

### 1. パスの設定をする

Scadeの設定画面から以下を設定します。

<img width="1500" alt="scade.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5e3771fa-8f91-d4c1-f5ea-60d97b6dfc63.png">

- Android SDK はUsers配下にあるので、各自のパスを指定
- Android NDK は最初にインストールしたものを任意の場所に設置して、その場所を各自が指定


Android SDKの場所はAndroid Studioの設定画面からパスを確認することができます。

<img width="1020" alt="スクリーンショット 2020-01-12 21.13.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/0992147f-2190-a414-a90e-1273b989592d.png">



## 5. 「HelloWorld」する

**XcodeのGUI**のように開発が可能です！

### ①新規プロジェクトの作成

<img width="1445" alt="h-1 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/89df6988-4d9f-8aa2-69e6-f858e0524648.png">

### ②ラベルの設置

![h-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/3b186018-5d0c-35cc-8a0b-a4c2cce9fa4c.png)


### ③ビルドする端末を選択

<img width="300" alt="h-4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/06380d2b-c93b-e9b4-031c-80297b999ca1.png">


### ④HelloWorld!

<img width="1328" alt="h-5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/757d2e4d-cca8-fcd3-94a9-e02610884759.png">

設定は少し面倒ですが、起動してしまえばすぐに開発を始めることができます。

※初回ビルドは失敗するので２回ビルドすること（端末が起動前だとエラーになる。特にAndroid）
※同じ端末をマルチビルドできないため、１端末ごとで行いましょう

## その他

### 開発環境トラブルシューティング

実際に出くわして解決したものを載せておきます。

### 1. Androidでビルドできない時

#### DLツールの許可が必要な場合

インストールしたNDK内のコンパイラがビルド最中に弾かれてしまう場合があります。
（外部macOS Catalinaだと発生する模様）

<img width="411" alt="スクリーンショット 2020-01-12 22.12.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/ddb3677c-b9ec-4332-8d10-6939f518ea85.png">

その場合は一度キャンセルし、Mac本体の``システム環境設定 > セキュリティとプライバシー``から許可を行ってください。
（**「ゴミ箱に入れる」は絶対にしない** でください。やってしまった場合は、NDKを再インストールして入れ替えてください）

<img width="650" alt="スクリーンショット 2020-01-12 22.12.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/97933dae-e89c-9cb7-c3ea-9040d8adac8f.png">

ちなみに４つほど弾かれるので、``許可→再ビルド`` というのを４回ほど行う必要があるので注意

#### サポートライブラリが読み込めない場合

普通にAndroidの開発をしていた場合でも発生するエラーですが、、
（[Androidでのビルドが止まってしまう](https://teratail.com/questions/30211)）

実際にScade上で発生するエラーは以下

<img width="844" alt="スクリーンショット 2020-01-13 2.29.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/89908cbe-8aea-b792-394f-1452b51324c4.png">

プロジェクトをクリーンをして、以下のandroidディレクトリを削除し
（``Library > Android > sdk > android``）

<img width="344" alt="スクリーンショット 2020-01-13 3.33.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/fbf07cba-fe64-8dea-a3f9-e95aab83ad3d.png">

Scadeでビルドし直すことで解決できます。
そうすることで、サポートライブラリが再インストールされます。
（ただし、数分時間がかかるので注意）

### 2.iOSでビルドできない時

#### Scadeのアップデートの影響

最新版のScadeにアップデートした際に、Xcodeを10系->11系にする必要があります。
（現状Scadev0.9.17以降はXcode11.x系でないとビルドできなくなった）

その際、プロジェクトファイルの**build.yamlファイル**が変わっているためにビルドできなくなります。
アップデートすべき項目をこちらです。

<img width="514" alt="スクリーンショット 2020-01-13 22.30.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/f2bf4324-6bfe-0cba-2d25-807c3107c7bd.png">

新規プロジェクトを作成し、その中にあるyamlファイルを参考に**古いプロジェクトにも項目**を追加すると良いでしょう。

### 3.ビルドが通らない時

#### コンパイルが通らない

Xcode/Android Studio同様に、Scadeではビルド高速化のために、一度ビルドしたものをキャッシュしています。
が、その部分がたまに壊れてしまいビルドできなくなることがあります。

プロジェクトを**クリーン**し、吐き出されている[products]配下を**すべて削除**して、再びビルドすると通ることが多いです。

#### インストールされない・起動しない

Androidでよく起こりますが、端末によってはインストールできないアーキテクチャがあるようなので、
x86, arm64などいずれかでビルドできないか色々試してみましょう。

また、XcodeやAndroid Studioでもあるあるですが、**再起動**や**プロジェクトクリーン**で起動することもあります笑


### git管理

リポジトリが肥大化しないために、gitignoreに以下を追加します。
（書き出されたipa, apkが含まれないようにします）

```.gitignore
.build/
.target/
products/
*.ipa
*.scadeapp
.DS_Store
CMakeLists.txt
fonts/
```

# 終わりに
「**タイトルにSwiftってあるのに記事に１文字もSwiftコードねえじゃねえか！**」

すみません、書き終わって気づきました笑
（登壇の前座資料なので、あまり触れるわけにもいかず、、）

実際にどんな感じに書いているのかは、作成した**[アプリのリポジトリ](https://github.com/crane-hiromu/ScadeKaigi2020)**をみていただくか、
公式サイトにある[サンプルコードリポジトリ](https://github.com/scadedoc/UgExamples)をみていただくのが良いかと！

iOSとAndroidで実装分けるために汚いコードも一部ありますが、、、
それも含めてご覧になっていただけると笑