20230711_ZOZO_Tech_Meet_up.pdf
by
Nakaoka Rei
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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