■ 概要
本記事では、
ロゴ入り、色変更などを施したカスタマイズQRコードを生成するライブラリ
について紹介します。
■ ライブラリ
今回使用するライブラリはこちら。
・QRコードの生成機能
・QRコードのデザインのカスタマイズ機能
・QRコードの読み取り機能
などQRコードに関連する機能が
シンプルかつ簡単に利用できるドロップイン・コンポーネントとして提供されています。
(SwiftとObjective-cの両方で使用できるみたいです。)
↓
ライブラリの機能や仕様、導入手順については
「README.md」に詳細に記載されています。
今回はその内容を掻い摘んで紹介したいと思います。
■ 環境
Xcodeバージョン ： 15.3
■ アウトプット
まずはアウトプットから。
今回はこんな感じでQRコードをカスタマイズしてみました。
カスタマイズのポイントとしては、それぞれの要素のカラーを
同系色はなるべく避けるように = コントラストを意識してデザインする
と検出されやすいQRコードを作成することができます。
■ インストール
「Swift Package Manager」 または、「Cocoapods」
を使用してライブラリをインストールします。
① Swift Package Manager
.package(url: "https://github.com/dagronf/qrcode.git", from: "18.0.0")
② Cocoapods
pod 'DSF_QRCode', '~> 19.0.0'
■ 実装
1. QRコードの生成 （最小実装）
まずソースコード内でimport QRCodeを記述し、ライブラリをインポートします。
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
そしてとりあえずこの2行で、標準の白黒のQRコードが生成されます。
「WebサイトのURL」や「文字列」の情報をもとに、
サイズを指定してQRコードを生成しています。
2. QRコードの設定
① QRコードのフチの幅を変更
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.additionalQuietZonePixels = 3
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
② QRコードを角丸に変更
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.style.backgroundFractionalCornerRadius = 3.0
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
③ 誤り訂正レベルの指定
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.errorCorrection = .high
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
誤り訂正レベルを4段階で設定可能です。（↓こちらを参照）
特に画像の挿入などで、QRコードの隠れる部分が多くなる場合は
一番上の「レベルH」を設定することが望ましい。
3. 画像（ロゴなど）の挿入
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
let logoImage = // 画像（ロゴなど）のCGImage
let logoMaskImage = // マスクのCGImage
doc.logoTemplate = QRCode.LogoTemplate(image: logoImage, maskImage: logoMaskImage)
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
QRコードに画像（ロゴなど）を挿入することができます。
↓を参照。画像素材とマスク素材を使用し、QRコードに画像を挿入します。
（マスク素材を指定しない場合は、画像素材のアルファ値をもとに生成され使用される。）
また、↓のように位置を指定して画像を挿入することも可能です。
4. 背景色の設定
// カスタマイズ箇所が分かりやすいように、「赤」「緑」「青」の3種類のカラーを用意。
let redColor = CGColor(srgbRed: 236.0/255.0, green: 107.0/255.0, blue: 68.0/255.0, alpha: 1.0)
let greenColor = CGColor(srgbRed: 42.0/255.0, green: 178.0/255.0, blue: 112.0/255.0, alpha: 1.0)
let blueColor = CGColor(srgbRed: 88.0/255.0, green: 151.0/255.0, blue: 208.0/255.0, alpha: 1.0)
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.backgroundColor(redColor)
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
QRコードの背景色が変更されます。
5. 切り出しシンボル
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.shape.eye = QRCode.EyeShape.RoundedOuter()
doc.design.style.eye = QRCode.FillStyle.Solid(redColor)
doc.design.style.eyeBackground = greenColor
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
QRコードの隅にある、目のような四角のデザインを変更できます。
①形状
②色
③背景色
の変更が可能です。
「形状」の種類は、↓を参照してください。
また、中心部分も個別で「形状」と「色」が変更可能です。
doc.design.shape.pupil = QRCode.PupilShape.Circle()
doc.design.style.pupil = QRCode.FillStyle.Solid(blueColor)
「形状」の種類は、↓を参照してください。
6. ピクセル （ドット部分）
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.shape.onPixels = QRCode.PixelShape.Star()
doc.design.style.onPixels = QRCode.FillStyle.Solid(redColor)
doc.design.style.onPixelsBackground = greenColor
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
QRコードのピクセルのドット部分のデザインを変更できます。
①形状
②色、
③背景色
の変更が可能です。
「形状」の種類は、↓を参照してください。
7. ピクセル （ドット以外の部分）
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.shape.offPixels = QRCode.PixelShape.Star()
doc.design.style.offPixels = QRCode.FillStyle.Solid(redColor)
doc.design.style.offPixelsBackground = greenColor
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
QRコードのピクセルの、ドットが描画されていない部分のデザインを変更できます。
①形状
②色、
③背景色
の変更が可能です。
■ 最後に （感想）
今回はカスタマイズできる「変更可能な箇所」にフォーカスして、
掻い摘んで紹介させてもらいました。
デザインの形状の種類も多いですし、他にもカラーにグラデーションをかけたり、
要素に画像を設定できたりなど、カスタマイズ性がかなり高いので使っていて面白いし
実用性も高いと感じました。
最後まで読んでいただきありがとうございました。