Core NFCでNFCタグ読み取りを実装した流れで、以前から興味のあったPencilKitによる手書き入力機能にも挑戦してみました。
1. ツールバーが自動で表示されると思い込んでいた
最初、PKCanvasViewを配置するだけで、ペンや消しゴムを選ぶツールバーも自動的に出てくるものだと思っていました。
let canvasView = PKCanvasView()
view.addSubview(canvasView)このコードだけを書いて実行しても、まっさらな描画エリアが表示されるだけで、ツール選択用のUIはどこにも出てきませんでした。調べてみると、ツールバー（PKToolPicker）はキャンバスとは別の仕組みで、明示的に表示状態にしてキャンバスに紐付ける必要があると分かりました。
2. ツールピッカーの紐付けを忘れて反応しなかった
ツールピッカーの存在を知り、コードを追加したものの、画面をタップしてもツールバーが表示されませんでした。
不足していた設定:
キャンバスをfirstResponderにする処理PKToolPickerを表示させるには、対象のPKCanvasViewをウィンドウのfirstResponderにする必要があることが分かりました。この設定を追加したところ、画面下部にペンや消しゴムを選べるツールバーが正しく表示されるようになりました。
3. 描画データの保存方法が分からず画像として保存していた
手書きした内容を保存したいと考え、最初は描画結果をそのまま画像化してファイルに保存する方法を取っていました。
let image = canvasView.drawing.image(from: canvasView.bounds, scale: 1.0)この方法でも見た目は保存できるのですが、後から再編集（線の追加・消去のやり直し）ができないことに気づきました。調べてみると、PKDrawing自体をデータ化して保存すれば、後でPKCanvasViewに読み込ませることで編集可能な状態を復元できると分かり、画像ではなく描画データそのものを保存する方式に変更しました。
4. 指描画とApple Pencilの区別で戸惑った
アプリを試してもらったところ、指で描画できてしまうことに驚かれ、意図しない誤操作の原因になっていました。
canvasView.drawingPolicy = .pencilOnly初期状態では指描画も許可される設定になっていることを知らず、意図せず誤操作を招いていました。drawingPolicyをApple Pencil専用に設定することで、指が触れても描画されず、意図した操作性に近づけることができました。
まとめ
- ツールバー（
PKToolPicker）はキャンバスとは別の仕組みで、明示的に表示・紐付けが必要 - ツールピッカーを表示させるには、キャンバスをfirstResponderにする設定が必要
- 再編集可能な形で保存したい場合は、画像ではなく
PKDrawingのデータをそのまま保存する - 初期設定では指描画も可能なため、用途に応じて
drawingPolicyで入力方法を制御する
見た目はシンプルなキャンバスでも、実際の設定項目は思ったより細かく、UIとデータの両方を意識して実装する必要があると学びました。
本記事は生成AI（Claude）を活用して執筆・編集しています。内容は実体験に基づき、執筆者本人が確認・監修しています。
コメント