Apple Pencilのホバー機能を試す / pencil hover

[Online] potatotips #79 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/261215/

Transcript

1. Apple Pencil のホバー機能を試す
   宇佐見公輔 / 株式会社ゆめみ
   

   View Slide

2. 自己紹介
   宇佐見公輔（うさみこうすけ）
   株式会社ゆめみ / iOSテックリード
   iOSDC Japan 2022で登壇、パンフレット記事執筆
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 2
   

   View Slide

3. Apple Pencil のホバー検出
   Apple PencilをiPadに直接タッチしていない状態を検出できるように
   なった
   必要なもの：
   iPadOS 16.1（リリース日：2022-10-25）
   M2 iPad Pro（発売日：2022-10-26）
   Apple Pencil 2nd gen（これは以前からある）
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 3
   

   View Slide

4. 実機での挙動
   検出されるのは、タッチパネルから約1cm以内にペン先があるとき
   iPadOS標準のメモアプリの例：
   手書きモードで、ペン先が浮いている状態でペンのタッチ位置がプ
   レビュー表示される
   ボタンなどのUIコントロールの上にかざすと、そのコントロールが
   ハイライト表示される
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 4
   

   View Slide

5. アプリでの検出方法
   UIHoverGestureRecognizer
   を使えば良い
   let hover = UIHoverGestureRecognizer(target: self, action: #selector(hovering(_:)))
   
   button.addGestureRecognizer(hover)
   
   
   
   @objc
   
   private func hovering(_ recognizer: UIHoverGestureRecognizer) {
   
   //
   検出時の処理
   
   }
   
   Appleのサンプル：Adopting hover support for Apple Pencil
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 5
   

   View Slide

6. UIHoverGestureRecognizer
   UIHoverGestureRecognizer
   はiPadOS 13.0から存在している
   Viewの上をマウスポインターがホバーしたことを検出する
   iPadOS 16.1からApple Pencilのホバーも検出する
   つまり、マウスポインターのホバーと同じ挙動が期待されている
   UIコントロールのハイライト表示など
   標準のUIコントロールは自動的に対応する
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 6
   

   View Slide

7. zOffset
   UIHoverGestureRecognizer
   プロパティ
   zOffset
   がiPad16.1で追加
   0〜1の値でタッチパネルからの距離が取得できる
   Apple Pencilでない場合は常に0の値
   ペン先のタッチ位置のプレビュー表示に活用できる
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 7
   

   View Slide

8. プレビュー表示
   どのようなプレビュー表示をするかは、現在はガイドラインがない
   標準メモアプリは単純にポイント位置を点で表示している？
   サンプルコードでは距離によってアルファ値を変えている
   これは意味があるかどうか？
   単純な表示でも、ユーザーにとっての使い勝手は向上する
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 8
   

   View Slide

9. ホバー検出の有効化・無効化
   Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 9
   

   View Slide

10. まとめ
    M2 iPad Proのみの機能
    UIHoverGestureRecognizer
    で検出できる
    標準のUIコントロールなら何もしなくてもハイライト表示される
    Pencilのタッチ操作を想定するならプレビュー表示対応すると良い
    プレビュー表示のガイドラインはまだない
    Apple Pencil のホバー機能を試す / 宇佐見公輔 / 株式会社ゆめみ 10
    

    View Slide