【Swift】「MercariQRScanner」ライブラリでメルペイのQRコードリーダー機能を実装する

  • 2021年11月11日
  • 2021年11月11日
  • Swift, iOS

昨日の「【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 コードリーダーをアプリに実装する方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG