[SwiftUI][Image] イメージ処理アプリを作る（４）

SwiftUI を使ったイメージ処理アプリを作ってみます

Sponsor Link

環境＆対象
本シリーズ内容
この記事で作る範囲
写真をドロップできるようにする
この記事でできたこと
現在のアプリ
次回

環境＆対象

以下の環境で動作確認を行なっています。

macOS Big Sur 11.1
Xcode 12.3

本シリーズ内容

SwiftUI を使って、イメージ処理するアプリを作ります。

[SwiftUI][Image] イメージ処理アプリを作る（１）

[SwiftUI][Image] イメージ処理アプリを作る（２）

[SwiftUI][Image] イメージ処理アプリを作る（３）

[SwiftUI][Image] イメージ処理アプリを作る（４）

以下の理解が進むことがゴールです。

SwiftUI を使ったアプリ開発
NSImage を使った画像処理全般
Photos 拡張編集機能と SwiftUI app の組み合わせ方
イメージ処理アプリも TDD で進めることが可能かどうか
その他 macOS app 開発 Tips

この記事で作る範囲

最初に、画像の上にメガネを重ねて表示することができました。

その後、メガネをドラッグすることで位置変更できるようにし、追加で、サイズ変更もできるようにしてきました。

今回は、別の画像の上にメガネを重ねることができるようにします。

一言で言うと、別画像のファイルをドロップすることで、画像を入れ替える機能をつけます。

画像ファイルをドロップされたら、その写真を表示する

写真をドロップできるようにする

やること

写真ファイルをドロップすると、その画像を表示できるようにします。

ドロップされる要素への対応は、SwiftUI では onDrop で行うことができます。

テスト

テストが難しいです。

実装機能はシンプルなのですが、外部からファイルをドロップする方法がわかりません・・・・・

Finder で新規ウィンドウを開くことまではできるようになったのですが、特定のフォルダまで移動できないので、ドロップできるファイルまで辿り着けません。

＃方法がわかったらこの記事をアップデートします。

なので、今回はテストコードは無しです。
手動でテストすることとします。

テスト項目は、以下を想定します。
「画像ファイル(JPG)をドロップしたら、置き換わる」
「画像ファイル(PNG)をドロップしたら、置き換わる」
「画像でないファイルをドロップしたら、無視される」

アプリ実装

以前の記事でも説明しています。

[SwiftUI] SwiftUIのビュー上へのドロップの実装

UITest を作るのは難しいですが、アプリの実装自体は簡単です。

ContentView


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/01/19
//  © 2021  SmallDeskSoftware
//

import SwiftUI
import UniformTypeIdentifiers

struct MainView: View {
    @State private var image:NSImage = NSImage(named: "initialPhoto")!
    @State private var isTargeted = false

    var body: some View {
        ZStack {
            Image(nsImage: image).resizable().scaledToFit().frame(width: 500, height: 500)
                .accessibility(identifier: "mainImage")
                // (1)
                .onDrop(of: [UTType.fileURL], isTargeted: $isTargeted) { (providers) -> Bool in
                    guard let provider = providers.first else { return false } // handle first item only
                    // (2)
                    provider.loadItem(forTypeIdentifier: kUTTypeURL as String, options: nil) { (url, error) in
                        // (3)
                        DispatchQueue.main.async {
                            if let url = url as? Data {
                                // (4)
                                let imageURL = NSURL(absoluteURLWithDataRepresentation: url, relativeTo: nil) as URL
                                if let localImage = NSImage(contentsOf: imageURL) {
                                    // (5)
                                    image = localImage
                                }
                            } else if let error = error {
                                print(error)
                            }
                        }
                    }
                    return true
                }
            GlassImage()
        }
        .padding()
    }
}

// ContentView.swift

// Created by : Tomoaki Yagishita on 2021/01/19

import SwiftUI

import UniformTypeIdentifiers

struct MainView: View {

@State private var image:NSImage = NSImage(named: "initialPhoto")!

@State private var isTargeted = false

var body: some View {

ZStack {

Image(nsImage: image).resizable().scaledToFit().frame(width: 500, height: 500)

.accessibility(identifier: "mainImage")

// (1)

.onDrop(of: [UTType.fileURL], isTargeted: $isTargeted) { (providers) -> Bool in

guard let provider = providers.first else { return false } // handle first item only

// (2)

provider.loadItem(forTypeIdentifier: kUTTypeURL as String, options: nil) { (url, error) in

// (3)

DispatchQueue.main.async {

if let url = url as? Data {

// (4)

let imageURL = NSURL(absoluteURLWithDataRepresentation: url, relativeTo: nil) as URL

if let localImage = NSImage(contentsOf: imageURL) {

// (5)

image = localImage

}

} else if let error = error {

print(error)

}

return true

}

GlassImage()

}

.padding()

}

コード解説

.onDrop modifier でドロップを受け取ります
NSItemProvider の loadItem を使って、ドロップされた情報を受け取ります
UI 更新が必要となるため、main キューで操作します
ファイルの URL が渡されるので、そこから NSImage を作ります
NSImage を作ることができたら、表示イメージにセットします

この記事でできたこと

イメージのファイルをドロップすることで、画像を置き換える

現在のアプリ

以下のような動作です。

次回

次回以降は現在の機能を Photos の拡張機能としても使えるようにアプリを変更していきます。

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