Rork × PencilKit で Apple Pencil 対応の手書きノートアプリを作る実装ガイド

import SwiftUI
import PencilKit
 
/// SwiftUI から PKCanvasView を扱うラッパー。
/// - Note: drawingPolicy は .pencilOnly に固定。指描きを許可したい場合は外から設定できるよう拡張する。
struct CanvasRepresentable: UIViewRepresentable {
    @Binding var drawing: PKDrawing
    var isToolPickerVisible: Bool
 
    func makeUIView(context: Context) -> PKCanvasView {
        let canvas = PKCanvasView()
        canvas.drawing = drawing
        canvas.drawingPolicy = .pencilOnly
        canvas.alwaysBounceVertical = true
        canvas.delegate = context.coordinator
        canvas.backgroundColor = .systemBackground
 
        // ツールピッカーは window が確定してから表示する
        DispatchQueue.main.async {
            guard let window = canvas.window else { return }
            let picker = PKToolPicker.shared(for: window) ?? PKToolPicker()
            picker.setVisible(isToolPickerVisible, forFirstResponder: canvas)
            picker.addObserver(canvas)
            canvas.becomeFirstResponder()
        }
        return canvas
    }
 
    func updateUIView(_ canvas: PKCanvasView, context: Context) {
        // 外部から差し戻された drawing を反映する（CloudKit 同期で他端末から飛んできた更新など）
        if canvas.drawing != drawing {
            canvas.drawing = drawing
        }
        if let window = canvas.window,
           let picker = PKToolPicker.shared(for: window) {
            picker.setVisible(isToolPickerVisible, forFirstResponder: canvas)
        }
    }
 
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
 
    /// ストローク追加・削除・編集の通知を Document に戻すための Delegate
    final class Coordinator: NSObject, PKCanvasViewDelegate {
        var parent: CanvasRepresentable
        init(_ parent: CanvasRepresentable) { self.parent = parent }
 
        func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
            // SwiftUI 側の @State/@Bindable に反映させる
            // ここで毎回保存するとパフォーマンスが落ちるので debounce は外側で行う
            parent.drawing = canvasView.drawing
        }
    }
}

import UIKit
import PencilKit
 
/// PKCanvasView に取り付けて Squeeze・Hover を扱う Interaction
final class PencilProBridge: NSObject, UIPencilInteractionDelegate {
    enum SqueezeAction { case toggleEraser, toggleToolPicker, undo }
 
    weak var canvas: PKCanvasView?
    var squeezeAction: SqueezeAction = .toggleEraser
    private var savedTool: PKTool?
 
    /// 取り付け先の View に UIPencilInteraction を追加する
    func attach(to view: UIView, canvas: PKCanvasView) {
        self.canvas = canvas
        let interaction = UIPencilInteraction()
        interaction.delegate = self
        view.addInteraction(interaction)
    }
 
    func pencilInteraction(_ interaction: UIPencilInteraction,
                           didReceiveSqueeze squeeze: UIPencilInteraction.Squeeze) {
        // .ended のみ拾うことで誤検出を抑える
        guard squeeze.phase == .ended, let canvas = canvas else { return }
 
        switch squeezeAction {
        case .toggleEraser:
            if canvas.tool is PKEraserTool {
                canvas.tool = savedTool ?? PKInkingTool(.pen, color: .label, width: 3)
                savedTool = nil
            } else {
                savedTool = canvas.tool
                canvas.tool = PKEraserTool(.bitmap)
            }
        case .toggleToolPicker:
            guard let window = canvas.window,
                  let picker = PKToolPicker.shared(for: window) else { return }
            picker.setVisible(!picker.isVisible, forFirstResponder: canvas)
        case .undo:
            canvas.undoManager?.undo()
        }
    }
}

import Foundation
import PencilKit
 
/// 1ページ分のノート。複数ページのノートはこれを配列で持つ。
struct NotePage: Identifiable, Codable {
    let id: UUID
    var drawingData: Data           // PKDrawing.dataRepresentation()
    var thumbnailPath: String?      // ローカル PNG キャッシュへの相対パス
    var updatedAt: Date
 
    /// バイナリから PKDrawing を復元する
    func drawing() throws -> PKDrawing {
        try PKDrawing(data: drawingData)
    }
}
 
/// ローカルのファイルベースで Page を読み書きする最小リポジトリ
struct PageRepository {
    let baseURL: URL  // 例: Application Support/Notes
 
    func save(_ page: NotePage) throws {
        let url = baseURL.appendingPathComponent("\(page.id.uuidString).json")
        let data = try JSONEncoder().encode(page)
        try data.write(to: url, options: [.atomic])
    }
 
    func load(id: UUID) throws -> NotePage {
        let url = baseURL.appendingPathComponent("\(id.uuidString).json")
        let data = try Data(contentsOf: url)
        return try JSONDecoder().decode(NotePage.self, from: data)
    }
}

import CloudKit
import PencilKit
 
/// CKRecord と NotePage の相互変換 + 1件単位の同期
final class CloudPageSync {
    private let container = CKContainer(identifier: "iCloud.com.example.RorkNotes")
    private var database: CKDatabase { container.privateCloudDatabase }
 
    /// ローカルの NotePage を CloudKit に push する
    func push(_ page: NotePage) async throws {
        // CKAsset に変換（一時ファイルが必要）
        let tmp = FileManager.default.temporaryDirectory
            .appendingPathComponent("\(page.id.uuidString).pkdrawing")
        try page.drawingData.write(to: tmp, options: [.atomic])
 
        let recordID = CKRecord.ID(recordName: page.id.uuidString)
        let record: CKRecord
        do {
            record = try await database.record(for: recordID)
        } catch let error as CKError where error.code == .unknownItem {
            record = CKRecord(recordType: "NotePage", recordID: recordID)
        }
 
        record["drawing"] = CKAsset(fileURL: tmp)
        record["updatedAt"] = page.updatedAt as NSDate
 
        _ = try await database.save(record)
        try? FileManager.default.removeItem(at: tmp)
    }
 
    /// 変更を購読する（最初の起動時に1度だけ呼ぶ）
    func subscribeToChanges() async throws {
        let subscription = CKQuerySubscription(
            recordType: "NotePage",
            predicate: NSPredicate(value: true),
            options: [.firesOnRecordCreation, .firesOnRecordUpdate, .firesOnRecordDeletion]
        )
        let info = CKSubscription.NotificationInfo()
        info.shouldSendContentAvailable = true   // サイレントプッシュ
        subscription.notificationInfo = info
        _ = try await database.save(subscription)
    }
}

struct NotePage: Identifiable, Codable {
    let id: UUID
    var drawingData: Data
    var baseDrawingData: Data?   // 直近の push 成功時に控えた分岐点
    var thumbnailPath: String?
    var updatedAt: Date
}

import PencilKit
import UIKit
 
private extension UIColor {
    /// カラースペースの差を丸めて比較できる文字列にする
    var strokeKeyString: String {
        var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
        getRed(&r, green: &g, blue: &b, alpha: &a)
        return String(format: "%.3f,%.3f,%.3f,%.3f", r, g, b, a)
    }
}
 
struct StrokeKey: Hashable {
    let createdAt: TimeInterval
    let inkType: String
    let color: String
    let pointCount: Int
    let origin: String
 
    init(_ stroke: PKStroke) {
        createdAt = stroke.path.creationDate.timeIntervalSince1970
        inkType = stroke.ink.inkType.rawValue
        color = stroke.ink.color.strokeKeyString
        pointCount = stroke.path.count
        let p = stroke.path.first?.location ?? .zero
        // 端末間の浮動小数差を吸収するため小数第2位で丸める
        origin = String(format: "%.2f,%.2f", p.x, p.y)
    }
}

func mergeThreeWay(base: PKDrawing, local: PKDrawing, server: PKDrawing) -> PKDrawing {
    func keyed(_ drawing: PKDrawing) -> [StrokeKey: PKStroke] {
        Dictionary(drawing.strokes.map { (StrokeKey($0), $0) },
                   uniquingKeysWith: { first, _ in first })
    }
 
    let b = keyed(base), l = keyed(local), s = keyed(server)
 
    let removedByLocal  = Set(b.keys).subtracting(l.keys)
    let removedByServer = Set(b.keys).subtracting(s.keys)
    let survivors = Set(b.keys)
        .subtracting(removedByLocal)
        .subtracting(removedByServer)
 
    let addedByLocal  = Set(l.keys).subtracting(b.keys)
    let addedByServer = Set(s.keys).subtracting(b.keys)
 
    var merged: [PKStroke] = survivors.compactMap { b[$0] }
    merged += addedByLocal.compactMap { l[$0] }
    merged += addedByServer.compactMap { s[$0] }
    merged.sort { $0.path.creationDate < $1.path.creationDate }
 
    return PKDrawing(strokes: merged)
}

func push(_ page: NotePage) async throws -> NotePage {
    var page = page
    do {
        try await save(page)
    } catch let error as CKError where error.code == .serverRecordChanged {
        guard
            let serverRecord = error.userInfo[CKRecordChangedErrorServerRecordKey] as? CKRecord,
            let asset = serverRecord["drawing"] as? CKAsset,
            let url = asset.fileURL
        else { throw error }
 
        let serverDrawing = try PKDrawing(data: Data(contentsOf: url))
        let localDrawing  = try page.drawing()
        // 分岐点が無い初回は、すべてを「追加」として扱う
        let baseDrawing   = try page.baseDrawingData.map { try PKDrawing(data: $0) } ?? PKDrawing()
 
        let merged = mergeThreeWay(base: baseDrawing, local: localDrawing, server: serverDrawing)
        page.drawingData = merged.dataRepresentation()
        page.updatedAt = Date()
        try await save(page, into: serverRecord)   // サーバー側レコードに載せ替えて再送
    }
    page.baseDrawingData = page.drawingData   // 成功した版が次の分岐点
    return page
}

func testMergeKeepsRemoteAdditionAndHonorsLocalDeletion() throws {
    let a = stroke(at: 0), b = stroke(at: 1), c = stroke(at: 2)
    let base   = PKDrawing(strokes: [a, b])
    let local  = PKDrawing(strokes: [a])        // こちらは b を消した
    let server = PKDrawing(strokes: [a, b, c])  // 相手は c を足した
 
    let merged = mergeThreeWay(base: base, local: local, server: server)
    let keys = Set(merged.strokes.map(StrokeKey.init))
 
    XCTAssertTrue(keys.contains(StrokeKey(c)))   // 相手の追加は残る
    XCTAssertFalse(keys.contains(StrokeKey(b)))  // こちらの削除は尊重される
}

import Vision
import PencilKit
import UIKit
 
/// PKDrawing から OCR テキストを抽出する
struct HandwritingOCR {
    /// 1ページぶんの drawing を 1024px 幅の画像にして OCR にかける
    static func recognize(_ drawing: PKDrawing) async throws -> [String] {
        let bounds = drawing.bounds.isEmpty
            ? CGRect(x: 0, y: 0, width: 1024, height: 1024)
            : drawing.bounds
        let scale = 1024.0 / max(bounds.width, 1)
        let image = drawing.image(from: bounds, scale: scale)
 
        guard let cgImage = image.cgImage else { return [] }
        let request = VNRecognizeTextRequest()
        request.recognitionLevel = .accurate
        request.usesLanguageCorrection = true
        request.recognitionLanguages = ["ja-JP", "en-US"]
 
        let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
        try handler.perform([request])
        let observations = request.results ?? []
        return observations.compactMap { $0.topCandidates(1).first?.string }
    }
}

import PDFKit
import PencilKit
 
/// PDF の各ページに対して PKDrawing を重ねる
final class AnnotatedPDFController {
    private let pdfView: PDFView
    private var canvases: [Int: PKCanvasView] = [:]
 
    init(pdfView: PDFView) { self.pdfView = pdfView }
 
    /// 指定ページに PencilKit のキャンバスを重ねる
    func attachCanvas(at pageIndex: Int) {
        guard let page = pdfView.document?.page(at: pageIndex) else { return }
        let pageBounds = pdfView.convert(page.bounds(for: .mediaBox), from: page)
 
        let canvas = PKCanvasView(frame: pageBounds)
        canvas.drawingPolicy = .pencilOnly
        canvas.backgroundColor = .clear
        canvas.isOpaque = false
        pdfView.addSubview(canvas)
        canvases[pageIndex] = canvas
    }
 
    /// 注釈を焼き込んだ PDF を書き出す
    func exportFlattened(to url: URL) throws {
        guard let document = pdfView.document else {
            throw NSError(domain: "AnnotatedPDF", code: -1)
        }
        for index in 0..<document.pageCount {
            guard let page = document.page(at: index),
                  let canvas = canvases[index] else { continue }
            let image = canvas.drawing.image(from: canvas.bounds, scale: UIScreen.main.scale)
            let annotation = PDFAnnotation(bounds: page.bounds(for: .mediaBox),
                                           forType: .stamp,
                                           withProperties: nil)
            annotation.image = image
            page.addAnnotation(annotation)
        }
        document.write(to: url)
    }
}

import os.signpost
 
extension OSLog {
    static let canvas = OSLog(subsystem: "com.example.RorkNotes", category: "Canvas")
}
 
func makeUIView(context: Context) -> PKCanvasView {
    os_signpost(.event, log: .canvas, name: "PKCanvasView created")
    // ...残りの初期化
}

import UIKit
 
enum PencilGeneration {
    case unknown, firstGen, secondGen, usbC, pro
}
 
final class PencilDetector {
    private(set) var generation: PencilGeneration = .unknown
 
    func update(from interaction: UIPencilInteraction) {
        // Squeeze 対応は Pro のみ
        if #available(iOS 17.5, *), interaction.prefersSqueeze {
            generation = .pro
            return
        }
        // ダブルタップは第2世代と Pro が対応。USB-C 版は非対応
        if interaction.prefersTap {
            generation = .secondGen
        } else {
            generation = .usbC
        }
    }
}

import XCTest
import PencilKit
@testable import RorkNotes
 
final class NotePageTests: XCTestCase {
    func testRoundTripSerialization() throws {
        let stroke = PKStroke(
            ink: PKInk(.pen, color: .black),
            path: PKStrokePath(controlPoints: [
                PKStrokePoint(location: CGPoint(x: 0, y: 0),
                              timeOffset: 0,
                              size: CGSize(width: 3, height: 3),
                              opacity: 1, force: 1, azimuth: 0, altitude: .pi / 2)
            ], creationDate: Date())
        )
        let drawing = PKDrawing(strokes: [stroke])
        let page = NotePage(id: UUID(),
                            drawingData: drawing.dataRepresentation(),
                            thumbnailPath: nil,
                            updatedAt: Date())
 
        let restored = try page.drawing()
        XCTAssertEqual(restored.strokes.count, 1)
    }
}