SwiftUIでのウインドウの操作

visionOS、macOS、iPadOSで、シングルウインドウとマルチウインドウの優れたアプリを構築する方法を学びましょう。ウインドウを開く／閉じる操作をプログラムで実行したり、位置やサイズを調整したり、ウインドウを別のウインドウと交換したりできるツールをご紹介します。また、ユーザーが各自のワークフロー内でアプリを使用しやすいウインドウを実現するための、デザインの原則についても確認します。

リソース

関連ビデオ

WWDC24

SwiftUIによるmacOSウインドウのカスタマイズ

WWDC23

ダウンロード

こんにちは SwiftUI担当のAndrewです本セッションでは SwiftUIアプリのウインドウについて説明します

ウインドウとはアプリのコンテンツを格納する入れ物です

ウインドウにより使い慣れた操作方法でアプリの様々な部分を管理できます

位置の変更や

サイズの変更

閉じるなどの操作です

今回の説明には BOT-anistを使います私が同僚と開発している SwiftUIアプリですこの画面は Simulatorでの BOT-anistのロボットエディタですロボットをカスタマイズする画面です

プレイヤーはこのロボットがゲーム内で植物の世話をするのを手伝います

BOT-anistはiOS iPadOS visionOS macOSでパーソナライズされた体験を提供します

今回説明する概念はマルチウインドウのプラットフォームにも適用可能ですが本ビデオでは visionOSのみを対象とします

まずウインドウの定義と作成および使用の方法について説明します

次にウインドウの初期位置を制御する方法を解説しますまたウインドウのサイズ変更の各種方法をご紹介します

まずは基本事項です

独立した複数のウインドウを使うとアプリの様々な部分を同時に扱えます

同じインターフェイスのインスタンスを複数作成すると効果的な場合もあります

システムコントロールを使えば各ウインドウを個別に操作できます

サイズの変更や位置の変更拡大などの操作が可能です

またウインドウではプラットフォーム固有の機能を利用できます例えば visionOSではボリュメトリックウインドウスタイルによりウインドウに3Dコンテンツを表示できます

複数ウインドウの使用にも利点がありますが TabViewのように最上位メニューのみを表示する単一のビューはユーザー体験をシンプル化します

「Elevate your windowed app for spatial computing」では TabViewやその他の最上位ビューの詳細について解説しています visionOSで複数ウインドウの使用が適している場合の詳細については「Design for spatial user interfaces」をご覧ください visionOSのBOT-anistには主要なシーンが2つありますエディタウインドウとゲームのボリュームです

各シーンはWindowGroupで定義されていますアプリではロボットエディタの WindowGroupのインスタンスが開きますこのウインドウのボタンでゲームのWindowGroupのインスタンスが開きます windowStyleを .volumetricにしてウインドウをvisionOSのボリュームにします BOT-anistに新しい機能を 2つ追加しましょう

1つ目はロボットに関する動画を表示する新しいウインドウを開く機能です

この動画はポータルに含まれる 3Dシーンになります

アプリのbodyに 3Dシーンビューを格納する新しいWindowGroupを追加しますこのWindowGroupを識別できるように「movie」というIDを指定していますこのIDはウインドウを開く際に使用します

このIDを Environmentアクションに渡しますこれらのアクションは SwiftUIの階層構造のどこからでも使用できますウインドウ管理には複数の Environmentアクションを使用します

ウインドウを開くには openWindowを使用します

閉じるには dismissWindowを使用します

pushWindowを使うとウインドウを開いて元のウインドウを非表示にできます

ここではopenWindowを使って新しい動画ウインドウを開きますロボットエディタのビューで Environmentから openWindowアクションを取得するために openWindowのキーパスを指定して Environmentプロパティを作成します次に新しいボタンで openWindowアクションを実行しますがここで先ほどWindowGroup用に定義したIDである「movie」を指定します

これでエディタのボタンをタップすると動画のポータルが別ウインドウで表示されるようになりました

こうして見てみると動画のビューと同時にエディタを表示しておく必要はないと思えますそこで Environmentアクションの pushWindowをウインドウ表示に使用しますこの方法では新しいウインドウが元のウインドウと入れ替わりに開きます

新しいウインドウを閉じると元のウインドウが再度表示されます

動画ウインドウ表示時にエディタを非表示にするには Environmentプロパティのキーパスを openWindowから pushWindowに変更し前と異なるアクションを呼び出すようにボタンを更新します

これで TVのボタンをタップすると動画ウインドウがプッシュされエディタウインドウが消えるようになります

これでデザインしたロボットが演技を始めるのを気を散らされることなく見られるようになりました

閉じるボタンをタップするとエディタに戻りますこの動作を実現するためにロジックの追加は必要ありませんウインドウを開く時に表示しておく必要のないコンテンツがある場合はこのアクションの使用を検討してください

ウインドウを定義して開いたらプラットフォーム固有の機能を使ってさらに快適になるように機能を強化できます例えばフリーボードでツールバーオーナメントを使ってウインドウの下端に沿ってコントロールを表示する方法や ToolbarTitleMenuで画面を混雑させずにドキュメントの関連アクションを表示する方法などです

ウインドウバーと閉じるボタンはデフォルトで必ず表示されますしかし動画ビューでは .persistentSystem Overlaysモディファイアを使ってこれらを非表示にしましたユーザーが動画に集中しやすくなるためですこれらのAPIは visionOSのウインドウの機能を強化する優れた手段です

macOSでのウインドウの調整については「Tailor macOS windows with SwiftUI」をご覧ください動画ウインドウの表示を改善できたので次にゲームで使用するオプションのコントロールパネルを追加しますこのパネルにはロボットを動かすためのコントロールとジャンプや手を振るなどのアクションを実行するボタンを表示します

コントロールを表示する新しいWindowGroupを追加しました

またゲームのボリュームに openWindowの呼び出しを追加します

ゲームでボタンをタップすると新しいウインドウでコントロールが表示されます

ゲームのボリュームから独立して位置を変えられる点が優れています

しかし初めてウインドウを開くと表示がボリュームに重なるか位置が遠い場合もあります visionOSではコントロールパネルなどの新しいウインドウは元のウインドウの前面に配置されます

一方macOSでは新しいウインドウは画面の中央に表示されます

この動作は defaultWindowPlacement モディファイアでカスタマイズできウインドウの初期位置とサイズをプログラムで設定できます

ウインドウの位置やサイズの変更方法はプラットフォームごとに複数あります

配置には前面や背面などほかのウインドウを基準とする相対配置や visionOSのutilityPanel のようにユーザーを基準とする相対配置があります後者ではウインドウをユーザーの近くの通常は直接タッチできる範囲に配置します

または macOSでの右上エリアのように画面に対する相対配置もあります

visionOSでゲームコントロールをプレイヤーの近くに表示するには defaultWindowPlacement モディファイアをcontrollerの WindowGroupに適用しますここから .utilityPanelの位置を指定して WindowPlacementを返します

この戻り値をif条件でラップしこの配置が visionOSの場合のみ適用されるようにします

これでウインドウの初回起動時にコントロールが近くに表示されますまたプレイヤーは必要に応じてウインドウを初期位置から動かせます

この新しいコントロールではまったく新しいやり方でロボットを操作できます

例えばこのボタンをタップすると BOT-anistが手を振ります

visionOSでのコントローラウインドウのデザインを改善できました次はmacOSでこのウインドウの位置を手動で計算します

defaultWindowPlacement モディファイアはcontextを提供しますプラットフォームによってここに含まれる情報は異なります macOSでは contextに格納されるのはデフォルトのディスプレイに関する情報ですこれにアクセスして .visibleRectを取得しますこれはコンテンツを問題なく配置できる場所を表します

sizeThatFitsメソッドを使用してウインドウのコンテンツに基づき必要となるサイズを参照します

displayBounds変数と size変数を使用してディスプレイの下端の少し上の水平方向の中央に表示されるよう位置を計算します

これで算出した位置とサイズを WindowPlacementとして返せます

macOSでもコントロールが適切に配置されるようになりました

プレイヤーはプレイ中にウインドウの位置を自由に変更でき別の画面に配置することもできます

優れたウインドウ配置にできましたコンテンツが常に最適に表示されるようにするためにウインドウサイズの変更方法にも変更を加えましょう

ウインドウにはシステムにより決定される初期サイズがありますこのデフォルトのサイズはいくつかの方法で変更できます

画面のサイズやほかのウインドウに応じてサイズが決まる場合は defaultWindowPlacement APIを使用して初期サイズを指定できますこれは macOSのコントローラウインドウの場合と同様です defaultSizeモディファイアで初期サイズを変更する方法もあります

なおこのデフォルトのサイズはサイズが別途制約されている場合は使用されません WindowPlacement APIでサイズが指定されている場合やシーンが復元された場合です先ほど追加した動画ウインドウのようにプッシュされるウインドウの場合 defaultSizeは元のウインドウのサイズと同じになりますこの例では元のウインドウはロボットエディタです

このデフォルトサイズに問題はありませんがプレイヤーは動画ウインドウのサイズを変更したいかもしれません動画が常に適切に表示されるように一定の制限を設けましょう

movieのWindowGroupの .windowResizabilityに .contentSizeを指定するとそのウインドウは含まれるコンテンツの最小／最大サイズに基づく制限を受けます MovieContentViewに minWidthとmaxWidth およびminHeightと maxHeightを追加します

これで動画ウインドウのサイズを最小限にすると正方形になり拡大も合理的な範囲に制限されるようになりました

一日中 BOT-anistを見ていられそうですしかしコントロールウインドウに手を入れる必要があります

非常に大きなサイズに変更可能なのでボリュームの邪魔になります

ウインドウのサイズをそこに含まれるコンテンツのサイズに合うようにするべきです

movieの WindowGroupの場合と同様に windowResizability モディファイアを controllerの WindowGroupにも追加します

これでコントローラのモードを変更するとコンテンツに合わせてウインドウのサイズが変わります

このウインドウのサイズをプレイヤーは変更できません各モードのビューのサイズは固定で最小／最大サイズが指定されているのではないためです

BOT-anistは本当に良くなりましたね visionOSおよびmacOS向けに素晴らしい改善をアプリに加えられましたみなさんのアプリでもウインドウとそれをサポートするAPIをご活用ください

ウインドウと最上位ビューのどちらがアプリに適しているか検討しましょう WindowPlacement APIは最初のレイアウトを指定する際に有用ですコンテンツに合わせてウインドウサイズを設定しユーザーによる変更を制限できます

ウインドウに関するプラットフォーム固有の機能によりユーザーによるアプリ利用がより快適になります

ご視聴ありがとうございましたアプリでウインドウの機能をぜひご活用ください

2:36 - BOT-anist scenes

@main
struct BOTanistApp: App {
    var body: some Scene {
        WindowGroup(id: "editor") {
            EditorContentView()
        }

        WindowGroup(id: "game") {
            GameContentView()
        }
        .windowStyle(.volumetric)
    }
}

3:09 - Creating the movie WindowGroup

@main
struct BOTanistApp: App {
    var body: some Scene {
        WindowGroup(id: "editor") {
            EditorContentView()
        }

        WindowGroup(id: "game") {
            GameContentView()
        }
        .windowStyle(.volumetric)

        WindowGroup(id: "movie") {
            MovieContentView()
        }
    }
}

3:55 - Opening a movie window

struct EditorContentView: View {
    @Environment(\.openWindow) private var openWindow

    var body: some View {
        Button("Open Movie", systemImage: "tv") {
            openWindow(id: "movie")
        }
    }
}

4:45 - Pushing a movie window

struct EditorContentView: View {
    @Environment(\.pushWindow) private var pushWindow

    var body: some View {
        Button("Open Movie", systemImage: "tv") {
            pushWindow(id: "movie")
        }
    }
}

5:34 - Toolbar

CanvasView()
    .toolbar {
        ToolbarItem {
            Button(...)
        }
        ...
    }

5:40 - Title menu

CanvasView()
    .toolbar {
        ToolbarTitleMenu {
            Button(...)
        }
        ...
    }

5:48 - Hiding window controls

WindowGroup(id: "movie") {
    ...
}
.persistentSystemOverlays(.hidden)

6:28 - Creating the controller window

@main
struct BOTanistApp: App {
    var body: some Scene {
        ...

        WindowGroup(id: "movie") {
            MovieContentView()
        }

        WindowGroup(id: "controller") {
            ControllerContentView()
        }
    }
}

6:34 - Opening the controller window

struct GameContentView: View {
    @Environment(\.openWindow) private var openWindow

    var body: some View {
        ...
        Button("Open Controller", systemImage: "gamecontroller.fill") {
            openWindow(id: "controller")
        }
    }
}

7:46 - Positioning the controller window

WindowGroup(id: "controller") {
    ControllerContentView()
}
.defaultWindowPlacement { content, context in
    #if os(visionOS)
    return WindowPlacement(.utilityPanel)
    #elseif os(macOS)
    ...
    #endif
}

8:45 - Positioning the controller window continued

WindowGroup(id: "controller") {
    ControllerContentView()
}
.defaultWindowPlacement { content, context in
    #if os(visionOS)
    return WindowPlacement(.utilityPanel)
    #elseif os(macOS)
    let displayBounds = context.defaultDisplay.visibleRect
    let size = content.sizeThatFits(.unspecified)
    let position = CGPoint(
        x: displayBounds.midX - (size.width / 2),
        y: displayBounds.maxY - size.height - 20
    )
    return WindowPlacement(position, size: size)
    #endif
}

10:12 - Default size

@main
struct BOTanistApp: App {
    var body: some Scene {
        ...
        WindowGroup(id: "movie") {
            MovieContentView()
        }
        .defaultSize(width: 1166, height: 680)
    }
}

10:49 - Setting resize limits on the movie window

@main
struct BOTanistApp: App {
    var body: some Scene {
        ...
        WindowGroup(id: "movie") {
            MovieContentView()
                .frame(
                    minWidth: 680, maxWidth: 2720,
                    minHeight: 680, maxHeight: 1020
                )
        }
        .windowResizability(.contentSize)
    }
}

11:37 - Controller window resizability

@main
struct BOTanistApp: App {
    var body: some Scene {
        ...
        WindowGroup(id: "controller") {
            ControllerContentView()
        }
        .windowResizability(.contentSize)
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

SwiftUIでのウインドウの操作

関連する章

リソース

関連ビデオ

WWDC24

WWDC23