WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Bring your iOS app to the Mac

Bring your iOS app to the Mac

EssentialsSwiftUI & UI Frameworks
元の動画を見る

ハイライト

iOS アプリを Mac に導入するには 2 つの方法があり、どちらも今年新しく追加されました。

主要内容

多くの iOS アプリがすでに M1 Mac App Store で入手可能です。アクティブに終了しない限り、ユーザーは検索時に「iPhone および iPad アプリ」ラベルの下にそれらのアプリを表示します (03:09)。

このパスは最もコストがかかりません。問題も単純明快です。タッチ入力、画面サイズ、全画面起動が必ずしも実際の Mac アプリと似ているわけではありません。

Apple はこのセッションでパスを 2 つに分割します。

1 つ目は、iOS アプリを M1 Mac 上でネイティブに実行し続けることです。開発者は 2 つを追加できますInfo.plistキーを使用すると、ゲームやマルチメディア アプリが実際の画面サイズを使用し、起動時に直接全画面に移行できるようになります (03:29)。また、タッチ代替機能を使用して、キーボード、マウス、トラックパッドの入力を iOS アプリが期待するマルチタッチ ジェスチャに変換することもできます (04:52)。

2 番目のステップは、Mac Catalyst の宛先をプロジェクトに追加することです。これにより、アプリがすべての Mac で実行され、Mac Catalyst API を使用してより詳細なカスタマイズが可能になります (07:35)。[Mac 向けに最適化] を選択すると、UIKit コントロールは AppKit スタイルになり、テキストはネイティブ Mac フォントを使用してレンダリングされます (07:52)。

これは一度行ったら終わりという仕事ではありません。これははしごに似ています。まずアプリを Mac 上に表示させ、次に入力と表示を追加し、次に Catalyst を使用してツールバー、ウィンドウ、メニュー、ポップアップ レイヤーのデスクトップ機能を引き継ぎます。

詳細

1. ネイティブ iOS アプリ: 2 つのスタートアップ キー

(03:29) Apple は、Info.plist鍵。これらは SDK バージョンに拘束されず、macOS 12.1 より前の iOS および Mac では無視されるため、既存のアプリに安全に追加できます。

<!-- Info.plist -->
<key>UISupportsTrueScreenSizeOnMac</key>
<true/>
<key>UILaunchToFullScreenByDefaultOnMac</key>
<true/>

キーポイント:

  • UISupportsTrueScreenSizeOnMacアプリが Mac 上のさまざまなディスプレイ サイズとピクセル密度を処理する準備ができていることを示します。
  • 有効にすると、アプリは互換性のある iPad サイズではなく、実際の画面サイズと実際のピクセル密度を取得します。
  • UILaunchToFullScreenByDefaultOnMacアプリが起動直後に全画面表示になりたいことを示します。
  • 両方のキーは一緒に使用するのに適しています。このビデオでは、ゲームやマルチメディア アプリがピクセル完璧な、端から端までのフルスクリーン エクスペリエンスを実現できると明確に述べています。

このタイプの変更では、UI アーキテクチャを変更する必要はありません。「画像が互換ウィンドウに入れられてしまう」という問題を解決します。

2. Touch Alternatives: plist を使用して入力変換を記述します。

(04:52) iOS ゲームは多くの場合、タッチとデバイスのモーションのみを処理します。Mac ユーザーにはキーボード、マウス、トラックパッドが付属します。

Touch Alternatives は、これらの Mac 入力を、iOS アプリが期待するマルチタッチ ジェスチャとデバイスの動きに自動的に変換します。

自動タッチ代替機能をオンにするには、次の名前のファイルを作成します。com.apple.uikit.inputalternatives.plistファイル (05:35)。

<!-- com.apple.uikit.inputalternatives.plist -->
<key>defaultEnablement</key>
<string>enabled</string>
<key>requiredOnboarding</key>
<array>
  <string>tap</string>
  <string>tilt</string>
  <string>drag</string>
  <string>swipe</string>
</array>

キーポイント:

  • defaultEnablementに設定enabled、アプリの起動時にすぐに Touch Alternatives が開かれることを示します。
  • requiredOnboarding最初の起動チュートリアルで注目するコントロールをリストする配列です。
  • ビデオには、タップ、傾け、ドラッグ、スワイプ、トラックパッドからの直接タッチ入力など、表示可能なコントロールがリストされています。
  • Touch Alternatives を有効にすると、すべての制御方法が有効になります。requiredOnboardingチュートリアルで何に重点を置くかを決めてください。

(07:02) Apple はまた、キーボードとカーソルのサポートを直接実装する方が良いと強調しています。こうすることで、アプリはキーボードを備えた iPad と Mac の両方で同じように動作します。Touch Alternatives は、Mac 上の既存のタッチ アプリのブリッジング レイヤーとして適しています。

3. Mac 向けに最適化: UIKit 構造を Mac 表現に変換します。

(07:35) Xcode で Mac Catalyst 宛先を追加すると、アプリはすべての Mac で実行できる完全な Mac Catalyst アプリになります。

Mac 向けに最適化を有効にすると、システムはいくつかのことを実行します (08:18):

UINavigationBar        -> NSToolbar
center item controls   -> NSToolbarItems
UISearchTextField      -> hosted inside an NSToolbarItem
iPad text rendering    -> native Mac font rendering

キーポイント:

  • UINavigationBarに翻訳されますNSToolbar、ネイティブ AppKit コントロールを使用します。
  • 中央エリアのコントロールは次のようになります。NSToolbarItem。
  • 検索バーは、最初はツールバーに検索ボタンとして表示され、クリックすると検索バーに展開されます。
  • 検索候補メニューと検索スコープ バーもネイティブ AppKit コントロールに変換されます。
  • Mac イディオムのテキストは、ビデオでピクセルパーフェクト スケールと呼ばれる Mac ネイティブ フォントを使用してレンダリングされます。

(09:49) Catalyst アプリが独自のツールバーを作成しない場合は、システムが自動的にツールバーを提供します。すでに自分で管理している場合NSToolbar、システムはそれを回避し、実装をカバーしません。

4. ファイル メニュー: レスポンダー チェーンを使用してファイル メニューをキャッチします

(10:42) デスクトップレベルの iPad API を採用した後、ドキュメント アプリは新しいファイル メニュー項目 (複製、移動、名前変更、名前を付けてエクスポート) を自動的に取得します。

これらのメニュー項目を有効にする条件は、レスポンダー チェーンにオブジェクト カバレッジがあることです。UIResponderの複製、移動、名前変更、エクスポート機能（10:53）。

アプリがこれらのドキュメント メニュー項目を必要としない場合は、アプリ デリゲートのメニュー項目に追加できます。buildMenu内部で使用UIMenuBuilder取り除く。これらのドキュメント メニュー項目を説明するビデオUIMenuIdentifier値は.document（11:07）。

func buildMenu(with builder: UIMenuBuilder) {
    builder.remove(menu: .document)
}

キーポイント:

  • buildMenu(with:)メニューの場所を制御するアプリのデリゲートです。
  • UIMenuBuilderシステムメニューの追加、削除、変更を担当します。
  • .documentこのドキュメント関連のメニュー項目のセットを指します。
  • アプリが対応するドキュメント操作を提供していない場合は、無効なエントリを残すよりもメニューを削除する方が Mac の習慣と一致します。

5. ウィンドウのジオメトリ: 補助ウィンドウのサイズと動作を設定します。

(13:56) Catalyst アプリが使用されましたUIWindowSceneマルチウィンドウをサポートします。macOS Ventura には、ウィンドウ フレーム、ウィンドウ コントロール ボタン、全画面動作用のカスタム API がさらに追加されています。

ビデオの例では、Markdown アプリが Markdown ヒント補助ウィンドウを開きます。ウィンドウが小さくなり、最小化ボタンとズーム ボタンが無効になります (14:22)。

以下は、呼び出しシーケンスを説明するためにトランスクリプト内の API 名ごとに整理された概念コードです。

func scene(
    _ scene: UIScene,
    willConnectTo session: UISceneSession,
    options connectionOptions: UIScene.ConnectionOptions
) {
    guard let windowScene = scene as? UIWindowScene else { return }

    var frame = windowScene.effectiveGeometry.systemFrame
    frame.size = CGSize(width: 480, height: 360)

    let preferences = UIWindowScene.GeometryPreferences.Mac(systemFrame: frame)
    windowScene.requestGeometryUpdate(preferences) { error in
        // The system can reject the request and report details here.
    }

    windowScene.windowingBehaviors.miniaturizable = false
    windowScene.sizeRestrictions?.allowsFullScreen = false
}

キーポイント:

  • effectiveGeometry現在のフレームを提供します。動画の提案は常にそこから始まります。
  • シーンが作成される前に、現在のフレームは次のように初期化されます。CGRectNull、システムは最初に作成されたときにこれらの値を無視することを認識しています。
  • 改訂systemFrameその後、パスしますrequestGeometryUpdate()リクエストを送信します。
  • これはコマンドではなくリクエストです。システムはそれを拒否し、エラー ハンドラーを介して詳細を返すことができます。
  • windowingBehaviors.miniaturizable黄色の最小化ボタンを制御します。
  • sizeRestrictions.allowsFullScreen緑色のボタンを全画面表示にする機能を制御します。

(16:53) ウィンドウ ジオメトリにも 2 つのスケーリング ルールがあります。systemFrameMac デスクトップ座標を使用すると、1 ポイントは常に 1 AppKit ポイントになります。アプリが iPad に合わせて拡大縮小モードの場合、アプリと UI 要素の間には 77% の拡大縮小の差があります。座標原点はメインディスプレイの左上隅です。

6. ツールバーの UIView とポップアップ レイヤー

(18:46) このセッションの最後の API セットは、Mac ツールバーを調整するために使用されます。

Mac Catalyst の新機能:UIViewアイテムとして入れられるNSToolbar。新しいデスクトップレベルの iPad API を使用する場合、UIBarButtonItemのcustomViewこれは自動的にラップされ、ツールバーに追加されます (19:04)。

自分で管理するならNSToolbar、新しいものを使用できますNSUIViewToolbarItem。それはですNSToolbarItemのサブクラス。UIView（19:37）。

func toolbar(
    _ toolbar: NSToolbar,
    itemForItemIdentifier itemIdentifier: NSToolbarItem.Identifier,
    willBeInsertedIntoToolbar flag: Bool
) -> NSToolbarItem? {
    let wordCountView = WordCountView()
    return NSUIViewToolbarItem(itemIdentifier: itemIdentifier, view: wordCountView)
}

キーポイント:

  • NSUIViewToolbarItem慣れているUIViewバオ・ジンNSToolbarItem。
  • NSToolbarDelegateのitemForItemIdentifierツールバー項目が作成される場所です。
  • ビデオに関する特別なリマインダー:NSToolbarカスタム モードには、一意のツールバー項目インスタンスが必要です。
  • 自分で管理する場合NSToolbar、それぞれにデリゲートも割り当てる必要があります。NSUIViewToolbarItemユニークなものを作成するUIViewたとえば、同じビューを再利用しないでください。

(20:43) このアイテムは、ポップオーバーのアンカー ポイントとしても使用できます。ビデオ内の Markdown アプリの文字数項目をクリックすると、段落数、章数、読書時間などの詳細がポップアップ表示されます。

@objc func showWordCountDetails(_ sender: NSToolbarItem) {
    let detailsController = WordCountDetailsViewController()
    detailsController.modalPresentationStyle = .popover
    detailsController.popoverPresentationController?.sourceItem = sender
    present(detailsController, animated: true)
}

キーポイント:

  • アクション内にポップオーバー ビュー コントローラーを作成します。
  • modalPresentationStyle = .popoverポップアップレイヤーを使用して表示します。
  • sourceItem現在のツールバー項目に設定すると、ポップアップ レイヤーがツールバー ボタンに固定されます。
  • このタイプのモードは、Mac ツールバーの概要情報や二次的な操作に適しています。

7. UINavigationBar を翻訳するかどうかを選択します

(21:12) ナビゲーション バーを Mac ツールバーに自動的に変換したくない場合は、次のように設定できます。UINavigationBarのpreferredBehavioralStyle。

navigationController.navigationBar.preferredBehavioralStyle = .pad

キーポイント:

  • デフォルト値は次のとおりです。automatic。
  • に設定.mac翻訳は明示的にリクエストされます。
  • に設定.padナビゲーションバーの自動翻訳はオフになります。
  • このスイッチは、カスタム ツールバー ソリューションをすでに備えている Catalyst アプリに適しています。

重要ポイント

  • iOS ゲームの真のフルスクリーン Mac バージョンを作成します: を使用します。UISupportsTrueScreenSizeOnMacそしてUILaunchToFullScreenByDefaultOnMacディスプレイを操作し、タッチ代替機能を使用してキーボードとマウスの入力を受け取ります。既存のタッチ ゲームをまず Mac でプレイできるようにするのに最適です。

  • ドキュメント アプリの完全な Mac ファイル操作: レスポンダー チェーンが複製、移動、名前変更、エクスポートの機能をカバーしているかどうかを確認します。必要に応じて [ファイル] メニューを維持してください。そうでないときに使用しますUIMenuBuilder取り除く.documentメニュー。

  • iPad ツールバーを Mac ツールバーにアップグレード: デスクトップレベルの iPad API を使用して、UINavigationBar、中央の項目と検索バーは自動的にマッピングされます。NSToolbar。すでにツールバーを自分で管理している場合は、次を使用します。.pad自動翻訳をオフにします。

  • 補助情報用に別の小さなウィンドウを作成: を使用します。UIWindowSceneジオメトリ リクエストは、次のようにして初期寸法を設定します。windowingBehaviorsそしてsizeRestrictions不適切なウィンドウボタンを無効にします。Markdown ヘルプ、インスペクター、パレットなどの補助パネルに適しています。

  • ステータス ビューをツールバーに配置: 使用しますcustomView自動的にツールバーに入るか、次のコマンドを使用します。NSUIViewToolbarItemパックUIView。クリック後、ポップオーバーを使用して、単語数、読書時間、同期ステータスなどの詳細なコンテンツを表示します。

関連セッション

  • UIKit の新機能 - iPadOS、iOS、Mac Catalyst アプリで使用されるデスクトップ レベルの API を含む、UIKit の年次アップデート。
  • デスクトップクラスの iPad の紹介 — Mac Catalyst にマッピングされる UINavigationBar、ドキュメント メニュー、検索などのデスクトップクラスの iPad 機能を紹介します。
  • デスクトップ クラスの編集インタラクションを採用する — iPad アプリが Mac Catalyst でデスクトップ クラスの編集エクスペリエンスを得るのに役立つ編集メニューと検索インタラクションについて説明します。
  • UIKit で SwiftUI を使用する — Catalyst ツールバーやポップアップ コンテンツに使用できる SwiftUI ビューを UIKit アプリケーションに埋め込む方法について説明します。

コメント

GitHub Issues · utterances