LoginSignup
101

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-02-17

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

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

・資料

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

・セッション

前置き

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

DroidKaigi2020に応募したCFP
「Scadeを使って「Swift」で始めるAndroidアプリ開発」
が通ったため、だいぶ温めてからの公開になりました、、笑

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

内容

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

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

周りを記載しています。

What is Scade ?

スクリーンショット 2020-02-17 23.26.10.png

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

どんな物が作れる?

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

74605697-c2a15880-510d-11ea-8edf-7c0883e3eaa2.png

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

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

アプリのリポジトリを用意してあるので、詳しくはそのReadmeを見れいただけると!

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

開発環境構築

Scade公式のMacへのインストール方法

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

1. インストール

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

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

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

① Android Studioを起動

00.png

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

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

11.png

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

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

22.png

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

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

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

a.png

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

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

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

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

スクリーンショット 2020-01-13 19.02.50.png

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

スクリーンショット 2020-01-14 0.52.14.png

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

4. Scadeのセットアップ

1. パスの設定をする

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

scade.png

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

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

スクリーンショット 2020-01-12 21.13.53.png

5. 「HelloWorld」する

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

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

h-1 2.png

②ラベルの設置

h-3.png

③ビルドする端末を選択

h-4.png

④HelloWorld!

h-5.png

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

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

その他

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

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

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

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

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

スクリーンショット 2020-01-12 22.12.10.png

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

スクリーンショット 2020-01-12 22.12.18.png

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

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

普通にAndroidの開発をしていた場合でも発生するエラーですが、、
Androidでのビルドが止まってしまう

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

スクリーンショット 2020-01-13 2.29.36.png

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

スクリーンショット 2020-01-13 3.33.10.png

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

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

Scadeのアップデートの影響

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

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

スクリーンショット 2020-01-13 22.30.22.png

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

3.ビルドが通らない時

コンパイルが通らない

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

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

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

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

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

git管理

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

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

終わりに

タイトルにSwiftってあるのに記事に1文字もSwiftコードねえじゃねえか!

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

実際にどんな感じに書いているのかは、作成したアプリのリポジトリをみていただくか、
公式サイトにあるサンプルコードリポジトリをみていただくのが良いかと!

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
101