Swift UI インターフェイスの作成
ユーザーインターフェイスのプレビューの表示
ソースエディタで編集する SwiftUI コードのインタラクティブなプレビューを表示できます。
Xcode は、編集時にコードをビルドして実行し、結果をキャンバスに表示します。Xcode は、ソースエディターに入力したコードを保持し、キャンバスのユーザーインターフェイスレイアウトを同期させます。ライブラリからキャンバスに ユーザーインターフェイス要素 を追加すると、Xcode は対応するコードをソースファイルに追加します。キャンバス上の要素を選択すると、対応するコードがソースファイルで選択されます。Xcode は、インスペクターで変更した要素のプロパティのコードをソースファイルに追加します。
SwiftUI の使用を開始するには、Xcode プロジェクトを作成する ときにユーザーインターフェイスとして SwiftUI を選択するか、既存のプロジェクトに SwiftUI を使用するファイルを追加 します。
- [ファイル(File)] >[新規(New)] > [ファイル(File)] を選択します。
- 表示されるシートで、プラットフォームを選択し、[ユーザーインターフェイス(User Interface)] の下で [SwiftUI ビュー(View)] を選択して、[次へ(Next)] をクリックします。
- 次のシートで、構造体の名前を入力し、[作成(Create)] をクリックします。
必要に応じて、ポップアップメニューからグループを選択し、代替ターゲットを選択します。
キャンバスがソースエディタの右側に自動的に表示されます。
- プロジェクトナビゲータ で、SwiftUI を使用するファイルを選択し、[エディタ(Editor)] > [キャンバス(Canvas)] を選択します。
または、ジャンプバーの右側にある [エディタオプション(Editor Option)] ポップアップメニューから [キャンバス(Canvas)] を選択します。
- キャンバスの右上隅にある [再開(Resume)] ボタンをクリックして、プレビューを開始します。
プレビューから、キャンバスで直接シミュレートされたデバイス上でアプリを実行する ライブプレビュー、またはデバッグセッションを含む デバッグプレビュー に切り替えることができます。macOS アプリの場合、アプリはキャンバス内ではなくデスクトップで実行されます。最初に プレビューを表示し、次にキャンバスの右下隅にあるコントロールを使用してモードを切り替えます。
- アプリを実行するには、キャンバスの [ライブプレビュー(Live Preview)] ボタンをクリックします。
iOS、tvOS、watchOS アプリは、キャンバス内のシミュレートされたデバイスで実行されます。macOS アプリはデスクトップで実行されます。ウィンドウが隠されている場合は、キャンバス内の [前に移動(Bring Forward)] ボタンをクリックします。
- アプリをデバッグセッションで実行するには、キャンバスの [ライブプレビュー(Live Preview)] ボタンを Control クリックし、ポップアップメニューから [デバッグプレビュー(Debug Preview)] を選択します。
アプリが起動すると、デバッグエリア でデバッグセッションが開きます。
- ライブプレビューまたはデバッグプレビューを停止するには、キャンバスの [ライブプレビュー(Live Preview)] ボタンをクリックします。
Xcode はプレビューモードに戻ります。
シミュレーターで iOS、tvOS、または watchOS アプリを実行するには、シミュレートされたデバイス (iOS、tvOS、watchOS) でアプリを実行する に進みます。
iOS、tvOS、または watchOS アプリの場合、プレビューからデバイス上でアプリを起動できますが、起動する前にアプリにコード署名しなければなりません。
始める前に、Apple ID アカウントを追加 して ターゲットをチームに割り当て、プレビューを表示 します。
- デバイスを Mac に接続します。
iOS アプリに依存する watchOS アプリの場合、Apple Watch とペアリングされている iPhone を接続します。
- キャンバスで [デバイスでプレビュー(Preview on Device)] ボタン ([ライブプレビュー(Live Preview)] ボタンの下)をクリックします。
アプリの実行に失敗した場合は、キャンバスの上にあるエラーメッセージを読み、[診断Diagnostics] をクリックして詳細を確認してください。