-
iPhone Duoに向けたアプリの準備
iPhone Duoの折りたたみ式ディスプレイに対応させるため、アプリをアップデートして最適化する方法を学びましょう。フルスクリーン体験を有効にする方法、フレキシブルなレイアウトのベストプラクティスを取り入れる方法、そしてXcodeの「Device Hub」でポーズをシミュレートする方法を紹介します。さらに、インターフェイスの向きの代わりにサイズクラスを使う方法、非対称のセーフエリアを処理する方法、Split Viewによるマルチタスクをテストする方法を確認し、あらゆる使われ方でアプリが真価を発揮できるようにしましょう。
関連する章
- 0:00 - Introduction
- 0:30 - Build with the latest SDK
- 1:17 - Get started in Xcode
- 1:33 - Adopt flexible layouts
- 2:46 - Use size classes
- 3:57 - Avoid screen assumptions
- 5:01 - Adopt standard navigation
- 6:06 - Respect safe areas
- 8:08 - Use reserved regions
- 9:12 - Next steps
リソース
関連ビデオ
Tech Talks
WWDC26
-
このビデオを検索
こんにちは UIフレームワークチームの エンジニアリングマネージャー David Jacksonです
本日は アプリをiPhone Duoに 対応させる方法を説明します まず Xcodeでの作業開始方法について 説明します 次に どのプラットフォームでも 正しくサイズ変更できるようにする 一般的なレイアウトの ガイドラインを案内します その後 iPhone Duoで アプリを最大限に活かすための 具体的なレイアウト指針について お話しします
それでは 始めましょう iOS 27 SDKを使用して ビルドしていなくても アプリは iPhone Duoで動作します 問題なく動作します
デバイスが閉じた状態では アプリはステータスバーと カメラの左側の画面領域を使用します デバイスが開いた状態では アプリはこれまでと同じ サイズとアスペクト比になります 利用可能な画面領域をさらに 有効活用する方法を紹介します すでにiOS 27 SDKを 採用されている場合 iPhoneアプリのサイズ変更に 対応するために行ってきた作業が 大きな成果をもたらします これで アプリの表示は 次のようになります アプリは内側ディスプレイの ステータスバー領域の左側まで 広がります
画面全体を活用する方法はこちらです
iOS 27.1 SDKを使用して アプリをビルドすると アプリは画面の端まで広がります 標準のナビゲーションボタンや ツールバーボタンは ステータスバー下に縦方向に並びます フルスクリーン体験を試すには Xcode 27.1を ダウンロードしてください Device Hubでアプリを実行するには iPhone Duoシミュレータを 選択してください 画面下部の操作ボタンを使用して iPhone Duoの開閉 回転 折りたたみを行ってください
アプリが画面全体を使うようになると 各ポーズでレイアウトの 問題に気づくかもしれません 優れたiPhone Duoアプリは 過去に紹介した柔軟な レイアウトの原則に従っています 直近では WWDC26の 「Modernize Your UIKit App」で 柔軟なレイアウトの原則を 解説しました
開いた状態 閉じた状態 回転や折りたたんだ状態など あらゆるポーズに合わせて サイズを変更する必要があるため iPhone Duoにおいては これらの原則が これまで以上に重要になります
iPhoneアプリは 長年にわたり 変化に対応してきました 新しい画面サイズや画面形状 そして Dynamic Islandのような 特別領域にも対応してきました iPhone Duoも 新しい画面形状と カメラ配置によって その流れを受け継いでいます
iOS 27では MacのiPhone Mirroring機能で これまで以上にアプリを 拡大表示できるようになります
iPhone Duoの開閉も 同様の仕組みで動作します アプリは異なるサイズクラスの境界に 反応するかもしれませんが それでもやはり iPhoneアプリであることに 変わりはありません 優れたアプリのレイアウトは 幅広いデバイスに適合しています UIの慣用表現に基づいて 画面サイズやデバイス機能を 決めつけることを避けています また サイズクラスなどのツールで 小さいレイアウトと大きい レイアウトを区別しています サイズクラスについて さらに詳しく見ていきましょう 横方向と縦方向のサイズクラスは それぞれの軸において 利用可能なスペースと緩やかに 関連付けられています
サイズクラスは利用可能領域に応じて アプリが提供すべき ユーザー体験を表現するものです SwiftUIでは environmentを使用します UIKitでは trait collectionを使用します iPhone Duoでは いくつかの サイズクラスの組み合わせがあります 外側ディスプレイでは 他のiPhoneモデルと同様に iPhone Duoは縦向きでは レギュラーの縦方向と コンパクトな横方向サイズクラスを 横向きでは縦横ともに コンパクトサイズクラスを使用します
内側のディスプレイでは 広がった領域を活用して サイドバーなどをより多く表示できます そのため 縦横ともに レギュラーサイズクラスとなります 外側ディスプレイにおける 画面の向きは 他のiPhoneと同様に動作します
iPhone Duoは テントのように立てて 使われることもあるため 横向き表示をサポートする 絶好の機会となります 内側ディスプレイでの画面の向きは 異なる動作をします 内側のディスプレイでは サポートされている画面の向きは 適用されません Idiomと同様に レイアウト判断で画面の向きを 確認することは避けてください 代わりにサイズクラスを使用します 2つのディスプレイを備えた デバイスでは コード内で メイン画面の参照は避けてください これは曖昧であり 将来のリリースで 非推奨となる予定です 可能であれば 画面への直接参照は 一切使用しないでください 代わりに environment トレイト またはシーンの境界など よりローカルな概念を使用してください 画面へのアクセスが必要な場合は ウインドウシーンから動的に アクセスしてください UIを画面の四隅にぴったり 合わせるには iOS 26で 導入されたConcentricity APIを 使用してください これらは iPhone Duoの画面形状に 合わせて更新されています SwiftUIの場合は ConcentricRectangleを 使用してください UIKitの場合は UICornerConfigurationを 使用してください iPhone Duoは引き続き UIRequiresFullScreenキーを サポートします ただし iPhone Duoの開閉時には アプリのサイズが変更されます iPhone Duoはサポートされている 画面の向きを尊重しますが Split Viewマルチタスクを含む 内側の画面上では アプリのサイズが調整されます iPhone Duoの画面に関する 詳細については 関連する 「Leverage multiple displays and scenes on iPhone Duo」 をご覧ください 内外ディスプレイへの サイズ調整に対応できたところで iPhone Duo特有の レイアウト考慮事項について説明します 標準的なナビゲーションパターンは あらゆるポーズに 対応するための優れた方法です SwiftUIの NavigationSplitViewや UIKitの UISplitViewControllerは完全対応します iPhone Duoが 閉じられているときは カラムが折りたたまれ 単一スタックの構成になります 開いているときは カラムは並列タイル表示と オーバーレイ表示の両方に対応します SwiftUIのTabViewや UIKitのUITabBarControllerも すべてのポーズに 対応しています
デフォルトでは タブは 内外両方のディスプレイに表示され 状況に応じて縦方向に配置されます 内側のディスプレイでは より表現豊かなナビゲーションの サイドバーを有効にできます SwiftUIの場合は デフォルトのタブバー配置を に設定してください UIKitの場合は 優先配置を に設定してください シートもすべてのポーズに対応します 外側のディスプレイでは シートにボタンを配置し 縦方向に並べることも可能です 内側のディスプレイでは シートは中央に配置されます ポップオーバー メニュー アラートなど その他の表示形式も 各ポーズに対応しています ナビゲーションバー ツールバー タブバーは セーフエリア外に配置されます これらは ステータスバーなどの システムUIや カメラなどのハードウェアを 自動的に回避します 水平バーは上下のインセットを 垂直バーは先頭と末尾の インセットを提供します 縦方向に配置されたコンテンツの 詳細については 関連テクニカルトーク「Raise the bar with iPhone Duo」をご覧ください セーフエリアを適切に考慮することで アプリのコントロールに確実に届き アプリ全体が 完全に見通せるようになります アプリでセーフエリアを効果的に 活用する方法を紹介します UIを配置する際は 操作用コントロールなどの前景要素を セーフエリア内に配置します 安全に配置してください SwiftUIの場合 コンテンツはデフォルトで セーフエリア内に配置されます UIKitでビューを手動配置する場合は ビューのセーフエリア インセットを参照するか Auto Layoutでビューを セーフエリアレイアウトガイドに 制約させてください 全画面アートワークなどの背景要素は 利用可能なスペースいっぱいに広げ ツールバーやサイドバーの 背面まで拡張させてください SwiftUIでは ignoresSafeAreaを使用します UIKitでは ビューの boundsを使用してください セーフエリアは非対称であることが 多い点にご注意ください これは特にiPhone Duoで顕著です たとえば 縦向きのボタンは 横向きやSplit View マルチタスク表示では 左側に表示される場合があります そのため 左右のインセットが 均等であると思い込まないでください
代わりに 各エッジを個別に 処理するコードを記述します
セーフエリアと同様に レイアウトマージンも非対称です これにより 反対側の余白を保ちつつ 前景コンテンツを縦のボタンや ステータスバーへと 近づけることができます さまざまな構成でセーフエリアの 処理をテストすることが重要です 忘れずにテストしてください Split Viewマルチタスクも 例外ではありません Device Hubを使用して 内側ディスプレイで アプリをプレビューしてください 画面下部のホームインジケータを使って アプリを画面の片側にドラッグします アプリをドロップするための 領域が表示されます 次に アプリをもう一方の 側にドラッグしてください 縦方向に配置されたコンテンツは アプリのどちら側にも 表示される可能性があります 最後に iOS 27.1では システム提供のUIと 競合することなく 利用可能な画面スペースを 最大限に活用できる 新しいAPIを導入します カスタムUIで活用できます
SwiftUIの場合 ReservedRegionを 使用することで 利用可能スペースを最大化しつつ UI要素をセーフエリア外に 安全に配置できます
UIKitでは UIViewReservedRegionと呼ばれます 独自のカスタムバーを作る場合や エッジ・トゥ・エッジのUIを 実装する際に 最適な選択肢です ReservedRegionに関する詳細情報や 折りたたみへの適合など カスタムUIの構築方法については 関連するTech Talk 「Strike a Pose with Adaptive Layouts on iPhone Duo」 をご覧ください セーフエリアの ベストプラクティスをまとめると セーフエリアに自動で 適合するUIには 標準のバーを使用してください 操作用や表示用の前景コンテンツは セーフエリア内に配置し 背景コンテンツはセーフエリア外まで 拡張させて構いません 非対称なセーフエリアや レイアウトマージンについても 必ず考慮しテストしてください
より複雑なレイアウトの場合は ReservedRegionの 採用をご検討ください アダプティブレイアウトの 指針を多数取り上げました 確実に準拠するための 効率的な方法を紹介します 「Modernize Your UIKit App」 のセッションでは 新しいモダン化スキルを紹介しました Xcode 27.1では このスキルの名称が App Resizabilityに変更されました 現在 SwiftUIおよび iPhone Duoをサポートしています ぜひお試しください
これで アプリはiPhone Duoでも 快適に動作する準備が整いました まとめとして Xcode 27.1を ダウンロードし Device Hubを使用して iPhone Duoでアプリをシミュレートし 紹介したアダプティブレイアウトの ベストプラクティスをすべて 満たしていることを確認した上で App Resizabilityスキルを お試しください 以上です ご清聴ありがとうございました App Storeのスクロールせずに 見える範囲（above the fold）に 皆さんのiPhone Duoアプリが 並ぶのを楽しみにしています
-
-
2:59 - Read size classes
// SwiftUI @Environment(\.horizontalSizeClass) private var horizontalSizeClass @Environment(\.verticalSizeClass) private var verticalSizeClass // UIKit traitCollection.horizontalSizeClass traitCollection.verticalSizeClass -
4:16 - Access the screen from the window scene
// Avoid referencing the main screen on a two-display device. // Access the screen dynamically from the window scene instead. let screen = window?.windowScene?.screen -
4:30 - Match the screen corners with Concentricity
// SwiftUI ConcentricRectangle() .fill(Color.green) .padding(8.0) .ignoresSafeArea() // UIKit // UICornerConfiguration -
5:44 - Show a sidebar on the inner display
// SwiftUI TabView { … } .defaultTabBarPlacement(.sidebar) // UIKit tabBarController.sidebar.preferredPlacement = .sidebar -
6:52 - Align foreground content to the safe area
// UIKit foreground.frame = view.bounds.inset(by: view.safeAreaInsets) -
7:07 - Let background content extend past the safe area
// SwiftUI .ignoresSafeArea() // UIKit backgroundView.frame = view.bounds -
7:30 - Handle asymmetric safe area insets
// Avoid assuming insets on opposite sides are equal let width = view.bounds.width - view.safeAreaInsets.left * 2 // Handle each side independently let width = view.bounds.inset(by: view.safeAreaInsets).width -
9:25 - Replace main screen references
func updateThumbnail(from image: UIImage) { // Before let screenScale = UIScreen.main.scale // After let screenScale = traitCollection.displayScale // ... }
-
-
- 0:00 - Introduction
David Jackson from the UI Frameworks team outlines how to bring your app to iPhone Duo: getting started in Xcode, general resizing guidance, and layout guidance specific to iPhone Duo.
- 0:30 - Build with the latest SDK
Your app runs on iPhone Duo even without recompiling, but screen usage improves with each SDK. The iOS 27 SDK extends your app left of the status bar on the inner display; the iOS 27.1 SDK reaches the screen edge and lays standard navigation and toolbar buttons out vertically.
- 1:17 - Get started in Xcode
Download Xcode 27.1 and run your app in the iPhone Duo simulator using DeviceHub. On-screen control buttons let you open, close, rotate, and fold the device to check your layout in every pose.
- 1:33 - Adopt flexible layouts
iPhone Duo extends the long-standing need for adaptive layout — new screen shapes, camera locations, and iPhone mirroring on the Mac. Avoid assumptions about display size or capability based on user interface idiom, and design across a continuum of sizes.
- 2:46 - Use size classes
Size classes express the experience your app should provide for the available space — the environment in SwiftUI, trait collection in UIKit. The outer display behaves like other iPhone models, while the inner display is regular in both dimensions, leaving room for sidebars. The inner display doesn't honor supported interface orientations, so use size classes rather than orientation for layout decisions.
- 3:57 - Avoid screen assumptions
Don't reference the main screen on a two-display device — it's ambiguous and will be deprecated. Prefer the environment, trait collection, or the scene's bounds, and access screens dynamically from the window scene. Use the iOS 26 Concentricity APIs, ConcentricRectangle and UICornerConfiguration, to fit the screen's corners.
- 5:01 - Adopt standard navigation
NavigationSplitView, UISplitViewController, TabView, and UITabBarController are fully adaptive across every pose — columns collapse when closed and tile or overlay when open. On the inner display you can opt into a sidebar placement for richer navigation. Sheets, popovers, context menus, and alerts adapt as well.
- 6:06 - Respect safe areas
Standard bars lay out outside the safe area and automatically avoid the status bar and camera. Keep interactive foreground content inside the safe area, and let background artwork extend past it with ignoresSafeArea or the view's bounds. Safe areas and layout margins are often asymmetric on iPhone Duo, so handle each side independently and test in Split View.
- 8:08 - Use reserved regions
New in iOS 27.1, ReservedRegion in SwiftUI and UIViewReservedRegion in UIKit let custom UI claim as much screen space as possible without colliding with system UI — useful for custom bars and edge-to-edge designs.
- 9:12 - Next steps
The app modernization skill introduced in "Modernize your UIKit app" is now called App Resizability in Xcode 27.1, with support for SwiftUI and iPhone Duo. Download Xcode 27.1, simulate with DeviceHub, follow the adaptive layout practices, and try the skill.