20230711_ZOZO_Tech_Meet_up.pdf

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

Transcript

1. Visionフレームワークを使って
 非接触でMacを操作しよう
 ZOZO Tech Meetup - iOS/Android
 2023/07/11
 Copyright © ZOZO, Inc. 1 株式会社ZOZO
 計測プラットフォーム開発本部 計測アプリ部 iOSブロック
 中岡 黎
2. © ZOZO, Inc. 株式会社ZOZO
 計測プラットフォーム開発本部 計測アプリ部 iOSブロック 中岡 黎
 • 2022年4月に新卒入社
 • 大分県出身
 
 Twitter: @rei_nakaoka
 GitHub: @NakaokaRei
 2
3. © ZOZO, Inc. 3 非接触でMacを動かすとは？？

4. © ZOZO, Inc. アプリの流れ
 4 1. カメラの画像を取得
 2. 画像から手の特徴点を取得
 3. 手のポーズに応じてキー入力やマウスイベントを発生させる
 マウスポインター移動 クリック
5. © ZOZO, Inc. アプリの流れ
 5 1. カメラの画像を取得
 2. 画像から手の特徴点を取得
 3. 手のポーズに応じてキー入力やマウスイベントを発生させる
 マウスポインター移動 クリック
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/
7. © ZOZO, Inc. 手のポーズ検出方法
 7 VNDetectHumanHandPoseRequest VNImageRequestHandler VNHumanHandPoseObservation
8. © ZOZO, Inc. 手のポーズ検出方法
 8 VNDetectHumanHandPoseRequest
9. © ZOZO, Inc. 手のポーズ検出方法
 9 VNDetectHumanHandPoseRequest VNImageRequestHandler
10. © ZOZO, Inc. 手のポーズ検出方法
 10 VNDetectHumanHandPoseRequest VNImageRequestHandler VNHumanHandPoseObservation
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/
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/
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/
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/
15. © ZOZO, Inc. 手のポーズの検出方法
 15 • 各座標から指の間の距離を計算してポーズを認識

16. © ZOZO, Inc. アプリの流れ
 16 1. カメラの画像を取得
 2. 画像から手の特徴点を取得
 3. 手のポーズに応じてキー入力やマウスイベントを発生させる
 マウスポインター移動 クリック
17. © ZOZO, Inc. SwiftからMacを操作する方法
 17 • CGEventを使うとマウスイベントやキー入力を簡単に発生させることができる
 
 「Aキーを押す」をシミュレートする場合 「左クリック」をシミュレートする場合 「左クリック」をシミュレートする場合 「マウスポインタの移動」をシミュレートする場合 ※ CGDisplayMoveCursorToPointはすでにAPIとして提供されているので呼ぶだけ
18. © ZOZO, Inc. SwiftAutoGUI
 18 • それぞれのイベントをあらかじめ定義してライブラリとして公開
 ◦ https://github.com/NakaokaRei/SwiftAutoGUI
 
 マウスイベント キー入力
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
20. © ZOZO, Inc. まとめ
 20 非接触でMacを動かすには
 • Visionフレームワークで手のポーズを認識し、
 • 手のポーズに応じてCGEventを発生させる。
 
 
 リポジトリ
 • TrackpadAir
 ◦ https://github.com/NakaokaRei/TrackpadAir
 • SwiftAutoGUI
 ◦ https://github.com/NakaokaRei/SwiftAutoGUI
 
 

21. © ZOZO, Inc. 次回予告
 21 • iOSDC Japan 2023 ルーキーズLT
 ◦ 様々なフレームワークを使ってMacを操作するデモを行います！