Apple Pencilを最大限に活用

Apple Pencilを最大限に活用

iOS 18、iPadOS 18とvisionOS 2の新機能として、PencilKitツールピッカーでカスタム属性を使用し、包括的なカスタムツールを利用できるようになりました。システム全体におけるツール選択と同等の優れた体験をもたらすツールピッカーで、カスタムの描画体験を実現する方法を確認しましょう。ロール角度、スクイーズジェスチャ、触覚フィードバックなど、Apple Pencil Proに搭載された新機能の利用方法もご紹介します。

関連する章
- 0:00 - Introduction
- 1:16 - Configuring the tool picker
- 5:20 - Custom tools in the tool picker
- 8:47 - Apple Pencil Pro features and APIs
リソース
関連ビデオ

WWDC20
- iPad用Scribbleの紹介
- PencilKitにおける描画の確認、修正、組立
WWDC19
- PencilKitの紹介
ダウンロード

こんにちは Samです描画機能を担当するソフトウェアエンジニアですこのセッションでは PencilKitツールピッカーと Apple Pencil APIの進化について説明しますこれによりアプリで表現力豊かな描画を行えるようになります PencilKitを使用すると豊かな描画体験を非常に簡単に生み出すことができますまた PencilKitツールピッカーはプラットフォームの最新機能をすべて統合できます iPadで非常にうまく機能し応答性の高いピッカーとしてさまざまな描画や手書きのワークフローに合わせて調整できます iPhoneではドッキングにより利用可能なスペースにすべてのツールとコントロールが表示されます
Apple Vision Proではウインドウのすぐ外側に浮かぶオーナメントとして表示されますそして Apple Pencil Proでは手がどこにあってもスクイーズするだけで PencilKitツールピッカーを利用できるようになりましたまずアプリに適したツールセットで構成できるツールピッカーの新機能について説明します次にカスタムツールをツールピッカーに直接組み込む方法を紹介しますそして最後に描画体験を Apple Pencil Proに統合するための新しいAPIをいくつか紹介しますまずツールピッカーの新機能のデモを見てみましょう開発中のアプリで猫の絵を描きましたこのアプリでは PencilKitで描いたストロークの横に動物の形をスタンプできますこのプロジェクトのソースコードはこのセッションのリソースで入手可能です私のアプリにはペンや消しゴムなどのツールだけでなく動物ツールもあります動物ツールをタップすると色サイズそしてカスタムシェイプのピッカーのコントロールが表示されますこのツールのさまざまなプロパティを変更するとピッカー内のアイテムが選択したものに応じてを更新されます
さらに Apple Pencil Proのスクイーズなどの機能もきちんとサポートされておりコードを追加する必要はありませんスクイーズするとカスタムツールが PencilKitツールと一緒に円弧状に表示されますスタンプのプロパティを調整してそれぞれの猫にぴったりの足跡を完成させます
私のスタンプツールは Apple Pencil Proのバレルロール角度に対応しているため足跡を正確に回転させて配置できますいいですねこれでこのボタンをタップするとツールピッカー内で直接絵にサインできます
iOS 13以降 PKToolPickerは PencilKitツールのフルセットを使用して簡単に初期化できるようになりましたアプリにPKToolPickerを追加する方法については「Introducing PencilKit」セッションで基本事項をご確認ください iPadOS 18およびvisionOS 2の新機能としてツールピッカーで使用可能なツールを定義できるようになりましたツールピッカーは PKCanvasViewや独自の描画キャンバスまたはその両方と組み合わせて使うことができます
インクツールを使用して PKCanvasViewにストロークを描画するツールを作成する場合は同じ種類のツールを複数含めることもできます例えばこれは注釈用のアプリで 2色のペンや2色のマーカーを表示する場合に最適です PKToolPickerItemには様々な種類がありピッカーに必要なあらゆるものを提供できます新しい toolItemsイニシャライザを使用してアプリに合わせて順序やツールセットをカスタマイズできますインク消しゴムなげなわツールのアイテムには対応するPKToolがありますこれらは PencilKitがキャンバス上に何かを描画するために使用するツールですキャンバスビューがツールピッカーのオブザーバとして設定されている場合これらのツールは自動的に PKCanvasViewのツールプロパティに設定されますルーラーは他のアイテムとは異なりますタップすると選択される代わりにオンとオフが切り替わりますルーラーアイテムには対応するPKToolはありませんキャンバスに何も描画しないからですこのアイテムがタップされると監視中のPKCanvasViewにより isRulerActiveプロパティが自動的に切り替わります
またはツールピッカーのオブザーバを使用してカスタムキャンバスのルーラーを切り替えます
スクリブル機能は Apple Pencilの手書き入力を自動的にテキストに変換するのに最適です
スクリブルアイテムをピッカーに追加するとスクリブルと描画機能を 1か所に統合してペンシルモードを切り替えることができますスクリブルツールを選択するとカラーウェルがキーボードのショートカットバーのコントロールに置き換えられますスクリブルツールはスクリブルを有効にする Apple Pencil設定の環境設定に応じて自動的に非表示になりますアプリでスクリブルを設定する方法の詳細は「Meet Scribble for iPad」セッションでご確認くださいカスタムアイテムを使用すれば PKToolPickerで PencilKit以外のあらゆるツールを使用できます例えばこれは先ほど紹介したスタンプツールですがこのツールはアプリが提供するものなら何でもかまいませんカスタムアイテムについては後ほど詳しく説明しますまた iPadOS 18と visionOS 2の新機能として PKToolPickerではアクセサリのUIBarButtonItemを後端に設定できるようになりましたこのボタンは描画ツール以外のキャンバスアクションを表示するために使います例えばテキストボックスの挿入や背景の設定などですここで提供するアクションはアプリのUIの他の場所でも使用できなければなりませんピッカーを最小化するとこのボタンは非表示になるからです次に描画キャンバスからツールピッカーのツールを作成する方法について説明します PKToolPickerはこれまで PKCanvasViewで使用するツールを選択する最良の方法として利用されてきました今ではカスタムツールによりツールピッカーは自分の描画ツールにも使用できるようになりました
PKToolPickerは PKCanvasView 独自の描画キャンバスまたはその両者の組み合わせとともに使用できますカスタムツールを使えばシステムペンシルツールをアクションに統合し動物のスタンプの例のようなアクションや描画によって制御される写真レタッチツールなどでキャンバスをユニークにすることができます
カスタムツールアイテムを選択すると監視中のPKCanvasViewで描画がオフになりますカスタムツールではアプリがレンダリングを行い PencilKitがツールの選択を行います
PKToolPickerCustomItemとそのConfigurationを使用するとツールの機能に適合する独自のアイテムを作成できます Configuration構造体を使用してツールがサポートするプロパティを定義します PencilKitが提供する色と幅のプロパティのコントロールはツールの動作に合わせて構成できますその他のプロパティについてはビューコントローラを渡してさらに多くのコントロールを表示します PencilKitはクロージャに提供した事前レンダリング済みの画像を使用してピッカーにカスタムツールアイテムを表示します
PencilKitは幅や色不透明度が変更されるたび新しい画像を取得するためにこのクロージャを呼び出しますカスタム属性が変更された時に呼び出す必要がある reloadImageメソッドもありますツール画像ではツールのプロパティをどのように表現できるか検討してください UILabel.drawText(in:)はテキストインジケータをツールに描画するのに最適ですたとえば不透明度の値を表す場合です最後に Apple Pencil Proのパワフルな機能をアプリで活用する方法を紹介します Apple Pencil Proはアプリでの描画体験をさらに向上させる膨大な数の新機能を備えています例えば私がNotesで計画しているこのサルサガーデンにいくつか簡単な変更を加えたいと思いますコリアンダーのラベルに下線を引くのに最適なツールを選ぶため Apple Pencil Proをスクイーズするとマウスをホバーしている場所にツールピッカーが表示されますペンツールの色を変更し下線を引きます
気に入らないので取り消して代わりにハイライト表示にします Apple Pencil Proをスクイーズし取り消しボタンを長押ししてスライダを表示しますこれでスライドするだけで複数の操作を取り消すことができます
もう一度スクイーズしてマーカーツールに切り替えます Apple Pencilを使用するとさまざまな動きで表現力豊かなストロークを簡単に作成できます高さや傾きを変更したり筆圧を変えてみることもできます
Apple Pencil Proではバレルを回転させることで創作を進められるようになりました
アプリでPKCanvasViewを使用している場合はマーカーと万年筆でこれを実行できます Apple Pencil Proを使用する場合バレルを回転させるとストロークの角度を制御できますすべてのPencilKitツールでは Apple Pencil Proをホバーするとその下に特定のツールを表す影が表示されますマーカーツールを使用してコリアンダーのラベルをハイライトしますストロークの最後に一時停止して図形認識をトリガしますトリガされると触覚フィードバックが手に伝わり認識が成功したことがわかりますスナップが生き生きしますね NotesはPencilKitを使用してこの緊密な統合を実現していますが独自のカスタム描画キャンバスと統合するためのAPIセットも豊富に用意されていますまず新しい取り消しスライダを見てみましょう Apple Pencil Proの新機能であるスクイーズジェスチャを使用するとスライダにアクセスして取り消し／やり直しの履歴をすばやく操作できますこれは PKToolPickerを使っていない場合でもすべてのアプリで使用できますこの動作を抑制したい場合はスクイーズアクションに応答するメソッドを実装するデリゲートを使用して UIPencilInteractionをインストールします描画機能を備えたアプリではスクイーズによってペンを離すことなくアプリを操作できるという新たな機能が加わりました
スクイーズを個別のアクションを実行する単一のジェスチャとして扱うことでアプリの使いやすさが向上しますデバイスのグローバル環境設定では Apple Pencil Proがスクイーズされた時にアプリが行うべき動作を指定できますこれにはコンテキストツールパレットの表示やシステムショートカットの実行といった新しいオプションも含まれます
ただしショートカットを実行するように設定されている場合アプリにスクイーズイベントは送信されません UIPencilInteractionはサポートされているデバイスでアプリにダブルタップまたはスクイーズイベントを送信する時にペンシルのホバーポーズ情報も送信するようになりましたポーズはディスプレイ上の Apple Pencil Proの配置場所を示しますこれには画面上の位置画面からのZオフセット傾き高さロール角度が含まれます PencilKitは PKToolPickerをスクイーズから表示する時にこのポーズ情報を使用して PKToolPickerを配置しますこの情報は独自のツールピッカーでも使用できますこれがそれを実行するコードですここではスクイーズイベントを受け取るデリゲートメソッドを実装していますスクイーズした時にユーザーがパレットを表示するかどうかを確認しスクイーズが終了したらホバーの位置を可能であればパレット表示に送ります UIPencilInteractionのアップデートに加えて Apple Pencilを操作するためのまったく新しいSwiftUI APIもありますこれは onPencilSqueezeモディファイアを使用した SwiftUIでの同じ例です環境設定とフェーズを確認し可能な場合はホバー位置を取得しますツールピッカーでこれらのAPIを採用して設定で選択されているものと一貫性を保ちますまたはPKToolPickerを使用して追加コードなしでこれらすべての動作を取得します Apple Pencil Proは触覚フィードバックを返すのに既存のSwiftUIおよび UIKitのフィードバックAPIを使用しますこれらのAPIは様々な場所で既に使われておりコントロールの状態が変わった時にフィードバックを返したりします
フィードバックAPIはプラットフォームの特性や設定に応じてさまざまなコンテキストでさまざまなタイプのフィードバックを提供するように調整されています例えば触覚オーディオまたはその両方が返されたり何も返されなかったりします
位置合わせのスナップとパスの完了のための新しいフィードバックAPIは SwiftUIとUIKitの両方で利用できます
APIはより多くのコンテキストを把握して特定のイベントに最適なフィードバックを決定するために位置を使用するようになりましたこれは新しいUICanvasFeedback Generatorクラスの例ですカスタムキャンバスがレイアウトガイドにスナップしたらそこでフィードバックジェネレータに位置合わせが発生したことを伝えますまた描画したストロークをきれいな形状にスナップするためにカスタムシェイプ認識ロジックがトリガされたらフィードバックジェネレータにパスが完了したことを伝えます UIFeedbackGeneratorとそのすべてのサブクラスはフィードバックを生成する時に初期化のビューとそのビュー内のポイントを取得するように更新されましたビューには生成するフィードバックに近いものを選択しますたとえばキャンバスビューです UIFeedbackGeneratorを使用しているすべての情報を更新してくださいそれによってUIKitがアプリに最適なフィードバックを提供できるようになります UICanvasFeedbackGeneratorに加えて SwiftUIは SensoryFeedback構造体で位置合わせとpathCompleteも提供しますここには他の場所で増分される 2つのState整数がありますガイドに合わせる時と描画したストロークが形状にスナップする時ですこれらの操作のためにキャンバス上の最も具体的なビューに sensorsyFeedbackモディファイアを追加しましたこれによりトリガ値が変わるたびにフィードバックが要求されます SwiftUIのSensoryFeedback または UIKitのUICanvasFeedbackGeneratorのいずれかを採用することで Apple Pencil Proでカスタムキャンバスを生き生きと描き出すことができます詳細については Apple Developerドキュメントの記事「Playing haptic feedback in your app」をご覧くださいバレルロール角度を使用するとストロークの表現が一段と豊かになりますバレルロール角度はユーザーインターフェイスの要素を制御するためではなく描画したストロークに情報を付与するために使用しますロール位置を使用するとカスタムストロークの応答性を改善できます
手の中で回転させると先端の角度が変化する実際のツールを模倣したストロークなどは最適な候補です
ロール角度と傾き角度を一緒に追加するとさまざまな動きにうまく対応しロールをサポートしていないデバイスにフォールバックを提供できます rollAngleは UITouchと UIHoverGestureRecognizerの両方で使用できますそれにより先ほど動物のスタンプのプレビューで示したようにカスタムツールでのホバー体験を向上させることができます指のタッチを受け付ける場合方向と速度はストロークを変化させるための適切なフォールバックオプションですロールは最初に送信された時に推定され後でBluetooth経由で更新されますストロークの最も正確な最終値を取得するには touchesEstimatedPropertiesUpdated を必ず実装してくださいまたこれらすべてのApple Pencil機能を実装するためのベストプラクティスについては更新されたヒューマンインターフェイスガイドラインをご覧ください
以上が Pencilの新機能です次にすべきことは何でしょうか PKToolPickerを採用すると新しいツール選択の方法を緊密にシステム統合された機能と少ないコードで実現できますまた PKToolPickerではカスタムのツールも PencilKitツールと一緒に提供できますさらに Apple Pencil Proとの統合に利用できる豊富なAPIセットを使ってカスタム描画体験を強化できますこれで必要なものはすべて揃いました Apple Pencilを最大限に活用してくださいご視聴ありがとうございました

class MyViewController: UIViewController, UIPencilInteractionDelegate {
    
    func pencilInteraction(_ interaction: UIPencilInteraction, 
               didReceiveSqueeze squeeze: UIPencilInteraction.Squeeze) {

        if UIPencilInteraction.preferredSqueezeAction == .showContextualPalette &&
           squeeze.phase == .ended {
           let anchorPoint = squeeze.hoverPose?.location ?? myDefaultLocation
           presentMyContextualPaletteAtPosition(anchorPoint)
        }
    }
}

10:46 - Respond to squeeze in SwiftUI

@Environment(\.preferredPencilSqueezeAction) var preferredAction
@State var contextualPalettePresented = false
@State var contextualPaletteAnchor = MyPaletteAnchor.default

var body: some View {
    MyView()
        .onPencilSqueeze { phase in
            if preferredAction == .showContextualPalette, case let .ended(value) = phase {
                if let anchorPoint = value.hoverPose?.anchor {
                    contextualPaletteAnchor = .point(anchorPoint)
                }
                contextualPalettePresented = true
            }
        }
}

11:50 - Provide canvas feedback in UIKit

class MyViewController: UIViewController {
    @ViewLoading var feedbackGenerator: UICanvasFeedbackGenerator
    
    override func viewDidLoad() {
        super.viewDidLoad()
        feedbackGenerator = UICanvasFeedbackGenerator(view: view)
    }

    func dragAlignedToGuide(_ sender: MyDragGesture) {
        feedbackGenerator.alignmentOccurred(at: sender.location(in: view))
    }

    func snappedToShape(_ sender: MyDrawGesture) {
        feedbackGenerator.pathCompleted(at: sender.location(in: view))
    }
}

12:29 - Provide canvas feedback in SwiftUI

@State var dragAlignedToGuide = 0
@State var snappedToShape = 0
 var body: some View {
    MyView()
        .sensoryFeedback(.alignment, trigger: dragAlignedToGuide)
        .sensoryFeedback(.pathComplete, trigger: snappedToShape)
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC20

WWDC19