PencilKitの紹介

(音楽)

(拍手)

PencilKitのセッションへようこそ ウィル･シンブルビーです

このすばらしい小さなデバイス Apple Pencilが iPad上のユーザ体験を見事に変えます

PencilはiPadならではの特徴です 小さな子供から アイザック･ニュートンまで To Do リストから芸術まで その用途は様々です

優れたiPad Proはもちろん

miniからProまで iPadの全モデルで利用できます

写真のレタッチ 注釈の追加 落書きにも最適ですが そのすべてに精密さが必要です

iOS 13では レイテンシが大幅に進化 ツールパレットも一新しました

ご紹介するPencilKitで Pencilをアプリケーションに 簡単に追加できます

また Markup Everywhereの導入で Pencil未対応のコンテンツへの 注釈も可能となります ご紹介するのは最高のPencil体験と その構築に役立つPencilKit さらに Markup Everywhereでの マークアップ用コンテンツの 提供方法です

最高のPencil体験とは？ Apple Pencilが提供する すべてを活用すること

つまり享受するのは Apple Pencilの精密さ ピクセルレベルで １秒間に240回の情報を伝えます 圧力 方位角 仰角から得る 比類ない表現力で アプリケーションを彩る 表現豊かなマークが作れます

Apple Pencil(第２世代)は Pencilを置くことなく Pencilのタップで モードが変えられます

現在 Pencilは３種類 Apple Pencilの第１世代 第２世代 およびLogicool Crayonです 仕様は少しずつ異なりますが 同様の高い精密性を持ち 方位角 仰角を感知し 表現豊かなマークを作ります 第１世代のPencilには圧力を 第２世代にはタップジェスチャを追加

Apple Pencilをサポートする 複雑な特徴を紹介する前に

カスタム描画の 構築についてはこちらです “Leveraging Touch Input on iOS”を 特にお勧めします

Pencilの仕組みを理解すれば

動作の理解が深まります 背景も含め Pencilの働きを説明します

Pencilは精密なタッチ位置を作り 240ヘルツで動作します 伝えるのは iPadの垂直面を中心とした方位角

さらにPencilを持った時の 傾斜である仰角も伝えます その仕組みを説明します PencilはiPadの表面に 第２タッチポイントを生成し 三角法を用いて 方位角と仰角を計算します

さらにPencilの圧力センサーが 筆圧を感知しBluetoothで送信

影響が生じるケースとして 方位角と仰角が 推定値の時があります 第２タッチポイントが 位置によって不明瞭な場合です

Pencilが直立に近いと 方位角は強調されます さらに圧力データは 異なるメカニズムのため 位置データより遅くなります このような複雑な特徴に 対処することが 優れたPencil体験構築のカギです

画面の端から描くと 方位角と仰角の推定値を得ます

中心に向かって描き続けると 第２タッチポイントが画面上に入り 正確な値を得ます このような線にしないため 推定値を正しい値に 戻す必要があります

次に 描いている間

圧力の推定値を使う領域が Pencilの背後にあります

圧力の更新を待ち続けることで 正しい値の線が描けます

Pencilが画面から離れても trueを残します 最終の圧力の値を待つ ストロークの領域があり タッチ終了後も それを待ち続けます

これが意味すること それは最終ストロークが すべての値を得る前に 次のストロークを 描き始められることです

シリアルキューを使い ワンストロークずつ処理します ユーザが気付かないほど 短い時間ですが データは正しく処理されます

もう１つ対処したいのが レイテンシです

通常の鉛筆で描かれる線は 鉛筆とつながっています

デジタルデバイス上では Pencilと画面上の線の間に たいてい隙間ができます

その隙間を最小限にすることで 紙に描く感覚が得られます

Appleはレイテンシを重視し ロボットでテストを行っています これは高速撮影したテストで 毎秒800フレームです Pencilと線の隙間の 小ささが分かります

通常の速度にします

見逃した方に もう一度

最高のレイテンシを提供するコツ １つ目はMetalでのレンダリング 数ミリ秒の各フレームを 常にレンダリングして 低レイテンシを提供します

iOS 13では予測が大幅に進化 タッチの予測で レイテンシをさらに低減します

描画アプリケーションの構築では レイテンシ低減のため 透過的なMetalレイヤを避けます ぼかしやオーバーレイなどの UIエフェクトビューも避けます 見落としがちなのが デフォルトのナビゲーションバーです ホームアフォーダンスは レンダリングに負担がかかります 次にPencilのタップジェスチャです ユーザはPencilを持ったまま モードを切り替えられます

そのためには UIPencilInteractionを使い

デリゲートにselfを設定 タップでコールバックされたら

ユーザの好みの タップアクションに合わせます ユーザが設定で選択したものです 可能であれば その選択を尊重します アプリケーションに合わなければ

ノンディストラクティブモードの 切り替えに利用

優れたPencil体験の構築には 今日まで労力が必要でした Appleの優れたAPIと ハードウェアで 最高の描画体験を 皆さんは生み出しました Apple Pencilの 複雑な特徴を紹介しましたが 作成中の方は磨きをかけられます 作成し始めたばかりの方は

今日から簡単になります ご紹介します

PencilKitです

(拍手)

PencilKitはAppleの全OSで 使われるフレームワークです メモでは素早く 描画やメモ書きができ Pagesでは文書のマークアップが可能 アプリケーションのコンテンツに 注釈を加えることもできます Pinterestなどの デベロッパに提供し 彼らは短期間で アプリケーションに機能を追加

たった３行のコードで追加できます

キャンバスの作成 ビュー階層の追加 Inkの選択です

これでAppleのOSと同じ 業界最高レベルの 低レイテンシが得られます 完成に時間を費やした 表現豊かなInkに 見事なUIとツールパレットも使えます

コードを追加すれば 包括的なアプリケーションにできます デモで説明します

サンプルの 描画アプリケーションです

作成した絵の サムネールがありますが PencilKitの多才さが分かります こちらはメモですが スクロールで全体を確認できます

これは友人が描いた美しい花です

PencilKitはダークモードに どう反応するでしょう “コントロールセンター”で “ダーク”に切り替えます ダークモードでもライトと同様 美しく輝いています

サムネールは再描画され メモも判読できます

今から エンジニアの憧れ ステージ上での描画を行います

まずは“ライトモード”に戻し

作成途中のAppleを完成させましょう

下部の新しいツールパレットUIは １本指で画面の四方に ドラッグできます

今は下に置きます ルーラとマーカーで色を加えます

“ルーラ”をタップで取り出し ２本指で配置します ルーラは直線を引く以外に マスキングもできます

やってみます

さらに色を加えます

タップで“ルーラ”をしまい 底部に色を加えます

PencilKitの すばらしい機能の１つが ビットマップとベクター オブジェクトとピクセルの集合です その一例が消しゴムです Apple Pencilのジェスチャ “ダブルタップ”で―

“消しゴム”に切り替えます このピクセルの消しゴムで 輪郭をなぞり 切り取ります

次に“消しゴム”をタップし 切り替えます 今度はオブジェクトの消しゴムで 切り取った部分を消します

ベクターとビットマップの 作用を利用した― 描画です 再度タップで ピクセルの消しゴムに戻し―

切り取ります 次に 消しゴムの隣の “投げなわツール”を使用

場所の移動や タップで消去ができます

作品が完成したので 署名が必要です サンプルAppには署名機能があります 右上の“Signature”を タップすると ツールパレットが消えます カスタムPickerで 黒か青のインクが選べます 今は黒のままにします

署名します

タップして作品に署名を入れます

良い位置です フレームが欲しいですね

上出来です

(拍手)

PencilKitの アーキテクチャを紹介します

メインのPKCanvasViewは アプリケーションに 描画領域を提供

PKDrawingはデータモデルで 美しいストロークを記録

PKToolPickerは フロート表示のUIを提供

PKToolはキャンバス上で作用する Inkやインタラクションのツールです

PKCanvasViewは パンやズーム可能なUIScrollViewです Toolの設定で インタラクションの作用が選べます そこから得たデータモデルを 描画プロパティを使い設定します

PKDrawingは PencilKitのデータモデルで Mac OS上でも利用できます

データ形式を持つため 描画のロードと保存ができ

共有やサムネール用の画像を 生成できます

サムネール生成の流れを確認します

値はすべて値型を持つため バックグラウンドキューで 処理が可能

その時点の外観モードに合わせ サムネールを生成するには UITraitCollectionの performAsCurrentを使用

描画を使い画像を生成し そのあと メインスレッドに 画像を戻します

このあとはジェニーが さらにToolPickerやPencilKitの 見事な機能を紹介します (拍手)

ありがとう ジェニーです 引き続きPencilKitから 優れたツールを幾つか紹介します ツールのある新しいToolPickerは 動的なフロート表示です 端から端までドラッグでき 邪魔にならないよう 下部に収納も可能

ツールはPKToolのタイプです マーキングツールは PKInkingToolのタイプで 次の１つを指定できます ペン マーカー 鉛筆の３タイプです

各ツールは極めて 動的で表現豊かです ご覧のとおり シングルストロークでも プロパティに基づき 幅や不透明度が変化します プロパティとは圧力 仰角 方位角 速度です

どのInkを置くかは CanvasView上で設定します CanvasViewをToolPickerの Observerにする場合 CanvasView上のInkは 内部で設定されます 署名ペインがあり それを優先させたい場合は アプリケーション内で設定します PKInkingToolは次のタイプを指定 ペン マーカー 鉛筆 色 そして幅です

幅の値はInkタイプごとに デフォルトがあります 先ほど見たように 幅は固定値ではなく プロパティに応じ変化します この幅のベースとなる値は 平均的なユーザの指標に基づきます Inkタイプごとに 有効な幅の範囲もクエリ可能

映像は鉛筆ツールです Pencilを垂直にするほど ストロークは細く 水平にするほど ストロークが太くなります ToolPickerで幅を 変えることもできます

PKEraserToolは ベクターかビットマップを選択でき それぞれオブジェクトと ピクセルに対応します ベクターとビットマップの 一体化に努めてきました ベクターはオブジェクトで ビットマップはピクセルです ピクセルを消す代わりに これらのストロークを切り取り 分離または オブジェクトとして消去可能

他にもPKLassoToolがあります このツールで ストロークした部分が選択され ドラッグ カット コピー ペーストが可能 他のアプリケーションへも 移動できます

iOS 13には 新しいルーラツールもあります

ルーラはPKToolではありません キャンバス上で　表示の有無を 切り替えるプロパティです

ルーラをあて 直線を引くこともできれば この絵の水面と草原を区切るような マスキングもできます

ツールの紹介はここまでとし 次はPKToolPickerの 表示方法です

ToolPickerはビューではなく CanvasViewとは別で ビューを切り替えるオブジェクトです フロート表示であることも重要で その可視性は ファーストレスポンダに基づきます コードとともに流れを確認します まず ToolPickerのwindowへの sharedを要求

ObserverとしてcanvasViewを追加 これでToolPicker内の ツール変更に合わせ CanvasView上のツールが変わります

ToolPickerは レスポンダのリストも保有します visibleをtrueに設定し ファーストレスポンダになると パレットを表示 setVisibleがfalseなら リストから排除され パレットは非表示

CanvasViewをファーストレスポンダとし 表示するため setVisibleをtrueに設定

これでCanvasViewの表示で パレットも表示されます

画面で確認します CanvasViewを ファーストレスポンダにすると パレットが現れます サンプルAppには 署名ペインもあります 提供するインクは青と黒だけなので パレットを隠します そこで 署名のCanvasViewを ファーストレスポンダにします すると ToolPickerが消えます

Signatureを閉じると ファーストレスポンダでなくなり ツールパレットが再表示されます

レスポンダに基づく可視性で 注意することは アプリケーション内の 他のレスポンダの存在です 例えば編集などのコントローラです 編集メニューとパレットを 両方表示したい場合 オブジェクトのVisibleをtrueにすれば パレットは消えません

ToolPickerで もう１つ考慮することが レギュラーと コンパクトサイズでの違いです レギュラーサイズでは フロート表示で移動可能です コンパクトサイズは 固定で下部に収納されます アプリケーションでは どうでしょう？

フルサイズの アプリケーションでは 写真は端まで広がります レギュラーサイズは 一部が隠れますが ToolPickerは移動できます

しかし コンパクトサイズでは 写真の最も面白い部分が隠れます そのためコンパクトサイズは 調整が必要です ビューのフレームまたは余白で 隠れたフレームを調整します

ToolPickerのフレーム変更には Observerメソッドの toolPickerFramesObscuredDidChange フロートから収納に変えるたび これを取得し そこで隠れたフレームを尋ね コンテンツを調整します

取り消しとやり直しのボタンにも 注意してください

レギュラーサイズでは ボタンはパレット内に 固定されています コンパクトサイズは パレット内にないため 独自の取り消し やり直しボタンの 表示が必要です

ここまでが基本のCanvasViewと ToolPickerについてです ここからはPencilKitの 進化した動作を紹介します まずはCanvasViewの デリゲートです

描画に基づき アプリケーションを更新する場合 PencilやTouch Downを待機します そしてcanvasViewDidBeginUsingToolの コールバックを受けます Pencilの終了やTouch Upで canvasViewDidEndUsingToolの コールバックを受けます この時点で描画は まだ更新途中です 最終的な圧力の値が 入っていないからです 最終のcanvasViewDrawingDidChangeの 取得で 最終仕上げを終えた 描画と言えます ここでキャンバスから 描画をクエリでき モデルオブジェクトの更新 サムネールの生成 保存が可能

CanvasViewへ 描画をロードするには Set drawingをコールします するとタイル状で ロードを開始します ローディング完了後に初めて canvasViewDidFinishRenderingの コールバックを受けます スクロールやズーム後も このコールバックを受けます

描画できるのは Pencilだけではありません 指で描くこともできます PKCanvasViewは ScrollViewのため １本指で描くことができます

スクロールは２本指です

CanvasView上の allowsFingerDrawingで切り替わります trueにすると 描画は１本指とPencil スクロールは２本指 CanvasViewのデフォルトです これを望まない場合 falseにできますが 描画はPencilのみ １本指はスクロールになります iPhoneなど Pencilが使えない場合に注意します

より複雑なインタラクションには drawingGestureRecognizerが 使えます Gesture Recognizerの例外や Failure要件を設定できます 詳しくはWWDC 2017の “Modern User Interaction on iOS”を ご覧ください

PencilKitは 次の機能にも使われます スクリーンショットや マークアップです コンテンツ上への描画となり アプリケーション内でも簡単です opaqueのフラグをfalse backgroundColorをclearに設定します

iOS 13のダークモードでは まったく違う印象の コンテンツを見ることができます PencilKitキャンバスの美しさは 色を動的に調整し 視認性を保つからです 白い背景に 黒い文字のメモがありますが ダークモードでは 大半が白い文字に変化します 視認性はもちろん 見た目の美しさも保ちます ダークモードではデフォルトで キャンバスの色が調整されます これを望まない場合―

overrideUserInterfaceStyleで 常にlightにできます マークアップする コンテンツが変化しない― 画像やPDFなどに利用します

ここまでがPencilKitによる 優れた描画体験の作成方法です 次はMarkup Everywhereです アプリケーションがマークアップ用の コンテンツを渡す機能です スクリーンショットの 新APIを利用します アプリケーション上で スクリーンショットを撮ると フルコンテンツを提供できます

Safariで採用されています こちらはapple.comです 角からPencilをドラッグし スクリーンショットを撮影 スクリーンショットでは ページ全体が見られません 上部の“Full Page”のタップで Webページ全体の マークアップと共有ができます (拍手)

サンプルAppに実装しています スクリーンショットを撮り “Full Page”のタップで メモの全内容が見られます

マップなどの興味深い事例もあります 再びジェスチャで スクリーンショットを撮影 カラムでマップ全体が見えません 上部の“Full Page”をタップすると カラムが消え 下部の道路やレストランまで見えます

数行のコードで アプリケーションに取り入れられます selfを次のデリゲートに設定 UIWindowSceneの UIScreenshotService 新API UIWindowSceneについては “Introducing Multiple Windows on iPad”をご覧ください デリゲートとしてselfを設定すると PDFでフルコンテンツを届けます 共有や印刷用で ご存知かもしれませんが 詳細は2017年の 次のセッションをご覧ください “Introducing PDFKit on iOS” PDFデータの取得後 次のデリゲートメソッドを実装 screenshotService generate PDFRepresentationWithCompletion PDFデータを完了ハンドラ内に ２つのメタデータとともに渡します これでScreenから Full Pageへの移行が シームレスに行われます

１つ目のメタデータが indexOfCurrentPage Keynoteなどに役立ちます ７枚目のスクリーンショットを 撮った場合 Full Pageで 自動的に７ページに飛びます

２つ目のメタデータが rectInCurrentPage Safariなどで役立ちます 長いスクロールページですが 新iPad Proのある 下部までスクロールします 最下部でスクリーンショットを撮り

“Full Page”をタップします 最上部に移動すると不便なため スクリーンショットと 同じrectに移動します

重要なのはPDFの座標内に rectを求めることです 具体的に説明します ビュー座標の原点は左上ですが PDF座標の原点は左下です そのため適切に座標を変換し 適切な座標空間のrectを送ります

このように既存のPencil APIでも パワフルなカスタム描画エンジンが 構築できます しかし 大変な作業です タッチの推定値と 圧力の遅れへの対処を 迅速かつ非同期に 行う必要があります 新しいPencilKit APIでは 簡単に描画を アプリケーションに組み込めます さらにiOSと同じ表現豊かな 低レイテンシ体験が得られます UIKitの優れたPencil APIも 利用可能です UIPencilInteractionは Apple Pencilのダブルタップを処理 新しいUIScreenshotServiceは マークアップ用に フルコンテンツを提供

詳細はセッションのURLを ご覧ください

最高のPencilアプリケーションを 構築しましょう 引き続きWWDCをお楽しみください (拍手)