UIKitにおける空間コンピューティングの概要

UIKitにおける空間コンピューティングの概要

UIKitアプリをvisionOSで展開する方法を学びましょう。新しい実行先でビルドする方法、空間コンピューティング向けAPIの紹介とそのベストプラクティス、visionOSのUIKitでSwiftUIを使用したコンテンツを3次元に対応させる方法を解説します。

関連する章
- 1:35 - Getting started
- 2:56 - Platform differences
- 5:36 - Polishing your app
- 5:52 - Polish: Colors
- 10:20 - Polish: Hover
- 12:12 - Polish: Input
- 13:47 - Outside the bounds
- 15:03 - Outside: Presentations
- 17:11 - Outside: Ornaments
- 21:51 - Outside: RealityKit
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ ♪ ♪ Grace Kendall：皆さんこんにちは “Meet UIKit for spatial computing”へようこそ UIKitチームのエンジニア Grace Kendallです同僚のAndrewと一緒に既存の UIKitアプリを全く新しい次元に引き上げる方法についてお話しするのが楽しみですこの新デバイスは空間体験に最適なプラットフォームでたくさんの新しい3D機能が導入されていますさらに嬉しいのは皆さんおなじみの UIフレームワークを使っていることですこの動画は UIKitについて解説していきます SwiftUIについては “Meet SwiftUI for spatial computing”と “Elevate your windowed app for spatial computing”をご覧くださいこの動画では新しいプラットフォーム向けのアプリを構築する方法についてステップを追って説明します次に他のAppleのプラットフォームとは異なるユニークな特徴とそれらをどのようにコードで実装するべきかを説明していきますまたUIKitで導入された新しいAPIを使ってアプリを改善していきます最後にUIKitに加えてSwiftUIを使いまったく新しい3D機能を追加する方法を紹介しますでは始めましょうこれはiOS用に書かれたピクセルアートのアニメーションデモアプリで UIKitを使っています私の親しい友達がこのアプリに絵を提供してくれました iPadでの見た目や操作感も素晴らしく多くのシステムコンポーネントやダイナミックなアニメーションを駆使し Apple Pencilにも対応していますこれを空間コンピューティングに対応させましょうまず最初に XcodeプロジェクトのGeneralタブで新しい実行先を追加しますこのアセットカタログで新しいアプリアイコンを追加しますなぜならこのプラットフォームのアイコンは特別だからです 3つの画像が重なっていてアプリアイコンを見ると動的に反応しますチームメイトのJessicaはとても才能のあるアーティストですこのアプリのために新しいアイコンを用意してくれたのでここで追加しておきます
次に新しいデバイスシミュレータをターゲットに選択しビルドします
ビルドエラーが発生しました iPadアプリで使われているAPIの一部はこのプラットフォームでは使用できないようですその理由を説明しますこのプラットフォームは他のAppleのプラットフォームとは異なりまったく新しい機能と特徴を備えていますそこでアプリ移行に際しての注意点をいくつか紹介します初めてアプリを移行する場合以前のiOSバージョンで非推奨となったAPIとこのプラットフォームにうまく変換されないAPIの 2つの点について調べる必要がありますこのデバイスは iOS 14以前に非推奨となった APIをサポートしていません新プラットフォームへの移行は非推奨APIの使用を見直し共有コードベースをアップデートしましょう最新かつ最高の技術を採用する絶好の機会となっていますまたこのプラットフォームに変換されない APIのコレクションもあります UIDeviceOrientationがその一例ですこのAPIはデバイスが複数の向きで使用されることを前提としていますがこのデバイスでは当てはまりませんまた　UIScreenは別の例ですこのデバイスでは一つのハードウェアスクリーンによる一つのウインドウという前提は成り立ちませんまたタブバーのデザインも大きく異なり先頭や末尾というレイアウトがされないため leadingAccessoryViewと trailingAccessoryViewsは利用できませんデバイスにて適用できないが故に利用できないAPIの例を 3つ挙げましたがこの他にもまだあります詳細についてはドキュメントをご覧くださいではコードに戻って何が問題だったのかを調べてみましょうこのエラーを見てみましょう EditorViewController エクステンションの中に UIPencilInteractionがありますこのデバイスはApple PencilをサポートしていないのでこのAPIはこのプラットフォームで利用できませんコンパイルを通すために条件分岐を入れて実行されないようにしましょうもう一度ビルドして実行しましょう
OKです！　起動したようですねアプリがShared Spaceで動く様子を見るとワクワクしますねですがいくつか改善できそうな点があるようですではアプリをすべてチェックして改善点を探してみましょう Simulatorではマウスでクリックするとその場所にフォーカスをし指をタップしている動作になりますアプリでまず目につくのは美しいガラスの背景ですすべてのアートを見てみるとアプリをインタラクティブに見せるホバーの視覚効果があります検索バーの見た目も変更されくぼんだ見た目になっています
異なるアートワークを開いて心行くまでピクセル画を作れますひとつ改善できそうなところはタイトルの黒いテキストとサブタイトルのグレーのテキストです iPadの白い背景では黒のテキストはきれいに見えましたがガラスの背景とは合っていないようですもう少しポップな感じでも良さそうです検索バーの見た目とサイズ感がとても良いですねタイトルテキストも同じようにしたいですセマンティックカラーは新しくありませんがこのプラットフォームでは有用ですアプリの見た目がプラットフォームや外観そしてアクセシビリティ設定に対応できるようセマンティックのカラーやフォント素材を選ぶことが重要です UIColor.labelのような設定はすべてが完璧に見える新たな価値を提供します RGB値で色を定義する代わりにセマンティックカラーを使うとアプリがどのプラットフォームで動作していても　見た目が正しくなるようシステムが色を調整します例えばシステムシアンは iOS macOS watchOSでそれぞれ色合いが微妙に異なります iPadではこれに加えてダークモードにも適応できる利点がありますこのプラットフォームでは systemBackgroundColorはガラスの背景で使用するとデフォルトで鮮やかな色合いになります同様に固定フォントサイズを使う代わりに HeadlineやBodyのようなセマンティックフォントスタイルで使用すると読みやすくなりますこれはアクセシビリティの観点からも正しいことですセマンティックフォントサイズは読みやすさを確保するために Dynamic Typeで調整されますここでは TextFieldのテキストとサブタイトルラベルの色は RGBで定義したUIColorsを使っていますこれらを使う代わりにプライマリおよびセカンダリラベルのセマンティックカラーを使いましょうこれにより iPadでも見た目が良くこのプラットフォームにもより合ったスタイルになります。さらにセマンティックカラーを使用するすべてのUILabelsはデフォルトで鮮やかな色合いになりますテキストフィールドのボーダースタイルを roundedRectに設定することもできますこれによりくぼんだ感じの見た目をつくれますそしてビルドして実行した結果… …とても良くなりましたね！ラベルは読みやすくテキストフィールドを使ってアートのタイトルを編集できることも明確です次にマテリアルについてお話しますマテリアルはこのプラットフォームの大きな要ですアプリを美しく見せ周囲の一部であるように感じさせてくれますまたどのような状況でも文字を読みやすくしてくれますマテリアルは照明の状況や背後にある物体の色に応じてコントラストとカラーバランスを調整してくれますこのためこのプラットフォームではライトとダークの外観の区別がありませんすべての組み込みコントロールとコンテナはデフォルトでVibrantな素材を使用しておりアプリが驚くほど美しく見えますアプリの背景となるガラス素材がとても素敵ですねこれはすべてのUINavigationControllerと UISplitViewControllerにデフォルトで備わっていますこれにより周囲の風景が半透明で透過するようになります新しいUIViewControllerの preferredContainer BackgroundStyleプロパティを上書きして .automaticや.glass .hiddenを返すこともできます次にアプリ内の一部のビューにカーソルを合わせると薄くハイライトされて表示されますこれはアプリのレスポンシブ性を高めます contorolsやlistsなどのシステムコンポーネントを使うとデフォルトでこれらのホバーエフェクトマテリアルや鮮やかさなどを得られるようになりますホバーエフェクトはインタラクティブ性を示しますビューにホバーエフェクトを追加するとターゲットしやすくなりますこのプラットフォームで一つ重要なのはユーザーの視線の情報についてはアプリのプロセスには決して送信されないということです UIKitにはホバーエフェクトを追加カスタマイズまた無効化できる新しいAPIが用意されています UIViewにはHoverStyleという新しいプロパティがあります多くのインタラクティブコンポーネントはcontrolsと同様デフォルトでホバーエフェクトを持っています HoverStyleプロパティを設定し highlightやliftなどのプロパティを指定することでビューの hoverStyleをカスタマイズできますホバーエフェクトを削除するにはこのプロパティをnilに設定しますさらに新しいUIShape APIを使ってホバーエフェクトの形状を指定することもできますコレクションビューのセルにホバーエフェクトがありそれが気に入っているのですが今回は角を丸くしたいと思います丸みを帯びた長方形をホバー形状として使用するにはセルにhoverStyleプロパティを設定し丸みを帯びた長方形の形状を指定する必要がありますこうすることでセルのホバー形状が角の立った長方形から… …丸い長方形になりますテキストフィールドと背景の角が丸くなったことで　見た目が良くなりました各コレクションビューのセルを見るとホバーの形状が丸くなりました
っそいて最後に見ておきたいのは入力ですこのプラットフォームにはコンテンツとやり取りする新しい入力システムが導入されました各要素を見てピンチしたり、指を離す動作が TapGestureに匹敵しますピンチして手を動かし離すとPanGestureですアプリの近くにいれば手を伸ばしてタッチすることもできますトラックパッドを接続すればそれを使ったシステムの操作も可能ですさらにアクセシビリティテクノロジーもデバイスで使用可能です VoiceOverとSwitch Controlで誰でも操作できますシステムのジェスチャー認識機能はトラックパッドを含むすべての入力方式で動作しますしかしこのプラットフォームでは片手ごとに1つのタッチしかできないため同時入力は最大2つであることに注意が必要です iPadアプリには 4本指でスワイプして既存のアートを全削除し新しく始めるというジェスチャーがありましたこのジェスチャーは残しておきたいのでこのデバイスでは実行しないようにします代わりにこのコードを変更してユーザーインターフェースの種類を確認し .realityなら必要なタッチ数を2回に設定します変更が完了しアプリも洗練されてきましたいよいよこのサンプルアプリを次のレベルに引き上げる時ですここからは同僚のAndrewが詳しく説明します Andrew：ありがとう Grace こんにちは　UIKitチームのエンジニア AndrewですこれからUIKitアプリを2Dから 3次元の世界に移行させます Graceのアップデートのおかげでサンプルアプリは良い感じになりました既存のUIKitアプリと同様に新しい空間APIを使ってさらに進化させましょう今回は既存のアプリをアップデートして素晴らしい空間体験を生み出す簡単な3つの方法を紹介します始めに UIKit Presentationsにはビューコントローラーのトランジションに深みを加える空間スタイルがあります 2つ目はコンテンツを今まで不可能だったシーンの外側に持って行くことを可能にする新しいAPI Ornamentsです最後に RealityKitコンテンツをアプリに直接追加する新しい強力な方法を紹介しますそれぞれがどのようにしてアプリを次のレベルに引き上げるのかについて説明しますおなじみのUIKitプレゼンテーションが空間コンピューティングで使用可能になりましたサンプルアプリはiPadでシートやアラートポップオーバーを使っています新プラットフォームでの動作について説明しますまずアプリの設定を開きます空間シートがビューコントローラーを背面に移動させ輝度を下げます iPadとは異なりビューコントローラーの isModalInPresentation プロパティに関係なく枠外へのタッチやその他のジェスチャーでは解除されません次に新しいアラートスタイルを見てみましょうアプリのアイコンの2D表現が上部に配置されていますシートと同じように常にビューコントローラーは背面に移動させられアラートが表示されます最後にドキュメント詳細のポップオーバーを開きます少し位置が変ですね境界の外側に出ているのは素晴らしいですがアプリの中心から遠すぎますコードを見て修正しましょうビューコントローラーが作成されポップオーバースタイルに設定されています… 問題が分かりました permittedArrowDirectionsが右側だけに設定されています iPadではポップオーバーはシーンの制約を受けますが空間プラットフォームでは macOSと同様にこの制約は存在しませんこれをアップデートして常にシステムにあった配置にしましょう
これでボタンをタップすると期待通りの位置にポップオーバーが出現しましたもしiPadアプリで標準的なプレゼンテーションを使っているならお使いの空間アプリはすでにベストな位置に表示されているでしょう UIKitはプラットフォームの設定を直接指定していない限りすべての詳細を処理してくれます次にオーナメントを使ってサンプルアプリを改良しましょうアプリのプレゼンテーションは空間に対応しましたがエディタ自体はこのプラットフォーム特有の追加のスペースを活用できていませんエディタは… …少し狭い場所にありますですが　オーナメントを使えば空間プラットフォームが提供する追加のスペースをこれまで不可能だった方法で活用できますオーナメントによってアプリのシーン周辺の適切な範囲内にコンテンツを配置できます UIKitコンポーネントもポップオーバーなどでオーナメントを使っていますそのためサンプルアプリのポップオーバーは見切れることなくシーンの外に表示されましたデバイスの多くの内蔵アプリもオーナメントを使っていますこちらはヘッドセットで TVを見ている様子ですアプリはSwiftUIのタブビューを使いタブバーをシーンの左端にオーナメントとして配置しています Safariはオーナメントを使いナビゲーションバーをウェブページの上に表示していますまたフリーボードでは下部のツールバーにオーナメントを使用していますオーナメントを使えばアプリが主要コンテンツを中央に配置しコントロールを端へ移動してくれますまたオーナメントは浮かび上がり奥行きが加わっていますあらゆる意味で境界を打ち破っていますサンプルアプリではすべての編集コントロールをツールバーオーナメントにすると完璧だと思います Xcodeで追加してみましょうオーナメントはSwiftUIコンテンツをホストするので SwiftUIのインポートが必要ですこのファイルではすでに行っています次に新規オーナメントを定義します Alignmentパラメータを使えば皆さんのニーズに最も合ったコンテンツのレイアウトを簡単に表現できます例えばオーナメントをシーンの左辺外側に表示させたい場合先頭寄せと末尾寄せを設定します代わりにオーナメントをシーンの内側に表示するには先頭寄せを使用します編集ツールバーについてはシーン下辺外側に表示したいがツールを中央に配置しエディタとの一体感を出したいですその場合は下部寄せとセンタリングを使います配置設定を追加しましょうコンテンツについては先にEditingControlsViewを作ったのでそれを使うことにします背景はオーナメントに自動で追加されませんコンテンツに最適な正しい背景を選ぶ必要があるからですツールバーの背景をエディタと同じガラスにしたいので新しい修飾子を使います次に UIViewControllerの新しい Ornamentプロパティに新しいオーナメント専用の配列を設定します複数のオーナメントがある場合それもこの配列に入れておきますオーナメントはビューコントローラーのライフサイクルを共有しますビューコントローラーが階層から削除されるとそのオーナメントも削除されますこの関連付けはシステムのインタラクションにとって重要です例えばシートプレゼンテーションではトランジションの間ビューコントローラーとの相対的な位置を維持します最後に意図しないオーバーラップが発生しないよう注意しましょう最後にもう一度コードを変更しますコントロールをオーナメントに移動したのでメインエディタのスペースが広くなりましたカスタムのedgeToEdgeを使ってもう少し大きくしてみましょうアプリを起動します
完璧です！ツールバーが狙いの通りエディタ下部の外側にあります素晴らしいオーナメントを活用することでアプリのメインエリアをクリエイターが最も大切に思うコンテンツのために使用できなおかつ編集ツールを近くに配置できますオーナメントの作成は簡単です時間と労力を集中させアプリをユニークなものにできます最後に UIKitアプリにRealityKitを追加する方法を解説します新しいSwiftUI ViewのRealityViewは RealityKitコンテンツをホストできますこれによりエンティティを SwiftUI階層に追加できます RealityViewの詳細については “Build spatial experiences with RealityKit”をご覧くださいまた既存のAPIである UIHostingControllerは SwiftUIビューをホストできますこれでUIKitアプリを書き直すことなく SwiftUIの他の新しいAPIと同様に RealityViewを利用することが可能ですサンプルアプリでは RealityKitを使ってピクセルに命を吹き込みたいので Xcodeで魔法をかけましょうすでにPixelArtEntityViewという新しいSwiftUIビューを作成しました RealityViewを使ってアートのピクセルを RealityKitのエンティティとしてレンダリングしますまず新しいインスタンスを作ります次に UIHostingControllerを設定してエンティティビューをルートビューとして使います EditorViewControllerの子としてホスティングコントローラーを追加し EditorViewControllerのサブビューとしてホスティングコントローラーのビューを追加します次にホスティングコントローラーが新しい親に移動したことを伝えます最後にカスタムレイアウト関数を呼び出しプレビューを配置しますホスティングコントローラーの設定は完了しましたでは見てみましょう
再生ボタンを押し 3Dプレビューをタップして新しいコードの動作を確認しますこのようにアプリにピクセルが追加され奥行きが生まれましたシミュレータの軌道制御を使えば視点の移動に伴いライティングも変化していますすごいですね！すべてUIKitアプリ内で出来ています RealityViewはアニメータープレビューをレベルアップしました UIHostingControllerのおかげで簡単に追加できましたこれらのAPIを組み合わせることで優れた空間アプリ開発のステップが簡略化されました標準的なUIKitプレゼンテーションを使いエディターコントロールをオーナメントに入れ RealityKitで3Dピクセルを追加することでサンプルアプリはこの新しい空間世界で見違えるようになりましたしかも加えたコードはわずか数行ですこうした空間体験のデザインの指針については “Principles of spatial design”をご覧くださいこの動画では多くの内容をカバーしました次のステップに進みましょうまずプロジェクトの新しい実行先を追加しますデバイス固有のAPIの使い方を変更し非推奨のAPIの使用を控えましょうセマンティックスタイル　ホバーエフェクト標準的なPresentationsを使用してアプリとプラットフォームの外観に統一感を持たせましょうまたオーナメントを使ってアイデアと創造力を枠の外に広げましょう空間的なSwiftUI機能を UIKitから直接使うことでアプリをさらに進化させましょうありがとうございました皆さんのアプリが全く新しいプラットフォームに対応するのを Graceと共に楽しみにしています ♪

import UIKit

extension EditorViewController {

    @objc func showDocumentPopover(sender: UIBarButtonItem) {
        let controller = DocumentInfoViewController(document: pixelDocument)
        controller.modalPresentationStyle = .popover
        if let presentationController = controller.popoverPresentationController {
            presentationController.barButtonItem = sender
            if traitCollection.userInterfaceIdiom == .reality {
                presentationController.permittedArrowDirections = .any
            } else {
                presentationController.permittedArrowDirections = .right
            }
        }
        present(controller, animated: true, completion: nil)
    }

}

19:46 - Ornament

extension EditorViewController {

    func showEditingControlsOrnament() {
        let ornament = UIHostingOrnament(sceneAlignment: .bottom, contentAlignment: .center) {
            EditingControlsView(model: controlsViewModel)
                .glassBackgroundEffect()
        }

        self.ornaments = [ornament]

        editorView.style = .edgeToEdge
    }

}

22:45 - UIHostingController

extension EditorViewController {

    func showEntityPreview() {
        let entityView = PixelArtEntityView(model: entityViewModel)
        let controller = UIHostingController(rootView: entityView)
        addChild(controller)
        view.addSubview(controller.view)
        controller.didMove(toParent: self)
        prepareEditorInteractions()
    }

}

22:46 - Using Semantic Colors

private let titleLabelTextField: UITextField = {
    textField.textColor = UIColor.label
    return textField
}()

private let authorLabel: UILabel = {
    label.textColor = UIColor.secondaryLabel
    return label
}()

22:47 - Adding a recessed appearance to a text field
```
textField.borderStyle = .roundedRect
```

22:48 - Overriding preferredContainerBackgroundStyle

class MyViewController: UIViewController {
    override var preferredContainerBackgroundStyle: UIContainerBackgroundStyle {
        return .glass
    }
}

22:49 - Customizing hover style

class CollectionViewCell: UICollectionViewCell {
    init(document: PixelArtDocument) {
        self.hoverStyle = .init(
            effect: .highlight, 
            shape: .roundedRect(cornerRadius: 8.0))
    }
}

22:50 - Checking user interface idiom

func fourFingerSwipe() {
    let gesture = UISwipeGestureRecognizer(
        target: self, 
        action: #selector(self.deleteAll))
    gesture.direction = .left
    if traitCollection.userInterfaceIdiom == .reality {
        gesture.numberOfTouchesRequired = 2
    } else {
        gesture.numberOfTouchesRequired = 4
    }
    self.view.addGestureRecognizer(gesture)
}

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

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23