【iOSDC2024 #LT】6. ピアノUIのアプリでvisionOS対応したこと
この記事はiOSDC2024で発表したLTのセッション、我が家に電子ピアノがやってきたので、ピアノと連携するアプリを作ってみた！の発表のうち、発表スライドで実装したアニメーションの実装についてまとめたものです
前回の記事は、「5. AutoScrollViewの実装について」でした
この記事では今回実装した電子ピアノとの接続アプリはvisionOSでも動くようにしています
しかしただ形だけビルドできて動いているだけなのと、実際の使い勝手等も踏まえて使えるのは別です
visionOSは既存のiOSやiPadOSと大きくUXが異なるので、iOS/iPadOSで動く前提で実装しているアプリだと、visionOSではうまく動かない、もしくは使い勝手が悪いということがあります
そのためこの記事では今回実装したvisionOS向けの対応についてまとめます
visionOS向けの追加対応
focus時のhover対応
visionOSでは視点のフォーカスがあったところで、親指と人差し指を合わせてクリックすると、ボタンなどをクリックできます
このアプリは元々ピアノの鍵盤をタップして、電子ピアノ側に出力することで、電子ピアノ側で音を鳴らすことができるようになっていました
しかしこのピアノアプリのUIは、鍵盤にonTapGestureを設定していたので、自動でhoverの設定が適用されず、UI上でどこにフォーカスが当たっているかがわかりません(これはiPadOSのマウスカーソルの対応でも同様のことが言えます)
Buttonにすればいいかもしれないですが、Buttonを適用するとvisionOSの場合はOS側でレイアウトをボタンのUIに変えられてしまいました(うまく実装すれば鍵盤のUIのままボタンにできるかもですが、すぐにできなかったので断念)
そこでhoverした時のイベントを取得し、hoverしている時はeffectを適用し、フォーカスが当たっていることがユーザーにわかるようにします
今回はWWDC2024のCreate custom hover effects in visionOSを参考に、カスタムのhoverEffectを適用します(そのため今回のアプリは現在beta版のvisionOS2以上のみで利用できます笑)
今回実装したコードは以下のようなものです
.hoverEffect { effect, isActive, _ in
effect.opacity(isActive ? 0.9 : 1)
}このhoverEffectを利用することで、hoverされた時に指定のeffectを適用することができ、上記のコードではhoverされている時に、opacityを0.9にする設定をしています
元々は他のボタンのように、scaleのeffectを適用したのですが、鍵盤が横に隙間なく並んでいるので、scaleさせるとだいぶ見にくくなってしまうので、opacityの適用にしました
鍵盤を叩くジェスチャーの調整
こちらもhoverEffectと同じで、visionOSではフォーカス&クリックで操作しますが、iOS/iPadOS用に鍵盤に設定していたDragGestureがvisionOSだと正しく動作しないことがあり、時々出力時の鍵盤を話した時のイベントを送ることができない時がありました
そのためvisionOSではDragGestureを使用せず、onTapGestureを使用するようにしています
ただonTapGestureだけでは、タップのジェスチャーの終了のイベントを取得することができないので、一定時間のdelayをはさんで、鍵盤を離した時のイベントを送信するようにしています
鍵盤のoffsetの調整
visionOSだとwindow上の鍵盤をタップする時にZ軸方向で少し手前にあったほうが鍵盤を直接タップする場合はタップしやすかったので、Z軸で手前にくるようにしています
.offset(z: 20)ただし大きい値を設定し過ぎると、Alertなどよりも手前に表示されて、アラートなどが見えなくなってしまうので、位置は調整する必要があります
まとめ
今回はPianoUIでのvisionOS向けの対応についてまとめました
visionOSはiOSやmacOSなどとUXが大きく異なり、利用できるAPIも異なるので、個別の対応が必要な場合も多いです
まだユーザーとしてのVisionProの操作に慣れていないこともあり、どのようなvisionOS対応をすればいいかは今後も試行錯誤が必要そうです
次は「まとめ」の記事です
