Slide 1

Slide 1 text

Visionフレームワークを使って
 非接触でMacを操作しよう
 ZOZO Tech Meetup - iOS/Android
 2023/07/11
 Copyright © ZOZO, Inc. 1 株式会社ZOZO
 計測プラットフォーム開発本部 計測アプリ部 iOSブロック
 中岡 黎

Slide 2

Slide 2 text

© ZOZO, Inc. 株式会社ZOZO
 計測プラットフォーム開発本部 計測アプリ部 iOSブロック 中岡 黎
 ● 2022年4月に新卒入社
 ● 大分県出身
 
 Twitter: @rei_nakaoka
 GitHub: @NakaokaRei
 2

Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

© ZOZO, Inc. アプリの流れ
 4 1. カメラの画像を取得
 2. 画像から手の特徴点を取得
 3. 手のポーズに応じてキー入力やマウスイベントを発生させる
 マウスポインター移動 クリック

Slide 5

Slide 5 text

© ZOZO, Inc. アプリの流れ
 5 1. カメラの画像を取得
 2. 画像から手の特徴点を取得
 3. 手のポーズに応じてキー入力やマウスイベントを発生させる
 マウスポインター移動 クリック

Slide 6

Slide 6 text

© ZOZO, Inc. Visionフレームワーク
 6 概要
 ● Appleが公式で提供しているSwiftで使える画像認識フレームワーク
 ● iOS、macOS等で使用できる
 
 
 主な機能
 ● 顔のランドマーク検出
 ● 体や手のポーズ検出
 ● 犬猫のポーズ検出
 ● などなど
 画像引用元 https://developer.apple.com/videos/play/wwdc2020/10653/ https://developer.apple.com/videos/play/wwdc2023/10045/

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

© 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/

Slide 12

Slide 12 text

© 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/

Slide 13

Slide 13 text

© 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/

Slide 14

Slide 14 text

© 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/

Slide 15

Slide 15 text

© ZOZO, Inc. 手のポーズの検出方法
 15 ● 各座標から指の間の距離を計算してポーズを認識


Slide 16

Slide 16 text

© ZOZO, Inc. アプリの流れ
 16 1. カメラの画像を取得
 2. 画像から手の特徴点を取得
 3. 手のポーズに応じてキー入力やマウスイベントを発生させる
 マウスポインター移動 クリック

Slide 17

Slide 17 text

© ZOZO, Inc. SwiftからMacを操作する方法
 17 ● CGEventを使うとマウスイベントやキー入力を簡単に発生させることができる
 
 「Aキーを押す」をシミュレートする場合 「左クリック」をシミュレートする場合 「左クリック」をシミュレートする場合 「マウスポインタの移動」をシミュレートする場合 ※ CGDisplayMoveCursorToPointはすでにAPIとして提供されているので呼ぶだけ

Slide 18

Slide 18 text

© ZOZO, Inc. SwiftAutoGUI
 18 ● それぞれのイベントをあらかじめ定義してライブラリとして公開
 ○ https://github.com/NakaokaRei/SwiftAutoGUI
 
 マウスイベント キー入力

Slide 19

Slide 19 text

© 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

Slide 20

Slide 20 text

© ZOZO, Inc. まとめ
 20 非接触でMacを動かすには
 ● Visionフレームワークで手のポーズを認識し、
 ● 手のポーズに応じてCGEventを発生させる。
 
 
 リポジトリ
 ● TrackpadAir
 ○ https://github.com/NakaokaRei/TrackpadAir
 ● SwiftAutoGUI
 ○ https://github.com/NakaokaRei/SwiftAutoGUI
 
 


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

No content