PaperKitの紹介

PaperKitの紹介

iOS、iPadOS、macOS、visionOSのアプリにPaperKitを導入する方法について説明します。図形や画像などのマークアップ機能をPencilKitの描画にシームレスに統合する方法、ユーザーインターフェイスをカスタマイズする方法、および将来の互換性を確保するためのベストプラクティスを紹介します。アプリに独自のマークアップ体験を追加するための高度なカスタマイズオプションについても説明します。

関連する章
- 0:00 - イントロダクション
- 1:36 - PaperKitの基本知識
- 3:35 - PaperKitの導入
- 8:37 - 機能セットのカスタマイズ
リソース
- PaperKit
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC24
- Apple Pencilを最大限に活用
WWDC20
- PencilKitの新機能
- SwiftUIの新機能
こんにちはPencil & PaperチームのエンジニアAndreeaです本セッションではPaperKitを紹介します PaperKitフレームワークは Appleのシステム全体で独自のマークアップ体験を提供しますメモ、スクリーンショット、QuickLook ジャーナルなどのアプリで使えます
どのアプリでも簡単に豊富なマークアップが行えます PaperKitには描画とさまざまなマークアップ要素を加えられるキャンバスがあります要素には図形や画像テキストボックスなどがあります描画とマークアップ要素の両方をサポートしているPaperKitはすべてのアプリに加えるのに最適で包括的なマークアップ体験を提供します
macOS Tahoeにも新しく加えられ同じく豊富なマークアップ体験を提供するのでどのmacOSアプリの描画とマークアップ要素もうまく機能しますこの新しいジャーナルアプリがその例です
最初にPaperKitの主な機能を紹介し背後にあるコアコンポーネントを説明します
次にPaperKitマークアップを簡単に皆さんのアプリに統合する方法
最後にPaperKitマークアップ体験をカスタマイズしてアプリの要件に最も適した形にする方法を説明します
まず機能に焦点を当ててデモを行いますすべてのレシピを管理して変更を加えるたびにマークアップを使い更新できるアプリを作成しましたレシピはすでに書いてあります 7歳の時から作っている大好きなルーマニア風クッキーで星の数で評価も付けてありますレシピを完成させるためにクッキーの画像を追加しますファイルアプリを開き
画像をレシピにドラッグします
見栄えを良くするために再配置します
またクルミ粉も大事な材料であるためハイライトします
PaperKitで行えることを説明したのでその3つの主要な構成要素を分解します 1つ目はPaperMarkupViewController というマークアップコントローラです PaperKitのマークアップと描画をインタラクティブに作成して表示します
2つ目はPaperMarkupと呼ばれるデータモデルコンテナです PaperKitマークアップと PencilKit描画データの保存および読み込みを処理しマークアップのレンダリングを処理します
3つ目は新しい挿入メニューでマークアップ要素を使ってキャンバスに注釈を付けられます iOS、iPadOS、visionOS 26では MarkupEditViewControllerと呼ばれます
macOSでは代替オプションは MarkupToolbarViewControllerという新しいツールバーで描画ツールと注釈用のボタンが付いています
アプリにPaperKitを導入するのは簡単です最初に iOSのレシピアプリに統合した方法を説明します次にmacOSでの手順について説明します
まずUIViewControllerをサブクラス化しました viewDidLoadメソッド内でマークアップデータモデルコンテナを初期化しましたビューの境界に一致するように構成し適切なレイアウトとレンダリングコンテキストを確保します次にマークアップコントローラを作成しますこれはPaperKitが提供する最新機能の完全セットで構成されています
それをビュー階層に追加しましたこれには標準ビューコントローラの埋め込みプロセスを使用します
ツールピッカーを作成するには PencilKitツールピッカーを初期化しマークアップコントローラをオブザーバとして登録することでツールピッカーの状態の変化に動的に応答できるようにします
アプリ内にツールピッカーを表示するため PencilKitレスポンダ状態の activeToolPickerプロパティに割り当てましたこれはUIResponderで利用可能な新しいAPIで現在のレスポンダーのツールピッカーの可視性を制御します toolPickerVisibilityプロパティを構成することでツールピッカーをアクティブにして同時に画面上の可視性を明示的に管理できますこれによりツールピッカーは非表示のまま完全に機能しダブルタップやスクイーズジェスチャーなどの操作にも反応しすべてのアプリがミニツールピッカー体験をサポートするようになりますツールピッカーの設定について詳しくは WWDC19の「Introducing PencilKit」と WWDC24の「Squeeze the most out of Apple Pencil」をご覧くださいツールピッカーを設定した後アクセサリ項目をボタンとして構成しましたタップすると挿入メニューを表示する関数がトリガーされます
メソッド内でマークアップコントローラと同じ機能セットを使用して挿入コントローラを初期化しました
次にコントローラのデリゲートをマークアップビューコントローラに設定しそれをポップオーバーとして表示するように設定次に適切な配置のためにツールピッカーに追加したバーボタン項目にポップオーバーを固定しました
最後に挿入メニューコントローラをモーダルで提示しました
macOSでの導入も同じように簡単です
マークアップモデルとマークアップコントローラの設定は基本的に同じです
macOSでの唯一の違いはツールバーを作成し挿入UIを表示できることですそこからツールバーのデリゲートをマークアップコントローラに設定しそれをビュー階層に追加しますがこれには標準NSViewControllerの埋め込みプロセスを使用します
基本設定が完了したのでここでアプリ体験の改良に不可欠ないくつかの重要な要素を検討します
PaperKitはSwiftUI環境にシームレスに統合しますコンポーネントは UIViewControllerRepresentable内にカプセル化されこれがさらに SwiftUIビューの本体に直接組み込まれますこれによりUIKitベースのコンポーネントが SwiftUIレイアウト内で使用でき両方のフレームワーク間の互換性が維持されますビューコントローラをSwiftUI環境に統合する方法の詳細は WWDC20の「What’s New in SwiftUI」をご確認ください
マークアップコントローラにはデリゲートが含まれこれによりコールバックのカスタム処理が可能になりますたとえばマークアップ変更デリゲートメソッドを実装しマークアップモデルへの変更を自動的に保存できますさらにマークアップコントローラは Observableに準拠していてデリゲート以外の方法で状態および更新を管理できます
ディスクからデータを読み込む場合前方互換性のためにコンテンツバージョンを常に検証することが不可欠ですバージョンの不一致を処理するには一般的に次の2つの方法がありますアップグレードの必要性を知らせるアラートの提示かマークアップの事前レンダリングされたサムネールの表示です
PaperKitは前方互換性を非常に簡単にするためのツールを提供しますまずサムネールをレンダリングする CGContextを作成します
次にマークアップモデルの描画関数を使用してモデルのサムネール画像を生成し
最後にマークアップと一緒に保存します
バージョンが一致しない場合にこのサムネールを表示することがベストプラクティスと考えられこれがまさにメモのようなアプリが使用しているものです
iOSとmacOSの両方における PaperKitの導入の説明でした次は思い通りのマークアップ体験を提供するためアプリをカスタマイズする方法です PaperKitで使用可能なすべてのマークアップの機能セットは FeatureSetと呼ばれますマークアップコントローラと挿入コントローラの両方に公開される機能とツールを定義します
FeatureSet.latestは PaperKitがサポートするマークアップ機能の完全なセットを提供しますこれはフレームワークに追加された新機能の最新情報を入手するための出発点として最適です
マークアップ体験をカスタマイズするには remove関数とinsert関数を使用できますこれによりアプリで使えるツールやインタラクションを完全に制御できます
HDRサポートをマークアップで有効にするには機能セットのcolorMaximumLinearExposure プロパティを 1より大きい数値に設定します SDRマークアップの場合は 1を使用します HDRインクにはこのプロパティをツールピッカーでも設定します私のアプリでは4で希望のHDR効果が得られました
colorMaximumLinearExposure で設定する値はデバイスの画面でサポートされている HDRヘッドルームにトーンマッピングされますまたは画面でサポートされている値を使用しますこれはUIScreenまたは NSScreenから取得できます
最新の機能セットを使用しアプリでHDRを有効にすることですべての新機能と体験を手に入れることができますたとえばカリグラフィーの新しいツール ReedがPencilKitに
導入されましたがこれはHDRに最適です
機能セットが要件に合わせて構成されたらカスタマイズした機能セットをマークアップコントローラと挿入コントローラの両方に割り当ててアプリのマークアップと挿入の機能全体で一貫性を確保します
もう1つのカスタマイズ可能なプロパティはマークアップコントローラのcontentViewでこれは任意のUIViewに設定できますたとえばテンプレートをアプリのフィクスチャとして使用できますすべてのマークアップと描画はその上にレンダリングされます FeatureSetをカスタマイズし背景ビューを構成し前述した改良のステップを適用することで皆さんのアプリも同じように強力かつ創造的にカスタマイズされた素晴らしいマークアップ体験をシステム全体で提供できます
次のステップです Appleのパワフルなマークアップ体験を取り入れ独自のツールとインクを使用して FeatureSetをカスタマイズし独自のコンテンツ背景を設定しマークアップにHDRサポートを追加します
軽量のメモツールを作るのか豊富で創造的なキャンバスを作るのかを問わず PaperKitは完璧な体験を作り出すツールを提供します皆さんがPaperKitでどんなアプリを作るのかとても楽しみです
ありがとうございました

// Adopt PaperKit in iOS

override func viewDidLoad() {
    super.viewDidLoad()
    
    let markupModel = PaperMarkup(bounds: view.bounds)
    let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest)
    view.addSubview(paperViewController.view)
    addChild(paperViewController)
    paperViewController.didMove(toParent: self)
    becomeFirstResponder()    

    let toolPicker = PKToolPicker()
    toolPicker.addObserver(paperViewController)
    
    pencilKitResponderState.activeToolPicker = toolPicker
    pencilKitResponderState.toolPickerVisibility = .visible
    
    toolPicker.accessoryItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(plusButtonPressed(_:)))
}

@objc func plusButtonPressed(_ button: UIBarButtonItem) {
    let markupEditViewController = MarkupEditViewController(supportedFeatureSet: .latest)    
    markupEditViewController.delegate = paperViewController
    markupEditViewController.modalPresentationStyle = .popover
    markupEditViewController.popoverPresentationController?.barButtonItem = button
    present(markupEditViewController, animated: true)
}

6:11 - Adopt PaperKit in macOS

// Adopt PaperKit in macOS

override func viewDidLoad() {
    super.viewDidLoad()
    
    let markupModel = PaperMarkup(bounds: view.bounds)
    let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest)
    view.addSubview(paperViewController.view)
    addChild(paperViewController)

    // Create toolbar for macOS
    let toolbarViewController = MarkupToolbarViewController(supportedFeatureSet: .latest)
    toolbarViewController.delegate = paperViewController
    view.addSubview(toolbarViewController.view)
    
    // Set layout
    setupLayoutConstraints()
}

7:18 - Auto-save markup changes

// Auto-save markup changes
    
func paperMarkupViewControllerDidChangeMarkup(_ paperMarkupViewController: PaperMarkupViewController) {
    let markupModel = paperMarkupViewController.markup
    Task {
        // Create a data blob and save it
        let data = try await markupModel.dataRepresentation()
        try data.write(toFile: paperKitDataURL)
    }
}

8:02 - Thumbnail for forward compatibility

// Thumbnail for forward compatibility

func updateThumbnail(_ markupModel: PaperMarkup) async throws {
    // Set up CGContext to render thumbnail in
    let thumbnailSize = CGSize(width: 200, height: 200)
    let context = makeCGContext(size: thumbnailSize)
    context.setFillColor(gray: 1, alpha: 1)
    context.fill(renderer.format.bounds)            

    // Render the PaperKit markup
    await markupModel.draw(in: context, frame: CGRect(origin: .zero, size: thumbnailSize))
    
    thumbnail = context.makeImage()
}

9:02 - Customized markup FeatureSet

// Customized markup FeatureSet
    
var featureSet: FeatureSet = .latest

featureSet.remove(.text)
featureSet.insert(.stickers)

// HDR support
featureSet.colorMaximumLinearExposure = 4
toolPicker.colorMaximumLinearExposure = 4

let paperViewController = PaperMarkupViewController(supportedFeatureSet: featureSet)
let markupEditViewController = MarkupEditViewController(supportedFeatureSet: featureSet)

10:50 - Custom background on markup controller

// Custom background on markup controller

let template = UIImage(named: "MyTemplate.jpg")
let templateView = UIImageView(image: template)
paperViewController.contentView = templateView

関連する章

リソース

関連ビデオ

WWDC24

WWDC20