昨日の「【Swift】「QRCodeReader.swift」ライブラリを使ってQRコードリーダ機能を実装する」という記事で、QRコードリーダー機能を実装できるライブラリ「QRCodeReader.swift」について紹介しましたが、これを導入する前に使っていたライブラリもご紹介。
上記の記事でも書きましたが、メルペイで使われている QR コードリーダーのライブラリです。
iOS のバージョンが古いと対象外になるようだったため、新しい OS でしか動かないみたいなのですが、QRコードを読み取る時のアニメーションが iOS 標準のリーダーとかなり似ているのでおすすめです!
画面の白枠が、読み取った QR コードのところにキュッと寄る感じが分かりやすい…!
GitHub はこちらから。
mercari/QRScanner: A simple QR Code scanner framework for iOS. Provides a similar scan effect to ios13+.
https://github.com/mercari/QRScanner
まず、CocoaPods でライブラリをインストールします。
podfile に下記を追加してください。
pod 'MercariQRScanner'
なお、この時 Platform が 10.0 であることを確認してください。
もし 10未満だったら下記のように変更します。
platform :ios, '10.0'
上記を追加し終わったら、pod install コマンドを実行してインストールします。
インストールが問題なく完了したら、コードを実装していきます。
サンプルコードは下記のとおりです。
QR コード読み取りボタンをタップしたら、下記の qrCodeScannerViewController() のページに遷移するように記述してください。
import UIKit
import MercariQRScanner
class qrCodeScannerViewController: UIViewController {
var qrScannerView = QRScannerView()
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// QRコードリーダを起動
qrScannerView = QRScannerView(frame: view.bounds)
view.addSubview(qrScannerView)
qrScannerView.configure(delegate: self)
qrScannerView.startRunning()
}
override func viewDidDisappear(_ animated: Bool) {
super.viewDidDisappear(animated)
qrScannerView.stopRunning()
}
func showAlert(title: String, message: String, action: UIAlertAction) {
let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
alert.addAction(action)
present(alert, animated: true, completion: nil)
}
}
extension qrCodeScannerViewController: QRScannerViewDelegate {
func qrScannerView(_ qrScannerView: QRScannerView, didFailure error: QRScannerError) {
// QRコード読み取り失敗時にアラートを表示
let ok = UIAlertAction(title: "OK", style: .default) { (action) in
self.dismiss(animated: true, completion: nil)
// ページを閉じる
self.navigationController?.popViewController(animated: true)
}
showAlert(title: "エラー", message: error.localizedDescription, action: ok)
}
func qrScannerView(_ qrScannerView: QRScannerView, didSuccess code: String) {
// QRコード読み取り成功時の処理
qrScannerView.showLoading()
let ok = UIAlertAction(title: "OK", style: .default) { (action) in
qrScannerView.hideLoading()
self.dismiss(animated: true, completion: nil)
// ページを閉じる
self.navigationController?.popViewController(animated: true)
}
showAlert(title: "成功", message: code, action: ok)
// ページを閉じる
self.navigationController?.popViewController(animated: true)
}
}
なお、読み取りに成功したら、アラートで取得した内容を表示しています。
失敗した場合は、エラーメッセージをアラートで表示します。
サンプルコードは以上です。
QR コードリーダーの起動・終了自体は、上記のコードをそのまま転載すれば動作すると思いますので、あとは読み取り成功時・失敗時の処理を変更してください。
以上、Swift の「QRScanner」ライブラリを使って、メルペイの QR コードリーダーをアプリに実装する方法についてでした。
ご参考になれば幸いです。