♟️

全Appleプラットフォームでリリースしてきた将棋盤アプリをvisionOSにも対応した話

2024/06/28に公開

こんにちは。今回は、全てのAppleプラットフォーム(iOS/iPadOS/watchOS/macOS/tvOS)でリリースしてきた将棋盤アプリをvisionOSでもリリースした話をします。

visionOS版、正面、無操作

アプリの紹介

OS標準デザインに準拠したシンプルかつ軽量で多機能な将棋盤アプリです。

SharePlayに対応しているので遠くの友人とも近くの家族とも将棋盤を囲むことができます。

Plain将棋盤のiOSやiPadOS、macOS、watchOS、tvOSバージョンの画像

各プラットフォームに対してそれぞれしっかりと最適化を実施した上で、全てのAppleプラットフォーム(iPhone/iPad/Mac/Apple TV/Apple Watch)へリリースしています。

SwiftUIやGroupActivitiesなどのApple製フレームワークのみで構成しています。

visionOS版

iOS版の素直な移植です。visionOS向けの適切な最適化を実施しました。

少し操作後 正面
少し操作後 斜め
英語駒表記 縦長ウインドウ
メニュー表示

visionOS向け最適化

「ホバーエフェクト」や「すりガラス調のバックグラウンド」などの超基本的な最適化についての紹介は省略します。

角を丸くする

多くの場合、visionOSのUIは丸っこくした方が良いです。ただの真四角だった将棋盤のアウトラインを少し丸くしました。

角を丸くした将棋盤

人は図形の角に視線を引っ張られる傾向があるため、角があると項目の中央を見つめ続けるのが難しくなります。項目の形状に丸みがあればあるほど、ユーザは視線を向けやすくなります。
引用: 視線 | Apple Developer Documentation https://developer.apple.com/jp/design/human-interface-guidelines/eyes

駒を浮かす

このアプリはシンプルなウインドウベースのアプリです。visionOSではそういったアプリでも空間表現できます。今回は、駒を選択した際のエフェクトとして駒を浮き上がらせました。

駒を浮き上がらせる

空間的なSharePlayに対応

iOSのSharePlayアプリはそのまま移植すると何もせずとも空間的なSharePlayで動きます。ただし今回の場合は、メニューシートのような一部のUIで視覚的な不一致が発生し、ユーザー体験が低下してしまう状態でした。そのため「メニュー操作は参加者間で同期していない」という注意書きを設けるといった応急処置的な実装で対処しました。

メニュー操作は参加者間で同期していない注意書き

「空間的なSharePlay」とは

visionOSでは空間ペルソナを用いて同じ空間に居るかのようなコミュニケーションが可能になります。そして空間ペルソナで通話中にSharePlayをすると、同じ空間で同じアプリを操作できます。


https://twitter.com/ar_ojisan/status/1776248415401451734

より集中するための周りを少し暗くするモード

ユーザーがコンテンツに没入しやすくするための「通常よりコンテンツ周りを少し暗くする」preferredSurroundingsEffectというAPIがあります。今回はこれを手動で適宜切り替えられるオプションとして実装しました。

周りを少し暗くするモード

実際の開発コストは?

マルチプラットフォーム対応しやすいコード設計は既に構築してあったため、スムーズにvisionOS対応できました。Appleさんが言う通りiOSアプリのコードの大半がそのまま動作し、SwiftUI.Viewのコードに関しても(体感)90%を使い回せました。

初めてのvisionOSアプリ開発ということもあり合計(体感)4週間ほどで完成しました。(多くのvisionOSアプリ開発経験を得た)今なら1.5週間ほどで完成すると思います。

今後の予定

実際の将棋盤のように盤が水平に表示されるモードとかも作りたいですね。その水平将棋盤を中心に、SharePlay中に空間ペルソナ同士で対面で向かい合ったり円状に囲んだり出来たら楽しそうです。

水平ボードバージョン

App Storeリンク

https://apps.apple.com/app/id1620268476

ソースコードリンク

https://github.com/FlipByBlink/PlainShogi


余談

【Apple Vision Proを持っている方への相談】「空間的なSharePlay」に対応した自作のApple Vision Proアプリの動作確認や動画撮影等に協力してくれませんか?

実機が1台だけでは「空間的なSharePlay」を動かすことが出来ません。お互いにApple Vision Pro実機からペルソナでFaceTime通話している時だけ「空間的なSharePlay」を動かすことが出来ます。ただ、残念ながら私にはApple Vision Proを持っている知り合いがいないのです。もし協力してくださる方がいらっしゃれば、こちらのメールアドレス(waggle.slips.0t@icloud.com)に連絡ください!

ペルソナの姿でお願いする私




https://qiita.com/mjnfhbuvwebwfiejcnw/items/90d6e1b312d36cf085c4

https://qiita.com/mjnfhbuvwebwfiejcnw/items/498ad1878dd48ea53412

Discussion