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

20230711_ZOZO_Tech_Meet_up.pdf

 20230711_ZOZO_Tech_Meet_up.pdf

Nakaoka Rei

July 11, 2023
Tweet

Other Decks in Technology

Transcript

  1. Visionフレームワークを使って

    非接触でMacを操作しよう

    ZOZO Tech Meetup - iOS/Android

    2023/07/11

    Copyright © ZOZO, Inc.
    1
    株式会社ZOZO

    計測プラットフォーム開発本部 計測アプリ部 iOSブロック

    中岡 黎

    View Slide

  2. © ZOZO, Inc.
    株式会社ZOZO

    計測プラットフォーム開発本部 計測アプリ部 iOSブロック
    中岡 黎

    ● 2022年4月に新卒入社

    ● 大分県出身


    Twitter: @rei_nakaoka

    GitHub: @NakaokaRei

    2

    View Slide

  3. © ZOZO, Inc.
    3
    非接触でMacを動かすとは??


    View Slide

  4. © ZOZO, Inc.
    アプリの流れ

    4
    1. カメラの画像を取得

    2. 画像から手の特徴点を取得

    3. 手のポーズに応じてキー入力やマウスイベントを発生させる

    マウスポインター移動 クリック

    View Slide

  5. © ZOZO, Inc.
    アプリの流れ

    5
    1. カメラの画像を取得

    2. 画像から手の特徴点を取得

    3. 手のポーズに応じてキー入力やマウスイベントを発生させる

    マウスポインター移動 クリック

    View Slide

  6. © ZOZO, Inc.
    Visionフレームワーク

    6
    概要

    ● Appleが公式で提供しているSwiftで使える画像認識フレームワーク

    ● iOS、macOS等で使用できる



    主な機能

    ● 顔のランドマーク検出

    ● 体や手のポーズ検出

    ● 犬猫のポーズ検出

    ● などなど

    画像引用元
    https://developer.apple.com/videos/play/wwdc2020/10653/
    https://developer.apple.com/videos/play/wwdc2023/10045/

    View Slide

  7. © ZOZO, Inc.
    手のポーズ検出方法

    7
    VNDetectHumanHandPoseRequest VNImageRequestHandler VNHumanHandPoseObservation

    View Slide

  8. © ZOZO, Inc.
    手のポーズ検出方法

    8
    VNDetectHumanHandPoseRequest

    View Slide

  9. © ZOZO, Inc.
    手のポーズ検出方法

    9
    VNDetectHumanHandPoseRequest VNImageRequestHandler

    View Slide

  10. © ZOZO, Inc.
    手のポーズ検出方法

    10
    VNDetectHumanHandPoseRequest VNImageRequestHandler VNHumanHandPoseObservation

    View Slide

  11. © ZOZO, Inc.
    VNHumanHandPoseObservation

    11
    ● 各指の関節の位置がCGPointとして取得できる


    ● Vision座標系

    ○ 値の範囲は0~1

    ○ Viewの座標系とY軸の向きが逆


    Y
    X
    (0, 1)
    (1, 0)
    (0, 0)
    画像引用元: https://developer.apple.com/videos/play/wwdc2020/10653/

    View Slide

  12. © ZOZO, Inc.
    VNHumanHandPoseObservation

    12
    ● 各指の関節の位置がCGPointとして取得できる


    ● Vision座標系

    ○ 値の範囲は0~1

    ○ Viewの座標系とY軸の向きが逆


    Y
    X
    (0, 1)
    (1, 0)
    (0, 0)
    画像引用元: https://developer.apple.com/videos/play/wwdc2020/10653/

    View Slide

  13. © ZOZO, Inc.
    VNHumanHandPoseObservation

    13
    ● 各指の関節の位置がCGPointとして取得できる


    ● Vision座標系

    ○ 値の範囲は0~1

    ○ Viewの座標系とY軸の向きが逆


    Y
    X
    (0, 1)
    (1, 0)
    (0, 0)
    画像引用元: https://developer.apple.com/videos/play/wwdc2020/10653/

    View Slide

  14. © ZOZO, Inc.
    VNHumanHandPoseObservation

    14
    ● 各指の関節の位置がCGPointとして取得できる


    ● Vision座標系

    ○ 値の範囲は0~1

    ○ Viewの座標系とY軸の向きが逆


    Y
    X
    (0, 1)
    (1, 0)
    (0, 0)
    画像引用元: https://developer.apple.com/videos/play/wwdc2020/10653/

    View Slide

  15. © ZOZO, Inc.
    手のポーズの検出方法

    15
    ● 各座標から指の間の距離を計算してポーズを認識


    View Slide

  16. © ZOZO, Inc.
    アプリの流れ

    16
    1. カメラの画像を取得

    2. 画像から手の特徴点を取得

    3. 手のポーズに応じてキー入力やマウスイベントを発生させる

    マウスポインター移動 クリック

    View Slide

  17. © ZOZO, Inc.
    SwiftからMacを操作する方法

    17
    ● CGEventを使うとマウスイベントやキー入力を簡単に発生させることができる


    「Aキーを押す」をシミュレートする場合
    「左クリック」をシミュレートする場合
    「左クリック」をシミュレートする場合 「マウスポインタの移動」をシミュレートする場合
    ※ CGDisplayMoveCursorToPointはすでにAPIとして提供されているので呼ぶだけ

    View Slide

  18. © ZOZO, Inc.
    SwiftAutoGUI

    18
    ● それぞれのイベントをあらかじめ定義してライブラリとして公開

    ○ https://github.com/NakaokaRei/SwiftAutoGUI


    マウスイベント キー入力

    View Slide

  19. © ZOZO, Inc.
    補足:キーボードの入力の仕組み

    19
    ● 物理的なキーを押すと、スキャンコード(CGKeyCode)がPCに送られる

    ● スキャンコードはキーの位置で決まっている

    ○ US/JISなどの配列によって変わらない

    ● SwiftAutoGUIはUSキーボード配列に従ってCGKeyCodeを定義している

    0x21
    JIS
    US
    キーボード画像引用元
    https://www.ac-illust.com/main/detail.php?id=1461522&word=%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%AAJIS%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88
    https://www.ac-illust.com/main/detail.php?id=1460875&word=%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%AA%E8%8B%B1%E5%AD%97%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88

    View Slide

  20. © ZOZO, Inc.
    まとめ

    20
    非接触でMacを動かすには

    ● Visionフレームワークで手のポーズを認識し、

    ● 手のポーズに応じてCGEventを発生させる。



    リポジトリ

    ● TrackpadAir

    ○ https://github.com/NakaokaRei/TrackpadAir

    ● SwiftAutoGUI

    ○ https://github.com/NakaokaRei/SwiftAutoGUI



    View Slide

  21. © ZOZO, Inc.
    次回予告

    21
    ● iOSDC Japan 2023 ルーキーズLT

    ○ 様々なフレームワークを使ってMacを操作するデモを行います!



    View Slide

  22. View Slide