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)
    }
}

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)
    }
}