Xcode PreviewsによるプログラマティックなUIの構築

Xcode PreviewsによるプログラマティックなUIの構築

SwiftUI、UIKit、または AppKit で書かれたUIコードを素早く反復するために、Xcode 15で#Previewマクロを使用する方法を学びます。キャンバス内でビューと対話するためのユニークなワークフローを考えます。同時にUIの複数のバリエーションを表示する方法を見つけ、エントリ間の遷移をテストするためにウィジェットのタイムラインを数秒で移動する方法を説明します。また、ライブラリにプレビューを追加し、サンプルアセットを提供し、物理的なデバイスでビューをプレビューして、その機能と既存のデータを活用する方法も紹介します。

関連する章
- 1:26 - What are previews
- 3:42 - Preview syntax basics
- 4:44 - Writing SwiftUI previews
- 5:50 - Writing UIKit & AppKit previews
- 6:08 - Demo: Putting writing previews into action
- 11:39 - Writing previews for widgets
- 15:58 - Previewing in library targets
- 20:28 - Passing sample data into previews
- 22:08 - Previewing on devices for full fidelity and access to data
- 25:50 - Wrap-up
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ ♪
こんにちはKevinですプレビューを担当していますソフトウェア開発特にアプリの構築は反復的かつ創造的なプロセスなのでコードをテストし実現したものをチェックする迅速な方法が必要ですそこでプレビューを開発ほぼ瞬時に視覚的なフィードバックを得ることが可能でクリエイティブなことに集中できるようになりますプレビューは柔軟に構築されていますさまざまな種類のビューやデータデバイスを含むアプリ全体で利用できますプレビューを初めて使用する場合でもしばらくプレビューを使用していてもプレビューを最大限に活用できるかと思います３つの部分に分けてみますまずプレビューとは何かを確認プレビューがどのように機能するかプロジェクト内のコードとどう関連するかの理解に有用です次にプレビューにコンテンツを提供する２つの異なる方法ビューとウィジェットについてこれらとXcodeでの独自ワークフローを記述する方法を説明します最後にプロジェクトにプレビューを導入し始めると必ず遭遇する一般的なシナリオや質問についてですプロジェクトでプレビューを進めるのに役立つヒントご紹介しますでは始めましょうまずプレビューとは何でしょうかプレビューはビューを構成するコードのスニペットですソースファイルの最上位に記述されますので型や関数の内部にネストされていないことになりますそれほどシンプルなのです #Previewマクロを使用してビューを返しますプレビューはコードの残りの部分やリソースと一緒にアプリにコンパイルされますプレビューはこれらのシンボルやリソースにアクセスできる非常に柔軟な仕様となっていますアプリ内の任意のプレビューを自由に設定できるうえ Xcodeのキャンバスに直接表示されますプレビューの目的のひとつに反復処理を高速化することもありますプロジェクト内のSwiftコードを編集すると Xcodeは２つのことを自動的に実行しますまず変更点を精査して最小限のコードを再コンパイル続いてプレビューを再実行しますつまりコードの作成と反復に集中して Xcodeが自動的にビルドと実行プレビューの更新も行いますプレビューを定義したら Xcodeは追加のコードを記述することなくそのプレビューをさまざまなコンテキストで自動実行可能たとえばダークモードでのテストやさまざまな文字サイズなどでもこれは完璧な例えではありませんがプレビューをテストのように考えるとわかりやすいかもしれませんテスト同様プレビューではプロジェクトのコードを実行コードをエミュレートするわけではありませんテストおよびプレビューしている内容がユーザーが体験するものを反映していることを意味します次にテストとプレビューの作成に着目すると開発の迅速化に役立ちほんの少しでも大きな効果がアプリのレイヤーをテスト後にプレビューすることも可能ですたとえばテストではアプリの機能の重要箇所を実行する高レベルのUIテストを行うことが可能で同時に個々のコンポーネントの単体テストの作成も可能です同様に大部分のプレビューを作成したり個々のリーフビューのプレビューも作成できます以上がプレビューの仕組みの概要です続いて作成方法とプレビューできるコンテンツの種類に焦点を当てます何をプレビューするかに関係なく定義するすべてのプレビューは３つの基本形状を持ちますソースファイルの最上位にあるプレビューマクロ initializerから始めます次にコンテンツの末尾のクロージャを１つ以上返しますここでプレビューしたいシナリオに合わせて UIを構成できますプレビューを作成するために必要なのはこれだけですがオプションでプレビュー自体を構成することも可能でさらに柔軟性を高めます名称設定してプレビューの内容に応じて initializerで追加の構成を渡す必要がある場合の例これをいくつか見ていきますプレビューできるコンテンツの種類について説明しましょうビューとウィジェットの２種類がメインですビューはSwiftUIやUIKit またはAppKitから取得できます SwiftUIの場合は作業中のビューを返すだけですただし作業中のビューをただ渡す必要はなく必要な他のビューへの配置が可能です多くの場合広いコンテキストでビューを操作する必要があるためこれは有用ですたとえば常にリスト内に存在することを意図したビュー
ここは必要な場合にビューで環境データを提供するmodifierをプレビューする場所でもありますプレビューはアプリの最上位で定義するシーンのようなものですシーンはアプリへのエントリポイントとして機能しますデータを設定してそれをビューに渡しますプレビューも同じ目的を果たすためデータとアセットを同様に設定することでプレビューしているビューに渡すことが可能ですプレビューを構成する際には名称の設定もできます SwiftUIのようなビューベースのプレビューは複数の構成特性を可変引数リストとして渡すことをサポートしていますたとえばプレビューしているデバイスの開始方向を設定 APIの形式も UIKitとAppKitで共通です SwiftUIビューの代わりにビューコントローラーを作成し必要に応じて構成するだけですビューコントローラー以外にもUIViewまたは NSViewを直接プレビューすることも可能ですつまり構築しようとしているものに応じて多くの柔軟性があるのですプレビューの使用を開始する方法を理解していただくためにこれまで説明した内容やプレビューを柔軟にするツールをいくつかご紹介したいと思います画像をコラージュするアプリを作成中です写真を選んでレイアウトを選択してフィルターを追加できます Xcodeに移動してプレビューキャンバスの機能を調べてみましょう画像にフィルターを追加できるビューの作成を開始しましたこのビューを繰り返し使用するのにプレビューが必要ですまずエディタの右上に移動してオプションメニューをクリックしキャンバスモードが有効になっていることを確認します新しいプロジェクトではキャンバスモードがデフォルトで有効ですが既存のプロジェクトの場合は手動でオンにする必要がある場合もキャンバスモードが有効になっていてもプレビューが定義されていない限りキャンバスは非表示のままなのでプレビューを追加します #Previewと入力し始めると Xcodeがプレビューを提案してくれます完了を受理するとXcodeがプレビューをビルドして実行しビューがキャンバスに直接表示されますビューの作業に使用できる３つのモードがキャンバスの左下隅に表示されますデフォルトのモードはライブモードまたはインタラクティブですこれらのスライダーをドラッグするなどキャンバス内のビューの操作はほとんどこのモードままにしています
アニメーションをテストしたり非同期コードの呼び出しと応答も行えます２番目のモードは選択モードつまり静的モードです
このモードではビューのスナップショットを取得しキャンバス内の要素を操作できるようにしますビューをクリックするとソースエディタでそのビューを作成したコード行が強調表示されますこのラベルのような特定のテキストビューをダブルクリックするとフォーカスがソースエディタに移動するのですぐに変更できます Vignetteはより簡潔なラベルです環境についてお話しますプレビュー環境のことですキャンバスにはライトモードでプレビューが表示されていますがダークモードで表示したい場合はどうすれば？コードを編集して配色を設定することもできますが多くの場合ダークモードですぐに確認して調整を加えたいこともあるでしょうそこでキャンバスのデバイス設定ポップオーバーを使用します下部のバーでコントロールアイコンをクリックして設定を表示ダークモードまたは特定の動的タイプのサイズを有効化両方の配色でビューがどのように見えるかを同時に確認したい場合はどうすればいいでしょうか？その際はプレビューの３番目のモードである可変を使用します
キャンバスの下部にある可変モードをクリックして値を表示したいデバイス設定を配色や動的タイプのサイズを選択個々の可変をクリックして検査し各可変をページ移動できますふーむこのように大きな動的タイプのサイズになるとビューの乱れが目立ちます修正しましょう VStackの代わりにコントロールのグループに最適なフォームを使用しますコントロールをセクションに配置するとフォームの見栄えが良くなります各HStackをセクションに設定しますすべてのHStackインスタンスでこの変更を行うにはマルチカーソル編集を利用します最初のHStackを選択して Command + Option + Eでカーソルを見つけて HStackのインスタンスごとにに挿入これをそれぞれのセクションで変更します
各セクションのヘッダも２番目の末尾クロージャに付与します下矢印をクリックして末尾のクロージャーを追加
ヘッダにある既存のラベルを使用します矢印でラベルに戻り Command + Option + 右中括弧でラベルをヘッダに移動しますビューがかなり改善されましたこれらの機能はすべてAppKitおよび UIKitビューとビューコントローラーでも機能します CoreImageフィルタをレンダリングするビューコントローラーにタブを切り替えキャンバスをライブモードに戻しますこのビューコントローラーのプレビューは作成済みですが SwiftUIのものと似通ったものとなっていますプレビューマクロではビューコントローラーにサンプルイメージを渡しましたフィルタを適用してこの画像をテストしたいのでフィルターをビューコントローラーに渡すコードを追加しますビネット効果って決して古くなりませんよねビューコントローラーを構成する以外にプレビューを構成することもできますどのプレビューでも最初の引数としてオプション名を指定できます SwiftUIやUIKitなどのビュープレビューを使用すると名称の後の可変引数リストに複数の特性を追加できますたとえばプレビューを横向きで開始するように設定ビューのプレビューの作成に関する簡単な紹介でした
プレビューできるコンテンツの別のカテゴリはウィジェットですウィジェットでプレビューがいかに高速であるかがわかりますプレビュー可能なウィジェットは２種類ありますまず個々のエントリを生成するタイムラインプロバイダを使用するウィジェット Xcodeではタイムラインプロバイダ全体をプレビューすることもプレビュー内でエントリの独自のタイムラインを作成することも可能 Xcodeに移動してそれぞれの例を見てみましょうこの画像コラージュアプリには１時間ごとにランダムに作成されたコラージュを表示するタイムラインプロバイダ付きウィジェットがありますタイムラインプロバイダについては次の３つの項目でプレビューを作成まずプレビューしたいウィジェット２番目にタイムラインプロバイダ３番目はプレビューに使用するウィジェットファミリです
コードは少な目ですがXcodeでいくつかの優れたワークフローを提供しますこのウィジェットは１時間ごとにランダムなコラージュを構築しますがタイムラインのすべてのエントリを見るのに１時間も待つ必要はありません各タイムラインエントリのスナップショットをプレビューしてキャンバスに表示しますクリックして移動するか矢印キーを使用します Xcodeがウィジェットと通信しエントリ間の遷移をアニメーションで表示ユーザーインターフェイスだけでなく不具合の検知も可能ですがタイムラインの別時点間の変化は対象外ですたとえばこのエントリー８と９の間のアニメはあまり良くなくクロスフェードするだけだこのシナリオを修正したいもののタイムラインプロバイダがランダムなのでテスト中にこのシナリオが再表示されるかどうかはわかりませんここで特定のエントリのタイムラインが役に立ちます繰り返したい正確なシナリオを作成できますプレビューのtimelineProvider:を単純タイムラインに変更しタイムラインプロバイダを返す代わりに修正したいケースを再現する２つのエントリを返しますただしこの移行のために修正の必要があるコードは別のファイルに存在するため別のファイルに移動するときにこのプレビューを保持したいピン留めを使用するとプレビューをキャンバス内に保持できますキャンバスの左上にあるピンボタンをクリックすると別のファイルに移動してもプレビューがアクティブなままになります
これはコラージュを描画し遷移を含むビューです問題の解決に集中できるようにキャンバス内でタイムラインの再生ボタンとループボタンを押しますコードの修正中Xcodeはこの遷移を連続再生しますここが問題がコラージュが行で構成されている場合は遷移を追加しますが列で構成されている場合は遷移を追加しません遷移をコピーして貼り付けますそれ自体良いのですが後続が横から入ってきます下から表示した方が良いでしょうできましたプレビューでタイムラインプロバイダを使用して迅速に反復処理を行うだけでなく特定のイベントでアニメーションを微調整することもできますこれによりUIの構築と反復がより速く楽しくなります
これらのウィジェットワークフローはプレビューできる２つの種類のウィジェットであるライブアクティビティでも使用できます APIはほぼ同じに見えますがタイムラインプロバイダとエントリを提供する代わりに一連のライブアクティビティ属性と一連の状態を指定します以下に例を示しますまずinitializerで使用する属性を渡します次にそれらの属性のコンテンツ状態を渡しますたとえばピザを注文するためのウィジェットを構築している場合カスタムの状態セットを提供してピザの焼き方と配達の様子を確認しすべての状態間のアニメーションをテストしますこれはウィジェットのプレビューでできることのほんの一部です詳細は「Bring Widgets to Life」セッションをご覧くださいこの講演の最後の部分に進むにつれてプロジェクトでのプレビューの作成を最大活用するためのヒントをプロジェクトのセットアップやデータの提供デバイスの機能を活用していきますまずライブラリターゲットのコンテンツのプレビューについて説明しますこれにはフレームワークとSwiftパッケージまたは動的ライブラリが含まれますライブラリを使用する理由はいろいろですライブラリを使用してプロジェクトをモジュール化している場合や他の人に配布するライブラリを開発している場合がありますプレビューはこれらのターゲットで機能しますが特筆すべきはライブラリターゲットを活用できることで任意のプロジェクトでさらにプレビューを実行できますライブラリを活用する最初のステップはプレビューがコードを実行するために使用する実行可能ファイルを理解することやプレビューでレンダリングするには実行可能ファイルやウィジェットが必要です通常アプリでは行えますがアプリがない場合はどうすれば？プレビューはどの実行可能ファイルを使用するか３点で決定します１つは作業中のソースファイル２つ目はそれらのファイルを含むターゲットとすべての依存関係３番目にプレビューは選択したスキーム内のターゲットとターゲットの依存関係をインターセクトしますプレビューではアクティブなスキームにあるアプリのみが選択されますいくつか例を見てみましょう最も単純なケースではターゲットのメンバーである単一のソースファイルで作業している可能性ですこれがプレビューに使用されることに何の不思議もないでしょうもしソースファイルが２のターゲットにある場合はどうなるでしょうかたとえば試用版と完全版などがそれに該当しますここでこスキームの出番ですプレビューではアクティブなスキームにあるアプリのみが使用されます別の例を次に示します２つのSwiftファイルを開いていてそれぞれ別パッケージでインポートされる可能性があります属性があると仮定しますこれらのファイルをたどって最初の共通実行可能ファイルを見つけますそれを念頭に置いて最初の質問に戻りましょうアプリがない場合はどうすればよいのか？この場合プレビューはライブラリをロードする XCPreviewAgentをユーザーに代わって作成します自動的に作成されますがこれがどのように機能するかを特にプロセス名称を知っておくと役立ちますこれによりコードがどこで実行されているかわかるからですたとえばXCPreviewAgentのクラッシュレポートがある場合それがコード内で発生していることや問題の場所を見つけることが可能ですただしライブラリターゲットを利用すると少なくとも２つの方法でプロジェクト内でのプレビュー動作を向できますこのことを詳しく見ていくこともできますがここでは簡単に触れておきたいと思いますまずアプリをライブラリにモジュール化するとより小さなスキームを作成してビルド時間を短縮できますしプロジェクトの一部分に集中することもできますターゲットのサブセットを含む小規模なスキームを使用している場合でもプレビューの機能を最大限に活用できます次にコードをライブラリにモジュール化するとアプリターゲットが提供していた Info.plistキーを必要とするビューが存在する可能性もありますプレビュー専用のアプリを作成することでこのビューをプレビューすることもできますやり方は以下のとおり特定のInfo.plistキーが必要なPhotoライブラリを使用するビューを作成しているとしてビューをライブラリに保存しました名称は SamplePhotoLibraryUtilities
新しいターゲットを作成すると適切な機能でプレビューできます次に必要な機能を追加しますこの場合Info.plistキーを追加する必要があるためビルド設定に移動します写真ライブラリの使用文字列をフィルタして設定し次に作業中のビューを含むライブラリがアプリに埋め込まれていることを確認タブでターゲットの属性として追加ファイルのコピーフェーズで埋め込みますこれでこのプレビューアプリとライブラリのみを含むスキームを選択する準備ができましたビューをプレビューするとプレビュー用に作成したアプリに適切なInfo.plistキーがすべて配置されますこれにより作業中のすべてのビューをプレビューする機能を維持しながらより短いビルド時間で小規模なスキームを利用できるようになります次にデータとアセットをプレビューに取り込む方法について説明しますこれは以前のデモに組み込み済みですが戻って作業内容を確認したいと思いますフィルタをレンダリングする前に見ていたビューコントローラーに戻りましょうプレビューを構成するときにサンプル画像を渡しましたこの画像はプロジェクトのアセットカタログから取得したものですナビゲーターを表示するとアセットカタログがプレビューのコンテンツフォルダ内に見えますこれらの画像は開発中にさまざまなシナリオをテストするのに役立ちテストするすべてのデバイスを Photosで構成する必要がなくなります自分のアプリに搭載したくない場合 Development Assets機能を使用すると回避できますこれらはビルド設定で構成したプロジェクト内のフォルダについては App Storeに提出する際アプリから削除されますこれにはアセットカタログやプレビューに使用するリソースが含まれる場合もコンテンツフォルダをDevelopment Assets パスとして追加しましょう
プロジェクト設定でビルド設定タブに移動すると開発アセットをフィルタできますダブルクリックして編集した後パスを手動で入力することもコンテンツフォルダをポップオーバーにドラッグすることもできます
これを追加するとApp Storeに送信するときにこのパスがアプリから削除されます新しいプロジェクトまたはターゲットを作成すると Development Assetsパスが自動的に設定されますが追加のパスを追加したり他のターゲットタイプやプロジェクトへの追加も可能ですこのデモではDevelopment Assetsを使用してプロジェクトにアセットを追加することでプレビュー用のアセットを提供する方法を説明しますこれはすべてのアセットをすべてのデバイス間やチーム間で共有したい場合に最適ですすぐに起動して実行したい場合はデータと画像を提供する別の方法がありますデバイス上にアセットやデータがある場合がほとんどですプレビューを使用するとそれらも最大活用できます Xcodeのシミュレータは多くの機能を備えているため開発の出発点となりますプレビューはシミュレーターでも物理デバイスでも適切に機能しますアプリが最終的に出荷されるデバイスでプレビューしたい場合たとえばカメラやセンサーにアクセスしたいとします別のケースはデバイスに写真やファイルなどの実際のデータが大量に保存されている可能性があることですデバイスのデータを活用する方法の例をお見せします
作業中の別のビューにある iCloudの写真ライブラリから写真を選択できるボタンから次にレイアウトを選択して新しいコラージュを作成他のビューと同じ方法でこれをテストしたいのですが豊富な写真を選択できるデバイスを使用する必要がありますキャンバスの下部にあるプレビューデバイスピッカーでプレビューに使用するデバイスを変更しますいくつかオプションを見てみましょうほとんどの場合自動モードを使い続けられますがこれにより選択した実行先のデバイスファミリが追跡されますメニューの反対側には「その他」サブメニューがありますウィンドウに追加したシミュレーターデバイスがリストされるので必要なモデルを正確に選択できます機能だけでデバイスを選びたい場合もあるでしょうメニューの中央では共通の機能ごとにデバイスが提供されるのでどのモデルにTouch IDが搭載されているかを思い出す必要はありませんこのデバイスを傍らで使用してライブラリから大量の写真にアクセスできるようにしたい場合
デバイスピッカーにはMacに接続されているすべてのデバイスも含まれますこれらの接続されたデバイスの１つを選択すると Xcodeはシミュレーターを完全にバイパスしデバイス専用にビルドしてプレビュー実際のデバイス上でビューを実行できるようになりましたただし自分のデバイスだからといってこれまで説明してきたプレビューの機能を利用できないわけではありませんキャンバスのモードを引き続き使用できデバイス設定を行うこともできますたとえばダークモードではどのように見えるでしょうか
コードの更新はすぐにデバイスに表示されますこのビューにはナビタイトルが必要なのでコードにNavigationTitleを追加しタイトルをカスタマイズすればすぐにデバイス上でレビューできます
速いですね！これで機器上の画像全部と写真ライブラリの統合をテストする準備ができました「Photosから追加」をタップし写真を選択してかわいいリスですね「追加」をタップしますビューの機能は素晴らしい写真がレイアウトピッカーに表示されるのでレイアウトをすぐにテストできますいいですね Xcodeで編集してビューが反映される瞬間がたまらない以上がプロジェクトでプレビューを使う３つのコツでしたまとめますプレビューAPIを利用するとアプリ全体でUIプレビューを柔軟に定義でき全プラットフォームに対応 SwiftUIとUIKitにAppKit 複数の種類のウィジェットプレビューも柔軟なので必要に応じてプレビューを正確に構成できますサンプルデータとアセットを渡しコードで環境をセットアップし Xcodeの機能を利用してさまざまなデバイス設定をテストできますまたプレビューによりさまざまなデバイスで柔軟にプレビューできるようになりキャンバス内で直接シミュレーターを使用してもデバイスを使用して再現度合いが高いデータや写真へのアクセスが可能ですどのデバイスを選択してもプレビューのすべての機能を利用できます最後にアプリ一部をライブラリにモジュール化すると Xcodeでスキームを作成してビルド時間を短縮して作業に集中することが可能ですプレビューは創造性を発揮するのに最適ですありがとうございます

1:30 - Basic preview
```
#Preview {
    MyView()
}
```

5:05 - Previewing a SwiftUI view in a list

#Preview {
    List {
        CollageView(layout: .twoByTwoGrid)
    }
    .environment(CollageLayoutStore.sample)
}

5:37 - Previews can have a name and configuration traits

#Preview(“2x2 Grid”, traits: .landscapeLeft) {
    List {
        CollageView(layout: .twoByTwoGrid)
    }
    .environment(CollageLayoutStore.sample)
}

5:58 - Previewing UIKit view controllers and views

#Preview {
    var controller = SavedCollagesController()
    controller.dataSource = CollagesDataStore.sample
    controller.layoutMode = .grid
    return controller
}

#Preview(“Filter View”) {
    var view = CollageFilterDisplayView()
    view.filter = .bloom(amount: 15.0)
    view.imageData = …
    return view
}

7:08 - Xcode can help suggest a preview
```
#Preview {
    FilterEditor()
}
```

11:30 - Setting a UIKit preview to start in landscape

#Preview("All Filters", traits: .landscapeLeft) {
    let viewController = FilterRenderingViewController()
    if let image = UIImage(named: "sample-001")?.cgImage {
        viewController.imageData = image
    }
    viewController.filter = Filter(
        bloomAmount: 1.0,
        vignetteAmount: 1.0,
        saturationAmount: 0.5
    )
    return viewController
}

12:20 - Previewing a small widget with a timeline provider

#Preview(as: .systemSmall) {
    FrameWidget()
} timelineProvider: {
    RandomCollageProvider()
}

25:07 - Updating the navigation title while previewing on device
```
.navigationTitle(“Add Collage”)
```

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

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

関連する章

リソース

関連ビデオ

WWDC23