Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

USAMI Kosuke

October 31, 2022
Tweet

More Decks by USAMI Kosuke

Other Decks in Programming

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