BETA

エアロバイクといろいろ連携させる

投稿日:2020-06-19
最終更新:2020-06-19

こちらや、こちらの記事を参考に、エアロバイクと連携するアプリを2種類作成してみました。

仮想サイクリング

エアロバイクの回転に合わせてGoogleストリートビューを更新することで仮想サイクリングが楽しめるアプリです。

バーチャルサイクリング
https://github.com/watanabetoshinori/VirtualCycling

アプリ構成

エアロバイクからオーディオケーブル経由で回転数を取得し、そのデータをBluetoothでiPadに送付します。iPadでは専用アプリを動かし、回転数をもとにGoogleストリートビューの座標を移動させます。

エアロバイクから回転数を取得する機材はM5Stackを使用しました。M5Stackは標準で小型のディスプレイとボタンが搭載されているためデバッグにも便利です。半田付けはやりたくなかったので、スイッチサイエンスさんで発売されていたM5Stack用のブレッドボードを使用しました。

iPadアプリはWKWebViewを使用してGoogleストリートビューを全画面で表示しています。ストリートビューをiPadの画面サイズのまま表示させていたところ、何度か座標を移動するとエラーが発生しました。ストリートビューの表示サイズが大き過ぎるようなのでWebViewを小さめのサイズで作成した後にCGAffineTransformで拡大表示することでエラーは発生しなくなりました。

GeometryReader { proxy in  
    WebView(viewModel: self.viewModel.webViewModel)  
        .frame(width: 600, height: 420)  
        .transformEffect(CGAffineTransform(scaleX: (proxy.size.width / 600), y: (proxy.size.height / 420)))  
        ...  
}  

エアロバイクでストリートビューを移動する場合、問題になるのは左右への方向転換です。エアロバイクからは回転数しか取得できないため、別の方法で左右への方向転換を検出する必要があります。今回はVisionフレームワークの顔検出を使用して、顔の傾きにより方向転換するようにしました。

let faceDetectionRequest = VNDetectFaceRectanglesRequest(completionHandler: { (request, error) in  
    guard let faceDetectionRequest = request as? VNDetectFaceRectanglesRequest,  
        let results = faceDetectionRequest.results as? [VNFaceObservation] else {  
            return  
    }  
    DispatchQueue.main.async {  
        for observation in results {  
            // 顔のrollを取得  
            self.roll = observation.roll?.doubleValue ?? 0.00  
        }  
    }  
})  


rollの値はDouble型にして使用していますが、通常時が0.0で、ある程度まで顔を傾けた時点で0.52を示しました。中間の値(0.1や0.2など)になることはありませんでした。

仮想位置情報

エアロバイクの回転に合わせてiPhoneの位置情報を更新するアプリです。

エアロバイク連動位置情報シミュレーター
https://github.com/watanabetoshinori/VirtualLocation

アプリ構成

エアロバイクからオーディオケーブル経由で回転数を取得し、そのデータをBluetoothでMacに送付します。Macでは専用アプリを動かし、回転数をもとに接続したiPhoneの位置情報を変更します。

エアロバイクから回転数を取得する機材はストリートビューと同じものを使用しました。今回は受信側のアプリで利用者の顔をトラッキングできないため、M5StackのA/Cボタンで左右に方向転換する機能を追加しています。

Mac用アプリは以前作成したiPhoneの位置情報を変更するアプリを改修して、エアロバイク用機材から受け取ったデータをもとに座標を変更するようにしました。
アプリ自体はlibimobiledeviceのラッパーなので、それらの依存ライブラリをインストールすれば動作します。依存ライブラリはhomebrewからインストールすることもできますが、手元の環境では正常に動作しなかったため最新のソースからmakeでビルドしてインストールしました。

iPhoneでマップアプリを起動してエアロバイクを使用します。エアロバイクの回転に合わせて現在位置の表示が移動していれば成功です。

位置情報をベースにした全てのアプリに対して有効なはずですが、ゲームなどで使用すると不正行為と判断される可能性が高いので利用の際はご注意ください。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

⭐オススメ技術ブログ⭐

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう