Swiftのinstance member cannot be used on typeエラーについて

Question

UIViewにextensionする形でgetImage()という関数(UIImageの型でreturn)を定義しました。

関数の内容としてはViewを画像に変換する、というものです。

それを

struct ContentView: View {

	var body: some View {
		ScrollView([.horizontal, .vertical]){
			VStack{
				Image("SampleImage")
					.frame(width:1000, height: 800)
					.aspectRation(contentMode: .fit)
					.overlay(Text("文字"))

				}
		}

	.frame(maxWidth: .infinity, maxHeight: .infinity)
		
	let image1  = UIView.getImage()

	}

}

という形で実行しようとすると

instance member 'getImage' cannot be used on type 'UIView';
did you mean to use a value of this type instead?

というエラーが発生してしまいます。

定義している関数そのものはネットの有識者の方のものを書き写させてもらい、関数自体にエラーは発生していません。

なので、おそらく私が初学者ゆえに実行そのもので何か間違っているのだと思うのですが、検索してもどうしてもわかりませんでした。

お知恵を貸していただけると幸いです。

Comments

[hoshi-takanori]

クラスとインスタンスの違いを理解する必要があるかと…。
https://terupro.net/swift-grammer-class

[Ririka]

hosi-takanori様

素早い回答ありがとうございます！
教えていただいたURLを拝見したところ、

クラス（struct)そのものを変数に代入＝インスタンス化（クラスそのものを使えるようにする？）
インスタンス化したものに対して関数を実行する

という手順が必要と考え、

let image1 = UIView().GetImage()

という形にし、黄色い警告が出てしまうので、var body: some View{}内にあったのを外に出しました。

この後、実行中に別のエラーが出てきてしまいましたがとりあえず今回質問させていただいた部分は上手くプログラムが走ったように感じています。

この認識でhoshi-takanori様に教えていただいたことを何となくでも理解できているでしょうか？

[hoshi-takanori]

文法的にはそれでコンパイルできるようになるかも知れませんが、そもそもどのビューの、どんな内容を画像にしたいのでしょうか？
let image1 = UIView().GetImage()
ってことは、新規の UIView (内容は何もない) を生成して、それを画像にするってことになりますが…。
あと、余計なお世話ですが、Swift ではメソッド名は小文字で始めるのが一般的なので、GetImage じやなくて getImage の方が良いかと。

[Ririka]

ご指摘感謝します！
getImageに変更しました！

また、メインの部分に関してまさにおっしゃる通りで「予想外のnilが出ました」というようなエラーを吐いている状態です。
本当に勉強不足でお恥ずかしい限りです。

本来は、ContentViewに表示されているImageとそこにoverlayされているTextをまとめて一つの画像にしたいと思っています。
いわゆる画像加工アプリに近いものを作りたいと思っているのですが、このContentViewでoverlayしているTextはあくまでView内で重なっているだけだと認識しており、一度UIViewをUIImageに変換する必要があると考え、試しています。

なので、初心者考えですとContentView内のImageの下でgetImage()を走らせて新しい変数に画像を入れておき、保存ボタンか何かでその変数（UIImage）を保存できる状態を作れば良いのではないかと考えていたのですが、そもそもの認識が間違っているようなので、お時間が許しましたら再度ご指摘くださるとうれしいです。

Answer 1

SwiftUIとUIKitは別物ですので、それらは区別して理解しておいた方が作業がスムーズになるかなと思いました。

View構造体は「SwiftUI」の構造体です。
https://developer.apple.com/documentation/swiftui/view
UIViewクラスは「UIKit」のクラスです。
https://developer.apple.com/documentation/uikit/uiview

質問欄のコードでは、UIViewクラスの拡張機能としてgetImage()メソッドを実装していると思います。
これを活用するとして、
ContentViewはView構造体ですので、View構造体をUIViewクラスに変換して、getImage()メソッドを呼び出してあげると良いのかなと思います。
＊JPEGにするかPNGにするかなどは画像の性質によって変えてみてください
＊サンプルではロングプレスのジェスチャーで保存するようにしていますが、要件に合わせて修正してみてください

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            VStack {
                Image("SampleImage")
                    .frame(width: 1000, height: 800)
                    .aspectRatio(contentMode: .fit)
                    .overlay(Text("文字"))
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        // ロングプレスのジェスチャーでViewを画像の形式で保存します。
        .onLongPressGesture(perform: action)
    }
    func action() {
        // (SwiftUIの)ViewをUIImageに変換します。
        let image = self.getImage()
        // UIImageをJPEGのデータに変換します。
        let data = image.jpegData(compressionQuality: 0.5)
        guard let data = data else {
            return
        }
        // ドキュメントディレクトリの中にoutput.jpgのファイルを保存します。
        let urlDocumentDirectory = try? FileManager.default.url(for: .documentDirectory, in: .userDomainMask, appropriateFor: nil, create: false)
        guard let urlDocumentDirectory = urlDocumentDirectory else {
            return
        }
        let urlJpeg = urlDocumentDirectory.appendingPathComponent("output.jpg")
        print(urlJpeg)
        do {
            try data.write(to: urlJpeg)
        } catch {
            fatalError()
        }
    }
}

extension View {
    // (SwiftUIの)ViewをUIImageに変換するメソッドです。
    func getImage() -> UIImage {
        // (SwiftUI)のViewを(UIKitの)UIViewに変換します。
        let controller = UIHostingController(rootView: self)
        let view = controller.view!
        // (UIKitの)UIViewをUIImageに変換します。
        let image = view.getImage()
        return image
    }
}

// UIViewのextensionの定義は省略...

追記です。

UIViewのextensionの定義も追記します。

画像を長押し（クリックで長押し。これでonLongPressGestureの確認方法が合っているのか検索しましたがわかりませんでした。ただ、エラーを吐くのでコードは走っていると感じます）

この操作で大丈夫だと思います。

---

UIView　extensionをどう書くべきなのか、

https://www.hackingwithswift.com/quick-start/swiftui/how-to-convert-a-swiftui-view-to-an-image

私はリンク先のコードを参考にしてみたのですが、
UIGraphicsGetCurrentContext()メソッドを使っていないためちょっと方法が違うのかもしれませんね。
＊すでに実装しているgetImage()メソッドを使わないのであれば、リンク先のようにextension Viewの拡張機能だけ実装して、extension UIViewの実装は削除する感じでも良いのかもしれませんね。
＊UIViewのextensionを実装するとしたら、ということで下にコードを記載しておきます。
＊リンク先には写真アプリのアルバムに画像を保存するメソッドも記載されているため、そちらも見てみると良いかもしれませんね。

extension UIView {
    func getImage() -> UIImage {
        let targetSize = self.intrinsicContentSize
        self.bounds = CGRect(origin: .zero, size: targetSize)
        self.backgroundColor = .clear
        let renderer = UIGraphicsImageRenderer(size: targetSize)
        return renderer.image { _ in
            self.drawHierarchy(in: self.bounds, afterScreenUpdates: true)
        }
    }
}

ちょっと調整しないといけないと思うところですが、
手元の環境で出力された画像を見ると、
上に余白ができてしまっています・・
ちょっとそれを調べるところまでできていません・・

Comments

[Ririka]

xg63ex2b様

大変丁寧なご回答ありがとうございます！
根本的に理解ができていなかったViewとUIViewの違いから、コメントアウトでの解説までとてもわかりやすく、大変ためになりました！
まだ、xg63ex2b様からいただいたコードを丸々書き写した段階ですが、一つずつ検索して理解を深めていきたいと思います。

そしてこんなにもご丁寧な回答をいただいた上で大変恐縮なのですが、実際にこのコードを実行してみたところ、画像を長押し（クリックで長押し。これでonLongPressGestureの確認方法が合っているのか検索しましたがわかりませんでした。ただ、エラーを吐くのでコードは走っていると感じます）したところ、UIViewのextension内にある

let context: CGContext = UIGraphicsGetCurrentContext()!

と言うコードで

Thread1: Fatal error: Unexpectedly found nil while unwrapping an Optional value

という中身が入っていない、というようなエラーが出てしまいました。
nilについて調べてはみたのですが、どうしても理解ができず、そして他者のコードのため丸写しして質問することもできず…。

本当におんぶにだっこで申し訳ないのですが、お時間がございましたらUIView　extensionをどう書くべきなのか、ヒントか何かいただけますと幸いです。

よろしくお願いいたします。

[Ririka]

本当に何から何までありがとうございました！！
エラーを吐かなくなりました！
まだ画像保存が上手くはいっていないのですが、いただいたコードを読み解きながら進めれば自分のミスに気づけると思うので、ここでベストアンサーにさせていただきます。

繰り返しになりますが本当に初歩的なミスに対しても、根本的に理解できていない部分の指摘からご丁寧に回答いただきありがとうございました！
本当に助かりました。
まだ実装できていませんが今回のコメントをいただけたことで一歩進めた気がします。
頑張ります！