見出し画像

SwiftUIでいこう！ - QRコードアプリ - 1

donguri

https://www.youtube.com/watch?v=URe1Jte3JQg

https://www.youtube.com/watch?v=Xth0wjoL428


YouTubeで公開されているチュートリアルを実際にコードを書いて試していきます。

新規ファイルを作ってQRコードを実際に作成するコードを作っていきます。
まず必要なライブラリをインポート

import SwiftUI
import CoreImage.CIFilterBuiltins

そして表示部分。"QRコード"と表示させて下に作成したQRコードを表示させます。

    var body: some View {
        VStack{
            Text("QRコード")
            Image(uiImage: generateQR(from:text))
        }
    }

あとは以下作成する関数

generateQR(from:"文字列"))

を定義します。

 func generateQR(from string:String) -> UIImage{
        let context = CIContext()
        let filter = CIFilter.qrCodeGenerator()
        let data = Data(string.utf8)
        filter.setValue(data, forKey: "inputMessage")
        if let outputimage = filter.outputImage{
            if let cgImage = context.createCGImage(outputimage, from: outputimage.extent){
                return UIImage(cgImage: cgImage)
            }
        }
        
        return UIImage(systemName: "xmark.circle") ?? UIImage()
        
    }

必要なものはまず"CIContext()"

CIContextでのCIImageからUIImageへの変換することができるようになります。

そして"qrCodeGenerator()"を使います。


  if let cgImage = context.createCGImage(outputimage, from: outputimage.extent){
                return UIImage(cgImage: cgImage)
            }
        }

ここでUIImageに変換。


QRコード生成した場合はそれを、なければSFシンボルを表示します。

return UIImage(systemName: "xmark.circle") ?? UIImage()

完成したら大枠で以下となるので

import SwiftUI
import CoreImage.CIFilterBuiltins


// 省略

#Preview {
    QRView()
}

Xcodeを使っているので簡単にプレビュー画面に表示できます。

#Preview {
　　　QRView()
}

この部分を使って必要なデータを入れることでプレビューできます。以下の部分を変更することで試すことができます。

#Preview {
           QRView(text: "")
}

text: ""を追加して""の中に好きな文字を入れてみるとプレビュー画面にすぐに反映されてQRコードを作成されているのが確認できます。例えば

#Preview {
    QRView(text: "あ")
}

"あ"と打つと少し待てばプレビューに反映されます。

参考

この記事が気に入ったらサポートをしてみませんか？