📸

SwiftUIでQR Code Scanをやってみる

JboyHashimoto

2024/04/13に公開

スキャンしてみたんだよ

SwiftUIでQR Codeをスキャンするのをやってみたいな〜と思い試してみました。専用のライブラリがあるようです。

こちらを使います。

CodeScanner

CodeScanner は、QR コードやバーコードなどのコードを簡単にスキャンできるようにする SwiftUI フレームワークです。すべてのスキャンが 1 か所で行われるように、シート内に表示できるビュー構造体 CodeScannerView が提供されます。

Basic usage

スキャンする型の配列と、結果の準備ができたときに呼び出されるクロージャという、少なくとも 2 つのパラメータを指定して CodeScannerView のインスタンスを作成する必要があります。

完了クロージャは Result<ScanResult, ScanError> を受け入れる必要があります。成功ケースは、見つかったコード文字列と型です。たとえば、QR コードとバーコードのスキャンを要求した場合、電子メールアドレス paul@hackingwithswift.com を含む QR コードが見つかったというメッセージが表示されることがあります。

問題が発生した場合、結果には次の 3 つのケースのいずれかに設定された ScanError が含まれます。

badInput (カメラにアクセスできない場合)
badOutput (カメラがコードを検出できない場合)
initError、初期化が失敗した場合。
重要: iOS では、カメラにアクセスする理由を提供する「プライバシー - カメラ使用の説明」キーを Info.plist ファイルに追加する必要があります。

Customization options

CodeScannerView の初期化子で、さまざまな追加のカスタマイズオプションを提供できます。

scanMode は 1 つのコードをスキャンする .once 、多数のコードをスキャンするが .oncePerCode はそれぞれの一意のコードの検索を 1 回だけトリガーする、 .continuous はスキャナを閉じるまでコードを検索し続けることができます。デフォルト: .1 回。
scanInterval は、連続スキャンモードで実行するときに個々のコードをスキャンする速度を制御します。
showViewfinder は、UI 上にボックス状のビューファインダーを表示するかどうかを決定します。デフォルト: false。
SimulatedData を使用すると、実際のスキャンが利用できない場合に、シミュレータで使用するテストデータを提供できます。デフォルト: 空の文字列。
shouldVibrateOnSuccess を使用すると、コードが見つかったときにデバイスを振動させるかどうかを決定できます。デフォルト: true。
videoCaptureDevice を使用すると、スキャンするコードに最適な別のキャプチャデバイスを選択できます。
専用の「キャンセル」ボタンなどの UI カスタマイズを追加したい場合は、CodeScannerView インスタンスを NavigationView でラップし、toolbar() 修飾子を使用して必要なボタンを追加する必要があります。

こちらの動画を見ながら設定した方が、x-codeの設定で躓くことはないかなと思います。

📦GUIで追加できます

x-code独特の設定もいるのですが、カメラを使用する許可だったりの面倒くさい設定をやっていきます。

公式のコードを参考にロジックを作ってみました。コードが古い箇所があったので修正しました。
NavigationLink -> NavigationStack

import SwiftUI
import CodeScanner

struct ContentView: View {
    @State private var isPresentingScanner = false
    @State private var scannedCode: String?
    
    var body: some View {
        VStack(spacing: 10) {
            if let code = scannedCode {
                NavigationStack {
                    NextView(scannedCode: code)
                }
            }
            
            Button("Scan Code") {
                isPresentingScanner = true
            }
            
            Text("Scan a QR code to begin")
        }
        .sheet(isPresented: $isPresentingScanner) {
            CodeScannerView(codeTypes: [.qr]) { response in
                if case let .success(result) = response {
                    scannedCode = result.string
                    isPresentingScanner = false
                }
            }
        }
    }
}

struct NextView: View {
    let scannedCode: String
    
    var body: some View {
        VStack {
            Text("Scanned QR Code:")
                .font(.headline)
            Text(scannedCode)
                .font(.title)
                .padding()
        }
    }
}

#Preview {
    ContentView()
}