20200218のiOSに関する記事は8件です。

[WIP]FirebaseでiOSアプリ開発をする時にやること備忘録

今のところ公開自分メモです。失礼いたします :bow:

Prod/Staging/Devなどの環境別にプロジェクト作成

さすがにProdしかないと本番稼動中の環境を開発でガリガリ触るのはまずいので、最低でも2環境は必要そう。

3環境用意はちゃんとした企業のプロジェクトではやった方が良いと思うが、スモールスタートや個人開発なら2環境で十分事足りそう。Xcodeの初期設定が1Schemeと2Configuration(Debug, Release)なので、設定をいじらないまま進めることもできる。

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

CocoaPodsとCarthageがある。SPMは対応予定っぽい。

Firebaseは依存ライブラリが多く、ビルドにすごく時間がかかる。なのでCocoaPodsを素で使うのは好まれない傾向がある。以下のような対策が考えられる。

1.Carthageを頑張って導入する

導入は面倒だが、設定さえ終わってしまえばビルド時間を気にせず開発できる。方法は公式でも記述されている。

2. cocopPods-binaryを使う

CocoaPodsをpod install時にバイナリにして使えるplugin。公式でも紹介されているが、スターが少なくて微妙に心配がある。あとwatchOSには使えないと書いてある。

3. そのまま使う

ビルド時間はかかるが、CocoaPodsをそのまま使っている分に関しては問題は起きない。ただエンジニア三代美徳の短気に反する選択ではありそう。

デフォルトリージョンの選択

デフォルトリージョンは一度設定したら変えられないので慎重に進める必要がある。

とはいえ、アプリをリリースしていない状況でどこからのアクセスが多いかなんて把握できないので、とりあえず東京で良さそう。
https://qiita.com/qrusadorz/items/99432fac6cbc93ebaff2

plistを適切に使うように設定

公式ドキュメントでランタイムでのplistの切り替えをやると、Analyticsの収集がFirebaseApp.config()より前に行われることもあって、挙動が壊れそうな旨が説明されているので、ビルドスクリプトで切り替えておく方が安全そう。

そのやり方はこちらに書かれている。

dsymを人が読める形式でアップロードする設定

crashlyticsが読めると、かなりデバッグが捗る。

slackに連携つなげておくと便利

外部連携が出来て、Slackにつなげておくと重要な情報とか通知送ってくれるので便利っぽい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ZshでFlutter導入してみた(Mac用)

今日Flutterを導入しようとして、手間取ってイライラしたので、この記事が他に同じことしようとしている人の助けになれば幸いです。
ZshでのFlutter導入の日本語のドキュメント、記事などは探したところありませんでした。なので、英語の記事とFlutterの公式ドキュメントを参考にさせていただきました。

最初に、こちらの2つの記事を参考にさせていただきました。(https://qiita.com/tomy0610/items/896dc8ec9ba95c33194f,
https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047)

ですが、こちらの記事はコマンドシェルにZshを採用している方用ではありません。

前提

Mac Catalina 10.15.2(Macbook pro 2019年モデル)
Xcode 11.3.1

環境構築手順

Flutter SDKのダウンロード

公式サイトでSDKをダウンロード。
最初にzipをダウンロードする場所はどこでもいいと思いますが、zipを解凍した後は解凍して出てきた、Flutterというフォルダを安全な場所に保管しましょう。(僕の場合は、userの下にdeveloperというフォルダを作って、そこに保管しました)

PATHを通す

まずTerminalを開きます。(Terminal見つけられない場合は、Spotlight Searchで検索してみてください)
Screen Shot 2020-02-18 at 8.59.28.png
こういう風に開けたらOKです。Terminalの上に家のロゴ的なものとユーザーネームがあるようにしてください。(Terminalでcdとタイプして、Enterでホームディレクトリに移動できます)

そこでPATHを通すために.zshrcをvimで開きます。

vim .zshrc

上記のコードをTerminalにコピーペーストしていただければzshrcを開けるかと思います。
そしてこのzshrcの中でflutterへのPATHを通すコードを書いていきます。

vimを開けたら、iを押してエディティングモードにします。

export PATH="$PATH:[FlutterフォルダまでのPATHを入力]/bin"

僕の場合は、Userの下のDeveloperというフォルダにflutterフォルダがあるので、コードは下のようになります。参考にしていたいただければ幸いです。

export PATH="$PATH:/Users/[僕のUSERNAME]/Developer/flutter/bin"

ご自分のPATHが入力できたら、escキーを押して、:wq!とタイプ。そしたら、元のホームディレクトリに戻れると思います。
そしたら、Terminalのタブをいったん閉じて、新しいタブを開きましょう。

ちゃんとPATHが通ったか確認しましょう。

which flutter

# 以下の様にパスが出ればOKです
/Users/[僕のUSERNAME]/Developer/flutter/bin/flutter

依存性確認

flutter doctorとTerminalでタイプし、依存性の確認をしましょう。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.2 19C57,
    locale en-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.42.0)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

上記のように表示されれば、大丈夫です。

ここでエラーが出てきても焦らないでください!

エラーが出ても、だいたいの場合は何はダウンロードしていないか、プラグインをインストールできていないだけなので、Terminalに出てくる指示にしたがってゆっくりダウンロードしていきましょう。

こちらの記事環境構築手順:おまけの章が参考になると思います。

エラーがなくなったら、環境構築完了です。お疲れ様でした!!

参考にした記事

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【iOS】UIButtonにグラデーション、サブタイトル、左右アイコンを付ける

UIButtonにグラデーション、サブタイトル、左右アイコンを付ける例を紹介。image.png
※ このコードにアイコンは付属しません

コード

import UIKit

class WideButton: UIButton {
    var stackView = UIStackView(frame: .zero)
    var gradientLayer = CAGradientLayer()
    var startColor = UIColor(red: 41/255, green: 171/255, blue: 227/255, alpha: 1)
    var endColor = UIColor(red: 41/255, green: 171/255, blue: 227/255, alpha: 1)
    var title = UILabel()
    var subtitle = UILabel()

    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.cornerRadius = self.frame.height / 2
        self.setTitleColor(UIColor.white, for: UIControl.State.normal)
        self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 18)
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        title.adjustsFontSizeToFitWidth = true
        title.baselineAdjustment = .alignCenters
        setLabelScale()
        layoutLayerFrame()
    }

    convenience init() {
        self.init(frame: CGRect.zero)
    }

    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUp()
    }

    public override init(frame: CGRect) {
        super.init(frame: frame)
        setUp()
    }

    func setUp() {
        self.setTitle("", for: UIControl.State.normal)
        stackView.alignment = .firstBaseline
        stackView.distribution = .equalSpacing
        stackView.spacing = 8
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.isUserInteractionEnabled = false
        self.addSubview(stackView)
        self.centerYAnchor.constraint(equalTo: stackView.centerYAnchor).isActive = true
        self.centerXAnchor.constraint(equalTo: stackView.centerXAnchor).isActive = true
        title.font = UIFont.boldSystemFont(ofSize: 18)
        title.textColor = UIColor.white
        title.isHidden = true
        subtitle.font = UIFont.boldSystemFont(ofSize: 15)
        subtitle.textColor = UIColor.white
        subtitle.isHidden = true
        stackView.addArrangedSubview(title)
        stackView.addArrangedSubview(subtitle)
    }

    func setTitle(_ text: String) {
        title.text = text
        title.isHidden = false
        setLabelScale()
    }

    func setSubTitle(_ text: String) {
        subtitle.text = text
        subtitle.isHidden = false
        setLabelScale()
    }

    func setGradientColors(_ start: UIColor, _ end: UIColor) {
        startColor = start
        endColor = end
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
    }

    func setLeftIcon(_ imageName: String) {
        if let iconImage =  UIImage(named: imageName) {
            let iconImageView = UIImageView(image: iconImage)
            let iconWidth = iconImage.size.width
            let iconHeight = iconImage.size.height
            iconImageView.frame = CGRect(x: 20, y: (self.frame.height - iconHeight) / 2, width: iconWidth, height: iconHeight)
            iconImageView.autoresizingMask = [.flexibleRightMargin]
            self.addSubview(iconImageView)
        }
    }

    func setRightIcon(_ imageName: String) {
        if let iconImage =  UIImage(named: imageName) {
            let iconImageView = UIImageView(image: iconImage)
            let iconWidth = iconImage.size.width
            let iconHeight = iconImage.size.height
            iconImageView.frame = CGRect(x: self.frame.width - iconWidth - 20, y: (self.frame.height - iconHeight) / 2, width: iconWidth, height: iconHeight)
            iconImageView.autoresizingMask = [.flexibleLeftMargin]
            self.addSubview(iconImageView)
        }
    }

    private func layoutLayerFrame() {
        gradientLayer.frame = self.bounds
        gradientLayer.cornerRadius = self.layer.cornerRadius
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        gradientLayer.removeFromSuperlayer()
        self.layer.insertSublayer(gradientLayer, at: 0)
    }

    private func setLabelScale() {
        let labelWidth = title.frame.width + subtitle.frame.width
        var scale: CGFloat = 1
        if labelWidth > 0 { scale = (frame.width - 100) / labelWidth }
        if scale < 1 {
            stackView.transform = CGAffineTransform.identity.scaledBy(x: scale, y: scale)
        } else {
            stackView.transform = CGAffineTransform.identity.scaledBy(x: 1, y: 1)
        }
    }
}

使い方

以下のように使えます。

ViewController
@IBOutlet weak var gradientButton: WideButton! {
    didSet {
            gradientButton.setTitle("タイトルです")
            gradientButton.setSubTitle("サブタイトル")
            gradientButton.setLeftIcon("checkIcon")
            gradientButton.setRightIcon("nextIcon")
            gradientButton.setGradientColors(.cyan, .red)
    }
}

image.png
アイコンの呼び出しにはUIImage(named: String)を使っています。
設定したい画像をAssetCatalogに用意してください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[iOS13]materializeのdropdownでリンクのタッチがずれる

materializeで個人開発してます。

Django + materializeで個人のWebアプリを作っています。
この記事はmaterializeを使っていて、うまく動かせなくて悩んだ内容の記事です。

dropdownがうまく使えない

dropdownしっていますか? あのdropdownです。
Qiitaの記事画面で編集リクエストとか出すときに使うやつです。
▼ ←こんなボタンを押すとにょいっとメニューが出てきて、リンク先に飛んだりできるやつですね。

無題.jpg

このdropdownを使って、詳細な操作を行うためのリンク先の一覧を表示していました。なぜかiOSだけタッチしたリンクとは違うところに飛んじゃって非常に悩んだので、今回記事にしました。

なお、予め断っておくと、一応直ったものの「これだ!」という決め手を得るまでには至ってないので、だれかちゃんとした解決策とか、対処法を知っていたら教えてくれると嬉しいです……。

どんな問題?

まあタイトルのとおりなんですが、ドロップダウンでタッチ位置と遷移するリンクがずれてしまいます。
わかっていることを箇条書きにすると…。

  • PCブラウザでは発生しない。
  • Chromeのデベロッパーモードスマホをエミュレートしても発生しない。
  • iOSでだけ発生する。
  • Androidで発生するかはわからない(持っていないので)

こんな感じです。

うまく動かない原因

いろいろ調べた結果の予測です。
materializeのdropdownはopen()とclose()をアニメーションで表現してくれます。dropdownは範囲内や外をタッチすると、開いたドロップダウンメニューを閉じる動作をします。

またiOSはclickイベントが発生するのに少し時間がかかる(ダブルタップやロングタップと区別するため)らしいです。
そのためiOSではclickを判定するために少々の時間が必要で、その間にdropdownのcloseのアニメーションでリンクの表示位置がずれ、タッチした箇所とは違うリンクが選択されてしまったのではないかと予測しています。
(リンクのタッチとclickイベントはまた別じゃないかとも思ったんですが、どうなんでしょう……?)

実際、dropdownのリンクをタッチしたき時、タッチした項目よりも下の項目のリンク先にジャンプすることが多く、一番下の項目は基本的にジャンプできなかったです。

とった対策

dropdownのcloseはclickイベントで処理されるので、clickよりも早い段階でページ遷移をムリヤリさせてしまいました。具体的にはdropdown内のaタグでtouchendイベントが発生したら、ページ遷移するようにしました。
touchendはタッチした指が離れた瞬間に発生するイベントでclickイベントよりも発生タイミングが早かったので、今回採用しました。

test.js
    // タッチイベント ドロップダウンリストのaタグのタッチエンドでhrefの先に飛ぶ
    $(document).on('touchend','.dropdown-content li a',function(){
        var href = $(this).attr('href');
        window.location.href = href;

        return false;
    });

結論

というわけで、一応dropdownのタッチした項目のリンク先にジャンプできるようになったので、自分はそのままにしています。
ただ、ちゃんと対応するなら、アニメーションのせいではないかと疑っているので、closeのアニメーションの速度を非常に遅くするとか、アニメーションをなくしてしまうとか、dropdown内のclickでは閉じないようにするとかの対応があったと思います。
あとはGithubにmaterializeのプロジェクトがあったので、ちゃんとissueにあげておけばよかったかなと……(英語が怖くて逃げました)。

だれかちゃんとした解決方法しってたら教えて下さい(他人任せ)。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Swiftでポートフォリオ的なもの触ってみたい。Part1

はじめに

Swift触り始めて2日目
軽いポートフォリオ的なものを作りたいなと。
完成イメージはこんな感じ。
image.png

moreを押してさらに詳しい情報をみれたりする。(未実装)

早速やっていこう。

環境

macOS Mojave ver10.14.6
Xcode 11.3.1
iPhone 11 iOS 13 (simulator)

Projectの作成

image.png
iOS->Single View App
image.png
ProductNameを書いてOrganization Indentifierを書いてNext
Createをしたら、初期コードが出てきます。

実際にやってみよう!

Tutorial.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ダブルクオートで囲まれた部分を変えればテキストが変えれます。

Tutorial.swift
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .font(.title)
    }
}

.font(.title)をつけることで上のTextに文字サイズの変更などを行えます。

要素を追加しよう!

このままだと、Textが1行しか表示されないので・・・

Tutorial.swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
            Text("System Engineer")
        }
    }
}

VStackを追加してTextも1行追加しました
このVStackはVertical Stackで囲われている要素を縦に配置するものです。
また別にHStackと言うものもありHorizontal Stack、横並びに配置するものもあります。

なぜVStack、HStackを使うのか・・・
それは、1番上のTextの要素しか表示されないのです・・・
って解釈してます。

途中経過

image.png

こんな感じ。
もうほぼ近い。

まとめ

とりあえずここまで
次は画像入れるところやります。

ステータスバーみてもらえばわかると思うんですが、もう早朝4時なんです。眠いです。
おやすみなさい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Swiftでポートフォリオ的なもの作ってみたい。Part1

はじめに

Swift触り始めて2日目
軽いポートフォリオ的なものを作りたいなと。
完成イメージはこんな感じ。
image.png

moreを押してさらに詳しい情報をみれたりする。(未実装)

早速やっていこう。

環境

macOS Mojave ver10.14.6
Xcode 11.3.1
iPhone 11 iOS 13 (simulator)

Projectの作成

image.png
iOS->Single View App
image.png
ProductNameを書いてOrganization Indentifierを書いてNext
Createをしたら、初期コードが出てきます。

実際にやってみよう!

Tutorial.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ダブルクオートで囲まれた部分を変えればテキストが変えれます。

Tutorial.swift
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .font(.title)
    }
}

.font(.title)をつけることで上のTextに文字サイズの変更などを行えます。

要素を追加しよう!

このままだと、Textが1行しか表示されないので・・・

Tutorial.swift
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
            Text("System Engineer")
        }
    }
}

VStackを追加してTextも1行追加しました
このVStackはVertical Stackで囲われている要素を縦に配置するものです。
また別にHStackと言うものもありHorizontal Stack、横並びに配置するものもあります。

なぜVStack、HStackを使うのか・・・
それは、1番上のTextの要素しか表示されないのです・・・
って解釈してます。

途中経過

image.png

こんな感じ。
もうほぼ近い。

まとめ

とりあえずここまで
次は画像入れるところやります。

ステータスバーみてもらえばわかると思うんですが、もう早朝4時なんです。眠いです。
おやすみなさい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

iOSのsafariでinput[type="file"]を見た目をいい感じにしたかった

Nuxt.jsで組んでいたアプリをiOS端末でデバッグしてみたらいい感じに動かなかったので、いろいろ探ってみて分かったことをメモ。

問題の起きたコード

とりあえずinputを非表示(display: none)にして、inputの代わりのボタンをクリックしたときに、非表示のinput要素をクリックするイベントを発火させるやつ。


See the Pen
image select(included bug)
by keyakko (@keyakko)
on CodePen.

PCでは動く。
safariではいい感じに動かない。

よくわからない動き

問題のコードでも、画像選択の画面は出てくるんですよね。
ただ、選択後にonchangeのイベントが発火されない。(alertがでない)

試しにinput要素を表示して、inputの要素をクリックしたら当たり前のようにイベントは発火されてalertは出る。
JS経由でクリックさせて、ファイル選択させてもイベント発火されないのはなんで...?

対処

とりあえず今回の対処。

1. buttonとinputの要素の順番を変える

codepenにコード書いててたまたま気づいた。完全に知識不足。


See the Pen
image select(fix pattern1)
by keyakko (@keyakko)
on CodePen.

<label>
  <button>アップロード</button>
  <input type="file" />
</label>

2. ボタンの上に透明にしたinput要素を乗せる

Buefyのソースが参考に。


See the Pen
image select(fix pattern2)
by keyakko (@keyakko)
on CodePen.

さいごに

いろいろ探すと、display:noneはちゃんと動かないからwidth:0; height:0; overflow:hidden;で対応しようねって出たりするけど、それではいい感じにならなかった。
最終的には対処方法の2番に行き着いた感じ。

話はそれるけど、iPhoneのsafariのコンソールが見たいのにsafariの開発タブにデバイスがすんなり表示されないの自分だけ...?
そっちでも苦しめられた...(ここを参考にWi-FiとBluetoothをオフにしたらなぜかちょっと表示されたけど)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

前置き

この記事自体は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

[AndroidStudio] > [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で実装分けるために汚いコードも一部ありますが、、、
それも含めてご覧になっていただけると笑

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む