UIKitアプリの柔軟性の向上

UIKitアプリの柔軟性の向上

iPhone、iPad、Mac、Apple Vision Proでシーンとコンテナビューのコントローラを使用することで、UIKitアプリの柔軟性を高める方法を確認します。アプリ中心型からシーンベースのライフサイクルへの移行によって、ウインドウのサイズ変更やマルチタスク処理の向上など、アプリの可能性をフルに引き出せるようになります。インタラクティブな列サイズの変更やインスペクタ列の強力なサポートなど、UISplitViewControllerの機能強化について紹介します。また、新しいレイアウトのAPIを採用することで、ビューやコントロールの適応性を高める方法も説明します。

関連する章
- 0:00 - イントロダクション
- 0:58 - シーン
- 4:58 - コンテナビューコントローラ
- 10:45 - 適応性
- 15:39 - 将来の互換性維持
- 16:07 - 次のステップ
リソース
関連ビデオ

WWDC25
- UIKitの新機能
WWDC24
- iPadOSのタブとサイドバーの利用体験を向上
こんにちは「Make your UIKit app more flexible」へようこそ UIKitチームのエンジニアの Alexander MacLeodです柔軟なアプリは画面サイズやプラットフォームを問わず優れた体験を届けることができますサイズに関係なく直感的に使える慣れ親しんだUIを実現できるのですこの動画ではアプリに柔軟性を確保するためのベストプラクティスを紹介していきます最初に話をするのはシーンという概念の基本についてですシーンがどのような点で柔軟なアプリの基礎になるかも併せて説明します次がコンテナビューコントローラについてです UISplitViewControllerや UITabBarControllerなどがアプリにどのように柔軟性をもたらしてくれるかを紹介します最後がアダプティブで柔軟なUIを開発する上で役立つ APIについて説明しますではシーンの話を始めましょうシーンとはアプリのUIのインスタンスでアプリのビューコントローラとビューが含まれていますシーンでは外部データを処理するためのフックを利用できます例えばアプリの特定のセクションにディープリンクするURLなどです
各シーンでは UIの状態を個別に保存して復元できます現在の状態を要求するタイミングは状態をディスクに記憶させる前にシーン側で決定しますシーンが再接続されたときには UIの以前の状態をクエリで取得できますそのためシーンを以前とまったく同じ状態に復元できるのですまたシーンからはアプリの表示に関するコンテキストも得られます例えば画面の詳細やウィンドウのサイズや位置に関する情報などですシーンは複数設けることができそれぞれが独自のライフサイクルと状態を保持しますまた各種のシーンを別個に管理できるよう様々なシーンタイプが用意されています例えばメッセージングアプリには新規メッセージの送信専用の作成シーンを用意できます iOS 26では 1つのアプリでSwiftUIとUIKitのシーンタイプを併用できるようになりました詳しくは「What's New in UIKit」をご覧くださいこのシーンの移植性こそ柔軟なアプリを実現するための基盤です
柔軟性の確保にはシーンが欠かせないため UISceneのライフサイクルの導入はまもなく必須になる予定です具体的には iOS 26以降のメジャーリリースで開発に最新のSDKを使用する場合には UISceneのライフサイクルが必須になります
複数シーンのサポートは推奨されていますが必須になるのはライフサイクルの導入のみです UISceneのライフサイクルの導入方法の詳細についてはテクニカルノート「UIKitのシーンベースのライフサイクルへの移行」をお読みくださいさてシーンはとても重要なのでここからは実例を1つお見せしますこちらは私が開発したアプリで各種のタスクにかかった時間を追跡できます AirPlayを使って現在のタスクを Apple TVに表示する機能を備えていますこのコードではアプリデリゲートが接続中のセッションのシーン設定の決定を担っていますそしてこのデリゲートのconfigurationFor ConnecingSceneSessionメソッドでシーンセッションの役割を確認します役割がインタラクティブでない外部ディスプレイの場合には専用のシーン設定を返しますそれ以外の場合にはメインのシーン設定が返されますそれぞれの設定はアプリの Info.plistファイルで定義されています
UISceneDelegateは個々のシーンのライフサイクルを管理するものです sceneWillConnectToSessionではまずウィンドウを作成しそれを接続中のシーンに関連付けますなおシーンの設定でストーリーボードが指定されている場合にはウィンドウが自動で作成されます
ウィンドウのルートビューコントローラを指定しそこにタイマーモデルなどシーン固有のデータを与えます私のアプリではシーンがバックグラウンドに移行した場合にタイマーを一時停止することが重要ですそのため私はメソッド sceneDidEnterBackgroundを実装しそこでタイマーを一時停止させています状態の復元の処理では接続中のシーンのUIの状態が以前とまったく同じになるようにしますこのシーンデリゲートには状態の復元アクティビティがあり選択内容やナビゲーションパスなど UIの各種状態を含めることができますシステムは UIのこの状態を保持してシーンのインスタンスに関連付けます後でシーンが再接続されると restoreInteractionStateWith userActivityメソッド内で状態の復元アクティビティが使えるようになります私のアプリではタイマーモデルにユーザーアクティビティの情報を渡すことにより接続中のシーンのUIの状態が以前とまったく同じになるようにしています
UISceneのライフサイクルを導入した結果柔軟なアプリのための強力な基盤ができましたここからはコンテナビューコントローラについてですこれが柔軟なアプリの構築にどれほど不可欠なものであるかを説明しますコンテナビューコントローラは子ビューコントローラのレイアウトを管理する役割を担っています UIKitには柔軟な設計のコンテナビューコントローラが多数用意されています最初に説明するのは UISplitViewControllerです UISplitViewControllerはコンテンツの隣接する列の表示を管理するもので情報の階層構造をシームレスに移動できるようにするために役立ちます水平方向のスペースが限られている場合にはスペースに応じて列が折りたたまれナビゲーションスタックにまとめられます UISplitViewControllerには多くの新機能が追加されていますが最初に取り上げるのは列のインタラクティブなサイズ変更です列の境界をドラッグして列のサイズを変更できるようになりました境界にカーソルを合わせるとポインタの形状が変化してどの方向にサイズを変更できるかが示されます UISplitViewControllerには各列の最小幅と最大幅のほか最適な幅のデフォルト値が用意されています列によってはデフォルトよりも広い幅でコンテンツを表示した方がよいこともあればデフォルトの何割かの幅で十分なこともありますそこで各列の最小幅や最大幅最適な幅はビューのプロパティを調整してカスタマイズできるようになっています列幅をカスタマイズするときは表示可能な列の数が制限されないように注意してくださいアプリの柔軟性が低下してしまいますまたビューの列が折りたたまれているかどうかに応じて UIの適応が必要になることがあります例えばメールアプリでは列が折りたたまれていると右矢印が表示されそれを選択すると追加のコンテンツが表示されることがわかります新しい特性である splitView ControllerLayoutEnvironmentは祖先の分割ビューコントローラが折りたたまれているかどうかを示しますこの例ではこの特性をクエリで取得してビューが折りたたまれている場合にこの矢印インジケータを追加していますまたインスペクタ列のサポートも追加されましたインスペクタは分割ビューコントローラー内の列の1つで選択したコンテンツの詳細情報が表示されますこのプレビューではインスペクタを使って写真の列の横に写真のメタデータを表示しています分割ビューコントローラが展開されているときはインスペクタ列は画面端に他の列に隣接して配置されます
分割ビューコントローラが折りたたまれると表示が自動で調整されインスペクタ列がシートとして表示されます
分割ビューコントローラにインスペクタを組み込むにはインスペクタ列用のビューコントローラを指定します分割ビューコントローラを表示した時点ではインスペクタ列は非表示になっていますそこでshowを呼び出してインスペクタ列を表示します UISplitViewControllerは柔軟な設計なので画面サイズに関係なくアプリで最高のナビゲーション体験を実現できます自由に使えるもう1つのコンテナが UITabBarControllerです UITabBarControllerは相互排他的なペインを同じ領域に表示するためのものですタブバーでは各ペインの現在の状態を保持したままタブを素早く切り替えて表示できますさらにタブバーの外観はプラットフォームに応じて変化します
iPhoneならタブバーはシーンの下部に配置されます Macではツールバーに配置されますがサイドバーとして表示されることもあります
Apple Vision Proの場合にはタブバーはシーン左端のオーナメントに表示されます iPadの場合はシーンの最上部のナビゲーションコントロールの隣にありますタブバーをサイドバーに変化させてさまざまなコンテンツに素早くアクセスできるようにすることも可能ですタブグループはサイドバーに追加の移動先を表示するものです例えば iPadのミュージックアプリならというタブグループにやがあります
サイドバーが使用できない場合は移動先のタブになります
UITabBarControllerにはこの適応動作をシームレスに管理するためのAPIがありますまずはタブグループに管理ナビゲーションコントローラを設定しますタブグループのリーフタブが選択されるとそのビューコントローラがその祖先グループのビューコントローラと一緒にナビゲーションスタックにプッシュされますこのスタックにプッシュされるビューコントローラをカスタマイズするには UITabBarControllerのデリゲートメソッドを実装します displayedViewControllersFor tabですこの例ではタブが選択できない場合メソッドから空の配列が返されタブのビューコントローラがスタックから省略されます
UITabBarControllerがタブバーやサイドバーの表示にどんな柔軟性をもたらすかの詳細については WWDC24の「Elevate your tab and sidebar experience in iPadOS」をご覧くださいアプリの柔軟性を確保するには UISplitViewControllerや UITabBarControllerなどのコンテナビューコントローラを使用するのが一番ですどのコンテナも幅広いサイズに対応できる設計ではありますがアプリでは主要な機能を維持する上で最小サイズが必要になることもありますそのような場合には UISceneSizeRestrictions APIを使用してシーンのコンテンツに必要な最小サイズを指定します最小サイズを指定する最適なタイミングはシーンを接続しようとするときですこの例では最小幅として 500ポイントを指定しています柔軟なアプリを実現するにはそのUIが多様なデバイスに適応できる必要がありますそこでここからはアダプティブUIの構築を支援するAPIについて説明します UIをアダプティブにするために不可欠なのがコンテンツを常にセーフエリア内にとどめることですセーフエリアはビュー内の領域の1つでインタラクティブなコンテンツや重要なコンテンツに適した場所ですこの外部に配置されたコンテンツはナビゲーションバーやツールバーなどの下に隠れて見えなくなる可能性が高まります
またステータスバーなどのシステムUIやダイナミックアイランドなどのデバイス機能でもコンテンツが隠れてしまうことがあります
サイドバーは分割ビューコントローラの隣接する列に非対称のセーフエリアを追加するものです背景はサイドバーの下にありセーフエリアの外側にも自由に展開できます
メッセージのトランスクリプトなどのコンテンツは常に表示されるようセーフエリア内に配置されますメッセージの吹き出しはセーフエリア内の端付近に表示されていますレイアウト余白を使用しているのでサイドバーと一定の間隔が確保され視覚的に明確に分離されています
各ビューにはコンテンツに標準余白を適用するためのレイアウトガイドがありますレイアウト余白はデフォルトではセーフエリアの内部に適用されますこの例ではコンテナビューの内部にコンテンツを配置するレイアウトガイドを要求していますその上でこのガイドを使用してコンテンツビューに制約を設定しています
iPadOS 26では macOSと同じようにウィンドウを閉じたり最小化したりフルスクリーンにしたりできるコントロールがシーンに導入されていますこのウィンドウコントロールはシーン内のコンテンツの横に表示されます
シーンにはコンテンツに合ったウィンドウコントロールのスタイルを指定できますそれを行うにはシーンに UIWindowSceneDelegateのメソッド preferredWindowingControlStyleを実装します
UINavigationBarなどのシステムコンポーネントの適応処理は自動的にコントロール周囲のサブビューが調整されて完了しますまたUIはスタイルに関係なくウィンドウコントロールに適応させる必要があります
UIが隠れないようにするためにはウィンドウコントロールを考慮したレイアウトガイドを使用しますこの例では水平方向の角の適応を伴うレイアウト余白ガイドを採用していますこのレイアウトガイドはシーン上部のバーのようなコンテンツに最適でウィンドウコントロールの後端からのインセットになります続いてこのガイドを使用してコンテンツビューに制約を設定しますアダプティブUIではインターフェイスの向きに冗長性を確保する必要がありますシーンのサイズ変更でもデバイスの回転やウィンドウレイアウトの変更でも最終的には必ずシーンのサイズ変更が発生しますアプリのカテゴリによっては向きの変更を一時的にロックした方がよいこともあります例えばレースゲームでハンドル操作にデバイスを回転させることが想定されている場合には向きの変更をロックする必要があります
ビューコントローラが表示されているときはインターフェイスの向きをロックしますそれにはコントローラのサブクラスで prefersInterfaceOrientationLockedをオーバーライドしますこの設定が変更されるたびに setNeedsUpdateOfPrefersInterface OrientationLockedを呼び出します
向きの変更のロック状況を確認するには UIWindowSceneDelegateのメソッド didUpdateEffectiveGeometryを実装し isInterfaceOrientationLockedの値が変更されたかどうかを比較します柔軟なアプリはサイズ変更に迅速に対応できなければなりませんしかしアプリのUI要素によっては描画の計算コストが大きいこともあります
例えばゲームではシーンのサイズが変わると大量のアセットのサイズ変更が必要になることが多々ありますしかしサイズ変更操作の間にアセットを逐一レンダリングする必要はありませんこの例では isInteractivelyResizingをクエリしてアセットの更新をサイズ変更操作の完了後の新しいサイズへの更新だけにしています
ユーザーがデバイスを好きなように使えることこそ柔軟なアプリの魅力ですさまざまなサイズで優れた体験を届けられるので向きやレイアウトを問わず使えるアプリになるのです Info.plistのUIRequiresFullscreenキーは iOS 9から導入された互換モードでシーンのサイズ変更を防ぎます UIRequiresFullscreenは非推奨であり今後のリリースでは無視される予定ですアダプティブUIのアプリではこのキーは必要ないため削除する必要があります
また特に新しいハードウェアを対象とした別の互換モードもあります以前は画面サイズの異なる新しいハードウェアがリリースされるとアプリのUIのスケーリングやレターボックスが必要になっていましたこのスケーリングはアプリを新しいSDKでビルドして再提出するまで維持されます iOS 26 SDKを使用してビルドしたアプリを提出するとその後はアプリのUIのスケーリングやレターボックスの追加が行われなくなります
アプリの柔軟性を確保するためのベストプラクティスは以上です次のステップはまずシーンのライフサイクルの導入ですこれは柔軟なアプリの強力な基盤になります次が UIのコンポーネント管理に向けたコンテナビューコントローラの導入ですそして最後がレイアウトガイドなどの APIによるアダプティブUIの構築です皆さんのアプリの柔軟性が高まるのを楽しみにしていますありがとうございました

// Specify the scene configuration

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication,
                     configurationForConnecting sceneSession: UISceneSession,
                     options: UIScene.ConnectionOptions) -> UISceneConfiguration {

        if sceneSession.role == .windowExternalDisplayNonInteractive {
            return UISceneConfiguration(name: "Timer Scene",
                                        sessionRole: sceneSession.role)
        } else {
            return UISceneConfiguration(name: "Main Scene",
                                        sessionRole: sceneSession.role)
        }
    }
}

3:30 - Configure the UI

// Configure the UI

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?
    var timerModel = TimerModel()

    func scene(_ scene: UIScene,
               willConnectTo session: UISceneSession,
               options connectionOptions: UIScene.ConnectionOptions) {

        let windowScene = scene as! UIWindowScene
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = TimerViewController(model: timerModel)
        window.makeKeyAndVisible()
        self.window = window
    }
}

3:56 - Handle life cycle events

// Handle life cycle events

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?
    var timerModel = TimerModel()

    // ...

    func sceneDidEnterBackground(_ scene: UIScene) {
        timerModel.pause()
    }
}

4:09 - Restore UI state

// Restore UI state

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?
    var timerModel = TimerModel()

    // ...

    func stateRestorationActivity(for scene: UIScene) -> NSUserActivity? {
        let userActivity = NSUserActivity(activityType: "com.example.timer.ui-state")
        userActivity.userInfo = ["selectedTimeFormat": timerModel.selectedTimeFormat]
        return userActivity
    }

    func scene(_ scene: UIScene restoreInteractionStateWith userActivity: NSUserActivity) {
        if let selectedTimeFormat = userActivity?["selectedTimeFormat"] as? String {
            timerModel.selectedTimeFormat = selectedTimeFormat
        }
    
}

4:46 - Adapt for the split view controller layout environment

// Adapt for the split view controller layout environment

override func updateConfiguration(using state: UICellConfigurationState) {
   
    // ...
    
    if state.traitCollection.splitViewControllerLayoutEnvironment == .collapsed {
        accessories = [.disclosureIndicator()]
    } else {
        accessories = []
    }
}

6:11 - Customize the minimum, maximum, and preferred column widths

// Customize the minimum, maximum, and preferred column widths

let splitViewController = // ...

splitViewController.minimumPrimaryColumnWidth = 200.0
splitViewController.maximumPrimaryColumnWidth = 400.0
splitViewController.preferredSupplementaryColumnWidth = 500.0

7:37 - Show an inspector column

// Show an inspector column

let splitViewController = // ... 
splitViewController.setViewController(inspectorViewController, for: .inspector)

splitViewController.show(.inspector)

9:19 - Managing tab groups

// Managing tab groups

let group = UITabGroup(title: "Library", ...)
group.managingNavigationController = UINavigationController()

// ...

// MARK: - UITabBarControllerDelegate

func tabBarController(
    _ tabBarController: UITabBarController,
    displayedViewControllersFor tab: UITab,
    proposedViewControllers: [UIViewController]) -> [UIViewController] {

    if tab.identifier == "Library" && !self.allowsSelectingLibraryTab {
        return []
    } else {
        return proposedViewControllers
    }
}

10:25 - Preferred minimum size

// Specify a preferred minimum size

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    func scene(_ scene: UIScene,
               willConnectTo session: UISceneSession,
               options connectionOptions: UIScene.ConnectionOptions) {

        let windowScene = scene as! UIWindowScene
        windowScene.sizeRestrictions?.minimumSize.width = 500.0
    }
}

11:57 - Position content using the layout margins guide

// Position content using the layout margins guide

let containerView = // ...
let contentView = // ...

let contentGuide = containerView.layoutMarginsGuide

NSLayoutConstraint.activate([
    contentView.topAnchor.constraint(equalTo: contentGuide.topAnchor),
    contentView.leadingAnchor.constraint(equalTo: contentGuide.leadingAnchor),
    contentView.bottomAnchor.constraint(equalTo: contentGuide.bottomAnchor)
    contentView.trailingAnchor.constraint(equalTo: contentGuide.trailingAnchor)
])

12:34 - Specify the window control style

// Specify the window control style

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    func preferredWindowingControlStyle(
        for scene: UIWindowScene) -> UIWindowScene.WindowingControlStyle {
        return .unified
    }
}

13:04 - Respect the window control area

// Respect the window control area

let containerView = // ...
let contentView = // ...

let contentGuide = containerView.layoutGuide(for: .margins(cornerAdaptation: .horizontal)

NSLayoutConstraint.activate([
    contentView.topAnchor.constraint(equalTo: contentGuide.topAnchor),
    contentView.leadingAnchor.constraint(equalTo: contentGuide.leadingAnchor),
    contentView.bottomAnchor.constraint(equalTo: contentGuide.bottomAnchor),
    contentView.trailingAnchor.constraint(equalTo: contentGuide.trailingAnchor)
])

13:57 - Request orientation lock

// Request orientation lock

class RaceViewController: UIViewController {

    override var prefersInterfaceOrientationLocked: Bool {
        return isDriving
    }

    // ...

    var isDriving: Bool = false {
        didSet {
            if isDriving != oldValue {
                setNeedsUpdateOfPrefersInterfaceOrientationLocked()
            }
        }
    }
}

14:18 - Observe the interface orientation lock

// Observe the interface orientation lock

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var game = Game()

    func windowScene(
        _ windowScene: UIWindowScene,
        didUpdateEffectiveGeometry previousGeometry: UIWindowScene.Geometry) {
        
        let wasLocked = previousGeometry.isInterfaceOrientationLocked
        let isLocked = windowScene.effectiveGeometry.isInterfaceOrientationLocked

        if wasLocked != isLocked {
    game.pauseIfNeeded(isInterfaceOrientationLocked: isLocked)
        }
    }
}

14:44 - Query whether the scene is resizing

// Query whether the scene is resizing

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var gameAssetManager = GameAssetManager()
    var previousSceneSize = CGSize.zero

    func windowScene(
        _ windowScene: UIWindowScene,
        didUpdateEffectiveGeometry previousGeometry: UIWindowScene.Geometry) {

        let geometry = windowScene.effectiveGeometry
        let sceneSize = geometry.coordinateSpace.bounds.size

        if !geometry.isInteractivelyResizing && sceneSize != previousSceneSize {
            previousSceneSize = sceneSize
            gameAssetManager.updateAssets(sceneSize: sceneSize)
        }
    }
}

関連する章

リソース

関連ビデオ

WWDC25

WWDC24