【Swift】QRコードを生成する（ロゴ入り、色変更などのカスタマイズQRコード）

# ■ 概要
本記事では、

**ロゴ入り、色変更などを施したカスタマイズQRコードを生成するライブラリ**

について紹介します。

# ■ ライブラリ

今回使用するライブラリはこちら。

https://github.com/dagronf/QRCode?tab=readme-ov-file

**・QRコードの生成機能**
**・QRコードのデザインのカスタマイズ機能**
**・QRコードの読み取り機能**

などQRコードに関連する機能が
シンプルかつ簡単に利用できるドロップイン・コンポーネントとして提供されています。

(SwiftとObjective-cの両方で使用できるみたいです。)

↓

**ライブラリの機能や仕様、導入手順については
「README.md」に詳細に記載されています。
今回はその内容を掻い摘んで紹介したいと思います。**

# ■ 環境

Xcodeバージョン　：　15.3

# ■ アウトプット

まずはアウトプットから。
今回はこんな感じでQRコードをカスタマイズしてみました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/56d47495-f561-fff6-4701-cb6c5258ee42.png" width="300">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/35735b04-41cd-0bde-4654-f5f357fcc125.png" width="300">


カスタマイズのポイントとしては、それぞれの要素のカラーを
同系色はなるべく避けるように = コントラストを意識してデザインする
と検出されやすいQRコードを作成することができます。


# ■ インストール

**「Swift Package Manager」** または、**「Cocoapods」**
を使用してライブラリをインストールします。


**① Swift Package Manager**
```Package.swift
.package(url: "https://github.com/dagronf/qrcode.git", from: "18.0.0")
```

**② Cocoapods**
```:Podfile
pod 'DSF_QRCode', '~> 19.0.0'
```

# ■ 実装

### 1. QRコードの生成 （最小実装）

まずソースコード内で`import QRCode`を記述し、ライブラリをインポートします。

```swift
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
```
そしてとりあえずこの2行で、標準の白黒のQRコードが生成されます。

「WebサイトのURL」や「文字列」の情報をもとに、
サイズを指定してQRコードを生成しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/baad040b-cde6-dea8-3540-c13b67f01b1d.png" width="300">

---

### 2. QRコードの設定

① QRコードのフチの幅を変更

```swift
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.additionalQuietZonePixels = 3

let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
```
② QRコードを角丸に変更

```swift
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.design.style.backgroundFractionalCornerRadius = 3.0

let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/538f138d-770b-85c3-5638-3ddb8af5feae.png" width="300">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/2a729bc6-921d-4a74-c9b5-e7a1d1107383.png" width="300">

③ [誤り訂正レベル](https://www.cman.jp/QRcode/qr_option/level/)の指定

```swift
let doc = QRCode.Document(utf8String: "https://generosity.co.jp/")
doc.errorCorrection = .high

let cgImage = doc.cgImage(CGSize(width: 1000, height: 1000))
```
誤り訂正レベルを4段階で設定可能です。（↓こちらを参照）

https://github.com/dagronf/QRCode?tab=readme-ov-file#set-the-error-correction

特に画像の挿入などで、QRコードの隠れる部分が多くなる場合は
一番上の「レベルH」を設定することが望ましい。

---

### 3. 画像（ロゴなど）の挿入

```swift
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コードに画像（ロゴなど）を挿入することができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/08217fa7-6f17-8e3f-990a-346214a6b74f.png" width="300">

↓を参照。画像素材とマスク素材を使用し、QRコードに画像を挿入します。

（マスク素材を指定しない場合は、画像素材のアルファ値をもとに生成され使用される。）

https://github.com/dagronf/QRCode?tab=readme-ov-file#adding-a-logo-to-a-qr-code

また、↓のように位置を指定して画像を挿入することも可能です。

https://github.com/dagronf/QRCode?tab=readme-ov-file#method-2-logo-templates

---

### 4. 背景色の設定

```swift
// カスタマイズ箇所が分かりやすいように、「赤」「緑」「青」の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コードの背景色が変更されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/d32ed725-49a8-7d1c-bc5a-7dc9184c1231.png" width="300">

---

### 5. 切り出しシンボル

```swift
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コードの隅にある、目のような四角のデザインを変更できます。

①形状
②色
③背景色

の変更が可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/a34b8f71-6ca7-d223-9a86-ebcb10bbdb83.png" width="300">

「形状」の種類は、↓を参照してください。

https://github.com/dagronf/QRCode?tab=readme-ov-file#shape

---

また、中心部分も個別で「形状」と「色」が変更可能です。

```swift
doc.design.shape.pupil = QRCode.PupilShape.Circle()
doc.design.style.pupil = QRCode.FillStyle.Solid(blueColor)
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/3a771741-06a8-e584-4f6e-5772c240acab.png" width="300">

「形状」の種類は、↓を参照してください。

https://github.com/dagronf/QRCode?tab=readme-ov-file#custom-pupil-shape-optional

---

### 6. ピクセル （ドット部分）

```swift
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コードのピクセルのドット部分のデザインを変更できます。

①形状
②色、
③背景色

の変更が可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/2a8f714d-fb75-1961-9e0a-b31b20461a1c.png" width="300">

「形状」の種類は、↓を参照してください。

https://github.com/dagronf/QRCode?tab=readme-ov-file#onpixels-shape

---

### 7. ピクセル （ドット以外の部分）

```swift
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コードのピクセルの、ドットが描画されていない部分のデザインを変更できます。

①形状
②色、
③背景色

の変更が可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730387/ee48f7d8-ef01-4e40-6274-05da8ac2bc8f.png" width="300">


# ■ 最後に （感想）

今回はカスタマイズできる「変更可能な箇所」にフォーカスして、
掻い摘んで紹介させてもらいました。

デザインの形状の種類も多いですし、他にもカラーにグラデーションをかけたり、
要素に画像を設定できたりなど、カスタマイズ性がかなり高いので使っていて面白いし
実用性も高いと感じました。

最後まで読んでいただきありがとうございました。