iPadOSのポインタの作成

iPadOSのポインタの作成

Magic Keyboard、マウス、トラックパッド、またはその他の入力デバイスをiPadにつなげて使用される方が、お持ちのAppを最大限に活用できるようにしましょう。Pointer Interaction APIを使って、iPadのポインタのカスタマイゼーションを追加して、ボタンやカスタムビューをポインタと連動させ、特定のエリアでポインタの形状を変える方法を説明します。 iPad上でのポインタインタラクションについてさらに学んでいただき、このセッションを最大限に活用していただくために、“Design for the iPadOS pointer”および “Handle trackpad and mouse input”もご覧になることを推奨します。

リソース
- Enhancing your iPad app with pointer interactions
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- UIKitの新機能
WWDC21
- iPad Appを次のレベルに
WWDC20
ダウンロード

こんにちは WWDCへようこそ “iPadOSポインタ用ビルド” UIkitエンジニアのモハメドですあとでiOSシステムUIチームのジョーイも参加します iPad OS ポインタのビルド方法を説明します
iOS13.4からiPad向けのポインタのサポートが導入されました発売開始以来タッチベースであったOSにとって最新の入力メソッドになります Macに既存のインタラクションモデルを取り込むのではなくポインタを追加することで得られるメリットとタッチベースの入力との共存方法を考えてみました答えはアダプティブポインタにあります精度に合わせてコントロール上をホバーするよう変形したり選択しているコントロールを明確に示したりしますつまりコンテキストなヒントを与えるためにポインタの形や動きが変わるということです
例えば文の上をホバーするとポインタがI字型になったり文章の先頭に戻ったりしますこの動画ではiPad OSのポインタとアプリケーションを同じ方法でアップデートする手順を紹介します
そしてiOS13.4に導入されたポインタをカスタマイズするAPIやアップデートに際して知っておくべき実例も紹介します
ポインタのUIの基本的なデザインの原則にも触れますポインタのデザインに関係する原則や思考過程の詳細についてはデザインに関するセッションで確認してください
iPadにポインタデバイスをつなげればアプリケーションがなくても自動的にポインタ機能が使えるようになりますすべてのシステムにポインタサポートが内蔵されているからです UIBarButtonItemや UISegmentControl UIMenuController といったコントロールにはポインタのエフェクトや動作が組み込まれていますスクロールビューは２本の指をマウスのように動かすと反応します画面を拡大することもできます
テーブルまたはコレクションビューではパンするスワイプアクションも可能です UITextViewやUItextInteractionを使う他のコンポーネントでは一連のテキスト操作やジェスチャーの編集もできます Macユーザーはよくご存じでしょう
UIDragInteractionはクリック＆ドラッグで素早くドラックできます画面をタッチして長押しする必要はありません
UIContextMenuInteractionは２回クリックすれば新しくコンパクトなメニューを表示します
ポインタのアップデート法に入ります
トップダウン方式でお伝えします優先度の高いAPIから始めます洗練されたエクスペリエンスのために他のシステムのUIと一貫するように動作と見た目を調整しますポインタに関するAPIはスタックごとに存在していますコントロールの多くはポインタエフェクトを内蔵しておりバーのボタンのようにデフォルトでエフェクトが利用できます UIButtonなどの場合は APIでエフェクトをカスタマイズできます
UIPointerInterractionはカスタムUIがポインタに反応し相互作用できるように他のシステムと一貫性を持たせますこれを使えばシステムが提供するエフェクトから最適なビューを適用できますアプリケーション内でポインタの形を変えることも可能です UIHoverGestureRecognizerはポインタの動きを直接反映しますホバーやハイライトの適用またはポインタの形の修正の必要がない― カスタム動作に最適ですジェスチャーやイベントに追加するポインタについての詳細はトラッドパッドやマウスポインタを制御するセッションを確認してくださいアプリケーションをアップデートするのは OSとの一貫性があるエクスペリエンスを求めているからでしょうどこにポインタサポートを加えるか決める際は Human Interface Guidelinesや内蔵のアプリケーションを参考にしてくださいまずはコントロールに適切なエフェクトがあるか確認しましょうクロームというアプリケーションの上下にあるバーで確認することができます
UIBarButtonItemsはSystmItemやimage もしくはtitleのAPIを使って作ります適切なポインタエフェクトが自動的に使えます
カスタムビューのAPIを使うなら自分で動作を実装する必要があるでしょうもしくはビューに役立つAPIを利用するかポインタのインタラクションをインストールして管理します
カスタムビューAPIを通じてバーに設置したUIButtonには元から有効なインタラクションが組み込まれていますまたシステムがバーのボタンに適切だと考えたエフェクトを設定します
UIbuttonの便利なAPIを使えばこのエフェクトを微調整できます UIButtonにある２段階の便利なAPIを使えば簡単です自動的にエフェクトを有効するために button.isPointerInteractionEnableを trueにしますそしてbutton.pointerStyleProviderを使ってカスタマイズします
丸括弧内にあるのはシステムが提案するエフェクトや形ですそれはボタンの見た目や大きさコンテンツをもとに設定されてます
このいずれかをカスタマイズするか完全に置き換えて新しいスタイルを作り上げることができます
いくつか例を見る前に少し脱線してポインタのスタイルを説明します
APIを使ってポインタの見た目を修正するには UIPointerStyleに修正を書き込みます
スタイルには２種類あります
１つ目はコンテンツエフェクトです
コンテンツエフェクトはアプリケーションの画面上でポインタを変形させいくつかの視覚処理を適用します
バーボタンに適用するハイライトのエフェクトがその例ですポインタが角丸長方形に変形したりボタンの下に消えたり微細なパララックスエフェクトを適用したりします
ビューに適用された視覚処理を記述するUIPointerEffectやポインタの変形を記述する UIPointerShapeからスタイルが構成されます
このエフェクトを指定するためには UIPointerStyleにハイライトや角丸長方形をポインタの形として組み込みます
２つ目はシェイプカスタマイゼーションです UIPointerShapeや UIAxisマスクに記述します
適用するとポインタはその形に変更されアクティブな範囲内で移動する方向を紐付けされます
このいい例がテキストのポインタの動作です shapeにはvertivalBeamを constrainedAxesにはverticalを記述しますこれでポインタがテキスト上を水平に動くように見せます
コントロールのAPIやポインタのスタイルの基本概念を既存のアプリケーションに適用する方法をジョーイに説明してもらいましょうジョーイ？
了解です　モハメド私が使っているQuilt Simulatorというアプリケーションを紹介しますこのアプリケーションを開発して私はキルト作りを学びましたここまでに学んだことを復習させてください
まずはじめに右下にあるボタンを見てください簡単に真っすぐ縫えるようにモードを切り替えてくれますハイライトを使っているようですがエフェクトのサイズが合っていません Xcodeの画面に戻って修正してみましょう
既にポインタのインタラクションが有効になっていてデフォルトのエフェクトが付与されています pointerStyleProviderを追加して定規マークのボタンの形を直します
１文目のrectにボタンの適切な大きさと座標を設定します
そのrectを提案されたエフェクトの対象プレビューの空間座標に変換します
最後に提案されたエフェクトを使うスタイルに戻せば rectを基にポインタの形が改善されます修正結果を見てみましょう
よくなってますボタンが正しく表示されています
次に右上にある糸の選択ボタンを見てみましょうこのボタンは現在選択している糸の色を変更できます
リフトエフェクトを使うためにこのバーボタンは既にカスタマイズしてあります少しおかしい感じがしますポインタが近づくとボタンの下がぼやけたように見えますこれでは見づらいです Xcodeに戻ってこの問題を解決しましょう
UIBarButtonItemがあるので既にエフェクトが設定されています pointerStyleProviderを修正しますが今回はデフォルトからリフトエフェクトに変更しますこれでは不十分なので形を正確にしましょう
新しく実装したUITargetedPreviewをリフトエフェクトの使用に合わせますビューやターゲットまたは上で作ったプレビューの値を作成しました
shadowPathプロパティのパラメーターにはボタンの外周に合うパスをセットします
最後に記述するのはリフトエフェクトを使ったポインタスタイルやボタンに合うポインタの形です
iPadに戻って確認してみましょう
よくなっていますポインタを近づけると糸巻きのアイコンがはっきりしています
モハメドに話を戻します
ありがとう　ジョーイ今度はカスタムUIについて話しましょう
カスタムUIにポインタの動作を付け加えるならユーティリティーやユニークな値を加えることに重点を置いてください
Quilt Simulatorアプリケーションでは画面中央に広いエリアがあります縫い始めと終わりをクリックすれば縫い目ができますカスタムのポインタ動作を利用してエクスペリエンスを向上することができます機能を２つ拡張してみましょうまずはキルトのエリアをホバーする時のポインタの形を変えますこれは縫い始める場所を確認するためです
キルト初心者のためにガイドモードを追加してポインタが垂直な軸に沿うようにします縫い目を水平に保つことが簡単にできます
これはすべてカスタムビューなので UIPointerInteractionを直接使います他のUIinteractionでUIPointerInteractionのインスタンスを作りビューに追加しますしかし他と違ってインタラクションのデリゲートは任意です
ポインタに適用したいエフェクトや形の変更を指定するには UIPointerStylesを使いますスタイルがアクティブになる箇所を厳密に制御したいなら UIPointerRegionsも定義します指定したスタイルをインタラクションに示すためです
デフォルトでインタラクションは全体のビューをカバーしています
スタイルをデリゲートしていなくてもインタラクションは自動的にポインタのエフェクトを全体のビューに適用します
これは単純なケースではとても便利ですエフェクトをビューに適用させる場合やエフェクトが関係ない場合ですしかし我々のシナリオはもっと専門的です
画面の特定の小さな範囲内での動作を定義したいので UIPointerInteractionDelegateの regionFor requestメソッドを実装します
このメソッドで新しい範囲を要求するのはインタラクションのビュー内でポインタを移動する時です実装するためにはガイドに対応する範囲でポインタが動作するようにします
ポインタがある範囲に入ったらインタラクションはスタイルを要求するために styleForRegionメソッドを呼び出しますメソッドを実装して十字の形になるようにシェイプカスタマイゼーションを設定します
ではジョーイにその方法を実践してもらいましょう
モハメド　了解ですここでもQuilt Simulatorを使って解説しますまずは糸の色を選びキルトを縫い始めますパッチワークエリアで縫いたい場所をクリックするだけですまずは黄色の糸を選びます
UIScrollViewの機能を利用すると２本の指で拡大できます
そして何針か縫ってみます
カスタムでポインタの形を指定して精度の高いレーザーを利用すればカスタムした範囲でユーザーを効率的にアシストできます
まずはカスタムしたポインタのインタラクションをビューに追加します
新しいUIPointerInteractionを作ってキルトの画面で動くように追加します
styleFor Regionのデリゲートメソッドは実装済みです初めの構文はhelperメソッドから取得したカスタムのBezier pathを設定し
２つ目の構文はポインタの形を指定する UIPointerStyleを設定しますさて見てみましょう
とてもよくなりました上質な糸のような自然な縫い目ですでは前に話した直線モードに戻りましょう定規ボタンをクリックして有効にします
そして何針か縫います
とても簡単にすばらしい縫い目ができましたしかしばらつきがありますポインタは自由に動かせますが縫い目は目盛りの上にだけ表示されています
対処法を説明しましょう
デリゲートメソッドを修正してポインタが垂直に動くようにしているのでポインタはそれぞれの行に結びついていますまずregionFor Requestの実装を追加してガイドラインごとに違う範囲を指定します
StraightLineStitchモードを使うとグリッド線を別の範囲に指定できます
それ以外はデフォルトの範囲になります
次にポインタの動きを垂直な軸に合わせます
ガイドを使えば十字キーは垂直に動くようになりますそれ以外は前と同じ動きです
真っすぐ縫うためにアプリケーションの機能を拡張しましたポインタを適当に動かしても垂直になるガイドラインに従いますどこにカーソルを進ませても磁石のように戻ってきますこれでデモは終了です　モハメド
ありがとう　ジョーイポインタエクスペエンスを仕上げるためのステップを紹介します
ポインタエクスペリエンスをより良くするための方法がいくつかあります１つはビューの周りに余白を指定することですポインタの戻る力を増強して UIで重要な要素に作用しやすくなり― ボタンの端にたどり着く前にポインタはボタンに戻ります
これはポインタスタイルの効果が及ぶエリアを拡大した結果です
指定する範囲にも制限がありますインタラクションのビューにある hittestable内でなければなりませんビューより大きな範囲にしたいならビューにヒットテストされていることを確認しなければなりません
ポインタの範囲を調整すればエフェクトが変化する具合を制御できますリマインダーを例にしてみましょうビューの見た目は分かれていますがビュー間のポインタの移行は滑らかで隙間でシステムのシェイプに戻ることはありません
隣接したポインタの範囲にインタラクションを付与しているおかげです
複数のポインタの範囲やスタイルを調整する時インタラクションをビューヒエラルキーの一番上に置くのには意味があるのです UIの見た目を完璧に近づけ全体を論理的に考えることができます
この例ではインタラクションを全体のビューに付与しデリゲートは別のサブビューの範囲に指定しました
さらにポインタのインタラクションにアニメーションを追加することもできますこうすれば役に立つ情報が提示できてエフェクト中のクラッタを減らすことができます
UISegmentedControlでポインタのセグメント間の移動をスムーズにする方法をお見せします
アニメーションを調整するためにはデリゲートにwillEnterや willExit regionを実装し animatorオブジェクトにアニメーションに付与します
この例ではポインタが範囲にきたら区切り線のビューをフェードアウトして範囲から出たらフェードバックします
詳しくはHuman Interface Guidelinesや開発者向けドキュメントを参照してくださいこの映像に関係するサンプルも確認してください試す価値のあるいい例があります
最上級のポインタエクスペリエンスを持つ iPadアプリケーションをビルドしてください古典的な分野にこそ高度なAPIを使うべきですコントロールやカスタムUIに反応の良いポインタエフェクトを加えてください最後に実装を洗練するために少し手を加えてみてくださいそしてUIに驚きと喜びを与えてください
ポインタを活用したアプリケーションの開発に期待しています

// Enable the button's built-in pointer interaction.
myButton.isPointerInteractionEnabled = true

// Customize the default interaction effect.
myButton.pointerStyleProvider = { button, proposedEffect, proposedShape -> UIPointerStyle? in
		// In this example, we'll switch to using the .lift effect by creating a new
    // UIPointerEffect with the .lift type using the proposedEffect's preview.
    return UIPointerStyle(effect: .lift(proposedEffect.preview), shape: proposedShape)
}

7:05 - Pointer Content Effect

// Create a UIPointerStyle that applies the .highlight effect. 

// Outset the view's frame so the pointer shape has some generous padding around the view's contents.
// Note that this frame must be in the provided UITargetedPreview's container's coordinate space. 
// In the majority of cases (where the preview doesn't have a custom container), this is just the view's superview.
let rect = myView.frame.insetBy(dx: -8.0, dy: -4.0)
let preview = UITargetedPreview(view: myView)

return UIPointerStyle(effect: .highlight(preview), shape: .roundedRect(rect))

8:02 - Pointer Shape Customization

// Create a UIPointerStyle that changes the pointer into a vertical beam. 

let beamLength = myFont.lineHeight
return UIPointerStyle(shape: .verticalBeam(length: beamLength), constrainedAxes: .vertical)

21:31 - UIPointerInteraction Region Entrance Animation

func pointerInteraction(_ interaction: UIPointerInteraction, 
                          willEnter region: UIPointerRegion, 
                          animator: UIPointerInteractionAnimating) {

     // Fade out separator when entering region.
     animator.addAnimations {
          self.separatorView.alpha = 0.0
     }
}

21:51 - UIPointerInteraction Region Exit Animation

func pointerInteraction(_ interaction: UIPointerInteraction, 
                          willExit region: UIPointerRegion, 
                          animator: UIPointerInteractionAnimating) {

     // Fade separator back in when exiting region.
     animator.addAnimations {
          self.separatorView.alpha = 1.0
     }
}

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

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

リソース

関連ビデオ

WWDC23

WWDC21

WWDC20