20230711_ZOZO_Tech_Meet_up.pdf
by
Nakaoka Rei
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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