[SwiftUI] OpenCV + SwiftUI でアプリを作る

環境＆対象

OpenCV

一言でいうと、画像処理のライブラリです。

OpenCV の詳細は、こちらで確認してください。

プロジェクト設定

Google してみると、ローカルにコンパイルする方法が多く解説されています。

が、簡単に使用開始できる Swift Package を使っていきます。

GitHub のページは、こちら

プロジェクト作成

普通に(?)、プロジェクトを作成します。iOS だけでなく macOS にも対応しているので、MultiPlatform プロジェクトで作成しても問題ありません。

SwiftPackage を追加

先ほどの URL を使って、Siwft Package を登録します。

プロジェクトへの設定追加

Swift Package を追加した後に、以下の設定が必要となります。

ライブラリ追加

libc++の追加

リンカー設定

-all_load　追加

これで、設定は完了です。

macOS/iOS の相違点

AppKit/UIKit では、画像データとして、NSImage/UIImage とそれぞれ別々のクラスが用意されています。

つまり、Multiplatform App として作ろうとしても、NSImage と UIImage が別々のクラスであることが理由で、異なるコードを作る必要が発生してしまいます。

例えば、以下のように宣言しておくと、NSUIImage というクラスで処理するようにコードを書くことで、実際の macOS/iOS で それぞれ NSImage/UIImage が使われるコードにすることができます。

#if os(iOS)
typealias NSUIImage = UIImage
#else
typealias NSUIImage = NSImage
#endif

実際には、上記の typealias 以外にも、メソッドの細かい引数の違い等を吸収する必要があります。

以降では、自作した NSUIBridge ライブラリを使って、実装していきます。

Github の URL は、こちら

OpenCVの初めの一歩

画像処理のコードを少し書いてみます。

Swift 版の OpenCV では、Imgproc というクラスのクラスメソッドに、OpenCV の多くのメソッドが定義されています。

また、OpenCV では、Mat と呼ばれる構造でデータを扱うようで、多くのメソッドの引数に、Mat を受け取ります。

例えば、カラー画像をグレースケール化するときに使用するときには、以下のようなコードになります。

// (1)
let image: NSUIImage = NSUIImage(named: "cat")!
// (2)
let srcMat = Mat(nsuiImage: image)
// (3)
let dstMat = Mat()
// (4)
Imgproc.cvtColor(src: srcMat, dst: dstMat, code: ColorConversionCodes.COLOR_BGR2GRAY)
// (5)
let result = dstMat.toNSUIImage()

chaining method っぽくしてみる

上記のように、書いても問題ないのですが、SwiftUI 等で慣れてきているので、chaining method っぽく書けるようにしてみます。

以下のような extension を Mat に定義します。

extension Mat {
    func cvtColor(code: ColorConversionCodes) -> Mat {
        let dstMat = Mat()
        Imgproc.cvtColor(src: self, dst: dstMat, code: code)
        return dstMat
    }
}

上記のようにすると、先ほどのコードは、以下のようにかけることになります。

image = srcMat.cvtColor(code: .COLOR_BGR2GRAY).toNSUIImage()

最初のデータを cvtColor して、イメージを取得しているということが読みやすくなっている気がします。

SwiftUI

SwiftUI との組み合わせでの例を説明します。

View の中で、openCV のロジックを記述していくのは気が引けるので、ViewModel 内に書くことにします。

class ViewModel: ObservableObject {
    @Published var image: NSUIImage = NSUIImage(named: "cat")!

    func applyOpenCV() {
        let srcMat = Mat(nsuiImage: image)
        image = srcMat.cvtColor(code: .COLOR_BGR2GRAY)
            .toNSUIImage()
        return
    }

    func reload() {
        image = NSUIImage(named: "cat")!
    }
}

@Publish 指定した image を 持ち、applyOpenCV メソッドが呼ばれると 先ほどの cvtColor 処理したイメージを image に設定するメソッドを追加しています。

テスト用に、image に初期イメージを再設定するメソッドも追加してます。

openCV を使っているので、”import opencv2″ を書き忘れないでください。

struct ContentView: View {
    @StateObject var viewModel = ViewModel()

    var body: some View {
        VStack {
            Image(nsuiImage: viewModel.image)
                .resizable().scaledToFit()
            Button(action: {
                viewModel.applyOpenCV()
            }, label: {
                Text("ApplyOpenCV")
            })
            Button(action: {
                viewModel.reload()
            }, label: {
                Text("Reload")
            })
        }
        .padding()
    }
}

View の方は、Image を使って、処理前/処理後のデータを表示しています。
さらに、openCV の処理開始用のボタン、初期イメージを再設定するボタンを配置しています。

以下のようなアプリになり、openCV の処理が適用されていることを確認できます。

まとめ

OpenCV を使用するアプリの作り方

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI 徹底入門

＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

関連記事:

[TDD][SwiftUI] SwiftUI と TDD で作る ボーリングスコアアプリ(その２ View と ViewModelの作成 Part1) [Swift][SwiftUI] actor を使って、LifeGame を作る(その6：パターン作成・保存機能) [SwiftUI] MainActor の使い所 [SwiftUI][Realm] SwiftUI と Realm で TODOApp を作る(4: Generics と KeyPath を使った command)