-
iPhone Duoでマルチディスプレイとシーンを活用
iPhone Duo向けの高機能なマルチウインドウ・マルチディスプレイ体験を構築する方法を紹介します。動的なウインドウサイズを扱う方法や、左右に並べるマルチタスクで新しいシーンをリクエストする方法を見ていきます。SwiftUIとUIKitでヒンジの角度の変化を検知し、インタラクティブな効果を作り出す方法を学びましょう。また、シーンアクセサリーを使って両方のディスプレイに補足コンテンツを同時に表示する方法についても解説します。
関連する章
- 0:00 - Introduction
- 0:49 - Respond to the hinge
- 1:18 - Drive a pitch bend with hinge angle
- 2:35 - Hinge data versus layout APIs
- 2:59 - Split view multitasking
- 3:38 - Support multiple scenes
- 4:22 - Scene accessories
- 5:00 - The camera capture accessory
- 5:34 - Build a teleprompter accessory
- 6:44 - Next steps
リソース
関連ビデオ
Tech Talks
-
このビデオを検索
iPhone Duoは画期的な新デバイスで あり 独自の機能を提供しつつも 使い慣れた感覚を保っています
ユーザーがアプリを利用する際 使用しているデバイス上で違和感なく 快適に使えることを期待しています このシリーズの他の動画では アプリがデバイス間で 最高水準の体験を提供する 方法をご紹介しています
ここでは iPhone Duoの 独自の機能を活かし アプリを真に魅力的なものにする 方法をご説明します
UIフレームワーク部門の エンジニアリングマネージャー Chris Doneganです そして システムエクスペリエンスエンジニアの Alex Mullerです
ヒンジの動きに反応させて 素晴らしいインタラクションや エフェクトを実現する方法 Split Viewによるマルチタスクで 豊富なワークフローをサポートする方法 そしてシーンアクセサリを活用して 複数のディスプレイにまたがって UIを表示する方法に ついて学んでいきます まずはヒンジから見ていきましょう iPhone Duoを開く瞬間は圧巻です 壁紙がヒンジの角度に応じて反応し ズーム効果が適用される様子に ご注目ください
アプリも ヒンジの動きに 反応させることができます SwiftUIには新しいonHingeChange モディファイアが用意されており UIKitにはUIHingeInteractionが 提供されています 「閉じた状態」「半開き」 「全開」の3つの状態を把握できます ヒンジの状態を大まかに把握できます
また これらの離散的な状態に加え ヒンジの角度に関する 継続的な更新情報も提供されます
これは私が現在開発中のアプリです エアギターの練習を レベルアップさせるために 実際に演奏できるギターが 搭載されています
ヒンジを使って ワミーバーのように ピッチベンドを制御しようという アイデアがあります これが私の「Instruments」 ビューです このビューにはピッチベンド値が 状態として保持されており それが 本体内のギタービューに渡されます ワミー機能の実装は ギタービューへのonHingeChange モディファイア追加から始めます このモディファイアは 変更前後の 2つのヒンジコンテキストを を持つクロージャを受け取ります このケースでは 現在のコンテキストのみが 必要です
次に ヒンジが null でないかを確認します null 値は アプリが ヒンジのないデバイスで 実行されていることを示します 利用可能かどうかを 確認するだけでなく iPhone Duoが部分的に 開いているときのみの 更新に関心があります
アプリがヒンジの角度を 読み取っていないときは ピッチベンドが リセットされるよう 必ず else条件を追加します
最後に 角度を使用してピッチベンドを計算し 状態を更新します
onHingeChange修飾子を 使用することで 私のギターアプリは 新たな表現力を得ることができました
ヒンジデータはリアルタイムで 取得されるため インタラクションや エフェクトの制御に最適です レイアウトには arrangementや region APIをご利用ください 詳細については 「Strike a Pose with Adaptive Layouts on iPhone Duo」 をご覧ください アプリがヒンジを 活用するのを楽しみにしています ヒンジ機能は非常に強力だと思います その通りです しかし iPhone Duoにはまだまだ 多くの機能が隠されています iPhone Duoの強力な マルチタスク機能に備えましょう アプリはこの機能に対応できるよう 準備しておく必要があります すべてのアプリがiPhone Duoの マルチタスクに 参加し 2つのアプリを並列レイアウトで 配置できます
iPadでのサイズ変更や iPhone Mirroringに対応していれば 素晴らしいスタートを切っています
iPhone Duoには 動画と アプリを積み重ねる まったく新しいレイアウトが 採用されています
アプリは これら2つのレイアウトを 同一に処理できます システムがこれらの レイアウトへの対応を容易にします レイアウトの決定に活用できる サイズクラスやシーンジオメトリと いった ツールが提供されています 「Prepare your app for iPhone Duo」に記載されている ベストプラクティスに従ってください iPhone Duoは 複数UIインスタンスを サポートする初のiPhoneです iPadでこの機能をサポートしている アプリであれば iPhone Duoでも同様に動作します ただし 1つ留意すべき点があります iPadでは いつでも 新しいウインドウを作成できます
一方 iPhone Duoの 外側のディスプレイでは 新しいウインドウを 作成することはできません この動作は 内側のディスプレイに 限定されています この動的な利用可能性は iPhone Duo特有の挙動です
新しいシーンをリクエストする際は エラー処理を確実に行ってください UIWindowSceneActivationActionを 使用してください これにより 新規ウインドウが 利用不可の際は自動で非表示になります 初めて複数のシーンのサポートを 追加したい場合は ドキュメントをご確認ください
アプリで複数のシーンを表示する 方法は Split Viewによる マルチタスクだけではありません シーンアクセサリを使用すると アプリで複数のディスプレイに 同時にコンテンツを表示できます iPhone や iPad の場合 シーンアクセサリを使用することで 外部ディスプレイのゲームで iPhoneをコントローラとして 使用するなど メインUIに 追加コンテンツを組み合わせられます システムは これらのアクセサリの 利用可能状態を動的に制御します これらはデフォルトで 有効になっていますが いつでもオン／オフを切り 替えることができます オブザベーション追跡を使用して アクセサリの利用可能状態の 変化に対応することで システムの状態が変化しても アプリを 完全に同期させることができます
iPhone Duoのカメラアプリの 新機能として CameraCaptureAccessoryを 使用すると アプリのメインUIを内側の ディスプレイに表示したまま 外側のディスプレイに 追加のUIを表示させることができます これにより 被写体の写真や 動画を撮影・録画しながら その人にコンテンツを表示させることが できます カメラキャプチャアクセサリは アプリが 内側のディスプレイで 全画面表示されており かつ アクティブなカメラセッションが 実行されている場合に利用可能です
カメラ UI と同じビュー上で アクセサリを登録してください
新しいカメラ機能の詳細については 「Build a great camera experience for iPhone Duo」をご覧ください この講演の準備として 練習用に カメラアプリを作成してきました
セリフを覚えるのに役立つよう 外側のディスプレイに テレプロンプターを 表示させたいと思います まずsceneAccessory修飾子を 使用して カメラキャプチャアクセサリを 追加します
カメラビューにこのアクセサリを 追加することで カメラビューが表示されているときのみ テレプロンプターが表示されます 必要なコードはこれだけです
これで カメラビューが 内側のディスプレイに表示されている間 外側のディスプレイに テレプロンプタービューが表示されます 次に 暗記して 練習できるようにしたいのですが テレプロンプターの表示を切り 替えるボタンがあると便利です テレプロンプターモデルの 有効状態を更新する ボタンを備えたツールバーを追加し その状態を カメラキャプチャアクセサリに渡します 次に デバイスが閉じられているときなど アクセサリが利用できない場合は ツールバーのボタンを無効にしたいと 考えています カメラキャプチャアクセサリに onAvailabilityChangeを追加します この変更を監視するための コールバックを取得できます
これで 両方のディスプレイを活用し 必要なときだけテレプロンプターを 表示する 機能充実のリハーサルアプリが 完成しました まとめてくださり ありがとうございます 練習に本当に役立ちました 必要だったんですね この内容が iPhone Duoで アプリを魔法のように 魅力的にする皆さんの創造性を 刺激できたことを願っています アプリをアップデートして Split Viewのマルチタスクに対応させ Hinge APIを活用して印象的な インタラクションやエフェクトを構築し シーンアクセサリを採用して アプリを複数ディスプレイに またがって表示できるようにします 表示できるようにしてください それでは これで 締めくくりといたします ご視聴ありがとうございました
-
-
1:33 - Hold pitch bend as state
struct InstrumentView: View { /// Normalized bend, 0 is no bend, 1 is deepest bend @State private var pitchBend: Double = 0 var body: some View { GuitarView(pitchBend: pitchBend) } } -
1:44 - Add the onHingeChange modifier
struct InstrumentView: View { /// Normalized bend, 0 is no bend, 1 is deepest bend @State private var pitchBend: Double = 0 var body: some View { GuitarView(pitchBend: pitchBend) .onHingeChange { _, context in } } } -
1:57 - Check for a hinge and the partially open state
var body: some View { GuitarView(pitchBend: pitchBend) .onHingeChange { _, context in // A null hinge means the device doesn't have one if let hinge = context.hinge, hinge.status == .partiallyOpen { } } } -
2:10 - Reset the pitch bend
var body: some View { GuitarView(pitchBend: pitchBend) .onHingeChange { _, context in if let hinge = context.hinge, hinge.status == .partiallyOpen { } else { pitchBend = 0 } } } -
2:17 - Calculate the pitch bend from the hinge angle
struct InstrumentView: View { /// Normalized bend, 0 is no bend, 1 is deepest bend @State private var pitchBend: Double = 0 var body: some View { GuitarView(pitchBend: pitchBend) .onHingeChange { _, context in if let hinge = context.hinge, hinge.status == .partiallyOpen { pitchBend = calculatePitchBend(angle: hinge.angle) } else { pitchBend = 0 } } } private func calculatePitchBend(angle: Angle) -> Double { ... } } -
5:43 - Register a camera capture accessory
struct CameraRootView: View { @State private var model = TeleprompterModel() var body: some View { CameraView(model: model) .sceneAccessory { CameraCaptureAccessory { TeleprompterView(model: model) } } } } -
6:14 - Add a toolbar toggle
struct CameraRootView: View { @State private var model = TeleprompterModel() var body: some View { CameraView(model: model) .sceneAccessory { CameraCaptureAccessory(isEnabled: $model.isEnabled) { TeleprompterView(model: model) } } .toolbar { TeleprompterToggle(isEnabled: $model.isEnabled) } } } -
6:25 - Observe accessory availability
struct CameraRootView: View { @State private var model = TeleprompterModel() var body: some View { CameraView(model: model) .sceneAccessory { CameraCaptureAccessory(isEnabled: $model.isEnabled) { TeleprompterView(model: model) } .onAvailabilityChange { newValue in model.isAvailable = newValue } } .toolbar { TeleprompterToggle(isEnabled: $model.isEnabled) .disabled(!model.isAvailable) } } }
-
-
- 0:00 - Introduction
Chris Donegan, an engineering manager in UI Frameworks, and Alex Muller, a system experience engineer, introduce how to take advantage of the unique features of iPhone Duo: responding to the hinge, supporting split view multitasking, and using scene accessories across multiple displays.
- 0:49 - Respond to the hinge
SwiftUI provides a new onHingeChange modifier and UIKit provides UIHingeInteraction. Both report the high-level hinge status — closed, partially open, and fully open — as well as continuous updates of the hinge angle.
- 1:18 - Drive a pitch bend with hinge angle
A walkthrough of adding a whammy-bar pitch bend to a playable guitar app. The onHingeChange modifier takes a closure with the previous and current hinge context. Check for a non-null hinge, since null indicates a device without one, and filter for the partially open state — adding an else condition to reset the pitch bend when the angle isn't being read.
- 2:35 - Hinge data versus layout APIs
Hinge data is observed live and is ideal for driving interactions or effects. For layout, use the arrangement and region APIs covered in "Strike a pose with adaptive layouts on iPhone Duo" instead.
- 2:59 - Split view multitasking
All apps participate in multitasking on iPhone Duo, where two apps sit side by side. If your app already supports resizing on iPad or iPhone mirroring, you're off to a great start. iPhone Duo also introduces a new layout stacking video and apps together, which your app handles the same way, using tools like size classes and scene geometry.
- 3:38 - Support multiple scenes
iPhone Duo is the first iPhone to support multiple instances of your app's UI, and apps that support this on iPad will too. One difference: new windows can't be created on the outer display — that's reserved for the inner display. Handle errors when requesting new scenes, and use the UIWindowSceneActivation action, which hides itself automatically when new windows aren't available.
- 4:22 - Scene accessories
Scene accessories let your app show content on multiple displays at once, pairing additional content with your main UI — like using an iPhone as a controller for a game on an external display. The system dynamically controls their availability; they're enabled by default but can be toggled at any time, so respond to availability changes using observation tracking.
- 5:00 - The camera capture accessory
New for camera apps on iPhone Duo, CameraCaptureAccessory pairs additional UI on the outer display while your main UI stays on the inner display — useful for showing content to someone while photographing or recording them. It's available when your app is full screen on the inner display with an active camera session, and you register it on the same view as your camera UI.
- 5:34 - Build a teleprompter accessory
A walkthrough of adding a teleprompter on the outer display of a camera app. The SceneAccessory modifier adds a camera capture accessory to the camera view, so the teleprompter appears only when that view is visible. A toolbar button then toggles the enabled state of the teleprompter model, and the onAvailabilityChange modifier provides a callback to disable that button when the accessory isn't available, such as when the device is closed.
- 6:44 - Next steps
Update your app to support split view multitasking, use the Hinge API to build impressive interactions and effects, and adopt scene accessories so your app can span multiple displays.