PencilKitの新機能

PencilKitの新機能

PencilKitがあれば、お持ちのiPad Appで、クリエイティブな作業、作文、描画、アニメーションの作成が可能になります。描画や注釈のフレームワークに加えられた最新の改良点を詳しく探り、イラストや作文Appの新機能をサポートするためのPKToolPicker、PKCanvasView、PKStrokeなどのAPIの活用方法について知ることができます。このセッションで多くのことを学んでいただくためには、PencilKitの基礎知識が必要です。復習が必要なら、WWDC19での “Introduction to PencilKit” から始めるといいでしょう。

リソース
- Drawing with PencilKit
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC20
- iOSピッカー、メニュー、アクションを使った構築
- PencilKitにおける描画の確認、修正、組立
WWDC19
- PencilKitの紹介
ダウンロード

こんにちは　WWDCへようこそ “PencilKitの新性能” 私はジェニー Pencil and Paperチームのエンジニアです “What's New in PencilKit”へようこそ iOS13で発表したPencilKitは低遅延で豊かな描画をアプリケーションに組み込むフレームワークです iOS14ではこのPencilKitに新たな機能を追加しました指やペンで描く際のシステム全体に対するポリシーにも変更があります APIの変更点や発表予定の新しいAPIについても最後にお話しするので PencilKitの可能性を更に実感できるでしょう
iOS13は PKCanvasViewのコードを数行追加するだけだったのでもう試してもらえたと思いますまだの方は 2019年のWWDCでその手軽さをぜひご確認ください Apple Pencilを使えば生産性が向上し iPadの可能性も広がります PencilKitに追加した新しい機能についてさっそく見ていきましょう最大の特長はすぐに使えることです
PencilKitは組み込んだ知能により更に賢くなりました画面上に表示されるテキストが選択しやすくなりダブルタップで単語や行を選択指を動かすことで範囲を広げることもできます指の速さを感知するなど特殊な動作にも対応しなぞったところだけを選択することもできるんです
スペースを簡単に挿入する方法を紹介します途中で書き忘れに気づいたとしても小さな隙間に書き足す必要はありません空白をタップするとバーが表示されるので “スペースの挿入”を選択　幅も調整できます
ここに文字を書き足すだけです
新しいUIKitシステム標準のカラーピッカーで選べる色が増えましたスペクトラムやスライダーからさまざまな色が選べカスタム色の保存やスポイトツールで確認することもできます現在 PencilKitをお使いなら何も追加する必要はありません詳細は“Build With iOS Pickers, Menus and Actions”をご確認くださいまたサードパーティ向けにレイテンシーの最適化も行いました iOS13では視覚効果やぼかしの使用を避けるなど技術的なレイテンシーの回避を推奨してきました iOS14ならさまざまな視覚効果ビューで思いどおりのコンテンツが作成できます
Catalystに対応する PKCanvasViewも追加しましたツールピッカーは未対応ですが PKCanvasView APIでインクを設定できますこうした高い操作性や新しいカラーピッカーは個別に追加する必要がありませんシステムに組み込んでいるので拡張機能をシステム全体で一貫したエクスペリエンスとして提供できますまた指とペンでの描画の区別について一元化する方法にも取り組みました PencilKitは iPhoneやiPadにも対応していますもちろん皆さんの中には Apple Pencilを使わない方もいるでしょう
iOS13で紹介した allowsFingerDrawingでは “描画は１本指　スクロールは２本指”などの設定ができました
iOS14のグローバル設定では新しいApple Pencilメニューから Prefer Only Pencil Drawingボタンで変更できますこの機能に対応しているのは PencilKitやオリジナルの描画エンジンです
UIKitのUIPencilInteractionで設定できます独自の描画エンジンがあり PencilKitを使わない時のパラメータは UIPencilInteractionの prefersPencilOnlyDrawingに従います常に指を使うiPhoneでは値がfalseに設定されています
一方 PencilKitでは初めからツールピッカーに表示されますこれはグローバル設定に表示されるボタンです Draw With Fingersをオンにするとスクリーンショットやマークアップその他のPencilKitクライアントなどシステム全体に反映し新たな値も設定されます
このボタンに対応するよう PKCanvasViewの呼び出しもアップデートしました allowsFingerDrawingに代わりキャンバスの PKCanvasViewDrawingPolicyを設定します描画のジェスチャー認識を allowedTouchTypesに設定せずキャンバスでの描画ポリシーはペンか指に設定してください
描画ポリシーは３つあります１つ目は PKCanvasViewDrawingPolicy.anyInput これは指またはペンで入力するという意味になります
２つ目の pencilOnlyはペンでのみ入力が可能ですこの場合指ではスクロールや選択ができます
３つ目がデフォルトでツールピッカーの表示の有無で違います表示されていれば UIPencilInteractionでの入力方法に従うのでユーザが設定した内容によって変わります
表示がなければ描画に使えるのはペンのみです指を使った場合のスクロールや選択方法を見てみましょうなげなわツールは使わずペンを選択した状態でスクロールやコンテンツを自由に選択したり好きな場所にペンで書いたりできます
もちろん選択も
ペンのみを使う場合 Draw With Fingerボタンは不要なので PKToolPickerのshowPolicyControlsを falseに設定し表示を消しましょう iPadのデフォルトでは trueなのでボタンがツールピッカーに表示されています描画ポリシーが pencilOnlyの場合 falseに設定しておけば “ボタンをオンにしたのに何も起きない” という混乱を防げます
また PKToolPickerの初期化方法を新しくしました UIウィンドウに対し１つの共有ツールではなく個別でインスタンスを初期化できそれぞれの場合に応じた PKToolPickerが使えるようになりますキャンバスやウィンドウごとにツールピッカーを設定できて便利ですがアイバーに反映させて個別のインスタンスを常に持っておく必要があります
インスタンスはどのように決めるのでしょうか “Introducing PencilKit”からのおさらいです UIレスポンダーをtrueに設定しツールピッカーを表示している場合はそれぞれのレスポンダーにインスタンスを渡す必要があります
違うツールピッカーが必要な場合とは私のようにメモ用と描画用で分けているケースです
メモ用はデフォルトのポリシーにして描画用では指とペンの両方を使えるようにしたいのですそこでキャンバスには用途に応じたツールインスタンスが必要になります描画用にはポリシーを表示したくないからです
使用するツールにより設定の内容も違いますメモ用のツールは黒のペンに描画用は紫のマーカーをデフォルトにしますそれ以外にも設定は変わるでしょう描画やマークアップでもユーザーインターフェイスの色は違います
最後に iOS14 PencilKit最大の変更点は Strokesへのアクセスにより PKDrawingの内部をのぞけることですインクやパスポイントなどにアクセスできるようになりました
“Inspect, Modify and Construct PencilKit Drawings”で詳細をご覧ください Strokesへのアクセスにより PencilKitのカスタム性はコメントや動画認識機械学習などへと広がりました以上がPencilKitの新機能ですすでにPencilKitがあればこの機能拡張を利用できるので使いやすさやカラーピッカーをお試しください廃止のAPIから新しいAPIへ移行することで指やペンでの描画がよりすばらしいものになるでしょう最後にお話しした PKDrawing内部のStrokesや新しいPencilKit APIで次世代の描画体験を楽しみましょうぜひPencilKitを使ってみてください

5:21 - PKCanvasView drawingPolicy
```
var drawingPolicy: PKCanvasViewDrawingPolicy
```
7:06 - PKToolPicker showDrawingPolicyControls
```
PKToolPicker.showsDrawingPolicyControls
```

notesCanvas.drawingPolicy = .default
notesToolPicker.showsDrawingPolicyControls = true
notesToolPicker.selectedTool = PKInkingTool(.pen, color: .black, width: 2)

drawingCanvas.drawingPolicy = .anyInput
drawingToolPicker.showsDrawingPolicyControls = false
drawingToolPicker.selectedTool = PKInkingTool(.marker, color: .purple, width: 20)

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

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

リソース

関連ビデオ

WWDC20

WWDC19